Add sonner component and improve components typing

jeannemas · May 4, 2024 · be79515 · be79515
1 parent 887c221
commit be79515
Show file tree

Hide file tree

Showing 99 changed files with 798 additions and 210 deletions.
diff --git a/.changeset/forty-bikes-argue.md b/.changeset/forty-bikes-argue.md
@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added sonner component + improved components typing
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "clsx": "^2.1.0",
     "formsnap": "^1.0.0",
     "lucide-svelte": "^0.368.0",
+    "mode-watcher": "^0.3.0",
+    "svelte-sonner": "^0.3.22",
     "sveltekit-superforms": "^2.12.5",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1",
@@ -104,6 +106,10 @@
       "types": "./dist/components/separator/index.d.ts",
       "svelte": "./dist/components/separator/index.js"
     },
+    "./components/sonner": {
+      "types": "./dist/components/sonner/index.d.ts",
+      "svelte": "./dist/components/sonner/index.js"
+    },
     "./components/switch": {
       "types": "./dist/components/switch/index.d.ts",
       "svelte": "./dist/components/switch/index.js"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/alert-dialog/AlertDialogAction.svelte b/src/lib/components/alert-dialog/AlertDialogAction.svelte
@@ -4,7 +4,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   import { styles as buttonStyles } from '$lib/components/button/index.js';
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the action.
@@ -65,7 +65,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = AlertDialogPrimitive.ActionEvents;
+  type $$Events = Events<AlertDialogPrimitive.ActionEvents>;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogCancel.svelte b/src/lib/components/alert-dialog/AlertDialogCancel.svelte
@@ -4,7 +4,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   import { styles as buttonStyles } from '$lib/components/button/index.js';
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the cancel.
@@ -69,7 +69,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = AlertDialogPrimitive.CancelEvents;
+  type $$Events = Events<AlertDialogPrimitive.CancelEvents>;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogContent.svelte b/src/lib/components/alert-dialog/AlertDialogContent.svelte
@@ -4,7 +4,7 @@
   import { tv } from 'tailwind-variants';
 
   import { flyAndScale } from '$lib/transition/flyAndScale.js';
-  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events, Transition } from '$lib/utils/types.js';
 
   import * as AlertDialog from './index.js';
 
@@ -50,11 +50,10 @@
   "
   lang="ts"
 >
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & TypedProps;
-  type $$Slots = TypedSlots;
+  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
   type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
-  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
 
   export let asChild: Props['asChild'] = undefined;
   export let el: Props['el'] = undefined;

diff --git a/src/lib/components/alert-dialog/AlertDialogDescription.svelte b/src/lib/components/alert-dialog/AlertDialogDescription.svelte
@@ -3,7 +3,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the description.
@@ -27,7 +27,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogFooter.svelte b/src/lib/components/alert-dialog/AlertDialogFooter.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv, type VariantProps } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the footer.
@@ -60,7 +60,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogHeader.svelte b/src/lib/components/alert-dialog/AlertDialogHeader.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv, type VariantProps } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the header.
@@ -60,7 +60,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogOverlay.svelte b/src/lib/components/alert-dialog/AlertDialogOverlay.svelte
@@ -4,7 +4,7 @@
   import { fade } from 'svelte/transition';
   import { tv } from 'tailwind-variants';
 
-  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events, Transition } from '$lib/utils/types.js';
 
   /**
    * The attributes of the overlay.
@@ -46,11 +46,10 @@
   "
   lang="ts"
 >
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & TypedProps;
-  type $$Slots = TypedSlots;
+  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
   type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
-  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
 
   export let asChild: Props['asChild'] = undefined;
   export let el: Props['el'] = undefined;

diff --git a/src/lib/components/alert-dialog/AlertDialogPortal.svelte b/src/lib/components/alert-dialog/AlertDialogPortal.svelte
@@ -3,7 +3,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the portal.
@@ -27,7 +27,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogRoot.svelte b/src/lib/components/alert-dialog/AlertDialogRoot.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the root.
@@ -18,7 +18,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert-dialog/AlertDialogTitle.svelte b/src/lib/components/alert-dialog/AlertDialogTitle.svelte
@@ -3,7 +3,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { ComponentSlots, HeadingLevel } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events, HeadingLevel } from '$lib/utils/types.js';
 
   /**
    * The attributes of the title.
@@ -28,7 +28,7 @@
 </script>
 
 <script generics="THeadingLevel extends HeadingLevel = 'h3'" lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = TypedAttributes & Props;
   type $$Slots = Slots;
   type TypedAttributes = Attributes<THeadingLevel>;

diff --git a/src/lib/components/alert-dialog/AlertDialogTrigger.svelte b/src/lib/components/alert-dialog/AlertDialogTrigger.svelte
@@ -3,7 +3,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { ComponentSlots } from '$lib/utils/types.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
 
   /**
    * The attributes of the trigger.
@@ -27,7 +27,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = AlertDialogPrimitive.TriggerEvents;
+  type $$Events = Events<AlertDialogPrimitive.TriggerEvents>;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert/AlertDescription.svelte b/src/lib/components/alert/AlertDescription.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the description.
@@ -28,7 +28,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert/AlertRoot.svelte b/src/lib/components/alert/AlertRoot.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv, type VariantProps } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the root.
@@ -65,7 +65,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/alert/AlertTitle.svelte b/src/lib/components/alert/AlertTitle.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { HeadingLevel, Slot } from '$lib/utils/types.js';
+  import type { Events, HeadingLevel, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the title.
@@ -34,7 +34,7 @@
 </script>
 
 <script generics="THeadingLevel extends HeadingLevel = 'h5'" lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = TypedAttributes & TypedProps;
   type $$Slots = Slots;
   type TypedAttributes = Attributes<THeadingLevel>;

diff --git a/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte b/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte
@@ -3,7 +3,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the ellipsis.
@@ -37,7 +37,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 

diff --git a/src/lib/components/breadcrumb/BreadcrumbItem.svelte b/src/lib/components/breadcrumb/BreadcrumbItem.svelte
@@ -2,7 +2,7 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { Slot } from '$lib/utils/types.js';
+  import type { Events, Slot } from '$lib/utils/types.js';
 
   /**
    * The attributes of the item.
@@ -36,7 +36,7 @@
 </script>
 
 <script lang="ts">
-  type $$Events = Record<never, never>;
+  type $$Events = Events;
   type $$Props = Attributes & Props;
   type $$Slots = Slots;