sv5ui 1.1.3 → 1.3.0

package/dist/Pagination/pagination.variants.js

@@ -1,12 +1,57 @@
 import { tv } from 'tailwind-variants';
-const navButton = [
-    'inline-flex items-center justify-center rounded-md',
-    'cursor-pointer select-none transition-colors',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-    'hover:bg-surface-container-high text-on-surface-variant'
-];
 const navIcon = 'shrink-0';
+export const activeVariantColorClasses = {
+    solid: {
+        primary: 'data-[selected]:bg-primary data-[selected]:text-on-primary data-[selected]:hover:bg-primary/90',
+        secondary: 'data-[selected]:bg-secondary data-[selected]:text-on-secondary data-[selected]:hover:bg-secondary/90',
+        tertiary: 'data-[selected]:bg-tertiary data-[selected]:text-on-tertiary data-[selected]:hover:bg-tertiary/90',
+        success: 'data-[selected]:bg-success data-[selected]:text-on-success data-[selected]:hover:bg-success/90',
+        warning: 'data-[selected]:bg-warning data-[selected]:text-on-warning data-[selected]:hover:bg-warning/90',
+        error: 'data-[selected]:bg-error data-[selected]:text-on-error data-[selected]:hover:bg-error/90',
+        info: 'data-[selected]:bg-info data-[selected]:text-on-info data-[selected]:hover:bg-info/90',
+        surface: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
+    },
+    outline: {
+        primary: 'data-[selected]:ring-2 data-[selected]:ring-primary data-[selected]:text-primary data-[selected]:hover:bg-primary/10',
+        secondary: 'data-[selected]:ring-2 data-[selected]:ring-secondary data-[selected]:text-secondary data-[selected]:hover:bg-secondary/10',
+        tertiary: 'data-[selected]:ring-2 data-[selected]:ring-tertiary data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary/10',
+        success: 'data-[selected]:ring-2 data-[selected]:ring-success data-[selected]:text-success data-[selected]:hover:bg-success/10',
+        warning: 'data-[selected]:ring-2 data-[selected]:ring-warning data-[selected]:text-warning data-[selected]:hover:bg-warning/10',
+        error: 'data-[selected]:ring-2 data-[selected]:ring-error data-[selected]:text-error data-[selected]:hover:bg-error/10',
+        info: 'data-[selected]:ring-2 data-[selected]:ring-info data-[selected]:text-info data-[selected]:hover:bg-info/10',
+        surface: 'data-[selected]:ring-2 data-[selected]:ring-outline-variant data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest'
+    },
+    soft: {
+        primary: 'data-[selected]:bg-primary-container data-[selected]:text-on-primary-container data-[selected]:hover:bg-primary-container/90',
+        secondary: 'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container data-[selected]:hover:bg-secondary-container/90',
+        tertiary: 'data-[selected]:bg-tertiary-container data-[selected]:text-on-tertiary-container data-[selected]:hover:bg-tertiary-container/90',
+        success: 'data-[selected]:bg-success-container data-[selected]:text-on-success-container data-[selected]:hover:bg-success-container/90',
+        warning: 'data-[selected]:bg-warning-container data-[selected]:text-on-warning-container data-[selected]:hover:bg-warning-container/90',
+        error: 'data-[selected]:bg-error-container data-[selected]:text-on-error-container data-[selected]:hover:bg-error-container/90',
+        info: 'data-[selected]:bg-info-container data-[selected]:text-on-info-container data-[selected]:hover:bg-info-container/90',
+        surface: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
+    },
+    subtle: {
+        primary: 'data-[selected]:bg-primary-container/50 data-[selected]:text-primary data-[selected]:hover:bg-primary-container/70',
+        secondary: 'data-[selected]:bg-secondary-container/50 data-[selected]:text-secondary data-[selected]:hover:bg-secondary-container/70',
+        tertiary: 'data-[selected]:bg-tertiary-container/50 data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary-container/70',
+        success: 'data-[selected]:bg-success-container/50 data-[selected]:text-success data-[selected]:hover:bg-success-container/70',
+        warning: 'data-[selected]:bg-warning-container/50 data-[selected]:text-warning data-[selected]:hover:bg-warning-container/70',
+        error: 'data-[selected]:bg-error-container/50 data-[selected]:text-error data-[selected]:hover:bg-error-container/70',
+        info: 'data-[selected]:bg-info-container/50 data-[selected]:text-info data-[selected]:hover:bg-info-container/70',
+        surface: 'data-[selected]:bg-surface-container-highest/50 data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/70'
+    },
+    ghost: {
+        primary: 'data-[selected]:text-primary data-[selected]:hover:bg-primary/10',
+        secondary: 'data-[selected]:text-secondary data-[selected]:hover:bg-secondary/10',
+        tertiary: 'data-[selected]:text-tertiary data-[selected]:hover:bg-tertiary/10',
+        success: 'data-[selected]:text-success data-[selected]:hover:bg-success/10',
+        warning: 'data-[selected]:text-warning data-[selected]:hover:bg-warning/10',
+        error: 'data-[selected]:text-error data-[selected]:hover:bg-error/10',
+        info: 'data-[selected]:text-info data-[selected]:hover:bg-info/10',
+        surface: 'data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest'
+    }
+};
 export const paginationVariants = tv({
     slots: {
         root: '',
@@ -19,10 +64,10 @@ export const paginationVariants = tv({
             'hover:bg-surface-container-high text-on-surface'
         ],
         ellipsis: 'inline-flex items-center justify-center pointer-events-none text-on-surface-variant',
-        first: navButton,
-        prev: navButton,
-        next: navButton,
-        last: navButton,
+        first: '',
+        prev: '',
+        next: '',
+        last: '',
         ellipsisIcon: navIcon,
         firstIcon: navIcon,
         prevIcon: navIcon,
@@ -30,41 +75,11 @@ export const paginationVariants = tv({
         lastIcon: navIcon
     },
     variants: {
-        activeColor: {
-            primary: {
-                item: 'data-[selected]:bg-primary data-[selected]:text-on-primary data-[selected]:hover:bg-primary/90'
-            },
-            secondary: {
-                item: 'data-[selected]:bg-secondary data-[selected]:text-on-secondary data-[selected]:hover:bg-secondary/90'
-            },
-            tertiary: {
-                item: 'data-[selected]:bg-tertiary data-[selected]:text-on-tertiary data-[selected]:hover:bg-tertiary/90'
-            },
-            success: {
-                item: 'data-[selected]:bg-success data-[selected]:text-on-success data-[selected]:hover:bg-success/90'
-            },
-            warning: {
-                item: 'data-[selected]:bg-warning data-[selected]:text-on-warning data-[selected]:hover:bg-warning/90'
-            },
-            error: {
-                item: 'data-[selected]:bg-error data-[selected]:text-on-error data-[selected]:hover:bg-error/90'
-            },
-            info: {
-                item: 'data-[selected]:bg-info data-[selected]:text-on-info data-[selected]:hover:bg-info/90'
-            },
-            surface: {
-                item: 'data-[selected]:bg-surface-container-highest data-[selected]:text-on-surface data-[selected]:hover:bg-surface-container-highest/90'
-            }
-        },
         size: {
             xs: {
                 list: 'gap-0.5',
                 item: 'size-7 text-xs',
                 ellipsis: 'size-7 text-xs',
-                first: 'size-7',
-                prev: 'size-7',
-                next: 'size-7',
-                last: 'size-7',
                 ellipsisIcon: 'size-3',
                 firstIcon: 'size-3',
                 prevIcon: 'size-3',
@@ -75,10 +90,6 @@ export const paginationVariants = tv({
                 list: 'gap-0.5',
                 item: 'size-8 text-xs',
                 ellipsis: 'size-8 text-xs',
-                first: 'size-8',
-                prev: 'size-8',
-                next: 'size-8',
-                last: 'size-8',
                 ellipsisIcon: 'size-3.5',
                 firstIcon: 'size-3.5',
                 prevIcon: 'size-3.5',
@@ -89,10 +100,6 @@ export const paginationVariants = tv({
                 list: 'gap-1',
                 item: 'size-9 text-sm',
                 ellipsis: 'size-9 text-sm',
-                first: 'size-9',
-                prev: 'size-9',
-                next: 'size-9',
-                last: 'size-9',
                 ellipsisIcon: 'size-4',
                 firstIcon: 'size-4',
                 prevIcon: 'size-4',
@@ -103,10 +110,6 @@ export const paginationVariants = tv({
                 list: 'gap-1',
                 item: 'size-10 text-sm',
                 ellipsis: 'size-10 text-sm',
-                first: 'size-10',
-                prev: 'size-10',
-                next: 'size-10',
-                last: 'size-10',
                 ellipsisIcon: 'size-5',
                 firstIcon: 'size-5',
                 prevIcon: 'size-5',
@@ -117,10 +120,6 @@ export const paginationVariants = tv({
                 list: 'gap-1.5',
                 item: 'size-11 text-base',
                 ellipsis: 'size-11 text-base',
-                first: 'size-11',
-                prev: 'size-11',
-                next: 'size-11',
-                last: 'size-11',
                 ellipsisIcon: 'size-5',
                 firstIcon: 'size-5',
                 prevIcon: 'size-5',
@@ -135,11 +134,16 @@ export const paginationVariants = tv({
         }
     },
     defaultVariants: {
-        activeColor: 'primary',
         size: 'md'
     }
 });
 export const paginationDefaults = {
-    defaultVariants: paginationVariants.defaultVariants,
+    defaultVariants: {
+        ...paginationVariants.defaultVariants,
+        variant: 'ghost',
+        color: 'surface',
+        activeColor: 'primary',
+        activeVariant: 'solid'
+    },
     slots: {}
 };

package/dist/PinInput/PinInput.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+    import type { PinInputProps } from './pin-input.types.js'
+
+    export type Props = PinInputProps
+</script>
+
+<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'
+
+    const config = getComponentConfig('pinInput', pinInputDefaults)
+
+    let {
+        ref = $bindable(null),
+        defaultValue = '',
+        value = $bindable(defaultValue),
+        onValueChange,
+        onComplete,
+        length = 5,
+        type = 'text',
+        mask = false,
+        otp = false,
+        disabled = false,
+        required,
+        textalign,
+        pasteTransformer,
+        pushPasswordManagerStrategy,
+        inputId,
+        name,
+        placeholder = '○',
+        autofocus = false,
+        autofocusDelay = 0,
+        highlight = false,
+        fixed = false,
+        color = config.defaultVariants.color,
+        size,
+        variant = config.defaultVariants.variant,
+        class: className,
+        ui,
+        ...restProps
+    }: Props = $props()
+
+    const formFieldContext = getContext<
+        | {
+              name?: string
+              size: NonNullable<FormFieldProps['size']>
+              error?: string | boolean
+              ariaId: string
+          }
+        | undefined
+    >('formField')
+
+    const autoInputId = useId()
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedInputId = $derived(inputId ?? formFieldContext?.ariaId ?? autoInputId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const resolvedHighlight = $derived(hasError || highlight)
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    const resolvedPasteTransformer = $derived(
+        pasteTransformer ??
+            (type === 'number' ? (text: string) => text.replace(/\D/g, '') : undefined)
+    )
+
+    function handleValueChange(v: string) {
+        const filtered = type === 'number' ? v.replace(/\D/g, '') : v
+        value = filtered
+        onValueChange?.(filtered)
+    }
+
+    const slots = $derived(
+        pinInputVariants({
+            variant,
+            color: resolvedColor,
+            size: resolvedSize,
+            highlight: resolvedHighlight,
+            fixed,
+            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] })
+        }
+    })
+
+    $effect(() => {
+        if (!autofocus) return
+        const input = ref?.querySelector('[data-pin-input-input]') as HTMLInputElement | null
+        if (!input) return
+        const timer = setTimeout(() => input.focus(), autofocusDelay)
+        return () => clearTimeout(timer)
+    })
+</script>
+
+<div class="contents" {...restProps}>
+    {#if resolvedName}
+        <input type="hidden" name={resolvedName} {value} />
+    {/if}
+    <PinInput.Root
+        bind:ref
+        {value}
+        maxlength={length}
+        {disabled}
+        {textalign}
+        {onComplete}
+        pasteTransformer={resolvedPasteTransformer}
+        {pushPasswordManagerStrategy}
+        inputId={resolvedInputId}
+        autocomplete={otp ? 'one-time-code' : undefined}
+        inputmode={type === 'number' ? 'numeric' : 'text'}
+        {required}
+        aria-describedby={ariaDescribedBy}
+        onValueChange={handleValueChange}
+        class={classes.root}
+    >
+        {#snippet children({ cells })}
+            {#each cells as cell, i (i)}
+                <PinInput.Cell {cell} class={classes.base}>
+                    {#if mask && cell.char}
+                        <span class="block size-2 rounded-full bg-current"></span>
+                    {:else if cell.char}
+                        {cell.char}
+                    {:else if cell.hasFakeCaret}
+                        <span class="pointer-events-none absolute animate-pulse select-none">|</span
+                        >
+                    {:else}
+                        <span class="text-on-surface/30">{placeholder}</span>
+                    {/if}
+                </PinInput.Cell>
+            {/each}
+        {/snippet}
+    </PinInput.Root>
+</div>

package/dist/PinInput/PinInput.svelte.d.ts

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

package/dist/PinInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.svelte';
+export type { PinInputProps } from './pin-input.types.js';

package/dist/PinInput/index.js

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

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

@@ -0,0 +1,99 @@
+import type { PinInput as PinInputPrimitive } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { PinInputVariantProps, PinInputSlots } from './pin-input.variants.js';
+export type PinInputProps = Pick<PinInputPrimitive.RootProps, 'disabled' | 'textalign' | 'onComplete' | 'pasteTransformer' | 'pushPasswordManagerStrategy' | 'inputId'> & Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The current value. Supports two-way binding with `bind:value`.
+     * @default ''
+     */
+    value?: string;
+    /**
+     * The initial value when uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The name attribute for the hidden input (used in form submission).
+     */
+    name?: string;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Number of cells (characters).
+     * @default 5
+     */
+    length?: number;
+    /**
+     * Input type. Use 'number' to restrict to digits only.
+     * @default 'text'
+     */
+    type?: 'text' | 'number';
+    /**
+     * Mask the input, showing ● instead of typed characters.
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Enable OTP mode (sets autocomplete="one-time-code").
+     * @default false
+     */
+    otp?: boolean;
+    /**
+     * Placeholder character displayed in each empty cell.
+     * @default '○'
+     */
+    placeholder?: string;
+    /**
+     * Automatically focus the input on mount.
+     * @default false
+     */
+    autofocus?: boolean;
+    /**
+     * Delay in milliseconds before autofocusing.
+     * @default 0
+     */
+    autofocusDelay?: number;
+    /**
+     * Highlight all cells with the active color ring (e.g. for error state).
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * Prevent responsive text size changes on mobile.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Color scheme of the input cells.
+     * @default 'primary'
+     */
+    color?: NonNullable<PinInputVariantProps['color']>;
+    /**
+     * Size of each cell.
+     * @default 'md'
+     */
+    size?: NonNullable<PinInputVariantProps['size']>;
+    /**
+     * Visual style of the input cells.
+     * @default 'outline'
+     */
+    variant?: NonNullable<PinInputVariantProps['variant']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific slots.
+     */
+    ui?: Partial<Record<PinInputSlots, ClassNameValue>>;
+};

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

@@ -0,0 +1 @@
+export {};