sv5ui 0.0.1

package/dist/Empty/Empty.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+    import type { EmptyProps } from './empty.types.js'
+
+    export type Props = EmptyProps
+</script>
+
+<script lang="ts">
+    import { emptyVariants, emptyDefaults } from './empty.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import Button from '../Button/Button.svelte'
+
+    const config = getComponentConfig('empty', emptyDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        icon,
+        avatar,
+        title,
+        description,
+        actions,
+        color = config.defaultVariants.color,
+        variant = config.defaultVariants.variant,
+        size = config.defaultVariants.size,
+        class: className,
+        leading,
+        titleSlot,
+        descriptionSlot,
+        actionsSlot,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = emptyVariants({ variant, color, size })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+            title: slots.title({ class: [config.slots.title, ui?.title] }),
+            description: slots.description({ class: [config.slots.description, ui?.description] }),
+            actions: slots.actions({ class: [config.slots.actions, ui?.actions] })
+        }
+    })
+
+    const hasActions = $derived(actions && actions.length > 0)
+</script>
+
+<svelte:element this={as} class={classes.root} {...restProps}>
+    {#if leading}
+        {@render leading()}
+    {:else if icon}
+        <Icon name={icon} class={classes.icon} />
+    {:else if avatar}
+        <Avatar {...avatar} class={classes.avatar} />
+    {/if}
+
+    {#if titleSlot}
+        {@render titleSlot()}
+    {:else if title}
+        <div class={classes.title}>{title}</div>
+    {/if}
+
+    {#if descriptionSlot}
+        {@render descriptionSlot()}
+    {:else if description}
+        <p class={classes.description}>{description}</p>
+    {/if}
+
+    {@render children?.()}
+
+    {#if actionsSlot}
+        {@render actionsSlot()}
+    {:else if hasActions}
+        <div class={classes.actions}>
+            {#each actions as action, index (index)}
+                <Button size="sm" {...action} />
+            {/each}
+        </div>
+    {/if}
+</svelte:element>

package/dist/Empty/Empty.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { EmptyProps } from './empty.types.js';
+export type Props = EmptyProps;
+declare const Empty: import("svelte").Component<EmptyProps, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/Empty/empty.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 { EmptyVariantProps, EmptySlots } from './empty.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { ButtonProps } from '../Button/button.types.js';
+export type EmptyProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'> & {
+    /**
+     * Renders the empty state as a different HTML element.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific empty slots (root, icon, avatar, title, description, actions).
+     */
+    ui?: Partial<Record<EmptySlots, ClassNameValue>>;
+    /**
+     * Icon to display in the empty state (e.g., 'lucide:inbox', 'lucide:file-x').
+     * Takes precedence over avatar when both are provided.
+     */
+    icon?: string;
+    /**
+     * Avatar configuration to display instead of an icon.
+     * Only visible when icon is not specified.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Main heading text for the empty state.
+     */
+    title?: string;
+    /**
+     * Supporting description text below the title.
+     */
+    description?: string;
+    /**
+     * Array of button configurations to render as action buttons.
+     */
+    actions?: ButtonProps[];
+    /**
+     * Controls the color scheme applied to the empty state.
+     * @default 'surface'
+     */
+    color?: NonNullable<EmptyVariantProps['color']>;
+    /**
+     * Controls the visual style and background treatment.
+     * @default 'outline'
+     */
+    variant?: NonNullable<EmptyVariantProps['variant']>;
+    /**
+     * Controls the overall dimensions, icon size, and typography scale.
+     * @default 'md'
+     */
+    size?: NonNullable<EmptyVariantProps['size']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom content to replace the default icon/avatar area.
+     */
+    leading?: Snippet;
+    /**
+     * Custom content to replace the default title rendering.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom content to replace the default description rendering.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Custom content to replace the default action buttons.
+     */
+    actionsSlot?: Snippet;
+};

package/dist/Empty/empty.types.js

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

package/dist/Empty/empty.variants.d.ts

@@ -0,0 +1,288 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const emptyVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    avatar: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    avatar: string;
+    title: string;
+    description: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    avatar: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export type EmptyVariantProps = VariantProps<typeof emptyVariants>;
+export type EmptySlots = keyof ReturnType<typeof emptyVariants>;
+export declare const emptyDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        icon: string;
+        avatar: string;
+        title: string;
+        description: string;
+        actions: string;
+    }, {
+        variant: {
+            solid: string;
+            outline: string;
+            soft: string;
+            subtle: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                root: string;
+                icon: string;
+                title: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        icon: string;
+        avatar: string;
+        title: string;
+        description: string;
+        actions: string;
+    }>;
+    slots: Partial<Record<EmptySlots, string>>;
+};