sv5ui 1.5.1 → 1.6.0

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.1",
+    "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",