svelora 2.1.0

package/dist/User/user.variants.d.ts

@@ -0,0 +1,368 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const userVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            wrapper: string;
+        };
+        vertical: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    name: string;
+    description: string;
+    avatar: string;
+}, undefined, {
+    size: {
+        '3xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            wrapper: string;
+        };
+        vertical: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    name: string;
+    description: string;
+    avatar: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        xs: {
+            root: string;
+            wrapper: string;
+            name: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            root: string;
+            name: string;
+            description: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            wrapper: string;
+        };
+        vertical: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    clickable: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    name: string;
+    description: string;
+    avatar: string;
+}, undefined, unknown, unknown, undefined>>;
+export type UserVariantProps = VariantProps<typeof userVariants>;
+export type UserSlots = keyof ReturnType<typeof userVariants>;
+export declare const userDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            '3xs': {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            '2xs': {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            xs: {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            sm: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            md: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            lg: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            xl: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            '2xl': {
+                root: string;
+                name: string;
+                description: string;
+            };
+            '3xl': {
+                root: string;
+                name: string;
+                description: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                wrapper: string;
+            };
+            vertical: {
+                root: string;
+                wrapper: string;
+            };
+        };
+        clickable: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        name: string;
+        description: string;
+        avatar: string;
+    }, {
+        size: {
+            '3xs': {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            '2xs': {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            xs: {
+                root: string;
+                wrapper: string;
+                name: string;
+                description: string;
+            };
+            sm: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            md: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            lg: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            xl: {
+                root: string;
+                name: string;
+                description: string;
+            };
+            '2xl': {
+                root: string;
+                name: string;
+                description: string;
+            };
+            '3xl': {
+                root: string;
+                name: string;
+                description: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                wrapper: string;
+            };
+            vertical: {
+                root: string;
+                wrapper: string;
+            };
+        };
+        clickable: {
+            true: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        name: string;
+        description: string;
+        avatar: string;
+    }>;
+    slots: Partial<Record<UserSlots, string>>;
+};

package/dist/User/user.variants.js

@@ -0,0 +1,85 @@
+import { tv } from 'tailwind-variants';
+export const userVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center',
+        wrapper: 'min-w-0',
+        name: 'font-medium text-on-surface truncate',
+        description: 'text-on-surface-variant truncate',
+        avatar: 'shrink-0'
+    },
+    variants: {
+        size: {
+            '3xs': {
+                root: 'gap-1',
+                wrapper: 'flex items-center gap-1',
+                name: 'text-[10px]',
+                description: 'text-[10px]'
+            },
+            '2xs': {
+                root: 'gap-1.5',
+                wrapper: 'flex items-center gap-1.5',
+                name: 'text-[10px]',
+                description: 'text-[10px]'
+            },
+            xs: {
+                root: 'gap-1.5',
+                wrapper: 'flex items-center gap-1.5',
+                name: 'text-xs',
+                description: 'text-[10px]'
+            },
+            sm: {
+                root: 'gap-2',
+                name: 'text-xs',
+                description: 'text-xs'
+            },
+            md: {
+                root: 'gap-2',
+                name: 'text-sm',
+                description: 'text-xs'
+            },
+            lg: {
+                root: 'gap-2.5',
+                name: 'text-sm',
+                description: 'text-sm'
+            },
+            xl: {
+                root: 'gap-2.5',
+                name: 'text-base',
+                description: 'text-sm'
+            },
+            '2xl': {
+                root: 'gap-3',
+                name: 'text-base',
+                description: 'text-base'
+            },
+            '3xl': {
+                root: 'gap-3',
+                name: 'text-lg',
+                description: 'text-base'
+            }
+        },
+        orientation: {
+            horizontal: {
+                root: 'flex-row',
+                wrapper: 'text-left'
+            },
+            vertical: {
+                root: 'flex-col text-center',
+                wrapper: 'text-center'
+            }
+        },
+        clickable: {
+            true: {
+                root: 'cursor-pointer hover:bg-surface-container-high rounded-lg transition-colors -m-2 p-2'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        orientation: 'horizontal'
+    }
+});
+export const userDefaults = {
+    defaultVariants: userVariants.defaultVariants,
+    slots: {}
+};

package/dist/config.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Svelora Global Configuration
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'svelora'
+ *
+ * defineConfig({
+ *     button: {
+ *         defaultVariants: { variant: 'outline', color: 'secondary' },
+ *         slots: { base: 'shadow-md', label: 'font-bold' }
+ *     },
+ *     avatar: {
+ *         defaultVariants: { size: 'lg' },
+ *         slots: { root: 'ring-2 ring-primary' }
+ *     },
+ *     icons: { loading: 'svg-spinners:ring-resize' }
+ * })
+ * ```
+ */
+/**
+ * Default icons used across components
+ */
+export declare const iconsDefaults: {
+    loading: string;
+    chevronDown: string;
+    chevronLeft: string;
+    chevronRight: string;
+    chevronsLeft: string;
+    chevronsRight: string;
+    ellipsis: string;
+    close: string;
+    check: string;
+    light: string;
+    dark: string;
+    upload: string;
+    file: string;
+    zoomIn: string;
+    trash: string;
+    search: string;
+    sortAsc: string;
+    sortDesc: string;
+    sortDefault: string;
+};
+/** Deep partial type for config objects */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/** Generic component config shape */
+export type UIConfig = {
+    [key: string]: DeepPartial<Record<string, unknown>> | undefined;
+    icons?: DeepPartial<typeof iconsDefaults>;
+};
+/**
+ * Define global configuration for Svelora components
+ */
+export declare function defineConfig(config: UIConfig): void;
+/**
+ * Get the current global configuration
+ */
+export declare function getConfig(): UIConfig;
+/**
+ * Reset configuration to defaults
+ */
+export declare function resetConfig(): void;
+/**
+ * Get merged config for a component (memoized).
+ * Each component passes its own defaults, so config.ts doesn't import any variant files.
+ * This enables proper tree-shaking: unused components are excluded from the bundle.
+ * @internal
+ */
+export declare function getComponentConfig<T extends Record<string, unknown>>(component: string, defaults: T): T;
+export {};

package/dist/config.js

@@ -0,0 +1,108 @@
+/**
+ * Svelora Global Configuration
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'svelora'
+ *
+ * defineConfig({
+ *     button: {
+ *         defaultVariants: { variant: 'outline', color: 'secondary' },
+ *         slots: { base: 'shadow-md', label: 'font-bold' }
+ *     },
+ *     avatar: {
+ *         defaultVariants: { size: 'lg' },
+ *         slots: { root: 'ring-2 ring-primary' }
+ *     },
+ *     icons: { loading: 'svg-spinners:ring-resize' }
+ * })
+ * ```
+ */
+// ==================== ICONS DEFAULTS ====================
+/**
+ * Default icons used across components
+ */
+export const iconsDefaults = {
+    loading: 'lucide:loader-2',
+    chevronDown: 'lucide:chevron-down',
+    chevronLeft: 'lucide:chevron-left',
+    chevronRight: 'lucide:chevron-right',
+    chevronsLeft: 'lucide:chevrons-left',
+    chevronsRight: 'lucide:chevrons-right',
+    ellipsis: 'lucide:ellipsis',
+    close: 'lucide:x',
+    check: 'lucide:check',
+    light: 'lucide:sun',
+    dark: 'lucide:moon',
+    upload: 'lucide:upload',
+    file: 'lucide:file',
+    zoomIn: 'lucide:zoom-in',
+    trash: 'lucide:trash-2',
+    search: 'lucide:search',
+    sortAsc: 'lucide:chevron-up',
+    sortDesc: 'lucide:chevron-down',
+    sortDefault: 'lucide:chevrons-up-down'
+};
+// ==================== GLOBAL STATE ====================
+let globalConfig = {};
+let cachedConfigs = {};
+// ==================== PUBLIC API ====================
+/**
+ * Define global configuration for Svelora components
+ */
+export function defineConfig(config) {
+    globalConfig = config;
+    cachedConfigs = {};
+}
+/**
+ * Get the current global configuration
+ */
+export function getConfig() {
+    return globalConfig;
+}
+/**
+ * Reset configuration to defaults
+ */
+export function resetConfig() {
+    globalConfig = {};
+    cachedConfigs = {};
+}
+// ==================== COMPONENT CONFIG GETTER ====================
+/**
+ * Deep merge utility for config objects
+ */
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key in source) {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (sourceValue !== undefined &&
+            typeof sourceValue === 'object' &&
+            sourceValue !== null &&
+            !Array.isArray(sourceValue) &&
+            typeof targetValue === 'object' &&
+            targetValue !== null &&
+            !Array.isArray(targetValue)) {
+            result[key] = deepMerge(targetValue, sourceValue);
+        }
+        else if (sourceValue !== undefined) {
+            result[key] = sourceValue;
+        }
+    }
+    return result;
+}
+/**
+ * Get merged config for a component (memoized).
+ * Each component passes its own defaults, so config.ts doesn't import any variant files.
+ * This enables proper tree-shaking: unused components are excluded from the bundle.
+ * @internal
+ */
+export function getComponentConfig(component, defaults) {
+    if (!(component in cachedConfigs)) {
+        const userConfig = globalConfig[component];
+        cachedConfigs[component] = userConfig
+            ? deepMerge(defaults, userConfig)
+            : defaults;
+    }
+    return cachedConfigs[component];
+}

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 HookContextProbe from './HookContextProbe.svelte'
+    import { FORM_FIELD_CONTEXT_KEY } from './useFormField.svelte.js'
+
+    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>