sv5ui 1.7.0 → 2.0.0

package/dist/Stepper/stepper.variants.d.ts

@@ -0,0 +1,428 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const stepperVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+        vertical: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+    };
+    size: {
+        xs: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    trigger: string[];
+    container: string;
+    indicator: string[];
+    separator: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    content: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+        vertical: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+    };
+    size: {
+        xs: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    trigger: string[];
+    container: string;
+    indicator: string[];
+    separator: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+        vertical: {
+            list: string;
+            item: string;
+            trigger: string;
+            container: string;
+            wrapper: string;
+            separator: string;
+        };
+    };
+    size: {
+        xs: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            indicator: string;
+            title: string;
+            description: string;
+        };
+    };
+    color: {
+        primary: {
+            indicator: string;
+        };
+        secondary: {
+            indicator: string;
+        };
+        tertiary: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+        info: {
+            indicator: string;
+        };
+        surface: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    trigger: string[];
+    container: string;
+    indicator: string[];
+    separator: string;
+    wrapper: string;
+    title: string;
+    description: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type StepperVariantProps = VariantProps<typeof stepperVariants>;
+export type StepperSlots = keyof ReturnType<typeof stepperVariants>;
+export declare const stepperDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        orientation: {
+            horizontal: {
+                list: string;
+                item: string;
+                trigger: string;
+                container: string;
+                wrapper: string;
+                separator: string;
+            };
+            vertical: {
+                list: string;
+                item: string;
+                trigger: string;
+                container: string;
+                wrapper: string;
+                separator: string;
+            };
+        };
+        size: {
+            xs: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+        };
+        color: {
+            primary: {
+                indicator: string;
+            };
+            secondary: {
+                indicator: string;
+            };
+            tertiary: {
+                indicator: string;
+            };
+            success: {
+                indicator: string;
+            };
+            warning: {
+                indicator: string;
+            };
+            error: {
+                indicator: string;
+            };
+            info: {
+                indicator: string;
+            };
+            surface: {
+                indicator: string;
+            };
+        };
+    }, {
+        root: string;
+        list: string;
+        item: string;
+        trigger: string[];
+        container: string;
+        indicator: string[];
+        separator: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        content: string;
+    }, {
+        orientation: {
+            horizontal: {
+                list: string;
+                item: string;
+                trigger: string;
+                container: string;
+                wrapper: string;
+                separator: string;
+            };
+            vertical: {
+                list: string;
+                item: string;
+                trigger: string;
+                container: string;
+                wrapper: string;
+                separator: string;
+            };
+        };
+        size: {
+            xs: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                indicator: string;
+                title: string;
+                description: string;
+            };
+        };
+        color: {
+            primary: {
+                indicator: string;
+            };
+            secondary: {
+                indicator: string;
+            };
+            tertiary: {
+                indicator: string;
+            };
+            success: {
+                indicator: string;
+            };
+            warning: {
+                indicator: string;
+            };
+            error: {
+                indicator: string;
+            };
+            info: {
+                indicator: string;
+            };
+            surface: {
+                indicator: string;
+            };
+        };
+    }, {
+        root: string;
+        list: string;
+        item: string;
+        trigger: string[];
+        container: string;
+        indicator: string[];
+        separator: string;
+        wrapper: string;
+        title: string;
+        description: string;
+        content: string;
+    }>;
+    slots: Partial<Record<StepperSlots, string>>;
+};

package/dist/Stepper/stepper.variants.js

@@ -0,0 +1,204 @@
+import { tv } from 'tailwind-variants';
+export const stepperVariants = tv({
+    slots: {
+        root: 'flex flex-col gap-4 w-full',
+        list: 'flex list-none p-0 m-0',
+        item: 'group relative flex flex-1',
+        trigger: [
+            'group/trigger relative z-10 flex w-full gap-3 text-start rounded-md',
+            'enabled:cursor-pointer select-none',
+            'focus-visible:outline-none',
+            'disabled:cursor-not-allowed disabled:opacity-60'
+        ],
+        container: 'flex shrink-0 items-center justify-center',
+        indicator: [
+            'relative z-10 inline-flex items-center justify-center shrink-0 rounded-full font-medium',
+            'bg-surface-container-highest text-on-surface-variant',
+            'transition-colors',
+            'group-focus-visible/trigger:ring-2 group-focus-visible/trigger:ring-offset-2 group-focus-visible/trigger:ring-offset-surface'
+        ],
+        separator: 'shrink-0 z-0 rounded-full bg-surface-container-highest transition-colors',
+        wrapper: 'flex flex-col min-w-0',
+        title: 'font-medium text-on-surface transition-colors',
+        description: 'text-on-surface-variant',
+        content: 'focus:outline-none'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                list: 'flex-row w-full',
+                item: 'flex-col items-center',
+                trigger: 'flex-col items-center',
+                container: 'w-full',
+                wrapper: 'items-center text-center pt-2',
+                separator: 'absolute h-0.5 left-1/2 right-[-50%] -translate-y-1/2'
+            },
+            vertical: {
+                list: 'flex-col',
+                item: 'flex-row',
+                trigger: 'flex-row items-stretch',
+                container: 'self-stretch flex-col',
+                wrapper: 'items-start',
+                separator: 'w-0.5 flex-1 my-1'
+            }
+        },
+        size: {
+            xs: {
+                indicator: 'size-6 text-[10px] *:size-3.5',
+                title: 'text-xs',
+                description: 'text-[11px]'
+            },
+            sm: {
+                indicator: 'size-7 text-xs *:size-4',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                indicator: 'size-8 text-sm *:size-5',
+                title: 'text-sm',
+                description: 'text-sm'
+            },
+            lg: {
+                indicator: 'size-10 text-base *:size-5',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            xl: {
+                indicator: 'size-12 text-lg *:size-6',
+                title: 'text-base',
+                description: 'text-sm'
+            }
+        },
+        color: {
+            primary: { indicator: 'group-focus-visible/trigger:ring-primary' },
+            secondary: { indicator: 'group-focus-visible/trigger:ring-secondary' },
+            tertiary: { indicator: 'group-focus-visible/trigger:ring-tertiary' },
+            success: { indicator: 'group-focus-visible/trigger:ring-success' },
+            warning: { indicator: 'group-focus-visible/trigger:ring-warning' },
+            error: { indicator: 'group-focus-visible/trigger:ring-error' },
+            info: { indicator: 'group-focus-visible/trigger:ring-info' },
+            surface: { indicator: 'group-focus-visible/trigger:ring-outline' }
+        }
+    },
+    compoundVariants: [
+        // -------------------------------------------------------------------
+        // Color × state — indicator background, separator fill, active title
+        // -------------------------------------------------------------------
+        {
+            color: 'primary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-primary group-data-[state=completed]:text-on-primary',
+                    'group-data-[state=active]:bg-primary group-data-[state=active]:text-on-primary'
+                ],
+                separator: 'group-data-[state=completed]:bg-primary',
+                title: 'group-data-[state=active]:text-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-secondary group-data-[state=completed]:text-on-secondary',
+                    'group-data-[state=active]:bg-secondary group-data-[state=active]:text-on-secondary'
+                ],
+                separator: 'group-data-[state=completed]:bg-secondary',
+                title: 'group-data-[state=active]:text-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-tertiary group-data-[state=completed]:text-on-tertiary',
+                    'group-data-[state=active]:bg-tertiary group-data-[state=active]:text-on-tertiary'
+                ],
+                separator: 'group-data-[state=completed]:bg-tertiary',
+                title: 'group-data-[state=active]:text-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-success group-data-[state=completed]:text-on-success',
+                    'group-data-[state=active]:bg-success group-data-[state=active]:text-on-success'
+                ],
+                separator: 'group-data-[state=completed]:bg-success',
+                title: 'group-data-[state=active]:text-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-warning group-data-[state=completed]:text-on-warning',
+                    'group-data-[state=active]:bg-warning group-data-[state=active]:text-on-warning'
+                ],
+                separator: 'group-data-[state=completed]:bg-warning',
+                title: 'group-data-[state=active]:text-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-error group-data-[state=completed]:text-on-error',
+                    'group-data-[state=active]:bg-error group-data-[state=active]:text-on-error'
+                ],
+                separator: 'group-data-[state=completed]:bg-error',
+                title: 'group-data-[state=active]:text-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-info group-data-[state=completed]:text-on-info',
+                    'group-data-[state=active]:bg-info group-data-[state=active]:text-on-info'
+                ],
+                separator: 'group-data-[state=completed]:bg-info',
+                title: 'group-data-[state=active]:text-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-inverse-surface group-data-[state=completed]:text-inverse-on-surface',
+                    'group-data-[state=active]:bg-inverse-surface group-data-[state=active]:text-inverse-on-surface'
+                ],
+                separator: 'group-data-[state=completed]:bg-inverse-surface',
+                title: 'group-data-[state=active]:text-on-surface'
+            }
+        },
+        // -------------------------------------------------------------------
+        // Horizontal × size — separator vertically centered on indicator,
+        // horizontal margins equal indicator radius so the line stops at each
+        // indicator's edge (never enters the indicator — important so faded
+        // disabled indicators don't reveal the line behind them).
+        // -------------------------------------------------------------------
+        { orientation: 'horizontal', size: 'xs', class: { separator: 'top-3 mx-3' } },
+        { orientation: 'horizontal', size: 'sm', class: { separator: 'top-3.5 mx-3.5' } },
+        { orientation: 'horizontal', size: 'md', class: { separator: 'top-4 mx-4' } },
+        { orientation: 'horizontal', size: 'lg', class: { separator: 'top-5 mx-5' } },
+        { orientation: 'horizontal', size: 'xl', class: { separator: 'top-6 mx-6' } },
+        // -------------------------------------------------------------------
+        // Vertical × size — wrapper bottom padding creates visible line height
+        // -------------------------------------------------------------------
+        { orientation: 'vertical', size: 'xs', class: { wrapper: 'pb-6' } },
+        { orientation: 'vertical', size: 'sm', class: { wrapper: 'pb-7' } },
+        { orientation: 'vertical', size: 'md', class: { wrapper: 'pb-8' } },
+        { orientation: 'vertical', size: 'lg', class: { wrapper: 'pb-10' } },
+        { orientation: 'vertical', size: 'xl', class: { wrapper: 'pb-12' } }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        color: 'primary'
+    }
+});
+export const stepperDefaults = {
+    defaultVariants: stepperVariants.defaultVariants,
+    slots: {}
+};

package/dist/Tabs/Tabs.svelte

@@ -32,7 +32,8 @@
         leading,
         label: labelSlot,
         trailing,
-        body: bodySlot
+        body: bodySlot,
+        ...restProps
     }: Props = $props()
 
     // Initialize value if not provided (intentionally reads initial values only)
@@ -131,6 +132,7 @@
 </script>
 
 <Tabs.Root
+    {...restProps}
     bind:ref
     bind:value
     {onValueChange}
@@ -141,7 +143,7 @@
     class={classes.root}
 >
     <Tabs.List bind:ref={listEl} class={classes.list}>
-        <div class={classes.indicator} style={indicatorStyle}></div>
+        <div class={classes.indicator} style={indicatorStyle} aria-hidden="true"></div>
 
         {#each items as item, index (item.value ?? index)}
             {@const itemValue = getItemValue(item, index)}

package/dist/Tabs/tabs.types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { TabsRootProps } from 'bits-ui';
 import type { TabsSlots, TabsVariantProps } from './tabs.variants.js';
 /**
  * Configuration for an individual tab item.
@@ -41,11 +42,6 @@ export interface TabsItem {
      * For complex content, use the `body` snippet instead.
      */
     content?: string;
-    /**
-     * Named slot identifier for custom content rendering.
-     * When provided, allows using dynamic snippet slots for this item.
-     */
-    slot?: string;
     /**
      * Additional CSS classes applied to this item's trigger element.
      */
@@ -86,7 +82,9 @@ export interface TabsSlotProps {
  *
  * @see https://bits-ui.com/docs/components/tabs
  */
-export interface TabsProps {
+export interface TabsProps extends Pick<TabsRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/hooks/HookContextProbe.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { useFormField } from './useFormField.svelte.js'
+
+    const ctx = useFormField()
+</script>
+
+<div data-name={ctx?.name ?? 'none'} data-has={String(!!ctx)}>probe</div>