svelora 2.1.0

package/dist/Pagination/Pagination.svelte

@@ -0,0 +1,253 @@
+<script lang="ts" module>
+    import type { PaginationProps } from './pagination.types.js'
+
+    export type Props = PaginationProps
+</script>
+
+<script lang="ts">
+    import { Pagination } from 'bits-ui'
+    import { untrack } from 'svelte'
+    import ButtonComponent from '../Button/Button.svelte'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import {
+        activeVariantColorClasses, 
+        paginationDefaults,
+        paginationVariants
+    } from './pagination.variants.js'
+
+    const config = getComponentConfig('pagination', paginationDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        page = $bindable(),
+        defaultPage = 1,
+        total = 0,
+        itemsPerPage = 10,
+        siblingCount = 1,
+        showEdges = false,
+        showControls = true,
+        disabled = false,
+        onPageChange,
+        size = config.defaultVariants.size ?? 'md',
+        variant = config.defaultVariants.variant ?? 'ghost',
+        color = config.defaultVariants.color ?? 'surface',
+        activeColor = config.defaultVariants.activeColor ?? 'primary',
+        activeVariant = config.defaultVariants.activeVariant ?? 'solid',
+        firstIcon = icons.chevronsLeft,
+        prevIcon = icons.chevronLeft,
+        nextIcon = icons.chevronRight,
+        lastIcon = icons.chevronsRight,
+        ellipsisIcon = icons.ellipsis,
+        ui,
+        class: className,
+        firstSlot,
+        prevSlot,
+        nextSlot,
+        lastSlot,
+        ellipsisSlot,
+        itemSlot,
+        ...restProps
+    }: Props = $props()
+
+    if (page === undefined) {
+        page = untrack(() => defaultPage)
+    }
+
+    const totalPages = $derived(Math.max(1, Math.ceil(total / itemsPerPage)))
+    const isFirstPage = $derived(page === 1)
+    const isLastPage = $derived(page === totalPages)
+    const prevDisabled = $derived(disabled || isFirstPage)
+    const nextDisabled = $derived(disabled || isLastPage)
+
+    const variantSlots = $derived(paginationVariants({ size, disabled }))
+    const activeCls = $derived(
+        activeVariantColorClasses[activeVariant]?.[activeColor] ??
+            activeVariantColorClasses.solid.primary
+    )
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className] }),
+        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+        item: variantSlots.item({ class: [config.slots.item, activeCls, ui?.item] }),
+        ellipsis: variantSlots.ellipsis({ class: [config.slots.ellipsis, ui?.ellipsis] }),
+        ellipsisIcon: variantSlots.ellipsisIcon({
+            class: [config.slots.ellipsisIcon, ui?.ellipsisIcon]
+        }),
+        first: variantSlots.first({ class: [config.slots.first, ui?.first] }),
+        prev: variantSlots.prev({ class: [config.slots.prev, ui?.prev] }),
+        next: variantSlots.next({ class: [config.slots.next, ui?.next] }),
+        last: variantSlots.last({ class: [config.slots.last, ui?.last] })
+    })
+
+    function handlePageChange(newPage: number) {
+        page = newPage
+        onPageChange?.(newPage)
+    }
+
+    function goToFirst() {
+        if (!isFirstPage) handlePageChange(1)
+    }
+
+    function goToLast() {
+        if (!isLastPage) handlePageChange(totalPages)
+    }
+</script>
+
+<Pagination.Root
+    {...restProps}
+    bind:ref
+    count={total}
+    perPage={itemsPerPage}
+    {siblingCount}
+    {page}
+    onPageChange={handlePageChange}
+    class={classes.root}
+>
+    {#snippet children({ pages })}
+        <div class={classes.list}>
+            {#if showEdges}
+                {#if firstSlot}
+                    <ButtonComponent
+                        {variant}
+                        {color}
+                        square
+                        {size}
+                        class={classes.first}
+                        disabled={prevDisabled}
+                        aria-label="First page"
+                        onclick={goToFirst}
+                    >
+                        {@render firstSlot({ page: page!, disabled: prevDisabled })}
+                    </ButtonComponent>
+                {:else}
+                    <ButtonComponent
+                        {variant}
+                        {color}
+                        square
+                        {size}
+                        icon={firstIcon}
+                        class={classes.first}
+                        disabled={prevDisabled}
+                        aria-label="First page"
+                        onclick={goToFirst}
+                    />
+                {/if}
+            {/if}
+
+            {#if showControls}
+                <Pagination.PrevButton disabled={prevDisabled}>
+                    {#snippet child({ props })}
+                        {#if prevSlot}
+                            <ButtonComponent
+                                {...props}
+                                {variant}
+                                {color}
+                                square
+                                {size}
+                                class={classes.prev}
+                                aria-label="Previous page"
+                            >
+                                {@render prevSlot({ page: page!, disabled: prevDisabled })}
+                            </ButtonComponent>
+                        {:else}
+                            <ButtonComponent
+                                {...props}
+                                {variant}
+                                {color}
+                                square
+                                {size}
+                                icon={prevIcon}
+                                class={classes.prev}
+                                aria-label="Previous page"
+                            />
+                        {/if}
+                    {/snippet}
+                </Pagination.PrevButton>
+            {/if}
+
+            {#each pages as pageItem (pageItem.key)}
+                {#if pageItem.type === 'ellipsis'}
+                    <span class={classes.ellipsis}>
+                        {#if ellipsisSlot}
+                            {@render ellipsisSlot()}
+                        {:else}
+                            <Icon name={ellipsisIcon} class={classes.ellipsisIcon} />
+                        {/if}
+                    </span>
+                {:else}
+                    <Pagination.Page page={pageItem} class={classes.item} {disabled}>
+                        {#if itemSlot}
+                            {@render itemSlot({
+                                page: pageItem.value,
+                                selected: page === pageItem.value
+                            })}
+                        {:else}
+                            {pageItem.value}
+                        {/if}
+                    </Pagination.Page>
+                {/if}
+            {/each}
+
+            {#if showControls}
+                <Pagination.NextButton disabled={nextDisabled}>
+                    {#snippet child({ props })}
+                        {#if nextSlot}
+                            <ButtonComponent
+                                {...props}
+                                {variant}
+                                {color}
+                                square
+                                {size}
+                                class={classes.next}
+                                aria-label="Next page"
+                            >
+                                {@render nextSlot({ page: page!, disabled: nextDisabled })}
+                            </ButtonComponent>
+                        {:else}
+                            <ButtonComponent
+                                {...props}
+                                {variant}
+                                {color}
+                                square
+                                {size}
+                                icon={nextIcon}
+                                class={classes.next}
+                                aria-label="Next page"
+                            />
+                        {/if}
+                    {/snippet}
+                </Pagination.NextButton>
+            {/if}
+
+            {#if showEdges}
+                {#if lastSlot}
+                    <ButtonComponent
+                        {variant}
+                        {color}
+                        square
+                        {size}
+                        class={classes.last}
+                        disabled={nextDisabled}
+                        aria-label="Last page"
+                        onclick={goToLast}
+                    >
+                        {@render lastSlot({ page: page!, disabled: nextDisabled })}
+                    </ButtonComponent>
+                {:else}
+                    <ButtonComponent
+                        {variant}
+                        {color}
+                        square
+                        {size}
+                        icon={lastIcon}
+                        class={classes.last}
+                        disabled={nextDisabled}
+                        aria-label="Last page"
+                        onclick={goToLast}
+                    />
+                {/if}
+            {/if}
+        </div>
+    {/snippet}
+</Pagination.Root>

package/dist/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PaginationProps } from './pagination.types.js';
+export type Props = PaginationProps;
+import { Pagination } from 'bits-ui';
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "ref" | "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination.svelte';
+export type { PaginationItemSlotProps, PaginationNavSlotProps, PaginationProps } from './pagination.types.js';

package/dist/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.svelte';

package/dist/Pagination/pagination.types.d.ts

@@ -0,0 +1,191 @@
+import type { PaginationRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ButtonProps } from '../Button/button.types.js';
+import type { PaginationSlots, PaginationVariantProps } from './pagination.variants.js';
+/**
+ * Props passed to navigation button snippet slots (first, prev, next, last).
+ */
+export interface PaginationNavSlotProps {
+    /** The current active page number */
+    page: number;
+    /** Whether this navigation button is disabled */
+    disabled: boolean;
+}
+/**
+ * Props passed to the page item snippet slot.
+ */
+export interface PaginationItemSlotProps {
+    /** The page number this item represents */
+    page: number;
+    /** Whether this page is currently selected */
+    selected: boolean;
+}
+/**
+ * Props for the Pagination component.
+ *
+ * Wraps bits-ui's Pagination primitives with enhanced styling,
+ * data-driven rendering, and configurable navigation controls.
+ *
+ * @example
+ * ```svelte
+ * <Pagination
+ *   total={100}
+ *   itemsPerPage={10}
+ *   bind:page={currentPage}
+ *   activeColor="primary"
+ * />
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/pagination
+ */
+export interface PaginationProps extends Pick<PaginationRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The currently active page number.
+     * Use `bind:page` for two-way binding.
+     * @default 1
+     */
+    page?: number;
+    /**
+     * The default active page when uncontrolled.
+     * Used as the initial value when `page` is not provided.
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Total number of items to paginate.
+     * @default 0
+     */
+    total?: number;
+    /**
+     * Number of items displayed per page.
+     * @default 10
+     */
+    itemsPerPage?: number;
+    /**
+     * Number of page buttons shown adjacent to the current page on each side.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Whether to show first/last page navigation buttons.
+     * @default false
+     */
+    showEdges?: boolean;
+    /**
+     * Whether to show previous/next page navigation buttons.
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Whether all pagination controls are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the active page changes.
+     * Receives the new page number.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Size variant controlling button dimensions, text size, and icon sizes.
+     * @default 'md'
+     */
+    size?: NonNullable<PaginationVariantProps['size']>;
+    /**
+     * Button variant for navigation buttons (first, prev, next, last).
+     * @default 'ghost'
+     */
+    variant?: NonNullable<ButtonProps['variant']>;
+    /**
+     * Button color for navigation buttons (first, prev, next, last).
+     * @default 'surface'
+     */
+    color?: NonNullable<ButtonProps['color']>;
+    /**
+     * Color applied to the currently selected page button.
+     * @default 'primary'
+     */
+    activeColor?: NonNullable<ButtonProps['color']>;
+    /**
+     * Variant style applied to the currently selected page button.
+     * @default 'solid'
+     */
+    activeVariant?: NonNullable<ButtonProps['variant']>;
+    /**
+     * Icon for the "first page" button.
+     * @default 'lucide:chevrons-left'
+     */
+    firstIcon?: string;
+    /**
+     * Icon for the "previous page" button.
+     * @default 'lucide:chevron-left'
+     */
+    prevIcon?: string;
+    /**
+     * Icon for the "next page" button.
+     * @default 'lucide:chevron-right'
+     */
+    nextIcon?: string;
+    /**
+     * Icon for the "last page" button.
+     * @default 'lucide:chevrons-right'
+     */
+    lastIcon?: string;
+    /**
+     * Icon displayed in the ellipsis placeholder.
+     * @default 'lucide:ellipsis'
+     */
+    ellipsisIcon?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for pagination component slots.
+     *
+     * @example
+     * ```ts
+     * ui={{
+     *   list: 'gap-2',
+     *   item: 'rounded-full',
+     * }}
+     * ```
+     */
+    ui?: Partial<Record<PaginationSlots, ClassNameValue>>;
+    /**
+     * Custom snippet for the first page button.
+     * @param props - Contains `{ page, disabled }`
+     */
+    firstSlot?: Snippet<[PaginationNavSlotProps]>;
+    /**
+     * Custom snippet for the previous page button.
+     * @param props - Contains `{ page, disabled }`
+     */
+    prevSlot?: Snippet<[PaginationNavSlotProps]>;
+    /**
+     * Custom snippet for the next page button.
+     * @param props - Contains `{ page, disabled }`
+     */
+    nextSlot?: Snippet<[PaginationNavSlotProps]>;
+    /**
+     * Custom snippet for the last page button.
+     * @param props - Contains `{ page, disabled }`
+     */
+    lastSlot?: Snippet<[PaginationNavSlotProps]>;
+    /**
+     * Custom snippet for the ellipsis indicator.
+     */
+    ellipsisSlot?: Snippet;
+    /**
+     * Custom snippet for individual page buttons.
+     * @param props - Contains `{ page, selected }`
+     */
+    itemSlot?: Snippet<[PaginationItemSlotProps]>;
+}

package/dist/Pagination/pagination.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Pagination/pagination.variants.d.ts

@@ -0,0 +1,160 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const activeVariantColorClasses: Record<string, Record<string, string>>;
+export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        sm: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        md: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        lg: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        xl: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string[];
+    ellipsis: string;
+    first: string;
+    prev: string;
+    next: string;
+    last: string;
+    ellipsisIcon: string;
+}, undefined, {
+    size: {
+        xs: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        sm: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        md: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        lg: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        xl: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string[];
+    ellipsis: string;
+    first: string;
+    prev: string;
+    next: string;
+    last: string;
+    ellipsisIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        sm: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        md: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        lg: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+        xl: {
+            list: string;
+            item: string;
+            ellipsis: string;
+            ellipsisIcon: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string[];
+    ellipsis: string;
+    first: string;
+    prev: string;
+    next: string;
+    last: string;
+    ellipsisIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PaginationVariantProps = VariantProps<typeof paginationVariants>;
+export type PaginationSlots = keyof ReturnType<typeof paginationVariants>;
+export declare const paginationDefaults: {
+    defaultVariants: {
+        variant: "ghost";
+        color: "surface";
+        activeColor: "primary";
+        activeVariant: "solid";
+        disabled?: boolean | undefined;
+        size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+    };
+    slots: Partial<Record<PaginationSlots, string>>;
+};