sv5ui 1.8.0 → 2.0.0

package/dist/Tabs/tabs.types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { TabsRootProps } from 'bits-ui';
 import type { TabsSlots, TabsVariantProps } from './tabs.variants.js';
 /**
  * Configuration for an individual tab item.
@@ -41,11 +42,6 @@ export interface TabsItem {
      * For complex content, use the `body` snippet instead.
      */
     content?: string;
-    /**
-     * Named slot identifier for custom content rendering.
-     * When provided, allows using dynamic snippet slots for this item.
-     */
-    slot?: string;
     /**
      * Additional CSS classes applied to this item's trigger element.
      */
@@ -86,7 +82,9 @@ export interface TabsSlotProps {
  *
  * @see https://bits-ui.com/docs/components/tabs
  */
-export interface TabsProps {
+export interface TabsProps extends Pick<TabsRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: unknown;
     /**
      * Bindable reference to the root DOM element.
      */

package/dist/hooks/HookContextProbe.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { useFormField } from './useFormField.svelte.js'
+
+    const ctx = useFormField()
+</script>
+
+<div data-name={ctx?.name ?? 'none'} data-has={String(!!ctx)}>probe</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HookContextProbe: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HookContextProbe = InstanceType<typeof HookContextProbe>;
+export default HookContextProbe;

package/dist/hooks/HookContextProvider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { setContext } from 'svelte'
+    import { FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js'
+    import HookContextProbe from './HookContextProbe.svelte'
+
+    setContext(FORM_FIELD_CONTEXT_KEY, { name: 'email', size: 'md', ariaId: 'ff' })
+</script>
+
+<HookContextProbe />

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HookContextProvider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HookContextProvider = InstanceType<typeof HookContextProvider>;
+export default HookContextProvider;

package/dist/hooks/HookEmitProbe.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { useFormFieldEmit } from './useFormField.svelte.js'
+
+    const emit = useFormFieldEmit()
+
+    function fireAll() {
+        emit.onBlur()
+        emit.onFocus()
+        emit.onChange()
+        emit.onInput()
+    }
+</script>
+
+<button data-testid="fire" onclick={fireAll}>fire</button>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HookEmitProbe: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HookEmitProbe = InstanceType<typeof HookEmitProbe>;
+export default HookEmitProbe;

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, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, 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, useFormFieldEmit, wireFormEvents, FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js';
+export { useFormField, useFormFieldEmit, 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

@@ -52,34 +52,3 @@ export declare function useFormFieldEmit(): {
     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

@@ -63,24 +63,3 @@ export function useFormFieldEmit() {
         }
     };
 }
-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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.8.0",
+    "version": "2.0.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",