sv5ui 1.3.0 → 1.4.0

package/README.md

@@ -129,17 +129,22 @@ pnpm add sv5ui
 
 ### Form
 
-| Component                            | Description                                                                                             |
-| :----------------------------------- | :------------------------------------------------------------------------------------------------------ |
-| [**Input**](src/lib/Input)           | Text input with 5 variants, icons, avatar, loading state, and FormField integration                     |
-| [**Textarea**](src/lib/Textarea)     | Multi-line text input with 5 variants, icons, autoresize with maxrows, and FormField integration        |
-| [**Select**](src/lib/Select)         | Dropdown select with 5 variants, icons, avatars, groups, descriptions, and FormField support            |
-| [**Switch**](src/lib/Switch)         | Toggle switch with 8 colors, 5 sizes, checked/unchecked icons, loading state, and FormField integration |
-| [**Checkbox**](src/lib/Checkbox)     | Checkbox with 8 colors, 5 sizes, indeterminate state, custom icons, and FormField integration           |
-| [**RadioGroup**](src/lib/RadioGroup) | Radio group for single-selection with items API, legend, orientation, and FormField integration         |
-| [**FormField**](src/lib/FormField)   | Form control wrapper providing label, description, hint, help, and error handling                       |
-| [**FieldGroup**](src/lib/FieldGroup) | Groups buttons and inputs with seamless borders and shared size/orientation context                     |
-| [**Calendar**](src/lib/Calendar)     | Date picker calendar with single, multiple, and range selection modes                                   |
+| Component                                  | Description                                                                                             |
+| :----------------------------------------- | :------------------------------------------------------------------------------------------------------ |
+| [**Input**](src/lib/Input)                 | Text input with 5 variants, icons, avatar, loading state, and FormField integration                     |
+| [**Textarea**](src/lib/Textarea)           | Multi-line text input with 5 variants, icons, autoresize with maxrows, and FormField integration        |
+| [**Select**](src/lib/Select)               | Dropdown select with 5 variants, icons, avatars, groups, descriptions, and FormField support            |
+| [**SelectMenu**](src/lib/SelectMenu)       | Searchable multi-select menu with chips, groups, and FormField integration                              |
+| [**Switch**](src/lib/Switch)               | Toggle switch with 8 colors, 5 sizes, checked/unchecked icons, loading state, and FormField integration |
+| [**Checkbox**](src/lib/Checkbox)           | Checkbox with 8 colors, 5 sizes, indeterminate state, custom icons, and FormField integration           |
+| [**CheckboxGroup**](src/lib/CheckboxGroup) | Grouped checkboxes with single/multiple selection, per-item disabled, and FormField integration         |
+| [**RadioGroup**](src/lib/RadioGroup)       | Radio group for single-selection with items API, legend, orientation, and FormField integration         |
+| [**Slider**](src/lib/Slider)               | Range slider with single/range values, step, orientation, tooltip labels, and FormField integration     |
+| [**PinInput**](src/lib/PinInput)           | PIN/OTP input with masking, numeric filtering, OTP autocomplete, and FormField integration              |
+| [**FileUpload**](src/lib/FileUpload)       | Drag-and-drop file upload with preview list, image thumbnails, accept filter, and multiple files        |
+| [**FormField**](src/lib/FormField)         | Form control wrapper providing label, description, hint, help, and error handling                       |
+| [**FieldGroup**](src/lib/FieldGroup)       | Groups buttons and inputs with seamless borders and shared size/orientation context                     |
+| [**Calendar**](src/lib/Calendar)           | Date picker calendar with single, multiple, and range selection modes                                   |
 
 ## Theming
 

package/dist/Collapsible/Collapsible.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+    import type { CollapsibleProps } from './collapsible.types.js'
+
+    export type Props = CollapsibleProps
+</script>
+
+<script lang="ts">
+    import { Collapsible } from 'bits-ui'
+    import { collapsibleVariants, collapsibleDefaults } from './collapsible.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('collapsible', collapsibleDefaults)
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(false),
+        onOpenChange,
+        onOpenChangeComplete,
+        disabled = false,
+        trigger: triggerSlot,
+        content: contentSlot,
+        children,
+        ui,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const slots = $derived(collapsibleVariants({ disabled }))
+    const classes = $derived.by(() => {
+        const u = ui ?? {}
+        return {
+            root: slots.root({ class: [config.slots.root, className, u.root] }),
+            content: slots.content({ class: [config.slots.content, u.content] })
+        }
+    })
+
+    function handleOpenChange(value: boolean) {
+        open = value
+        onOpenChange?.(value)
+    }
+</script>
+
+<Collapsible.Root
+    {...restProps}
+    bind:ref
+    {open}
+    onOpenChange={handleOpenChange}
+    {onOpenChangeComplete}
+    {disabled}
+    class={classes.root}
+>
+    {#if triggerSlot}
+        <Collapsible.Trigger>
+            {#snippet child({ props })}
+                {@render triggerSlot({ open, props })}
+            {/snippet}
+        </Collapsible.Trigger>
+    {/if}
+
+    {#if contentSlot}
+        <Collapsible.Content class={classes.content}>
+            {@render contentSlot()}
+        </Collapsible.Content>
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {/if}
+</Collapsible.Root>

package/dist/Collapsible/Collapsible.svelte.d.ts

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

package/dist/Collapsible/CollapsibleTestWrapper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Collapsible from './Collapsible.svelte'
+    import type { CollapsibleProps } from './collapsible.types.js'
+
+    let { ...props }: Omit<CollapsibleProps, 'trigger' | 'content' | 'children'> = $props()
+</script>
+
+<Collapsible {...props}>
+    {#snippet trigger({ open, props: triggerProps })}
+        <button type="button" {...triggerProps}>
+            {open ? 'Close' : 'Open'}
+        </button>
+    {/snippet}
+    {#snippet content()}
+        <div data-testid="collapsible-body">Collapsible content</div>
+    {/snippet}
+</Collapsible>

package/dist/Collapsible/CollapsibleTestWrapper.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleProps } from './collapsible.types.js';
+declare const CollapsibleTestWrapper: import("svelte").Component<Omit<CollapsibleProps, "children" | "content" | "trigger">, {}, "">;
+type CollapsibleTestWrapper = ReturnType<typeof CollapsibleTestWrapper>;
+export default CollapsibleTestWrapper;

package/dist/Collapsible/collapsible.types.d.ts

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CollapsibleRootPropsWithoutHTML } from 'bits-ui';
+import type { CollapsibleSlots } from './collapsible.variants.js';
+/**
+ * Props for the Collapsible component.
+ *
+ * Wraps bits-ui's Collapsible primitives with a themed, slot-based API.
+ *
+ * @example
+ * ```svelte
+ * <Collapsible>
+ *   {#snippet trigger({ open })}
+ *     <Button>{open ? 'Hide' : 'Show'}</Button>
+ *   {/snippet}
+ *   {#snippet content()}
+ *     <p>Collapsible content here</p>
+ *   {/snippet}
+ * </Collapsible>
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/collapsible
+ */
+export interface CollapsibleProps extends Pick<CollapsibleRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete' | 'disabled'> {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Override classes for collapsible component slots.
+     *
+     * @example
+     * ```ts
+     * ui={{ root: 'border rounded-lg', content: 'p-4' }}
+     * ```
+     */
+    ui?: Partial<Record<CollapsibleSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Snippet for the trigger element that toggles the collapsible.
+     * Receives `{ open }` to reflect the current state.
+     *
+     * @example
+     * ```svelte
+     * {#snippet trigger({ open })}
+     *   <Button variant="ghost">
+     *     {open ? 'Collapse' : 'Expand'}
+     *   </Button>
+     * {/snippet}
+     * ```
+     */
+    trigger?: Snippet<[{
+        open: boolean;
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * Snippet for the collapsible content area.
+     *
+     * @example
+     * ```svelte
+     * {#snippet content()}
+     *   <p>Hidden content revealed on expand.</p>
+     * {/snippet}
+     * ```
+     */
+    content?: Snippet;
+    /**
+     * Default slot children. If provided, rendered inside the root
+     * for full custom layouts using bits-ui primitives directly.
+     */
+    children?: Snippet;
+}

package/dist/Collapsible/collapsible.types.js

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

package/dist/Collapsible/collapsible.variants.d.ts

@@ -0,0 +1,53 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const collapsibleVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, {
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CollapsibleVariantProps = VariantProps<typeof collapsibleVariants>;
+export type CollapsibleSlots = keyof ReturnType<typeof collapsibleVariants>;
+export declare const collapsibleDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        content: string;
+    }, {
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        content: string;
+    }>;
+    slots: Partial<Record<CollapsibleSlots, string>>;
+};

package/dist/Collapsible/collapsible.variants.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+export const collapsibleVariants = tv({
+    slots: {
+        root: '',
+        content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
+    },
+    variants: {
+        disabled: {
+            true: {
+                root: 'opacity-75 cursor-not-allowed'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+export const collapsibleDefaults = {
+    defaultVariants: collapsibleVariants.defaultVariants,
+    slots: {}
+};

package/dist/Collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Collapsible } from './Collapsible.svelte';
+export type { CollapsibleProps } from './collapsible.types.js';

package/dist/Collapsible/index.js

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

package/dist/Command/Command.svelte

@@ -0,0 +1,183 @@
+<script lang="ts" module>
+    import type { CommandProps } from './command.types.js'
+
+    export type Props = CommandProps
+</script>
+
+<script lang="ts">
+    import { Command } from 'bits-ui'
+    import { commandVariants, commandDefaults } from './command.variants.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+
+    const config = getComponentConfig('command', commandDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(''),
+        search = $bindable(''),
+        onValueChange,
+        groups = [],
+        placeholder = 'Type a command or search...',
+        loading = false,
+        emptyText = 'No results found.',
+        icon,
+        label,
+        filter,
+        shouldFilter = true,
+        loop = false,
+        vimBindings = true,
+        size = config.defaultVariants.size,
+        item: itemSlot,
+        itemLeading: itemLeadingSlot,
+        itemLabel: itemLabelSlot,
+        itemTrailing: itemTrailingSlot,
+        empty: emptySlot,
+        footer: footerSlot,
+        ui,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const slots = $derived(commandVariants({ size }))
+    const classes = $derived.by(() => {
+        const u = ui ?? {}
+        return {
+            root: slots.root({ class: [config.slots.root, className, u.root] }),
+            inputWrapper: slots.inputWrapper({
+                class: [config.slots.inputWrapper, u.inputWrapper]
+            }),
+            inputIcon: slots.inputIcon({ class: [config.slots.inputIcon, u.inputIcon] }),
+            input: slots.input({ class: [config.slots.input, u.input] }),
+            list: slots.list({ class: [config.slots.list, u.list] }),
+            empty: slots.empty({ class: [config.slots.empty, u.empty] }),
+            loading: slots.loading({ class: [config.slots.loading, u.loading] }),
+            group: slots.group({ class: [config.slots.group, u.group] }),
+            groupHeading: slots.groupHeading({
+                class: [config.slots.groupHeading, u.groupHeading]
+            }),
+            groupItems: slots.groupItems({ class: [config.slots.groupItems, u.groupItems] }),
+            separator: slots.separator({ class: [config.slots.separator, u.separator] }),
+            item: slots.item({ class: [config.slots.item, u.item] }),
+            itemIcon: slots.itemIcon({ class: [config.slots.itemIcon, u.itemIcon] }),
+            itemWrapper: slots.itemWrapper({ class: [config.slots.itemWrapper, u.itemWrapper] }),
+            itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, u.itemLabel] }),
+            itemDescription: slots.itemDescription({
+                class: [config.slots.itemDescription, u.itemDescription]
+            }),
+            itemTrailing: slots.itemTrailing({
+                class: [config.slots.itemTrailing, u.itemTrailing]
+            }),
+            footer: slots.footer({ class: [config.slots.footer, u.footer] })
+        }
+    })
+
+    function handleValueChange(v: string) {
+        value = v
+        onValueChange?.(v)
+    }
+</script>
+
+<Command.Root
+    {...restProps}
+    bind:ref
+    {value}
+    {label}
+    onValueChange={handleValueChange}
+    {filter}
+    {shouldFilter}
+    {loop}
+    {vimBindings}
+    class={classes.root}
+>
+    <div class={classes.inputWrapper}>
+        <Icon name={icon ?? icons.search ?? 'lucide:search'} class={classes.inputIcon} />
+        <Command.Input bind:value={search} {placeholder} class={classes.input} />
+    </div>
+
+    <Command.List class={classes.list}>
+        {#if loading}
+            <Command.Loading class={classes.loading}>
+                <Icon name={icons.loading} class="mx-auto size-5 animate-spin" />
+            </Command.Loading>
+        {:else}
+            <Command.Empty class={classes.empty}>
+                {#if emptySlot}
+                    {@render emptySlot({ search })}
+                {:else}
+                    {emptyText}
+                {/if}
+            </Command.Empty>
+
+            {#each groups as group, gi (group.id)}
+                {#if gi > 0}
+                    <Command.Separator class={classes.separator} />
+                {/if}
+
+                <Command.Group value={group.id} class={classes.group}>
+                    {#if group.label}
+                        <Command.GroupHeading class={classes.groupHeading}>
+                            {group.label}
+                        </Command.GroupHeading>
+                    {/if}
+
+                    <Command.GroupItems class={classes.groupItems}>
+                        {#each group.items as cmdItem, i (cmdItem.value)}
+                            {#if itemSlot}
+                                {@render itemSlot({ item: cmdItem, index: i })}
+                            {:else}
+                                <Command.Item
+                                    value={cmdItem.value}
+                                    keywords={cmdItem.keywords}
+                                    disabled={cmdItem.disabled}
+                                    onSelect={cmdItem.onSelect}
+                                    class={cmdItem.class
+                                        ? slots.item({
+                                              class: [config.slots.item, ui?.item, cmdItem.class]
+                                          })
+                                        : classes.item}
+                                >
+                                    {#if itemLeadingSlot}
+                                        {@render itemLeadingSlot({ item: cmdItem, index: i })}
+                                    {:else if cmdItem.icon}
+                                        <Icon name={cmdItem.icon} class={classes.itemIcon} />
+                                    {/if}
+
+                                    {#if itemLabelSlot}
+                                        {@render itemLabelSlot({ item: cmdItem, index: i })}
+                                    {:else}
+                                        <div class={classes.itemWrapper}>
+                                            {#if cmdItem.label}
+                                                <span class={classes.itemLabel}
+                                                    >{cmdItem.label}</span
+                                                >
+                                            {/if}
+                                            {#if cmdItem.description}
+                                                <span class={classes.itemDescription}
+                                                    >{cmdItem.description}</span
+                                                >
+                                            {/if}
+                                        </div>
+                                    {/if}
+
+                                    {#if itemTrailingSlot}
+                                        <span class={classes.itemTrailing}>
+                                            {@render itemTrailingSlot({ item: cmdItem, index: i })}
+                                        </span>
+                                    {/if}
+                                </Command.Item>
+                            {/if}
+                        {/each}
+                    </Command.GroupItems>
+                </Command.Group>
+            {/each}
+        {/if}
+    </Command.List>
+
+    {#if footerSlot}
+        <div class={classes.footer}>
+            {@render footerSlot()}
+        </div>
+    {/if}
+</Command.Root>

package/dist/Command/Command.svelte.d.ts

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

package/dist/Command/CommandTestWrapper.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import Command from './Command.svelte'
+    import type { CommandProps } from './command.types.js'
+
+    let {
+        ...props
+    }: Omit<
+        CommandProps,
+        'item' | 'itemLeading' | 'itemLabel' | 'itemTrailing' | 'empty' | 'footer'
+    > = $props()
+</script>
+
+<Command {...props} />

package/dist/Command/CommandTestWrapper.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandProps } from './command.types.js';
+declare const CommandTestWrapper: import("svelte").Component<Omit<CommandProps, "footer" | "item" | "empty" | "itemLabel" | "itemTrailing" | "itemLeading">, {}, "">;
+type CommandTestWrapper = ReturnType<typeof CommandTestWrapper>;
+export default CommandTestWrapper;

package/dist/Command/command.types.d.ts

@@ -0,0 +1,98 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CommandRootPropsWithoutHTML } from 'bits-ui';
+import type { CommandSlots, CommandVariantProps } from './command.variants.js';
+/**
+ * Configuration for an individual command item.
+ */
+export interface CommandItem {
+    /** Unique identifier and search value for this item. */
+    value: string;
+    /** Display label. */
+    label?: string;
+    /** Optional description shown below the label. */
+    description?: string;
+    /** Leading icon name (Iconify). */
+    icon?: string;
+    /** Additional search aliases for filtering. */
+    keywords?: string[];
+    /** Whether this item is disabled. */
+    disabled?: boolean;
+    /** Callback when item is selected. */
+    onSelect?: () => void;
+    /** Additional CSS classes for this item. */
+    class?: ClassNameValue;
+}
+/**
+ * Configuration for a command group.
+ */
+export interface CommandGroup {
+    /** Unique group identifier. */
+    id: string;
+    /** Group heading label. */
+    label?: string;
+    /** Items in this group. */
+    items: CommandItem[];
+}
+export interface CommandItemSlotProps {
+    item: CommandItem;
+    index: number;
+}
+/**
+ * Props for the Command component.
+ *
+ * Wraps bits-ui Command primitives with a themed, items-based API.
+ *
+ * @example
+ * ```svelte
+ * <Command
+ *   placeholder="Search..."
+ *   groups={[
+ *     { id: 'actions', label: 'Actions', items: [
+ *       { value: 'new-file', label: 'New File', icon: 'lucide:file-plus' }
+ *     ]}
+ *   ]}
+ * />
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/command
+ */
+export interface CommandProps extends Pick<CommandRootPropsWithoutHTML, 'value' | 'onValueChange' | 'filter' | 'shouldFilter' | 'loop' | 'vimBindings' | 'label'> {
+    /** Bindable reference to the root DOM element. */
+    ref?: HTMLElement | null;
+    /** Array of grouped command items. */
+    groups?: CommandGroup[];
+    /** Placeholder text for the search input. */
+    placeholder?: string;
+    /**
+     * The current search term. Use `bind:search` for two-way binding.
+     * @default ''
+     */
+    search?: string;
+    /** Loading state — shows a loading indicator instead of items. */
+    loading?: boolean;
+    /** Text shown when no results match the search query. */
+    emptyText?: string;
+    /** Leading icon for the search input. */
+    icon?: string;
+    /** Size variant. */
+    size?: NonNullable<CommandVariantProps['size']>;
+    /** Override classes for component slots. */
+    ui?: Partial<Record<CommandSlots, ClassNameValue>>;
+    /** Additional CSS classes for the root element. */
+    class?: ClassNameValue;
+    /** Custom snippet for rendering each item. Replaces default item rendering. */
+    item?: Snippet<[CommandItemSlotProps]>;
+    /** Custom snippet for the item leading section (icon area). */
+    itemLeading?: Snippet<[CommandItemSlotProps]>;
+    /** Custom snippet for the item label section. */
+    itemLabel?: Snippet<[CommandItemSlotProps]>;
+    /** Custom snippet for the item trailing section. */
+    itemTrailing?: Snippet<[CommandItemSlotProps]>;
+    /** Custom snippet for the empty state. */
+    empty?: Snippet<[{
+        search: string;
+    }]>;
+    /** Custom snippet for the footer area below the list. */
+    footer?: Snippet;
+}

package/dist/Command/command.types.js

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