sv5ui 1.2.0 → 1.4.0

package/dist/CheckboxGroup/checkbox-group.variants.js

@@ -0,0 +1,231 @@
+import { tv } from 'tailwind-variants';
+export const checkboxGroupVariants = tv({
+    slots: {
+        root: '',
+        fieldset: 'flex m-0 p-0 border-0 min-w-0',
+        legend: 'w-full font-medium text-on-surface mb-1',
+        item: 'flex items-start',
+        container: 'flex items-center',
+        wrapper: '',
+        base: [
+            'inline-flex items-center justify-center shrink-0 rounded-md border',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200',
+            'border-outline-variant',
+            'data-[state=unchecked]:bg-transparent'
+        ],
+        indicator: 'flex items-center justify-center',
+        icon: 'shrink-0 text-surface',
+        label: 'block font-medium text-on-surface',
+        description: 'text-on-surface-variant'
+    },
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        size: {
+            xs: {
+                fieldset: 'gap-2',
+                legend: 'text-xs',
+                base: 'size-3.5 rounded',
+                container: 'h-4',
+                icon: 'size-2.5',
+                wrapper: 'text-xs'
+            },
+            sm: {
+                fieldset: 'gap-2.5',
+                legend: 'text-xs',
+                base: 'size-4 rounded',
+                container: 'h-4',
+                icon: 'size-3',
+                wrapper: 'text-xs'
+            },
+            md: {
+                fieldset: 'gap-3',
+                legend: 'text-sm',
+                base: 'size-4.5 rounded-md',
+                container: 'h-5',
+                icon: 'size-3.5',
+                wrapper: 'text-sm'
+            },
+            lg: {
+                fieldset: 'gap-3.5',
+                legend: 'text-sm',
+                base: 'size-5 rounded-md',
+                container: 'h-5',
+                icon: 'size-4',
+                wrapper: 'text-sm'
+            },
+            xl: {
+                fieldset: 'gap-4',
+                legend: 'text-base',
+                base: 'size-5.5 rounded-md',
+                container: 'h-6',
+                icon: 'size-4.5',
+                wrapper: 'text-base'
+            }
+        },
+        orientation: {
+            horizontal: {
+                fieldset: 'flex-row flex-wrap items-start'
+            },
+            vertical: {
+                fieldset: 'flex-col'
+            }
+        },
+        variant: {
+            list: '',
+            card: {
+                item: 'border border-outline-variant rounded-lg cursor-pointer select-none'
+            }
+        },
+        indicator: {
+            start: {
+                wrapper: 'ms-2'
+            },
+            end: {
+                item: 'flex-row-reverse',
+                wrapper: 'me-2'
+            },
+            hidden: {
+                container: 'sr-only'
+            }
+        },
+        loading: {
+            true: {
+                icon: 'animate-spin'
+            }
+        },
+        required: {
+            true: {
+                legend: "after:content-['*'] after:ms-0.5 after:text-error"
+            }
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75',
+                base: 'cursor-not-allowed',
+                label: 'cursor-not-allowed',
+                description: 'cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // ========== COLOR (checked bg + border + focus ring) ==========
+        {
+            color: 'primary',
+            class: {
+                base: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary focus-visible:outline-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                base: 'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:border-secondary focus-visible:outline-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                base: 'data-[state=checked]:bg-tertiary data-[state=checked]:border-tertiary data-[state=indeterminate]:bg-tertiary data-[state=indeterminate]:border-tertiary focus-visible:outline-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                base: 'data-[state=checked]:bg-success data-[state=checked]:border-success data-[state=indeterminate]:bg-success data-[state=indeterminate]:border-success focus-visible:outline-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                base: 'data-[state=checked]:bg-warning data-[state=checked]:border-warning data-[state=indeterminate]:bg-warning data-[state=indeterminate]:border-warning focus-visible:outline-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                base: 'data-[state=checked]:bg-error data-[state=checked]:border-error data-[state=indeterminate]:bg-error data-[state=indeterminate]:border-error focus-visible:outline-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                base: 'data-[state=checked]:bg-info data-[state=checked]:border-info data-[state=indeterminate]:bg-info data-[state=indeterminate]:border-info focus-visible:outline-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                base: 'data-[state=checked]:bg-on-surface data-[state=checked]:border-on-surface data-[state=indeterminate]:bg-on-surface data-[state=indeterminate]:border-on-surface focus-visible:outline-outline'
+            }
+        },
+        // ========== CARD × SIZE (padding) ==========
+        { variant: 'card', size: 'xs', class: { item: 'p-2' } },
+        { variant: 'card', size: 'sm', class: { item: 'p-2.5' } },
+        { variant: 'card', size: 'md', class: { item: 'p-3' } },
+        { variant: 'card', size: 'lg', class: { item: 'p-3.5' } },
+        { variant: 'card', size: 'xl', class: { item: 'p-4' } },
+        // ========== CARD × COLOR (checked border) ==========
+        {
+            variant: 'card',
+            color: 'primary',
+            class: { item: 'has-[[data-state=checked]]:border-primary' }
+        },
+        {
+            variant: 'card',
+            color: 'secondary',
+            class: { item: 'has-[[data-state=checked]]:border-secondary' }
+        },
+        {
+            variant: 'card',
+            color: 'tertiary',
+            class: { item: 'has-[[data-state=checked]]:border-tertiary' }
+        },
+        {
+            variant: 'card',
+            color: 'success',
+            class: { item: 'has-[[data-state=checked]]:border-success' }
+        },
+        {
+            variant: 'card',
+            color: 'warning',
+            class: { item: 'has-[[data-state=checked]]:border-warning' }
+        },
+        {
+            variant: 'card',
+            color: 'error',
+            class: { item: 'has-[[data-state=checked]]:border-error' }
+        },
+        {
+            variant: 'card',
+            color: 'info',
+            class: { item: 'has-[[data-state=checked]]:border-info' }
+        },
+        {
+            variant: 'card',
+            color: 'surface',
+            class: { item: 'has-[[data-state=checked]]:border-on-surface' }
+        },
+        // ========== CARD × DISABLED ==========
+        { variant: 'card', disabled: true, class: { item: 'cursor-not-allowed' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        variant: 'list',
+        indicator: 'start',
+        orientation: 'vertical'
+    }
+});
+export const checkboxGroupDefaults = {
+    defaultVariants: checkboxGroupVariants.defaultVariants,
+    slots: {}
+};

package/dist/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxGroupProps, CheckboxGroupItem } from './checkbox-group.types.js';

package/dist/CheckboxGroup/index.js

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

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>