svelora 2.1.0

package/dist/Command/command.variants.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+export const commandVariants = tv({
+    slots: {
+        root: 'flex flex-col overflow-hidden',
+        inputWrapper: 'flex items-center border-b border-outline-variant px-3',
+        inputIcon: 'mr-2 shrink-0 opacity-50',
+        input: 'flex h-12 w-full bg-transparent text-sm outline-none placeholder:text-on-surface-variant/50 disabled:cursor-not-allowed disabled:opacity-50',
+        list: 'scroll-py-1 overflow-y-auto overflow-x-hidden scrollbar-thin',
+        empty: 'py-6 text-center text-sm text-on-surface-variant',
+        loading: 'py-6 text-center text-sm text-on-surface-variant',
+        group: 'overflow-hidden p-1',
+        groupHeading: 'px-2 py-1.5 text-xs font-semibold text-on-surface-variant',
+        groupItems: '',
+        separator: '-mx-1 h-px bg-outline-variant',
+        item: 'relative flex w-full cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-surface-container-highest',
+        itemIcon: 'size-4 shrink-0',
+        itemWrapper: 'flex min-w-0 flex-1 flex-col',
+        itemLabel: 'truncate',
+        itemDescription: 'truncate text-xs text-on-surface-variant',
+        itemTrailing: 'ms-auto flex items-center gap-1',
+        footer: 'border-t border-outline-variant p-1'
+    },
+    variants: {
+        size: {
+            xs: {
+                inputIcon: 'size-3.5',
+                input: 'h-9 text-xs',
+                inputWrapper: 'px-2',
+                item: 'px-1.5 py-1 text-xs gap-1.5',
+                itemIcon: 'size-3.5',
+                groupHeading: 'px-1.5 py-1 text-[10px]',
+                empty: 'py-4 text-xs',
+                loading: 'py-4 text-xs'
+            },
+            sm: {
+                inputIcon: 'size-3.5',
+                input: 'h-10 text-xs',
+                inputWrapper: 'px-2.5',
+                item: 'px-1.5 py-1 text-xs gap-1.5',
+                itemIcon: 'size-4',
+                groupHeading: 'px-1.5 py-1 text-[10px]',
+                empty: 'py-5 text-xs',
+                loading: 'py-5 text-xs'
+            },
+            md: {
+                inputIcon: 'size-4',
+                input: 'h-12 text-sm',
+                inputWrapper: 'px-3',
+                item: 'px-2 py-1.5 text-sm gap-2',
+                itemIcon: 'size-4',
+                groupHeading: 'px-2 py-1.5 text-xs',
+                empty: 'py-6 text-sm',
+                loading: 'py-6 text-sm'
+            },
+            lg: {
+                inputIcon: 'size-5',
+                input: 'h-13 text-sm',
+                inputWrapper: 'px-3.5',
+                item: 'px-2.5 py-2 text-sm gap-2',
+                itemIcon: 'size-5',
+                groupHeading: 'px-2.5 py-2 text-xs',
+                empty: 'py-7 text-sm',
+                loading: 'py-7 text-sm'
+            },
+            xl: {
+                inputIcon: 'size-5',
+                input: 'h-14 text-base',
+                inputWrapper: 'px-4',
+                item: 'px-3 py-2 text-base gap-2.5',
+                itemIcon: 'size-5',
+                groupHeading: 'px-3 py-2 text-sm',
+                empty: 'py-8 text-base',
+                loading: 'py-8 text-base'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+export const commandDefaults = {
+    defaultVariants: {
+        size: 'md'
+    },
+    slots: {}
+};

package/dist/Command/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Command } from './Command.svelte';
+export type { CommandGroup, CommandItem, CommandProps } from './command.types.js';

package/dist/Command/index.js

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

package/dist/Container/Container.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+    import type { ContainerProps } from './container.types.js'
+
+    export type Props = ContainerProps
+</script>
+
+<script lang="ts">
+    import { getComponentConfig } from '../config.js'
+    import { containerDefaults, containerVariants } from './container.variants.js'
+
+    const config = getComponentConfig('container', containerDefaults)
+    const slots = containerVariants()
+
+    let { as = 'div', ui, class: className, children, ...restProps }: Props = $props()
+
+    const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }))
+</script>
+
+<svelte:element this={as} class={rootClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Container/Container.svelte.d.ts

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

package/dist/Container/container.types.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ContainerSlots } from './container.variants.js';
+export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Sets the HTML element type to render.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific container slots.
+     * Available slots: root.
+     */
+    ui?: Partial<Record<ContainerSlots, ClassNameValue>>;
+};

package/dist/Container/container.types.js

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

package/dist/Container/container.variants.d.ts

@@ -0,0 +1,29 @@
+export declare const containerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ContainerSlots = keyof ReturnType<typeof containerVariants>;
+export declare const containerDefaults: {
+    slots: Partial<Record<ContainerSlots, string>>;
+};

package/dist/Container/container.variants.js

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+export const containerVariants = tv({
+    slots: {
+        root: 'w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
+    }
+});
+export const containerDefaults = {
+    slots: {}
+};

package/dist/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container.svelte';
+export type { ContainerProps } from './container.types.js';

package/dist/Container/index.js

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

package/dist/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,344 @@
+<script lang="ts" module>
+    import type {
+        ContextMenuItem,
+        ContextMenuItemAction,
+        ContextMenuItemCheckbox,
+        ContextMenuItemRadio,
+        ContextMenuItemSub, 
+        ContextMenuProps
+    } from './context-menu.types.js'
+
+    export type Props = ContextMenuProps
+</script>
+
+<script lang="ts">
+    import { ContextMenu } from 'bits-ui'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import Kbd from '../Kbd/Kbd.svelte'
+    import {
+        contextMenuDefaults,
+        contextMenuVariants,
+        itemColorClasses
+    } from './context-menu.variants.js'
+
+    const config = getComponentConfig('contextMenu', contextMenuDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(false),
+        onOpenChange,
+        items = [],
+        radioGroups = [],
+        checkedIcon = icons.check,
+        submenuIcon = icons.chevronRight,
+        sideOffset = 4,
+        alignOffset = 0,
+        avoidCollisions = true,
+        collisionBoundary,
+        collisionPadding = 8,
+        hideWhenDetached = false,
+        onEscapeKeydown,
+        onInteractOutside,
+        onCloseAutoFocus,
+        forceMount,
+        loop = true,
+        transition = config.defaultVariants.transition ?? true,
+        portal = true,
+        size = config.defaultVariants.size ?? 'md',
+        ui,
+        class: className,
+        children,
+        header,
+        footer,
+        item: itemSlot,
+        itemLeading,
+        itemLabel,
+        itemTrailing,
+        content: contentSlot
+    }: Props = $props()
+
+    const hasRadioItems = $derived(items.some((i) => i.type === 'radio'))
+    const firstRadioGroup = $derived(radioGroups[0])
+
+    const variantSlots = $derived(contextMenuVariants({ transition, size }))
+    const classes = $derived({
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+        group: variantSlots.group({ class: [config.slots.group, ui?.group] }),
+        separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+        item: variantSlots.item({ class: [config.slots.item, ui?.item] }),
+        itemLeadingIcon: variantSlots.itemLeadingIcon({
+            class: [config.slots.itemLeadingIcon, ui?.itemLeadingIcon]
+        }),
+        itemLabel: variantSlots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
+        itemTrailingKbds: variantSlots.itemTrailingKbds({
+            class: [config.slots.itemTrailingKbds, ui?.itemTrailingKbds]
+        }),
+        itemIndicator: variantSlots.itemIndicator({
+            class: [config.slots.itemIndicator, ui?.itemIndicator]
+        }),
+        subTrigger: variantSlots.subTrigger({ class: [config.slots.subTrigger, ui?.subTrigger] }),
+        subTriggerIcon: variantSlots.subTriggerIcon({
+            class: [config.slots.subTriggerIcon, ui?.subTriggerIcon]
+        }),
+        subContent: variantSlots.subContent({ class: [config.slots.subContent, ui?.subContent] })
+    })
+
+    function close() {
+        open = false
+    }
+
+    // Type guards
+    function isActionItem(item: ContextMenuItem): item is ContextMenuItemAction {
+        return !item.type || item.type === 'item'
+    }
+
+    function isCheckboxItem(item: ContextMenuItem): item is ContextMenuItemCheckbox {
+        return item.type === 'checkbox'
+    }
+
+    function isRadioItem(item: ContextMenuItem): item is ContextMenuItemRadio {
+        return item.type === 'radio'
+    }
+
+    function isSubItem(item: ContextMenuItem): item is ContextMenuItemSub {
+        return item.type === 'sub'
+    }
+
+    function isSeparator(item: ContextMenuItem): item is { type: 'separator' } {
+        return item.type === 'separator'
+    }
+
+    function isLabel(item: ContextMenuItem): item is { type: 'label'; label: string } {
+        return item.type === 'label'
+    }
+</script>
+
+{#snippet renderKbds(kbds: ContextMenuItemAction['kbds'])}
+    {#if kbds?.length}
+        <span class={classes.itemTrailingKbds}>
+            {#each kbds as kbd, i (i)}
+                {#if typeof kbd === 'string'}
+                    <Kbd value={kbd} size="sm" variant="subtle" />
+                {:else}
+                    <Kbd {...kbd} size={kbd.size ?? 'sm'} variant={kbd.variant ?? 'subtle'} />
+                {/if}
+            {/each}
+        </span>
+    {/if}
+{/snippet}
+
+{#snippet renderItem(item: ContextMenuItem, index: number)}
+    {#if isSeparator(item)}
+        <ContextMenu.Separator class={classes.separator} />
+    {:else if isLabel(item)}
+        <ContextMenu.GroupHeading class={classes.label}>{item.label}</ContextMenu.GroupHeading>
+    {:else if isActionItem(item)}
+        {@const colorCls = itemColorClasses[item.color ?? 'default']}
+        <ContextMenu.Item
+            disabled={item.disabled}
+            closeOnSelect={item.closeOnSelect}
+            onSelect={item.onSelect}
+            class={[classes.item, colorCls.item, item.class]}
+        >
+            {#if itemLeading}
+                {@render itemLeading({ item, index })}
+            {:else if item.icon}
+                <Icon
+                    name={item.icon}
+                    class={[classes.itemLeadingIcon, colorCls.itemLeadingIcon]}
+                />
+            {/if}
+
+            {#if itemLabel}
+                {@render itemLabel({ item, index })}
+            {:else if item.label}
+                <span class={classes.itemLabel}>{item.label}</span>
+            {/if}
+
+            {#if itemTrailing}
+                {@render itemTrailing({ item, index })}
+            {:else}
+                {@render renderKbds(item.kbds)}
+            {/if}
+        </ContextMenu.Item>
+    {:else if isCheckboxItem(item)}
+        <ContextMenu.CheckboxItem
+            checked={item.checked}
+            disabled={item.disabled}
+            closeOnSelect={item.closeOnSelect}
+            onCheckedChange={item.onCheckedChange}
+            class={[classes.item, item.class]}
+        >
+            {#if itemLeading}
+                {@render itemLeading({ item, index })}
+            {:else}
+                <span class={classes.itemIndicator}>
+                    {#if item.checked}
+                        <Icon name={checkedIcon} />
+                    {/if}
+                </span>
+            {/if}
+
+            {#if itemLabel}
+                {@render itemLabel({ item, index })}
+            {:else if item.label}
+                <span class={classes.itemLabel}>{item.label}</span>
+            {/if}
+
+            {#if itemTrailing}
+                {@render itemTrailing({ item, index })}
+            {:else}
+                {@render renderKbds(item.kbds)}
+            {/if}
+        </ContextMenu.CheckboxItem>
+    {:else if isRadioItem(item)}
+        <ContextMenu.RadioItem
+            value={item.value}
+            disabled={item.disabled}
+            closeOnSelect={item.closeOnSelect}
+            class={[classes.item, item.class]}
+        >
+            {#if itemLeading}
+                {@render itemLeading({ item, index })}
+            {:else}
+                <span class={classes.itemIndicator}>
+                    {#if firstRadioGroup?.value === item.value}
+                        <Icon name={checkedIcon} />
+                    {/if}
+                </span>
+            {/if}
+
+            {#if itemLabel}
+                {@render itemLabel({ item, index })}
+            {:else if item.label}
+                <span class={classes.itemLabel}>{item.label}</span>
+            {/if}
+
+            {#if itemTrailing}
+                {@render itemTrailing({ item, index })}
+            {:else}
+                {@render renderKbds(item.kbds)}
+            {/if}
+        </ContextMenu.RadioItem>
+    {:else if isSubItem(item)}
+        <ContextMenu.Sub open={item.open} onOpenChange={item.onOpenChange}>
+            <ContextMenu.SubTrigger
+                disabled={item.disabled}
+                class={[classes.subTrigger, item.class]}
+            >
+                {#if itemLeading}
+                    {@render itemLeading({ item, index })}
+                {:else if item.icon}
+                    <Icon name={item.icon} class={classes.itemLeadingIcon} />
+                {/if}
+
+                {#if itemLabel}
+                    {@render itemLabel({ item, index })}
+                {:else if item.label}
+                    <span class={classes.itemLabel}>{item.label}</span>
+                {/if}
+
+                <Icon name={submenuIcon} class={classes.subTriggerIcon} />
+            </ContextMenu.SubTrigger>
+
+            <ContextMenu.SubContent
+                {sideOffset}
+                {alignOffset}
+                {avoidCollisions}
+                {collisionBoundary}
+                {collisionPadding}
+                class={classes.subContent}
+            >
+                <div class={classes.group}>
+                    {#each item.items as subItem, subIndex (subIndex)}
+                        {@render renderItem(subItem, subIndex)}
+                    {/each}
+                </div>
+            </ContextMenu.SubContent>
+        </ContextMenu.Sub>
+    {/if}
+{/snippet}
+
+{#snippet renderItems(menuItems: ContextMenuItem[])}
+    {#if hasRadioItems && firstRadioGroup}
+        <ContextMenu.RadioGroup
+            value={firstRadioGroup.value}
+            onValueChange={firstRadioGroup.onValueChange}
+        >
+            {#each menuItems as item, index (index)}
+                {@render renderItem(item, index)}
+            {/each}
+        </ContextMenu.RadioGroup>
+    {:else}
+        {#each menuItems as item, index (index)}
+            {@render renderItem(item, index)}
+        {/each}
+    {/if}
+{/snippet}
+
+{#snippet contextMenuContentEl()}
+    <ContextMenu.Content
+        bind:ref
+        {sideOffset}
+        {alignOffset}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {hideWhenDetached}
+        {onEscapeKeydown}
+        {onInteractOutside}
+        {onCloseAutoFocus}
+        {forceMount}
+        {loop}
+        class={classes.content}
+    >
+        {#if contentSlot}
+            {@render contentSlot({ open, close })}
+        {:else}
+            {#if header}
+                {@render header({ close })}
+            {/if}
+
+            <ContextMenu.Group class={classes.group}>
+                {#if itemSlot}
+                    {#each items as item, index (index)}
+                        {#if isSeparator(item)}
+                            <ContextMenu.Separator class={classes.separator} />
+                        {:else if isLabel(item)}
+                            <ContextMenu.GroupHeading class={classes.label}
+                                >{item.label}</ContextMenu.GroupHeading
+                            >
+                        {:else}
+                            {@render itemSlot({ item, index })}
+                        {/if}
+                    {/each}
+                {:else}
+                    {@render renderItems(items)}
+                {/if}
+            </ContextMenu.Group>
+
+            {#if footer}
+                {@render footer({ close })}
+            {/if}
+        {/if}
+    </ContextMenu.Content>
+{/snippet}
+
+<ContextMenu.Root bind:open {onOpenChange}>
+    {#if children}
+        <ContextMenu.Trigger class={[className]}>
+            {@render children({ open })}
+        </ContextMenu.Trigger>
+    {/if}
+
+    {#if portal}
+        <ContextMenu.Portal>
+            {@render contextMenuContentEl()}
+        </ContextMenu.Portal>
+    {:else}
+        {@render contextMenuContentEl()}
+    {/if}
+</ContextMenu.Root>

package/dist/ContextMenu/ContextMenu.svelte.d.ts

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