sv5ui 0.0.1

package/dist/Separator/Separator.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+    import type { SeparatorProps } from './separator.types.js'
+
+    export type Props = SeparatorProps
+</script>
+
+<script lang="ts">
+    import { Separator } from 'bits-ui'
+    import { separatorVariants, separatorDefaults } from './separator.variants.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+
+    const config = getComponentConfig('separator', separatorDefaults)
+
+    let {
+        ref = $bindable(null),
+        ui,
+        label,
+        icon,
+        avatar,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        type = config.defaultVariants.type,
+        orientation = config.defaultVariants.orientation,
+        decorative = false,
+        class: className,
+        content,
+        ...restProps
+    }: Props = $props()
+
+    const hasContent = $derived(!!label || !!icon || !!avatar || !!content)
+
+    const classes = $derived.by(() => {
+        const slots = separatorVariants({ color, size, type, orientation })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            border: slots.border({ class: [config.slots.border, ui?.border] }),
+            container: slots.container({ class: [config.slots.container, ui?.container] }),
+            icon: slots.icon({ class: [config.slots.icon, ui?.icon] }),
+            avatar: slots.avatar({ class: [config.slots.avatar, ui?.avatar] }),
+            avatarSize: slots.avatarSize() as AvatarSize,
+            label: slots.label({ class: [config.slots.label, ui?.label] })
+        }
+    })
+</script>
+
+<Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
+    <div class={classes.border}></div>
+
+    {#if hasContent}
+        <div class={classes.container}>
+            {#if content}
+                {@render content()}
+            {:else if avatar}
+                <Avatar {...avatar} size={avatar.size ?? classes.avatarSize} class={classes.avatar} />
+            {:else if icon}
+                <Icon name={icon} class={classes.icon} />
+            {:else if label}
+                <span class={classes.label}>{label}</span>
+            {/if}
+        </div>
+
+        <div class={classes.border}></div>
+    {/if}
+</Separator.Root>

package/dist/Separator/Separator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SeparatorProps } from './separator.types.js';
+export type Props = SeparatorProps;
+import { Separator } from 'bits-ui';
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator.svelte';
+export type { SeparatorProps } from './separator.types.js';

package/dist/Separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

package/dist/Separator/separator.types.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Separator } from 'bits-ui';
+import type { SeparatorVariantProps, SeparatorSlots } from './separator.variants.js';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+export type SeparatorProps = Separator.RootProps & {
+    /**
+     * Sets the color scheme applied to the separator.
+     * @default 'surface'
+     */
+    color?: NonNullable<SeparatorVariantProps['color']>;
+    /**
+     * Controls the thickness of the separator line.
+     * @default 'xs'
+     */
+    size?: NonNullable<SeparatorVariantProps['size']>;
+    /**
+     * Controls the border style of the separator.
+     * @default 'solid'
+     */
+    type?: NonNullable<SeparatorVariantProps['type']>;
+    /**
+     * Text content displayed in the center of the separator.
+     */
+    label?: string;
+    /**
+     * Icon displayed in the center of the separator.
+     * Supports any valid Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Avatar displayed in the center of the separator.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific separator slots.
+     */
+    ui?: Partial<Record<SeparatorSlots, ClassNameValue>>;
+    /**
+     * Custom content rendered in the center of the separator.
+     * Takes precedence over label, icon, and avatar.
+     */
+    content?: Snippet;
+};

package/dist/Separator/separator.types.js

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

package/dist/Separator/separator.variants.d.ts

@@ -0,0 +1,488 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const separatorVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    avatarSize: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;
+export type SeparatorSlots = keyof ReturnType<typeof separatorVariants>;
+export declare const separatorDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            secondary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            tertiary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            success: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            warning: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            error: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            info: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            surface: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+        };
+        size: {
+            xs: {
+                label: string;
+                icon: string;
+            };
+            sm: {
+                label: string;
+                icon: string;
+            };
+            md: {
+                label: string;
+                icon: string;
+            };
+            lg: {
+                label: string;
+                icon: string;
+            };
+            xl: {
+                label: string;
+                icon: string;
+            };
+        };
+        type: {
+            solid: {
+                border: string;
+            };
+            dashed: {
+                border: string;
+            };
+            dotted: {
+                border: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                border: string;
+                container: string;
+            };
+            vertical: {
+                root: string;
+                border: string;
+                container: string;
+            };
+        };
+    }, {
+        root: string;
+        border: string;
+        container: string;
+        icon: string;
+        avatar: string;
+        avatarSize: string;
+        label: string;
+    }, {
+        color: {
+            primary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            secondary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            tertiary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            success: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            warning: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            error: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            info: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            surface: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+        };
+        size: {
+            xs: {
+                label: string;
+                icon: string;
+            };
+            sm: {
+                label: string;
+                icon: string;
+            };
+            md: {
+                label: string;
+                icon: string;
+            };
+            lg: {
+                label: string;
+                icon: string;
+            };
+            xl: {
+                label: string;
+                icon: string;
+            };
+        };
+        type: {
+            solid: {
+                border: string;
+            };
+            dashed: {
+                border: string;
+            };
+            dotted: {
+                border: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                border: string;
+                container: string;
+            };
+            vertical: {
+                root: string;
+                border: string;
+                container: string;
+            };
+        };
+    }, {
+        root: string;
+        border: string;
+        container: string;
+        icon: string;
+        avatar: string;
+        avatarSize: string;
+        label: string;
+    }>;
+    slots: Partial<Record<SeparatorSlots, string>>;
+};