sv5ui 1.2.0 → 1.4.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/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/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

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+    import type { SliderProps } from './slider.types.js'
+
+    export type Props = SliderProps
+</script>
+
+<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'
+
+    const config = getComponentConfig('slider', sliderDefaults)
+
+    let {
+        ref = $bindable(null),
+        id,
+        value = $bindable(0),
+        onValueChange,
+        onValueCommit,
+        min = 0,
+        max = 100,
+        step = 1,
+        orientation = config.defaultVariants.orientation,
+        disabled = false,
+        autoSort = true,
+        dir,
+        thumbPositioning,
+        trackPadding,
+        color = config.defaultVariants.color,
+        size,
+        tooltip = false,
+        name,
+        class: className,
+        ui,
+        ...restProps
+    }: Props = $props()
+
+    const formFieldContext = getContext<
+        | {
+              name?: string
+              size: NonNullable<FormFieldProps['size']>
+              error?: string | boolean
+              ariaId: string
+          }
+        | undefined
+    >('formField')
+
+    const autoId = useId()
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    const asArray = $derived(Array.isArray(value) ? value : [value ?? min])
+    const isMultiple = $derived(Array.isArray(value))
+
+    function handleValueChange(v: number[]) {
+        value = isMultiple ? v : (v[0] ?? min)
+        onValueChange?.(value)
+    }
+
+    function handleValueCommit(v: number[]) {
+        onValueCommit?.(isMultiple ? v : (v[0] ?? min))
+    }
+
+    const slots = $derived(
+        sliderVariants({ color: resolvedColor, size: resolvedSize, orientation, disabled })
+    )
+
+    const classes = $derived.by(() => {
+        const u = ui ?? {}
+        return {
+            root: slots.root({ class: [config.slots.root, className, u.root] }),
+            base: slots.base({ class: [config.slots.base, u.base] }),
+            track: slots.track({ class: [config.slots.track, u.track] }),
+            range: slots.range({ class: [config.slots.range, u.range] }),
+            thumb: slots.thumb({ class: [config.slots.thumb, u.thumb] }),
+            tooltip: slots.tooltip({ class: [config.slots.tooltip, u.tooltip] })
+        }
+    })
+</script>
+
+<div bind:this={ref} class={classes.root} {...restProps}>
+    {#if resolvedName}
+        {#each asArray as v, i (i)}
+            <input type="hidden" name={resolvedName} value={v} />
+        {/each}
+    {/if}
+
+    <Slider.Root
+        type="multiple"
+        id={resolvedId}
+        value={asArray}
+        {min}
+        {max}
+        {step}
+        {disabled}
+        {orientation}
+        {autoSort}
+        {dir}
+        {thumbPositioning}
+        {trackPadding}
+        aria-describedby={ariaDescribedBy}
+        onValueChange={handleValueChange}
+        onValueCommit={handleValueCommit}
+        class={classes.base}
+    >
+        {#snippet children({ thumbItems })}
+            <span data-slider-track class={classes.track}>
+                <Slider.Range class={classes.range} />
+            </span>
+
+            {#each thumbItems as item (item.index)}
+                <Slider.Thumb index={item.index} class={classes.thumb} />
+                {#if tooltip}
+                    <Slider.ThumbLabel index={item.index} class={classes.tooltip}>
+                        {item.value}
+                    </Slider.ThumbLabel>
+                {/if}
+            {/each}
+        {/snippet}
+    </Slider.Root>
+</div>

package/dist/Slider/Slider.svelte.d.ts

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

package/dist/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.svelte';
+export type { SliderProps } from './slider.types.js';

package/dist/Slider/index.js

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