sv5ui 0.0.1

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

@@ -0,0 +1,74 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { UserVariantProps, UserSlots } from './user.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ChipProps } from '../Chip/chip.types.js';
+import type { LinkProps } from '../Link/link.types.js';
+export type UserProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Sets the HTML element type to render.
+     * Ignored when `href` is provided.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific user slots.
+     * Available slots: root, wrapper, name, description, avatar.
+     */
+    ui?: Partial<Record<UserSlots, ClassNameValue>>;
+    /**
+     * Sets the display name rendered as primary text.
+     */
+    name?: string;
+    /**
+     * Sets the secondary text displayed below the name.
+     */
+    description?: string;
+    /**
+     * Configures the avatar displayed on the leading side.
+     * Passed directly to the Avatar component.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Configures a status chip wrapping the avatar.
+     * Pass `true` for default chip or `ChipProps` to customize.
+     * @default false
+     */
+    chip?: boolean | ChipProps;
+    /**
+     * Controls the size of the component.
+     * Affects text sizes and avatar size mapping.
+     * @default 'md'
+     */
+    size?: NonNullable<UserVariantProps['size']>;
+    /**
+     * Sets the layout orientation.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<UserVariantProps['orientation']>;
+    /**
+     * Sets the destination URL.
+     * Renders the component as an anchor via Link when provided.
+     */
+    href?: LinkProps['href'];
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom avatar content slot.
+     * Takes precedence over `avatar` prop.
+     */
+    avatarSlot?: Snippet;
+    /**
+     * Custom name content slot.
+     * Takes precedence over `name` prop.
+     */
+    nameSlot?: Snippet;
+    /**
+     * Custom description content slot.
+     * Takes precedence over `description` prop.
+     */
+    descriptionSlot?: Snippet;
+};

package/dist/User/user.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,308 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const userVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        '3xs': {
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            name: string;
+            description: string;
+        };
+        xs: {
+            name: string;
+            description: string;
+        };
+        sm: {
+            name: string;
+            description: string;
+        };
+        md: {
+            name: string;
+            description: string;
+        };
+        lg: {
+            name: string;
+            description: string;
+        };
+        xl: {
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            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': {
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            name: string;
+            description: string;
+        };
+        xs: {
+            name: string;
+            description: string;
+        };
+        sm: {
+            name: string;
+            description: string;
+        };
+        md: {
+            name: string;
+            description: string;
+        };
+        lg: {
+            name: string;
+            description: string;
+        };
+        xl: {
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            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': {
+            name: string;
+            description: string;
+        };
+        '2xs': {
+            name: string;
+            description: string;
+        };
+        xs: {
+            name: string;
+            description: string;
+        };
+        sm: {
+            name: string;
+            description: string;
+        };
+        md: {
+            name: string;
+            description: string;
+        };
+        lg: {
+            name: string;
+            description: string;
+        };
+        xl: {
+            name: string;
+            description: string;
+        };
+        '2xl': {
+            name: string;
+            description: string;
+        };
+        '3xl': {
+            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': {
+                name: string;
+                description: string;
+            };
+            '2xs': {
+                name: string;
+                description: string;
+            };
+            xs: {
+                name: string;
+                description: string;
+            };
+            sm: {
+                name: string;
+                description: string;
+            };
+            md: {
+                name: string;
+                description: string;
+            };
+            lg: {
+                name: string;
+                description: string;
+            };
+            xl: {
+                name: string;
+                description: string;
+            };
+            '2xl': {
+                name: string;
+                description: string;
+            };
+            '3xl': {
+                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': {
+                name: string;
+                description: string;
+            };
+            '2xs': {
+                name: string;
+                description: string;
+            };
+            xs: {
+                name: string;
+                description: string;
+            };
+            sm: {
+                name: string;
+                description: string;
+            };
+            md: {
+                name: string;
+                description: string;
+            };
+            lg: {
+                name: string;
+                description: string;
+            };
+            xl: {
+                name: string;
+                description: string;
+            };
+            '2xl': {
+                name: string;
+                description: string;
+            };
+            '3xl': {
+                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,73 @@
+import { tv } from 'tailwind-variants';
+export const userVariants = tv({
+    slots: {
+        root: 'inline-flex items-center gap-2',
+        wrapper: 'min-w-0',
+        name: 'font-medium text-on-surface truncate',
+        description: 'text-on-surface-variant truncate',
+        avatar: 'shrink-0'
+    },
+    variants: {
+        size: {
+            '3xs': {
+                name: 'text-[10px]',
+                description: 'text-[10px]'
+            },
+            '2xs': {
+                name: 'text-[10px]',
+                description: 'text-[10px]'
+            },
+            xs: {
+                name: 'text-xs',
+                description: 'text-[10px]'
+            },
+            sm: {
+                name: 'text-xs',
+                description: 'text-xs'
+            },
+            md: {
+                name: 'text-sm',
+                description: 'text-xs'
+            },
+            lg: {
+                name: 'text-sm',
+                description: 'text-sm'
+            },
+            xl: {
+                name: 'text-base',
+                description: 'text-sm'
+            },
+            '2xl': {
+                name: 'text-base',
+                description: 'text-base'
+            },
+            '3xl': {
+                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,59 @@
+/**
+ * SV5UI Global Configuration
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'sv5ui'
+ *
+ * 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;
+    chevronRight: string;
+    close: string;
+    check: 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 SV5UI 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,94 @@
+/**
+ * SV5UI Global Configuration
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'sv5ui'
+ *
+ * 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',
+    chevronRight: 'lucide:chevron-right',
+    close: 'lucide:x',
+    check: 'lucide:check'
+};
+// ==================== GLOBAL STATE ====================
+let globalConfig = {};
+let cachedConfigs = {};
+// ==================== PUBLIC API ====================
+/**
+ * Define global configuration for SV5UI 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/index.d.ts

@@ -0,0 +1,19 @@
+export * from './Icon/index.js';
+export * from './Button/index.js';
+export * from './Avatar/index.js';
+export * from './AvatarGroup/index.js';
+export * from './Alert/index.js';
+export * from './Card/index.js';
+export * from './Link/index.js';
+export * from './Separator/index.js';
+export * from './Chip/index.js';
+export * from './Progress/index.js';
+export * from './Badge/index.js';
+export * from './Kbd/index.js';
+export * from './Container/index.js';
+export * from './Timeline/index.js';
+export * from './User/index.js';
+export * from './Empty/index.js';
+export * from './Skeleton/index.js';
+export { defineConfig } from './config.js';
+export type { UIConfig } from './config.js';

package/dist/index.js

@@ -0,0 +1,20 @@
+// Components
+export * from './Icon/index.js';
+export * from './Button/index.js';
+export * from './Avatar/index.js';
+export * from './AvatarGroup/index.js';
+export * from './Alert/index.js';
+export * from './Card/index.js';
+export * from './Link/index.js';
+export * from './Separator/index.js';
+export * from './Chip/index.js';
+export * from './Progress/index.js';
+export * from './Badge/index.js';
+export * from './Kbd/index.js';
+export * from './Container/index.js';
+export * from './Timeline/index.js';
+export * from './User/index.js';
+export * from './Empty/index.js';
+export * from './Skeleton/index.js';
+// Configuration
+export { defineConfig } from './config.js';