sv5ui 1.5.0 → 1.6.0

package/dist/PinInput/PinInput.svelte

@@ -8,7 +8,7 @@
     import { PinInput, useId } from 'bits-ui'
     import { pinInputVariants, pinInputDefaults } from './pin-input.variants.js'
     import { getComponentConfig } from '../config.js'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('pinInput', pinInputDefaults)
 
@@ -43,6 +43,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const autoInputId = useId()
     const hasError = $derived(
@@ -69,9 +70,15 @@
     function handleValueChange(v: string) {
         const filtered = type === 'number' ? v.replace(/\D/g, '') : v
         value = filtered
+        emit.onInput()
         onValueChange?.(filtered)
     }
 
+    function handleComplete(v: string) {
+        emit.onChange()
+        onComplete?.(v)
+    }
+
     const slots = $derived(
         pinInputVariants({
             variant,
@@ -110,7 +117,7 @@
         maxlength={length}
         {disabled}
         {textalign}
-        {onComplete}
+        onComplete={handleComplete}
         pasteTransformer={resolvedPasteTransformer}
         {pushPasswordManagerStrategy}
         inputId={resolvedInputId}

package/dist/RadioGroup/RadioGroup.svelte

@@ -9,7 +9,7 @@
     import { radioGroupVariants, radioGroupDefaults } from './radio-group.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
     import type { RadioGroupItem } from './radio-group.types.js'
 
     const config = getComponentConfig('radioGroup', radioGroupDefaults)
@@ -43,6 +43,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -159,10 +160,23 @@
     {/if}
 {/snippet}
 
-<div {...restProps} bind:this={ref} class={layoutClasses.root}>
+<div
+    {...restProps}
+    bind:this={ref}
+    class={layoutClasses.root}
+    onfocusin={() => emit.onFocus()}
+    onfocusout={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+            emit.onBlur()
+        }
+    }}
+>
     <RadioGroup.Root
         bind:value
-        {onValueChange}
+        onValueChange={(val) => {
+            emit.onChange()
+            onValueChange?.(val)
+        }}
         id={resolvedId}
         name={resolvedName}
         disabled={isDisabled}

package/dist/Select/Select.svelte

@@ -16,7 +16,7 @@
     import Icon from '../Icon/Icon.svelte'
     import Avatar from '../Avatar/Avatar.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('select', selectDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -69,6 +69,7 @@
 
     // ---- Form context ----
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const fieldGroupContext = getContext<
         | {
@@ -317,12 +318,22 @@
 <Select.Root
     type="single"
     bind:open
-    onOpenChange={(val) => onOpenChange?.(val)}
+    onOpenChange={(val) => {
+        if (val) {
+            emit.onFocus()
+        } else {
+            emit.onBlur()
+        }
+        onOpenChange?.(val)
+    }}
     {disabled}
     {required}
     items={bitsItems}
     {value}
-    onValueChange={(val) => (value = val)}
+    onValueChange={(val) => {
+        value = val
+        emit.onChange()
+    }}
 >
     <div bind:this={ref} class={rootClass}>
         {#if leadingSlot}

package/dist/SelectMenu/SelectMenu.svelte

@@ -21,7 +21,7 @@
     import Avatar from '../Avatar/Avatar.svelte'
     import Input from '../Input/Input.svelte'
     import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('selectMenu', selectMenuDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -78,6 +78,7 @@
 
     // ---- Form context ----
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const fieldGroupContext = getContext<
         | {
@@ -257,6 +258,9 @@
     function onUpdateOpen(val: boolean) {
         if (!val) {
             searchTerm = ''
+            emit.onBlur()
+        } else {
+            emit.onFocus()
         }
         onOpenChange?.(val)
     }
@@ -366,7 +370,10 @@
     {disabled}
     {required}
     {value}
-    onValueChange={(val) => (value = val)}
+    onValueChange={(val) => {
+        value = val
+        emit.onChange()
+    }}
     name={resolvedName}
 >
     <div bind:this={ref} class={rootClass}>

package/dist/Slider/Slider.svelte

@@ -8,7 +8,7 @@
     import { Slider, useId } from 'bits-ui'
     import { sliderVariants, sliderDefaults } from './slider.variants.js'
     import { getComponentConfig } from '../config.js'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('slider', sliderDefaults)
 
@@ -37,6 +37,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const autoId = useId()
     const hasError = $derived(
@@ -59,10 +60,12 @@
 
     function handleValueChange(v: number[]) {
         value = isMultiple ? v : (v[0] ?? min)
+        emit.onInput()
         onValueChange?.(value)
     }
 
     function handleValueCommit(v: number[]) {
+        emit.onChange()
         onValueCommit?.(isMultiple ? v : (v[0] ?? min))
     }
 

package/dist/Switch/Switch.svelte

@@ -9,7 +9,7 @@
     import { switchVariants, switchDefaults } from './switch.variants.js'
     import { getComponentConfig, iconsDefaults } from '../config.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('switch', switchDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -39,6 +39,7 @@
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
 
     const hasError = $derived(
         formFieldContext?.error !== undefined && formFieldContext?.error !== false
@@ -108,7 +109,12 @@
     <div class={classes.container}>
         <Switch.Root
             bind:checked
-            {onCheckedChange}
+            onCheckedChange={(val) => {
+                emit.onChange()
+                onCheckedChange?.(val)
+            }}
+            onblur={() => emit.onBlur()}
+            onfocus={() => emit.onFocus()}
             id={resolvedId}
             name={resolvedName}
             {value}

package/dist/Table/Table.svelte

@@ -89,6 +89,7 @@
         striped = false,
         hoverable = config.defaultVariants.hoverable ?? true,
         sticky = false,
+        action,
 
         // Callbacks
         onRowClick,
@@ -112,6 +113,16 @@
         ...restProps
     }: TableProps<T> = $props()
 
+    // =========================================================================
+    // Apply Svelte action on root element
+    // =========================================================================
+    $effect(() => {
+        if (ref && action) {
+            const result = action(ref)
+            return () => result?.destroy?.()
+        }
+    })
+
     // =========================================================================
     // Change notifications — skip initial mount, fire only on subsequent changes
     // =========================================================================

package/dist/Table/table.types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { Action } from 'svelte/action';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { TableVariantProps, TableSlots } from './table.variants.js';
@@ -167,6 +168,8 @@ export interface TableProps<T extends Record<string, any> = Record<string, any>>
     hoverable?: boolean;
     /** Sticky header/footer. @default false */
     sticky?: boolean | 'header' | 'footer';
+    /** Svelte action to apply on the root scroll container (e.g. infinite scroll). */
+    action?: Action<HTMLElement>;
     /** Callback fired when a row is clicked. */
     onRowClick?: (row: T, index: number, event: MouseEvent) => void;
     /** Callback fired when pointer enters/leaves a row. Passes `null` on leave. */

package/dist/Table/table.variants.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const tableVariants = tv({
     slots: {
-        root: 'relative w-full overflow-x-auto rounded-xl border border-outline-variant/50 bg-surface [contain:inline-size]',
+        root: 'relative w-full overflow-x-auto scrollbar-thin rounded-xl border border-outline-variant/50 bg-surface [contain:inline-size]',
         base: 'min-w-full',
         caption: 'sr-only',
         thead: 'relative bg-surface-container-low',
@@ -40,14 +40,14 @@ export const tableVariants = tv({
         },
         sticky: {
             true: {
-                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10',
-                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10'
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl',
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
             },
             header: {
-                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10'
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl'
             },
             footer: {
-                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10'
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
             }
         },
         striped: {

package/dist/Textarea/Textarea.svelte

@@ -13,7 +13,7 @@
         type FieldGroupVariantProps
     } from '../FieldGroup/field-group.variants.js'
     import Icon from '../Icon/Icon.svelte'
-    import { useFormField } from '../hooks/useFormField.svelte.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
 
     const config = getComponentConfig('textarea', textareaDefaults)
     const icons = getComponentConfig('icons', iconsDefaults)
@@ -41,10 +41,32 @@
         rows = 3,
         maxrows = 0,
         class: className,
+        onblur,
+        oninput,
+        onchange,
+        onfocus,
         ...restProps
     }: Props = $props()
 
     const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
+    function handleBlur(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
+        emit.onBlur()
+        onblur?.(event)
+    }
+    function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }) {
+        emit.onInput()
+        oninput?.(event)
+    }
+    function handleChange(event: Event & { currentTarget: HTMLTextAreaElement }) {
+        emit.onChange()
+        onchange?.(event)
+    }
+    function handleFocus(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
+        emit.onFocus()
+        onfocus?.(event)
+    }
 
     const fieldGroupContext = getContext<
         | {
@@ -175,6 +197,10 @@
         aria-describedby={ariaDescribedBy}
         aria-invalid={resolvedHighlight ? true : undefined}
         class={classes.base}
+        onblur={handleBlur}
+        oninput={handleInput}
+        onchange={handleChange}
+        onfocus={handleFocus}
     ></textarea>
 
     {#if trailingSlot}

package/dist/hooks/index.d.ts

@@ -2,7 +2,7 @@ export { useMediaQuery } from './useMediaQuery.svelte.js';
 export type { UseMediaQueryOptions } from './useMediaQuery.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
 export type { UseClipboardOptions } from './useClipboard.svelte.js';
-export { useFormField } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
 export type { FormFieldContext } from './useFormField.svelte.js';
 export { useClickOutside } from './useClickOutside.svelte.js';
 export type { UseClickOutsideOptions } from './useClickOutside.svelte.js';

package/dist/hooks/index.js

@@ -1,6 +1,6 @@
 export { useMediaQuery } from './useMediaQuery.svelte.js';
 export { useClipboard } from './useClipboard.svelte.js';
-export { useFormField } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
 export { useClickOutside } from './useClickOutside.svelte.js';
 export { useInfiniteScroll } from './useInfiniteScroll.svelte.js';
 export { useEscapeKeydown } from './useEscapeKeydown.svelte.js';

package/dist/hooks/useFormField.svelte.d.ts

@@ -1,9 +1,21 @@
 import type { FormFieldProps } from '../FormField/form-field.types.js';
+/**
+ * Symbol key for the FormField context. Using a Symbol instead of a string
+ * prevents collisions with unrelated `getContext('formField')` calls from
+ * user code or other libraries.
+ */
+export declare const FORM_FIELD_CONTEXT_KEY: unique symbol;
 export interface FormFieldContext {
     name?: string;
     size: NonNullable<FormFieldProps['size']>;
     error?: string | boolean;
     ariaId: string;
+    /** Whether input events should validate this field before first blur. */
+    eagerValidation?: boolean;
+    /** Per-field override for the input debounce delay. */
+    validateOnInputDelay?: number;
+    /** Regex pattern used to match form errors for this field (in addition to exact name). */
+    errorPattern?: RegExp;
 }
 /**
  * Access the nearest FormField context. Returns `undefined` when used outside a FormField.
@@ -19,3 +31,55 @@ export interface FormFieldContext {
  * ```
  */
 export declare function useFormField(): FormFieldContext | undefined;
+/**
+ * Event emitter helpers for inputs nested inside a `<FormField>` within a `<Form>`.
+ * Each returned function is a safe no-op when used outside a Form, so inputs can
+ * unconditionally wire them to their native events.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFormFieldEmit } from 'sv5ui'
+ *   const emit = useFormFieldEmit()
+ * </script>
+ *
+ * <input onblur={emit.onBlur} oninput={emit.onInput} onchange={emit.onChange} onfocus={emit.onFocus} />
+ * ```
+ */
+export declare function useFormFieldEmit(): {
+    onBlur(): void;
+    onFocus(): void;
+    onChange(): void;
+    onInput(): void;
+};
+/**
+ * Wires native DOM input events to the parent Form's event emitters while
+ * preserving any user-supplied handlers. Reduces boilerplate in wrapper
+ * components (Input, Textarea, etc.) from ~20 lines of handler definitions
+ * to 4 lines:
+ *
+ * ```svelte
+ * <script>
+ *   const events = wireFormEvents({ onblur, oninput, onchange, onfocus })
+ * </script>
+ *
+ * <input {...events} />
+ * ```
+ *
+ * Each handler fires the Form emitter first, then calls the user handler
+ * (if any) with the original event.
+ */
+type InputEventHandler<E extends Event = Event> = (event: E) => void;
+type FocusEventHandler = InputEventHandler<FocusEvent>;
+export declare function wireFormEvents(userHandlers: {
+    onblur?: FocusEventHandler | null;
+    oninput?: InputEventHandler | null;
+    onchange?: InputEventHandler | null;
+    onfocus?: FocusEventHandler | null;
+}): {
+    onblur(event: FocusEvent): void;
+    oninput(event: Event): void;
+    onchange(event: Event): void;
+    onfocus(event: FocusEvent): void;
+};
+export {};

package/dist/hooks/useFormField.svelte.js

@@ -1,4 +1,11 @@
 import { getContext } from 'svelte';
+import { getFormContext } from '../Form/form.context.svelte.js';
+/**
+ * Symbol key for the FormField context. Using a Symbol instead of a string
+ * prevents collisions with unrelated `getContext('formField')` calls from
+ * user code or other libraries.
+ */
+export const FORM_FIELD_CONTEXT_KEY = Symbol('sv5ui:form-field');
 /**
  * Access the nearest FormField context. Returns `undefined` when used outside a FormField.
  *
@@ -13,5 +20,67 @@ import { getContext } from 'svelte';
  * ```
  */
 export function useFormField() {
-    return getContext('formField');
+    return getContext(FORM_FIELD_CONTEXT_KEY);
+}
+/**
+ * Event emitter helpers for inputs nested inside a `<FormField>` within a `<Form>`.
+ * Each returned function is a safe no-op when used outside a Form, so inputs can
+ * unconditionally wire them to their native events.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useFormFieldEmit } from 'sv5ui'
+ *   const emit = useFormFieldEmit()
+ * </script>
+ *
+ * <input onblur={emit.onBlur} oninput={emit.onInput} onchange={emit.onChange} onfocus={emit.onFocus} />
+ * ```
+ */
+export function useFormFieldEmit() {
+    const fieldCtx = getContext(FORM_FIELD_CONTEXT_KEY);
+    const formCtx = getFormContext();
+    return {
+        onBlur() {
+            const n = fieldCtx?.name;
+            if (n)
+                formCtx?.onBlur(n);
+        },
+        onFocus() {
+            const n = fieldCtx?.name;
+            if (n)
+                formCtx?.onFocus(n);
+        },
+        onChange() {
+            const n = fieldCtx?.name;
+            if (n)
+                formCtx?.onChange(n);
+        },
+        onInput() {
+            const n = fieldCtx?.name;
+            if (n)
+                formCtx?.onInput(n, fieldCtx?.eagerValidation);
+        }
+    };
+}
+export function wireFormEvents(userHandlers) {
+    const emit = useFormFieldEmit();
+    return {
+        onblur(event) {
+            emit.onBlur();
+            userHandlers.onblur?.(event);
+        },
+        oninput(event) {
+            emit.onInput();
+            userHandlers.oninput?.(event);
+        },
+        onchange(event) {
+            emit.onChange();
+            userHandlers.onchange?.(event);
+        },
+        onfocus(event) {
+            emit.onFocus();
+            userHandlers.onfocus?.(event);
+        }
+    };
 }

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export * from './Tabs/index.js';
 export * from './Pagination/index.js';
 export * from './FieldGroup/index.js';
 export * from './FormField/index.js';
+export * from './Form/index.js';
 export * from './Input/index.js';
 export * from './Textarea/index.js';
 export * from './Select/index.js';

package/dist/index.js

@@ -32,6 +32,7 @@ export * from './Tabs/index.js';
 export * from './Pagination/index.js';
 export * from './FieldGroup/index.js';
 export * from './FormField/index.js';
+export * from './Form/index.js';
 export * from './Input/index.js';
 export * from './Textarea/index.js';
 export * from './Select/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",
@@ -48,9 +48,27 @@
         }
     },
     "peerDependencies": {
+        "joi": "^17.0.0 || ^18.0.0",
         "mode-watcher": "^1.0.0",
         "svelte": "^5.0.0",
-        "tailwindcss": "^4.0.0"
+        "tailwindcss": "^4.0.0",
+        "valibot": "^1.0.0",
+        "yup": "^1.7.0",
+        "zod": "^3.24.0 || ^4.0.0"
+    },
+    "peerDependenciesMeta": {
+        "joi": {
+            "optional": true
+        },
+        "valibot": {
+            "optional": true
+        },
+        "yup": {
+            "optional": true
+        },
+        "zod": {
+            "optional": true
+        }
     },
     "devDependencies": {
         "@eslint/compat": "^1.4.0",
@@ -66,6 +84,7 @@
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "^3.13.1",
         "globals": "^16.5.0",
+        "joi": "^18.1.2",
         "playwright": "^1.57.0",
         "prettier": "^3.7.4",
         "prettier-plugin-svelte": "^3.4.0",
@@ -76,9 +95,12 @@
         "tailwindcss": "^4.1.17",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.48.1",
+        "valibot": "^1.3.1",
         "vite": "^7.2.6",
         "vitest": "^4.0.15",
-        "vitest-browser-svelte": "^2.0.1"
+        "vitest-browser-svelte": "^2.0.1",
+        "yup": "^1.7.1",
+        "zod": "^4.3.6"
     },
     "keywords": [
         "svelte",
@@ -98,6 +120,7 @@
     "dependencies": {
         "@iconify/svelte": "^5.2.1",
         "@internationalized/date": "^3.11.0",
+        "@standard-schema/spec": "^1.1.0",
         "bits-ui": "^2.15.4",
         "svelte-sonner": "^1.1.0",
         "tailwind-merge": "^3.4.0",