Add pagination component

.changeset/nasty-books-return.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added pagination component

package.json

@@ -12,6 +12,7 @@
     "formsnap": "^1.0.0",
     "lucide-svelte": "^0.368.0",
     "mode-watcher": "^0.3.0",
+    "svelte-legos": "^0.2.2",
     "svelte-sonner": "^0.3.22",
     "sveltekit-superforms": "^2.12.5",
     "tailwind-merge": "^2.2.2",
@@ -94,6 +95,10 @@
       "types": "./dist/components/label/index.d.ts",
       "svelte": "./dist/components/label/index.js"
     },
+    "./components/pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "svelte": "./dist/components/pagination/index.js"
+    },
     "./components/popover": {
       "types": "./dist/components/popover/index.d.ts",
       "svelte": "./dist/components/popover/index.js"

src/lib/components/alert-dialog/AlertDialogAction.svelte

@@ -89,6 +89,8 @@
     variant,
   })}"
   el="{el}"
+  data-size="{size}"
+  data-variant="{variant}"
   let:builder
   on:click
   on:keydown

src/lib/components/alert-dialog/AlertDialogCancel.svelte

@@ -92,6 +92,8 @@
     size,
     variant,
   })}"
+  data-size="{size}"
+  data-variant="{variant}"
   el="{el}"
   let:builder
   on:click

src/lib/components/alert-dialog/AlertDialogFooter.svelte

@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>

src/lib/components/alert-dialog/AlertDialogHeader.svelte

@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>

src/lib/components/alert-dialog/AlertDialogPortal.svelte

@@ -22,7 +22,7 @@
    * The styles of the portal.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/alert-dialog/AlertDialogTrigger.svelte

@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/alert/AlertRoot.svelte

@@ -84,6 +84,7 @@
     variant,
   })}"
   role="alert"
+  data-variant="{variant}"
 >
   <slot />
 </div>

src/lib/components/breadcrumb/BreadcrumbList.svelte

@@ -74,6 +74,7 @@
   type $$Slots = Slots;
 
   export let asChild: Props['asChild'] = undefined;
+  export let breakpoint: Props['breakpoint'] = undefined;
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
@@ -88,8 +89,10 @@
   <ol
     {...attributes}
     class="{styles({
+      breakpoint,
       class: attributes.class,
     })}"
+    data-breakpoint="{breakpoint}"
     bind:this="{el}"
   >
     <slot />

src/lib/components/breadcrumb/BreadcrumbRoot.svelte

@@ -31,7 +31,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/button/Button.svelte

@@ -112,6 +112,8 @@
     size,
     variant,
   })}"
+  data-size="{size}"
+  data-variant="{variant}"
   on:click
   on:keydown
 >

src/lib/components/calendar/CalendarGridBody.svelte

@@ -22,7 +22,7 @@
    * The styles of the grid body.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/calendar/CalendarGridHead.svelte

@@ -22,7 +22,7 @@
    * The styles of the grid head.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/calendar/CalendarMonths.svelte

@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>

src/lib/components/collapsible/CollapsibleContent.svelte

@@ -34,7 +34,7 @@
    * The styles of the collapsible.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/collapsible/CollapsibleRoot.svelte

@@ -22,7 +22,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/collapsible/CollapsibleTrigger.svelte

@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/container/Container.svelte

@@ -69,6 +69,8 @@
     xAxis,
     yAxis,
   })}"
+  data-x-axis="{xAxis}"
+  data-y-axis="{yAxis}"
 >
   <slot />
 </div>

src/lib/components/form/FormRoot.svelte

@@ -35,7 +35,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 

src/lib/components/input/Input.svelte

@@ -95,6 +95,7 @@
     class="{styles({
       class: attributes.class,
     })}"
+    data-variant="{variant}"
     bind:value="{value}"
     on:blur
     on:change
@@ -118,6 +119,7 @@
     class="{styles({
       class: attributes.class,
     })}"
+    data-variant="{variant}"
     bind:value="{value}"
     on:blur
     on:change

src/lib/components/pagination/PaginationContent.svelte

@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { Events, Slot } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['ul'];
+  /**
+   * The props of the content.
+   */
+  export type Props = Record<never, never>;
+  /**
+   * The slots of the content.
+   */
+  export type Slots = {
+    default: Slot;
+  };
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: ['flex flex-row items-center gap-1'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ul
+  {...attributes}
+  class="{styles({
+    class: attributes.class,
+  })}"
+>
+  <slot />
+</ul>

src/lib/components/pagination/PaginationEllipsis.svelte

@@ -0,0 +1,54 @@
+<script context="module" lang="ts">
+  import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { Events, Slot } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the ellipsis.
+   */
+  export type Attributes = SvelteHTMLElements['span'];
+  /**
+   * The props of the ellipsis.
+   */
+  export type Props = Record<never, never>;
+  /**
+   * The slots of the ellipsis.
+   */
+  export type Slots = {
+    default: Slot;
+  };
+
+  /**
+   * The styles of the ellipsis.
+   */
+  export const styles = tv({
+    base: ['flex h-9 w-9 items-center justify-center'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<span
+  {...attributes}
+  class="{styles({
+    class: attributes.class,
+  })}"
+  aria-hidden="true"
+>
+  <slot>
+    <Ellipsis class="h-4 w-4" />
+
+    <span class="sr-only">More pages</span>
+  </slot>
+</span>