sv5ui 1.2.0 → 1.4.0

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 {};

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>>;
+};

package/dist/Command/command.variants.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+export const commandVariants = tv({
+    slots: {
+        root: 'flex flex-col overflow-hidden',
+        inputWrapper: 'flex items-center border-b border-outline-variant px-3',
+        inputIcon: 'mr-2 shrink-0 opacity-50',
+        input: 'flex h-12 w-full bg-transparent text-sm outline-none placeholder:text-on-surface-variant/50 disabled:cursor-not-allowed disabled:opacity-50',
+        list: 'scroll-py-1 overflow-y-auto overflow-x-hidden scrollbar-thin',
+        empty: 'py-6 text-center text-sm text-on-surface-variant',
+        loading: 'py-6 text-center text-sm text-on-surface-variant',
+        group: 'overflow-hidden p-1',
+        groupHeading: 'px-2 py-1.5 text-xs font-semibold text-on-surface-variant',
+        groupItems: '',
+        separator: '-mx-1 h-px bg-outline-variant',
+        item: 'relative flex w-full cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-surface-container-highest',
+        itemIcon: 'size-4 shrink-0',
+        itemWrapper: 'flex min-w-0 flex-1 flex-col',
+        itemLabel: 'truncate',
+        itemDescription: 'truncate text-xs text-on-surface-variant',
+        itemTrailing: 'ms-auto flex items-center gap-1',
+        footer: 'border-t border-outline-variant p-1'
+    },
+    variants: {
+        size: {
+            xs: {
+                inputIcon: 'size-3.5',
+                input: 'h-9 text-xs',
+                inputWrapper: 'px-2',
+                item: 'px-1.5 py-1 text-xs gap-1.5',
+                itemIcon: 'size-3.5',
+                groupHeading: 'px-1.5 py-1 text-[10px]',
+                empty: 'py-4 text-xs',
+                loading: 'py-4 text-xs'
+            },
+            sm: {
+                inputIcon: 'size-3.5',
+                input: 'h-10 text-xs',
+                inputWrapper: 'px-2.5',
+                item: 'px-1.5 py-1 text-xs gap-1.5',
+                itemIcon: 'size-4',
+                groupHeading: 'px-1.5 py-1 text-[10px]',
+                empty: 'py-5 text-xs',
+                loading: 'py-5 text-xs'
+            },
+            md: {
+                inputIcon: 'size-4',
+                input: 'h-12 text-sm',
+                inputWrapper: 'px-3',
+                item: 'px-2 py-1.5 text-sm gap-2',
+                itemIcon: 'size-4',
+                groupHeading: 'px-2 py-1.5 text-xs',
+                empty: 'py-6 text-sm',
+                loading: 'py-6 text-sm'
+            },
+            lg: {
+                inputIcon: 'size-5',
+                input: 'h-13 text-sm',
+                inputWrapper: 'px-3.5',
+                item: 'px-2.5 py-2 text-sm gap-2',
+                itemIcon: 'size-5',
+                groupHeading: 'px-2.5 py-2 text-xs',
+                empty: 'py-7 text-sm',
+                loading: 'py-7 text-sm'
+            },
+            xl: {
+                inputIcon: 'size-5',
+                input: 'h-14 text-base',
+                inputWrapper: 'px-4',
+                item: 'px-3 py-2 text-base gap-2.5',
+                itemIcon: 'size-5',
+                groupHeading: 'px-3 py-2 text-sm',
+                empty: 'py-8 text-base',
+                loading: 'py-8 text-base'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const commandDefaults = {
+    defaultVariants: {
+        size: 'md'
+    },
+    slots: {}
+};

package/dist/Command/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Command } from './Command.svelte';
+export type { CommandProps } from './command.types.js';

package/dist/Command/index.js

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