svelora 2.1.0

package/dist/Checkbox/checkbox.types.d.ts

@@ -0,0 +1,101 @@
+import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CheckboxSlots, CheckboxVariantProps } from './checkbox.variants.js';
+export type CheckboxProps = Pick<CheckboxPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The checked state of the checkbox. Supports two-way binding with `bind:checked`.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Callback when the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when the indeterminate state changes.
+     */
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+    /**
+     * Sets the color scheme for the checkbox.
+     * @default 'primary'
+     */
+    color?: NonNullable<CheckboxVariantProps['color']>;
+    /**
+     * Controls the dimensions of the checkbox.
+     * @default 'md'
+     */
+    size?: NonNullable<CheckboxVariantProps['size']>;
+    /**
+     * Controls the visual style of the checkbox.
+     * @default 'list'
+     */
+    variant?: NonNullable<CheckboxVariantProps['variant']>;
+    /**
+     * Controls the position of the checkbox indicator.
+     * @default 'start'
+     */
+    indicator?: NonNullable<CheckboxVariantProps['indicator']>;
+    /**
+     * Renders a loading spinner inside the checkbox.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Icon displayed when checked.
+     * @default Uses `icons.check` from app config
+     */
+    icon?: string;
+    /**
+     * Icon displayed when in indeterminate state.
+     * @default 'lucide:minus'
+     */
+    indeterminateIcon?: string;
+    /**
+     * Label text displayed next to the checkbox.
+     */
+    label?: string;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * The HTML id attribute for the checkbox.
+     */
+    id?: string;
+    /**
+     * Custom snippet for the label.
+     */
+    labelSlot?: Snippet<[{
+        label?: string;
+    }]>;
+    /**
+     * Custom snippet for the description.
+     */
+    descriptionSlot?: Snippet<[{
+        description?: string;
+    }]>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific checkbox slots.
+     */
+    ui?: Partial<Record<CheckboxSlots, ClassNameValue>>;
+};

package/dist/Checkbox/checkbox.types.js

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

package/dist/Checkbox/checkbox.variants.d.ts

@@ -0,0 +1,448 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    indicator: string;
+    icon: string;
+    wrapper: string;
+    label: string;
+    description: string;
+}, undefined, {
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    indicator: string;
+    icon: string;
+    wrapper: string;
+    label: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    variant: {
+        list: string;
+        card: {
+            root: string;
+        };
+    };
+    indicator: {
+        start: {
+            wrapper: string;
+        };
+        end: {
+            root: string;
+            wrapper: string;
+        };
+        hidden: {
+            container: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    indicator: string;
+    icon: string;
+    wrapper: string;
+    label: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;
+export type CheckboxSlots = keyof ReturnType<typeof checkboxVariants>;
+export declare const checkboxDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            sm: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            md: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            lg: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            xl: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+        };
+        variant: {
+            list: string;
+            card: {
+                root: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                root: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
+        loading: {
+            true: {
+                icon: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+                base: string;
+                label: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+        container: string;
+        indicator: string;
+        icon: string;
+        wrapper: string;
+        label: string;
+        description: string;
+    }, {
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            sm: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            md: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            lg: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+            xl: {
+                base: string;
+                container: string;
+                icon: string;
+                wrapper: string;
+            };
+        };
+        variant: {
+            list: string;
+            card: {
+                root: string;
+            };
+        };
+        indicator: {
+            start: {
+                wrapper: string;
+            };
+            end: {
+                root: string;
+                wrapper: string;
+            };
+            hidden: {
+                container: string;
+            };
+        };
+        loading: {
+            true: {
+                icon: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+                base: string;
+                label: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+        container: string;
+        indicator: string;
+        icon: string;
+        wrapper: string;
+        label: string;
+        description: string;
+    }>;
+    slots: Partial<Record<CheckboxSlots, string>>;
+};