sv5ui 1.3.0 → 1.5.0

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';

package/dist/FormField/FormField.svelte

@@ -9,6 +9,7 @@
     import { formFieldVariants, formFieldDefaults } from './form-field.variants.js'
     import { getComponentConfig } from '../config.js'
     import { setContext } from 'svelte'
+    import type { FormFieldContext } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('formField', formFieldDefaults)
 
@@ -57,12 +58,7 @@
     const hasError = $derived(error !== undefined && error !== false)
     const errorMessage = $derived(typeof error === 'string' ? error : undefined)
 
-    setContext<{
-        name?: string
-        size: NonNullable<FormFieldProps['size']>
-        error?: string | boolean
-        ariaId: string
-    }>('formField', {
+    setContext<FormFieldContext>('formField', {
         get name() {
             return name
         },

package/dist/Input/Input.svelte

@@ -15,7 +15,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('input', inputDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -45,15 +45,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const fieldGroupContext = getContext<
         | {

package/dist/PinInput/PinInput.svelte

@@ -6,10 +6,9 @@
 
 <script lang="ts">
     import { PinInput, useId } from 'bits-ui'
-    import { getContext } from 'svelte'
     import { pinInputVariants, pinInputDefaults } from './pin-input.variants.js'
     import { getComponentConfig } from '../config.js'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('pinInput', pinInputDefaults)
 
@@ -43,15 +42,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const autoInputId = useId()
     const hasError = $derived(

package/dist/RadioGroup/RadioGroup.svelte

@@ -8,9 +8,8 @@
     import { RadioGroup, Label, useId } from 'bits-ui'
     import { radioGroupVariants, radioGroupDefaults } from './radio-group.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { getContext } from 'svelte'
     import Icon from '../Icon/Icon.svelte'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
     import type { RadioGroupItem } from './radio-group.types.js'
 
     const config = getComponentConfig('radioGroup', radioGroupDefaults)
@@ -43,15 +42,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false

package/dist/Select/Select.svelte

@@ -16,7 +16,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('select', selectDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -68,15 +68,7 @@
     }: Props = $props()
 
     // ---- Form context ----
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const fieldGroupContext = getContext<
         | {

package/dist/Select/select.variants.js

@@ -26,7 +26,7 @@ export const selectVariants = tv({
             'focus:outline-none',
             'overflow-hidden'
         ],
-        viewport: 'p-1',
+        viewport: 'p-1 max-h-60 overflow-y-auto scrollbar-thin',
         group: '',
         groupLabel: 'px-2 py-1.5 text-xs font-semibold text-on-surface-variant',
         item: [

package/dist/SelectMenu/SelectMenu.svelte

@@ -21,7 +21,7 @@
     import Avatar from '../Avatar/Avatar.svelte'
     import Input from '../Input/Input.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('selectMenu', selectMenuDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -77,15 +77,7 @@
     }: Props = $props()
 
     // ---- Form context ----
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const fieldGroupContext = getContext<
         | {

package/dist/SelectMenu/select-menu.variants.js

@@ -14,7 +14,7 @@ export const selectMenuVariants = tv({
             'flex flex-col'
         ],
         input: 'border-b border-outline-variant',
-        viewport: 'p-1 flex-1 overflow-y-auto',
+        viewport: 'p-1 flex-1 overflow-y-auto scrollbar-thin',
         empty: 'text-center text-on-surface-variant'
     },
     variants: {

package/dist/Slider/Slider.svelte

@@ -6,10 +6,9 @@
 
 <script lang="ts">
     import { Slider, useId } from 'bits-ui'
-    import { getContext } from 'svelte'
     import { sliderVariants, sliderDefaults } from './slider.variants.js'
     import { getComponentConfig } from '../config.js'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('slider', sliderDefaults)
 
@@ -37,15 +36,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const autoId = useId()
     const hasError = $derived(

package/dist/Switch/Switch.svelte

@@ -8,9 +8,8 @@
     import { Switch, Label, useId } from 'bits-ui'
     import { switchVariants, switchDefaults } from './switch.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { getContext } from 'svelte'
     import Icon from '../Icon/Icon.svelte'
-    import type { FormFieldProps } from '../FormField/form-field.types.js'
+    import { useFormField } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('switch', switchDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -39,15 +38,7 @@
         ...restProps
     }: Props = $props()
 
-    const formFieldContext = getContext<
-        | {
-              name?: string
-              size: NonNullable<FormFieldProps['size']>
-              error?: string | boolean
-              ariaId: string
-          }
-        | undefined
-    >('formField')
+    const formFieldContext = useFormField()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false