sv5ui 1.1.3 → 1.3.0

package/dist/PinInput/pin-input.variants.d.ts

@@ -0,0 +1,303 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const pinInputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, undefined, {
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        subtle: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+        none: {
+            base: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        success: {};
+        warning: {};
+        error: {};
+        info: {};
+        surface: {};
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    highlight: {
+        true: {};
+    };
+    fixed: {
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type PinInputVariantProps = VariantProps<typeof pinInputVariants>;
+export type PinInputSlots = keyof ReturnType<typeof pinInputVariants>;
+export declare const pinInputDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            outline: {
+                base: string;
+            };
+            soft: {
+                base: string;
+            };
+            subtle: {
+                base: string;
+            };
+            ghost: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            success: {};
+            warning: {};
+            error: {};
+            info: {};
+            surface: {};
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        highlight: {
+            true: {};
+        };
+        fixed: {
+            false: {};
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+    }, {
+        variant: {
+            outline: {
+                base: string;
+            };
+            soft: {
+                base: string;
+            };
+            subtle: {
+                base: string;
+            };
+            ghost: {
+                base: string;
+            };
+            none: {
+                base: string;
+            };
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            success: {};
+            warning: {};
+            error: {};
+            info: {};
+            surface: {};
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        highlight: {
+            true: {};
+        };
+        fixed: {
+            false: {};
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+    }>;
+    slots: Partial<Record<PinInputSlots, string>>;
+};

package/dist/PinInput/pin-input.variants.js

@@ -0,0 +1,196 @@
+import { tv } from 'tailwind-variants';
+export const pinInputVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center gap-1.5 align-top',
+        base: [
+            'relative flex items-center justify-center rounded-md',
+            'select-none cursor-text transition-colors'
+        ]
+    },
+    variants: {
+        variant: {
+            outline: {
+                base: 'text-on-surface bg-surface ring-2 ring-inset ring-outline-variant'
+            },
+            soft: {
+                base: 'text-on-surface bg-surface-container/50 data-[active]:bg-surface-container disabled:bg-surface-container/50'
+            },
+            subtle: {
+                base: 'text-on-surface bg-surface-container ring-2 ring-inset ring-outline-variant'
+            },
+            ghost: {
+                base: 'text-on-surface bg-transparent data-[active]:bg-surface-container'
+            },
+            none: {
+                base: 'text-on-surface bg-transparent'
+            }
+        },
+        color: {
+            primary: {},
+            secondary: {},
+            tertiary: {},
+            success: {},
+            warning: {},
+            error: {},
+            info: {},
+            surface: {}
+        },
+        size: {
+            xs: { base: 'size-6 text-sm/4' },
+            sm: { base: 'size-7 text-sm/4' },
+            md: { base: 'size-8 text-base/5' },
+            lg: { base: 'size-9 text-base/5' },
+            xl: { base: 'size-10 text-base' }
+        },
+        highlight: {
+            true: {}
+        },
+        fixed: {
+            false: {}
+        },
+        disabled: {
+            true: {
+                root: 'opacity-75 cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // outline + color → active cell ring
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-primary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-secondary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'tertiary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-tertiary'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-success'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-warning'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'error',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-error'
+            }
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: { base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-info' }
+        },
+        {
+            variant: 'outline',
+            color: 'surface',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-on-surface'
+            }
+        },
+        // subtle + color → active cell ring
+        {
+            variant: 'subtle',
+            color: 'primary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-primary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'secondary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-secondary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'tertiary',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-tertiary'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'success',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-success'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'warning',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-warning'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'error',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-error'
+            }
+        },
+        {
+            variant: 'subtle',
+            color: 'info',
+            class: { base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-info' }
+        },
+        {
+            variant: 'subtle',
+            color: 'surface',
+            class: {
+                base: 'data-[active]:ring-2 data-[active]:ring-inset data-[active]:ring-on-surface'
+            }
+        },
+        // highlight + color → all cells always show color ring
+        { highlight: true, color: 'primary', class: { base: 'ring-2 ring-inset ring-primary' } },
+        {
+            highlight: true,
+            color: 'secondary',
+            class: { base: 'ring-2 ring-inset ring-secondary' }
+        },
+        { highlight: true, color: 'tertiary', class: { base: 'ring-2 ring-inset ring-tertiary' } },
+        { highlight: true, color: 'success', class: { base: 'ring-2 ring-inset ring-success' } },
+        { highlight: true, color: 'warning', class: { base: 'ring-2 ring-inset ring-warning' } },
+        { highlight: true, color: 'error', class: { base: 'ring-2 ring-inset ring-error' } },
+        { highlight: true, color: 'info', class: { base: 'ring-2 ring-inset ring-info' } },
+        { highlight: true, color: 'surface', class: { base: 'ring-2 ring-inset ring-on-surface' } },
+        // fixed=false → responsive text (smaller on mobile)
+        { fixed: false, size: 'xs', class: { base: 'md:text-xs' } },
+        { fixed: false, size: 'sm', class: { base: 'md:text-xs' } },
+        { fixed: false, size: 'md', class: { base: 'md:text-sm' } },
+        { fixed: false, size: 'lg', class: { base: 'md:text-sm' } }
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        color: 'primary',
+        size: 'md'
+    }
+});
+export const pinInputDefaults = {
+    defaultVariants: pinInputVariants.defaultVariants,
+    slots: {}
+};

package/dist/Popover/Popover.svelte

@@ -12,10 +12,11 @@
     const config = getComponentConfig('popover', popoverDefaults)
 
     let {
+        ref = $bindable(null),
         open = $bindable(false),
         onOpenChange,
         onOpenChangeComplete,
-        side = config.defaultVariants.side ?? 'bottom',
+        side = 'bottom',
         sideOffset = 8,
         align = 'center',
         alignOffset = 0,
@@ -38,12 +39,11 @@
         ui,
         class: className,
         children,
-        content: contentSlot
+        content: contentSlot,
+        ...restProps
     }: Props = $props()
 
-    const showArrow = $derived(!!arrow)
-
-    const variantSlots = $derived(popoverVariants({ side, transition }))
+    const variantSlots = $derived(popoverVariants({ transition }))
     const classes = $derived({
         content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
         arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] })
@@ -61,15 +61,11 @@
     function close() {
         open = false
     }
-
-    function handleOpenChange(value: boolean) {
-        open = value
-        onOpenChange?.(value)
-    }
 </script>
 
 {#snippet popoverContentEl()}
     <Popover.Content
+        bind:ref
         {side}
         {sideOffset}
         {align}
@@ -89,12 +85,13 @@
         {onInteractOutside}
         {forceMount}
         class={[classes.content, !children ? className : undefined]}
+        {...restProps}
     >
         {#if contentSlot}
             {@render contentSlot({ open, close })}
         {/if}
 
-        {#if showArrow}
+        {#if arrow}
             <Popover.Arrow
                 width={arrowProps.width}
                 height={arrowProps.height}
@@ -104,7 +101,7 @@
     </Popover.Content>
 {/snippet}
 
-<Popover.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
+<Popover.Root bind:open {onOpenChange} {onOpenChangeComplete}>
     {#if children}
         <Popover.Trigger>
             {#snippet child({ props })}

package/dist/Popover/Popover.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PopoverProps } from './popover.types.js';
 export type Props = PopoverProps;
 import { Popover } from 'bits-ui';
-declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "ref" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/Popover/popover.types.d.ts

@@ -5,6 +5,10 @@ import type { PopoverRootPropsWithoutHTML, PopoverContentPropsWithoutHTML, Popov
 type RootProps = Pick<PopoverRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete'>;
 type ContentProps = Pick<PopoverContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'trapFocus' | 'preventScroll' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount'>;
 export interface PopoverProps extends RootProps, ContentProps {
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
     /**
      * Display an arrow alongside the popover.
      * Can be a boolean or arrow props for customization.

package/dist/Popover/popover.variants.d.ts

@@ -1,68 +1,26 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
     content: string[];
     arrow: string;
 }, undefined, {
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
     content: string[];
     arrow: string;
 }, import("tailwind-variants").TVReturnType<{
-    side: {
-        top: {
-            content: string;
-        };
-        right: {
-            content: string;
-        };
-        bottom: {
-            content: string;
-        };
-        left: {
-            content: string;
-        };
-    };
     transition: {
         true: {
-            content: string;
+            content: string[];
         };
     };
 }, {
@@ -73,46 +31,18 @@ export type PopoverVariantProps = VariantProps<typeof popoverVariants>;
 export type PopoverSlots = keyof ReturnType<typeof popoverVariants>;
 export declare const popoverDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {
         content: string[];
         arrow: string;
     }, {
-        side: {
-            top: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-        };
         transition: {
             true: {
-                content: string;
+                content: string[];
             };
         };
     }, {