sv5ui 1.5.1 → 1.7.0

package/dist/Slideover/slideover.types.d.ts

@@ -42,10 +42,21 @@ export interface SlideoverProps extends RootProps, ContentProps {
      */
     overlay?: SlideoverVariantProps['overlay'];
     /**
-     * Animate the slideover on open and close.
-     * @default true
+     * Controls the entrance/exit animation.
+     * - `'none'` / `false`: no animation
+     * - `'fade'`: overlay + content fade
+     * - `'slide'` / `true`: overlay fade + content slide-in from the chosen side (default)
+     * - `'scale'`: overlay fade + content scale-in
+     * @default 'slide'
+     */
+    transition?: SlideoverVariantProps['transition'] | boolean;
+    /**
+     * Controls the panel dimension along its axis. For `side="left"` /
+     * `side="right"` this sets `max-width`; for `side="top"` / `side="bottom"`
+     * this sets `max-height`.
+     * @default 'md'
      */
-    transition?: SlideoverVariantProps['transition'];
+    size?: SlideoverVariantProps['size'];
     /**
      * Display the slideover with inset margins and rounded corners.
      * @default false

package/dist/Slideover/slideover.variants.d.ts

@@ -1,8 +1,17 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const slideoverVariants: import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
+            overlay: string;
+        };
+        scale: {
             overlay: string;
+            content: string;
         };
     };
     side: {
@@ -19,6 +28,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -43,9 +59,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, undefined, {
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -61,6 +86,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -85,9 +117,18 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
     close: string;
 }, import("tailwind-variants").TVReturnType<{
     transition: {
-        true: {
+        none: {};
+        fade: {
+            overlay: string;
+            content: string;
+        };
+        slide: {
             overlay: string;
         };
+        scale: {
+            overlay: string;
+            content: string;
+        };
     };
     side: {
         top: {
@@ -103,6 +144,13 @@ export declare const slideoverVariants: import("tailwind-variants").TVReturnType
             content: string;
         };
     };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
     inset: {
         true: {};
         false: {
@@ -131,8 +179,17 @@ export type SlideoverSlots = keyof ReturnType<typeof slideoverVariants>;
 export declare const slideoverDefaults: {
     defaultVariants: import("tailwind-variants").TVDefaultVariants<{
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
+                overlay: string;
+            };
+            scale: {
                 overlay: string;
+                content: string;
             };
         };
         side: {
@@ -149,6 +206,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {
@@ -173,9 +237,18 @@ export declare const slideoverDefaults: {
         close: string;
     }, {
         transition: {
-            true: {
+            none: {};
+            fade: {
+                overlay: string;
+                content: string;
+            };
+            slide: {
                 overlay: string;
             };
+            scale: {
+                overlay: string;
+                content: string;
+            };
         };
         side: {
             top: {
@@ -191,6 +264,13 @@ export declare const slideoverDefaults: {
                 content: string;
             };
         };
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+            xl: {};
+            full: {};
+        };
         inset: {
             true: {};
             false: {

package/dist/Slideover/slideover.variants.js

@@ -14,24 +14,40 @@ export const slideoverVariants = tv({
     },
     variants: {
         transition: {
-            true: {
+            none: {},
+            fade: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            slide: {
                 overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]'
+            },
+            scale: {
+                overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_150ms_ease-in]',
+                content: 'data-[state=open]:animate-[scale-in_200ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[scale-out_150ms_cubic-bezier(0.32,0.72,0,1)]'
             }
         },
         side: {
             top: {
-                content: 'fixed top-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed top-0 inset-x-0'
             },
             right: {
-                content: 'fixed right-0 inset-y-0 w-full max-w-md'
+                content: 'fixed right-0 inset-y-0 w-full'
             },
             bottom: {
-                content: 'fixed bottom-0 inset-x-0 max-h-[90dvh]'
+                content: 'fixed bottom-0 inset-x-0'
             },
             left: {
-                content: 'fixed left-0 inset-y-0 w-full max-w-md'
+                content: 'fixed left-0 inset-y-0 w-full'
             }
         },
+        size: {
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {},
+            full: {}
+        },
         inset: {
             true: {},
             false: {
@@ -45,39 +61,52 @@ export const slideoverVariants = tv({
         }
     },
     compoundVariants: [
+        // Side-specific slide animations
         {
-            transition: true,
+            transition: 'slide',
             side: 'top',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-top_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-top_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'right',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-right_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-right_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'bottom',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-bottom_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-bottom_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
         {
-            transition: true,
+            transition: 'slide',
             side: 'left',
             class: {
                 content: 'data-[state=open]:animate-[slide-in-full-left_200ms_ease-out,fade-in_200ms_ease-out] data-[state=closed]:animate-[slide-out-full-left_150ms_ease-in,fade-out_150ms_ease-in]'
             }
         },
+        // Sizes — left/right control width, top/bottom control height
+        { side: ['left', 'right'], size: 'sm', class: { content: 'max-w-sm' } },
+        { side: ['left', 'right'], size: 'md', class: { content: 'max-w-md' } },
+        { side: ['left', 'right'], size: 'lg', class: { content: 'max-w-lg' } },
+        { side: ['left', 'right'], size: 'xl', class: { content: 'max-w-xl' } },
+        { side: ['left', 'right'], size: 'full', class: { content: 'max-w-full' } },
+        { side: ['top', 'bottom'], size: 'sm', class: { content: 'max-h-[40dvh]' } },
+        { side: ['top', 'bottom'], size: 'md', class: { content: 'max-h-[60dvh]' } },
+        { side: ['top', 'bottom'], size: 'lg', class: { content: 'max-h-[75dvh]' } },
+        { side: ['top', 'bottom'], size: 'xl', class: { content: 'max-h-[90dvh]' } },
+        { side: ['top', 'bottom'], size: 'full', class: { content: 'max-h-full' } },
+        // Inset positioning + rounded corners + shadow ring per side
         {
             inset: true,
             side: 'top',
             class: {
-                content: 'top-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'top-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -91,7 +120,7 @@ export const slideoverVariants = tv({
             inset: true,
             side: 'bottom',
             class: {
-                content: 'bottom-4 inset-x-4 max-h-[calc(90dvh-2rem)] rounded-xl shadow-lg ring ring-outline-variant'
+                content: 'bottom-4 inset-x-4 rounded-xl shadow-lg ring ring-outline-variant'
             }
         },
         {
@@ -103,8 +132,9 @@ export const slideoverVariants = tv({
         }
     ],
     defaultVariants: {
-        transition: true,
+        transition: 'slide',
         side: 'right',
+        size: 'md',
         inset: false,
         overlay: true
     }

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/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';
@@ -45,6 +46,7 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
 export * from './hooks/index.js';
 export { defineConfig } from './config.js';
 export type { UIConfig } from './config.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';
@@ -46,6 +47,7 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
 // Composables
 export * from './hooks/index.js';
 // Configuration