svelora 2.1.0

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 { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { commandDefaults, commandVariants } from './command.variants.js'
+
+    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" | "value" | "ref">;
+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, "item" | "footer" | "empty" | "itemLabel" | "itemTrailing" | "itemLeading">, {}, "">;
+type CommandTestWrapper = ReturnType<typeof CommandTestWrapper>;
+export default CommandTestWrapper;

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

@@ -0,0 +1,100 @@
+import type { CommandRootProps, CommandRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+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'>, Pick<CommandRootProps, 'id'> {
+    /** 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;
+    /** 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 {};

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

@@ -0,0 +1,226 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const commandVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        sm: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        md: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        lg: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        xl: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    groupHeading: string;
+    groupItems: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+    itemWrapper: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemTrailing: string;
+    footer: string;
+}, undefined, {
+    size: {
+        xs: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        sm: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        md: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        lg: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        xl: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    groupHeading: string;
+    groupItems: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+    itemWrapper: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemTrailing: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        sm: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        md: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        lg: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+        xl: {
+            inputIcon: string;
+            input: string;
+            inputWrapper: string;
+            item: string;
+            itemIcon: string;
+            groupHeading: string;
+            empty: string;
+            loading: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    inputIcon: string;
+    input: string;
+    list: string;
+    empty: string;
+    loading: string;
+    group: string;
+    groupHeading: string;
+    groupItems: string;
+    separator: string;
+    item: string;
+    itemIcon: string;
+    itemWrapper: string;
+    itemLabel: string;
+    itemDescription: string;
+    itemTrailing: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CommandVariantProps = VariantProps<typeof commandVariants>;
+export type CommandSlots = keyof ReturnType<typeof commandVariants>;
+export declare const commandDefaults: {
+    defaultVariants: {
+        size: NonNullable<CommandVariantProps["size"]>;
+    };
+    slots: Partial<Record<CommandSlots, string>>;
+};