sv5ui 1.2.0 → 1.4.0

package/dist/FileUpload/file-upload.variants.js

@@ -0,0 +1,224 @@
+import { tv } from 'tailwind-variants';
+export const fileUploadVariants = tv({
+    slots: {
+        root: 'relative flex flex-col',
+        base: [
+            'w-full bg-surface-container border border-outline-variant select-none',
+            'flex flex-col items-stretch justify-center rounded-lg',
+            'focus-visible:outline-2 focus-visible:outline-offset-2',
+            'transition-colors duration-200'
+        ],
+        wrapper: 'flex flex-col items-center justify-center text-center',
+        icon: 'shrink-0 text-on-surface-variant',
+        label: 'font-medium text-on-surface mt-2',
+        description: 'text-on-surface-variant mt-1',
+        actions: 'flex flex-wrap gap-1.5 shrink-0 mt-4',
+        files: '',
+        file: 'relative',
+        fileLeading: 'shrink-0',
+        fileWrapper: 'flex flex-col min-w-0',
+        fileName: 'text-on-surface truncate',
+        fileSize: 'text-on-surface-variant truncate',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    },
+    variants: {
+        color: {
+            primary: { base: 'focus-visible:outline-primary' },
+            secondary: { base: 'focus-visible:outline-secondary' },
+            tertiary: { base: 'focus-visible:outline-tertiary' },
+            success: { base: 'focus-visible:outline-success' },
+            warning: { base: 'focus-visible:outline-warning' },
+            error: { base: 'focus-visible:outline-error' },
+            info: { base: 'focus-visible:outline-info' },
+            surface: { base: 'focus-visible:outline-outline' }
+        },
+        variant: {
+            area: {
+                base: 'p-4 min-h-[120px]',
+                wrapper: 'py-6'
+            },
+            button: {}
+        },
+        size: {
+            xs: {
+                base: 'text-xs',
+                icon: 'size-5',
+                label: 'text-xs',
+                description: 'text-xs',
+                file: 'text-xs px-2 py-1 gap-1',
+                fileWrapper: 'flex-row gap-1'
+            },
+            sm: {
+                base: 'text-xs',
+                icon: 'size-6',
+                label: 'text-sm',
+                description: 'text-xs',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5',
+                fileWrapper: 'flex-row gap-1'
+            },
+            md: {
+                base: 'text-sm',
+                icon: 'size-8',
+                label: 'text-sm',
+                description: 'text-sm',
+                file: 'text-xs px-2.5 py-1.5 gap-1.5'
+            },
+            lg: {
+                base: 'text-sm',
+                icon: 'size-10',
+                label: 'text-base',
+                description: 'text-sm',
+                file: 'text-sm px-3 py-2 gap-2',
+                fileSize: 'text-xs'
+            },
+            xl: {
+                base: 'text-base',
+                icon: 'size-12',
+                label: 'text-base',
+                description: 'text-base',
+                file: 'text-sm px-3 py-2 gap-2'
+            }
+        },
+        layout: {
+            list: {
+                root: 'gap-2 items-start',
+                files: 'flex flex-col w-full gap-1.5',
+                file: 'min-w-0 flex items-center bg-surface-container border border-outline-variant rounded-md w-full',
+                fileTrailing: 'ms-auto'
+            },
+            grid: {
+                root: 'gap-2',
+                files: 'grid grid-cols-2 gap-3 w-full',
+                file: 'relative aspect-square rounded-lg border border-outline-variant',
+                fileWrapper: 'hidden',
+                fileLeading: 'size-full',
+                fileTrailing: ''
+            }
+        },
+        dropzone: {
+            true: {
+                base: 'border-dashed data-[dragging=true]:bg-surface-container-high data-[dragging=true]:border-solid'
+            }
+        },
+        interactive: {
+            true: {
+                base: 'cursor-pointer hover:bg-surface-container-high'
+            }
+        },
+        highlight: {
+            true: {}
+        },
+        multiple: {
+            true: {}
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75 hover:bg-surface-container'
+            }
+        }
+    },
+    compoundVariants: [
+        // Highlight: colored border
+        { color: 'primary', highlight: true, class: { base: 'border-primary' } },
+        { color: 'secondary', highlight: true, class: { base: 'border-secondary' } },
+        { color: 'tertiary', highlight: true, class: { base: 'border-tertiary' } },
+        { color: 'success', highlight: true, class: { base: 'border-success' } },
+        { color: 'warning', highlight: true, class: { base: 'border-warning' } },
+        { color: 'error', highlight: true, class: { base: 'border-error' } },
+        { color: 'info', highlight: true, class: { base: 'border-info' } },
+        { color: 'surface', highlight: true, class: { base: 'border-outline' } },
+        // Dragging: colored border per color
+        {
+            color: 'primary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-primary' }
+        },
+        {
+            color: 'secondary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-secondary' }
+        },
+        {
+            color: 'tertiary',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-tertiary' }
+        },
+        {
+            color: 'success',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-success' }
+        },
+        {
+            color: 'warning',
+            dropzone: true,
+            class: { base: 'data-[dragging=true]:border-warning' }
+        },
+        { color: 'error', dropzone: true, class: { base: 'data-[dragging=true]:border-error' } },
+        { color: 'info', dropzone: true, class: { base: 'data-[dragging=true]:border-info' } },
+        // Button variant size padding
+        { variant: 'button', size: 'xs', class: { base: 'p-1' } },
+        { variant: 'button', size: 'sm', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'md', class: { base: 'p-1.5' } },
+        { variant: 'button', size: 'lg', class: { base: 'p-2' } },
+        { variant: 'button', size: 'xl', class: { base: 'p-2' } },
+        // Grid + multiple: 3 cols on larger screens, remove button outside top-right corner
+        {
+            layout: 'grid',
+            multiple: true,
+            class: { files: 'sm:grid-cols-3', fileTrailing: 'absolute -top-1.5 -end-1.5' }
+        },
+        // Grid + single: file overlays the base, remove button top-right inside
+        // variant:'area' guard is required — without it, variant='button' would also get
+        // absolute inset-0 on the external file item, making it invisible.
+        {
+            layout: 'grid',
+            multiple: false,
+            variant: 'area',
+            class: {
+                base: 'relative overflow-hidden',
+                file: 'absolute inset-0 p-0 border-0 rounded-none aspect-auto',
+                fileTrailing: 'absolute top-2 end-2'
+            }
+        },
+        // List size trailing adjustments
+        { size: 'xs', layout: 'list', class: { fileTrailing: '-me-1' } },
+        { size: 'sm', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'md', layout: 'list', class: { fileTrailing: '-me-1.5' } },
+        { size: 'lg', layout: 'list', class: { fileTrailing: '-me-2' } },
+        { size: 'xl', layout: 'list', class: { fileTrailing: '-me-2' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    }
+});
+export const fileUploadDefaults = {
+    defaultVariants: {
+        color: 'primary',
+        variant: 'area',
+        size: 'md',
+        layout: 'list'
+    },
+    slots: {
+        root: '',
+        base: '',
+        wrapper: '',
+        icon: '',
+        label: '',
+        description: '',
+        actions: '',
+        files: '',
+        file: '',
+        fileLeading: '',
+        fileWrapper: '',
+        fileName: '',
+        fileSize: '',
+        fileTrailing: '',
+        previewContent: '',
+        previewBody: ''
+    }
+};

package/dist/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileUpload } from './FileUpload.svelte';
+export type { FileUploadProps } from './file-upload.types.js';

package/dist/FileUpload/index.js

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

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 {};