svelora 2.1.0

package/dist/SelectMenu/select-menu.variants.js

@@ -0,0 +1,70 @@
+import { tv } from 'tailwind-variants';
+import { selectVariants } from '../Select/select.variants.js';
+export const selectMenuVariants = tv({
+    extend: selectVariants,
+    slots: {
+        content: [
+            'z-50 max-h-60 w-(--bits-floating-anchor-width)',
+            'bg-surface-container-low text-on-surface',
+            'rounded-md',
+            'ring ring-outline-variant/50',
+            'shadow-lg',
+            'focus:outline-none',
+            'overflow-hidden',
+            'flex flex-col'
+        ],
+        input: [
+            'w-full border-0 border-b border-outline-variant bg-transparent',
+            'text-on-surface placeholder:text-on-surface-variant/50',
+            'focus:outline-none focus:ring-0'
+        ],
+        viewport: 'p-1 flex-1 overflow-y-auto scrollbar-thin',
+        empty: 'text-center text-on-surface-variant',
+        createItem: [
+            'group relative flex items-center gap-2 w-full rounded-sm px-2 cursor-pointer select-none',
+            'focus:outline-none',
+            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'data-[highlighted]:bg-surface-container-highest'
+        ],
+        createItemIcon: 'shrink-0 text-primary',
+        createItemLabel: 'flex-1 truncate text-on-surface'
+    },
+    variants: {
+        size: {
+            xs: {
+                input: 'px-2 py-1 text-xs',
+                empty: 'p-2 text-xs',
+                createItem: 'py-1 text-xs',
+                createItemIcon: 'size-3'
+            },
+            sm: {
+                input: 'px-2.5 py-1.5 text-xs',
+                empty: 'p-2.5 text-xs',
+                createItem: 'py-1.5 text-xs',
+                createItemIcon: 'size-3.5'
+            },
+            md: {
+                input: 'px-3 py-2 text-sm',
+                empty: 'p-2.5 text-sm',
+                createItem: 'py-1.5 text-sm',
+                createItemIcon: 'size-4'
+            },
+            lg: {
+                input: 'px-4 py-2.5 text-sm',
+                empty: 'p-3 text-sm',
+                createItem: 'py-2 text-sm',
+                createItemIcon: 'size-5'
+            },
+            xl: {
+                input: 'px-5 py-3 text-base',
+                empty: 'p-3 text-base',
+                createItem: 'py-2.5 text-base',
+                createItemIcon: 'size-5'
+            }
+        }
+    }
+});
+export const selectMenuDefaults = {
+    defaultVariants: selectMenuVariants.defaultVariants,
+    slots: {}
+};

package/dist/Separator/Separator.svelte

@@ -0,0 +1,77 @@
+<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 Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { separatorDefaults, separatorVariants } from './separator.variants.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,
+        position = config.defaultVariants.position,
+        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] }),
+            label: slots.label({ class: [config.slots.label, ui?.label] })
+        }
+    })
+</script>
+
+<Separator.Root bind:ref class={classes.root} {orientation} {decorative} {...restProps}>
+    {#if hasContent}
+        {#if position !== 'start'}
+            <div class={classes.border}></div>
+        {/if}
+
+        <div class={classes.container}>
+            {#if content}
+                {@render content()}
+            {:else if avatar}
+                <Avatar
+                    {...avatar}
+                    size={avatar.size ?? (config.avatarSize as AvatarSize)}
+                    class={classes.avatar}
+                />
+            {:else if icon}
+                <Icon name={icon} class={classes.icon} />
+            {:else if label}
+                <span class={classes.label}>{label}</span>
+            {/if}
+        </div>
+
+        {#if position !== 'end'}
+            <div class={classes.border}></div>
+        {/if}
+    {:else}
+        <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,53 @@
+import type { Separator } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { AvatarProps } from '../Avatar/avatar.types.js';
+import type { SeparatorSlots, SeparatorVariantProps } from './separator.variants.js';
+export type SeparatorProps = Omit<Separator.RootProps, 'class'> & {
+    /**
+     * 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']>;
+    /**
+     * Position of the label/icon/avatar/content along the separator.
+     * @default 'center'
+     */
+    position?: NonNullable<SeparatorVariantProps['position']>;
+    /**
+     * 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 {};