svelora 2.1.0

package/dist/ContextMenu/context-menu.variants.js

@@ -0,0 +1,144 @@
+import { tv } from 'tailwind-variants';
+// Per-item color classes — static map, O(1) lookup, no TV re-instantiation per item
+// Default highlight is here (not in base item slot) to avoid class conflicts
+export const itemColorClasses = {
+    default: {
+        item: 'data-[highlighted]:bg-surface-container-highest',
+        itemLeadingIcon: ''
+    },
+    primary: {
+        item: 'text-primary data-[highlighted]:bg-primary-container data-[highlighted]:text-on-primary-container',
+        itemLeadingIcon: 'text-primary group-data-[highlighted]:text-on-primary-container'
+    },
+    secondary: {
+        item: 'text-secondary data-[highlighted]:bg-secondary-container data-[highlighted]:text-on-secondary-container',
+        itemLeadingIcon: 'text-secondary group-data-[highlighted]:text-on-secondary-container'
+    },
+    tertiary: {
+        item: 'text-tertiary data-[highlighted]:bg-tertiary-container data-[highlighted]:text-on-tertiary-container',
+        itemLeadingIcon: 'text-tertiary group-data-[highlighted]:text-on-tertiary-container'
+    },
+    success: {
+        item: 'text-success data-[highlighted]:bg-success-container data-[highlighted]:text-on-success-container',
+        itemLeadingIcon: 'text-success group-data-[highlighted]:text-on-success-container'
+    },
+    warning: {
+        item: 'text-warning data-[highlighted]:bg-warning-container data-[highlighted]:text-on-warning-container',
+        itemLeadingIcon: 'text-warning group-data-[highlighted]:text-on-warning-container'
+    },
+    error: {
+        item: 'text-error data-[highlighted]:bg-error-container data-[highlighted]:text-on-error-container',
+        itemLeadingIcon: 'text-error group-data-[highlighted]:text-on-error-container'
+    },
+    info: {
+        item: 'text-info data-[highlighted]:bg-info-container data-[highlighted]:text-on-info-container',
+        itemLeadingIcon: 'text-info group-data-[highlighted]:text-on-info-container'
+    },
+    surface: {
+        item: 'text-on-surface-variant data-[highlighted]:bg-surface-container-highest data-[highlighted]:text-on-surface',
+        itemLeadingIcon: 'text-on-surface-variant group-data-[highlighted]:text-on-surface'
+    }
+};
+export const contextMenuVariants = tv({
+    slots: {
+        content: [
+            'z-50 min-w-48',
+            'bg-surface-container-low text-on-surface',
+            'rounded-md',
+            'ring ring-outline-variant/50',
+            'shadow-lg',
+            'focus:outline-none',
+            'overflow-hidden'
+        ],
+        group: 'p-1',
+        separator: '-mx-1 my-1 h-px bg-outline-variant',
+        label: 'px-2 py-1.5 text-xs font-semibold text-on-surface-variant',
+        item: [
+            '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'
+        ],
+        itemLeadingIcon: 'shrink-0',
+        itemLabel: 'flex-1 truncate',
+        itemTrailingKbds: 'ml-auto flex items-center gap-0.5',
+        itemIndicator: 'shrink-0',
+        subTrigger: [
+            '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',
+            'data-[state=open]:bg-surface-container-highest'
+        ],
+        subTriggerIcon: 'ml-auto shrink-0',
+        subContent: [
+            'z-50 min-w-48',
+            'bg-surface-container-low text-on-surface',
+            'rounded-md',
+            'ring ring-outline-variant/50',
+            'shadow-lg',
+            'focus:outline-none',
+            'overflow-hidden'
+        ]
+    },
+    variants: {
+        transition: {
+            true: {
+                content: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'
+                ],
+                subContent: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'
+                ]
+            }
+        },
+        size: {
+            xs: {
+                item: 'py-1 text-xs',
+                subTrigger: 'py-1 text-xs',
+                itemLeadingIcon: 'size-3',
+                subTriggerIcon: 'size-3',
+                itemIndicator: 'size-3',
+                label: 'text-[10px]'
+            },
+            sm: {
+                item: 'py-1.5 text-xs',
+                subTrigger: 'py-1.5 text-xs',
+                itemLeadingIcon: 'size-3.5',
+                subTriggerIcon: 'size-3.5',
+                itemIndicator: 'size-3.5',
+                label: 'text-[11px]'
+            },
+            md: {
+                item: 'py-1.5 text-sm',
+                subTrigger: 'py-1.5 text-sm',
+                itemLeadingIcon: 'size-4',
+                subTriggerIcon: 'size-4',
+                itemIndicator: 'size-4'
+            },
+            lg: {
+                item: 'py-2 text-sm',
+                subTrigger: 'py-2 text-sm',
+                itemLeadingIcon: 'size-5',
+                subTriggerIcon: 'size-5',
+                itemIndicator: 'size-5'
+            },
+            xl: {
+                item: 'py-2.5 text-base',
+                subTrigger: 'py-2.5 text-base',
+                itemLeadingIcon: 'size-5',
+                subTriggerIcon: 'size-5',
+                itemIndicator: 'size-5'
+            }
+        }
+    },
+    defaultVariants: {
+        transition: true,
+        size: 'md'
+    }
+});
+export const contextMenuDefaults = {
+    defaultVariants: contextMenuVariants.defaultVariants,
+    slots: {}
+};

package/dist/ContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.svelte';
+export type { ContextMenuItem, ContextMenuProps, ContextMenuRadioGroup } from './context-menu.types.js';

package/dist/ContextMenu/index.js

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

package/dist/Drawer/Drawer.svelte

@@ -0,0 +1,207 @@
+<script lang="ts" module>
+    import type { DrawerProps } from './drawer.types.js'
+
+    export type Props = DrawerProps
+</script>
+
+<script lang="ts">
+    import { Drawer } from 'vaul-svelte'
+    import { getComponentConfig } from '../config.js'
+    import { drawerDefaults, drawerVariants } from './drawer.variants.js'
+
+    const config = getComponentConfig('drawer', drawerDefaults)
+
+    let {
+        open = $bindable(false),
+        onOpenChange,
+        direction = config.defaultVariants.direction ?? 'bottom',
+        inset = config.defaultVariants.inset ?? false,
+        title,
+        description,
+        overlay: showOverlay = true,
+        handle: showHandle = true,
+        portal = true,
+        dismissible = true,
+        modal = true,
+        nested = false,
+        shouldScaleBackground = false,
+        closeThreshold,
+        scrollLockTimeout,
+        snapPoints,
+        fadeFromIndex,
+        activeSnapPoint = $bindable(undefined),
+        onActiveSnapPointChange,
+        handleOnly = false,
+        noBodyStyles,
+        onDrag,
+        onRelease,
+        onClose,
+        ui,
+        class: className,
+        children,
+        content: contentSlot,
+        header: headerSlot,
+        titleSlot,
+        descriptionSlot,
+        body: bodySlot,
+        footer: footerSlot,
+        ...rest
+    }: Props = $props()
+
+    const hasTitle = $derived(!!title || !!titleSlot)
+    const hasDescription = $derived(!!description || !!descriptionSlot)
+    const hasHeading = $derived(hasTitle || hasDescription)
+    const hasHeader = $derived(!!headerSlot || hasHeading)
+    const hasSnapPoints = $derived(!!snapPoints?.length)
+
+    const variantSlots = $derived(drawerVariants({ direction, inset, snapPoints: hasSnapPoints }))
+
+    const classes = $derived({
+        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+        handle: variantSlots.handle({ class: [config.slots.handle, ui?.handle] }),
+        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+        description: variantSlots.description({
+            class: [config.slots.description, ui?.description]
+        }),
+        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] })
+    })
+
+    function handleOpenChange(value: boolean) {
+        open = value
+        onOpenChange?.(value)
+    }
+
+    function handleActiveSnapPointChange(value: number | string | null) {
+        activeSnapPoint = value
+        onActiveSnapPointChange?.(value)
+    }
+
+    const rootProps = $derived.by(() => {
+        const base = {
+            ...rest,
+            open,
+            onOpenChange: handleOpenChange,
+            direction,
+            dismissible,
+            modal,
+            shouldScaleBackground,
+            closeThreshold,
+            scrollLockTimeout,
+            activeSnapPoint,
+            onActiveSnapPointChange: handleActiveSnapPointChange,
+            handleOnly,
+            noBodyStyles,
+            onDrag,
+            onRelease,
+            onClose
+        }
+        if (snapPoints && fadeFromIndex !== null) {
+            return { ...base, snapPoints, fadeFromIndex }
+        }
+        if (snapPoints) {
+            return { ...base, snapPoints }
+        }
+        return base
+    })
+</script>
+
+{#snippet drawerInner()}
+    {#if contentSlot}
+        {#if hasHeading}
+            <div class="sr-only">
+                {#if hasTitle}
+                    <Drawer.Title>
+                        {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+                    </Drawer.Title>
+                {/if}
+                {#if hasDescription}
+                    <Drawer.Description>
+                        {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+                    </Drawer.Description>
+                {/if}
+            </div>
+        {/if}
+        {@render contentSlot()}
+    {:else}
+        <div class={classes.container}>
+            {#if hasHeader}
+                <div class={classes.header}>
+                    {#if headerSlot}
+                        {@render headerSlot()}
+                    {:else}
+                        {#if hasTitle}
+                            <Drawer.Title class={classes.title}>
+                                {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+                            </Drawer.Title>
+                        {/if}
+                        {#if hasDescription}
+                            <Drawer.Description class={classes.description}>
+                                {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+                            </Drawer.Description>
+                        {/if}
+                    {/if}
+                </div>
+            {/if}
+
+            {#if bodySlot}
+                <div class={classes.body}>
+                    {@render bodySlot()}
+                </div>
+            {/if}
+
+            {#if footerSlot}
+                <div class={classes.footer}>
+                    {@render footerSlot()}
+                </div>
+            {/if}
+        </div>
+    {/if}
+{/snippet}
+
+{#snippet drawerContent()}
+    {#if showOverlay}
+        <Drawer.Overlay class={classes.overlay} />
+    {/if}
+
+    <Drawer.Content class={[classes.content, !children ? className : undefined]}>
+        {#if showHandle}
+            <div data-vaul-handle class={classes.handle}></div>
+        {/if}
+        {@render drawerInner()}
+    </Drawer.Content>
+{/snippet}
+
+{#snippet drawerBody()}
+    {#if children}
+        <!--
+            vaul-svelte@0.3.2's <Drawer.Trigger> uses Svelte 4 <slot> pattern with
+            bits-ui v0 internally, which is incompatible with Svelte 5 snippets
+            and yields an empty <button> in the DOM. We pass an `onclick` handler
+            to the user-supplied trigger snippet so the user's element opens the
+            drawer when activated.
+        -->
+        {@render children({ props: { type: 'button', onclick: () => (open = true) } })}
+    {/if}
+
+    {#if portal}
+        <Drawer.Portal>
+            {@render drawerContent()}
+        </Drawer.Portal>
+    {:else}
+        {@render drawerContent()}
+    {/if}
+{/snippet}
+
+{#if nested}
+    <Drawer.NestedRoot {...rootProps}>
+        {@render drawerBody()}
+    </Drawer.NestedRoot>
+{:else}
+    <Drawer.Root {...rootProps}>
+        {@render drawerBody()}
+    </Drawer.Root>
+{/if}

package/dist/Drawer/Drawer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { DrawerProps } from './drawer.types.js';
+export type Props = DrawerProps;
+import { Drawer } from 'vaul-svelte';
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open" | "activeSnapPoint">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/Drawer/DrawerTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Drawer from './Drawer.svelte'
+</script>
+
+<Drawer>
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet content()}<p>Body</p>{/snippet}
+</Drawer>

package/dist/Drawer/DrawerTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DrawerTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DrawerTriggerTestWrapper = InstanceType<typeof DrawerTriggerTestWrapper>;
+export default DrawerTriggerTestWrapper;

package/dist/Drawer/drawer.types.d.ts

@@ -0,0 +1,116 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { DrawerDirection } from 'vaul-svelte';
+import type { DrawerSlots } from './drawer.variants.js';
+type VaulRootProps = Partial<{
+    open: boolean;
+    onOpenChange: (value: boolean) => void;
+    direction: 'left' | 'right' | 'top' | 'bottom';
+    dismissible: boolean;
+    modal: boolean;
+    shouldScaleBackground: boolean;
+    setBackgroundColorOnScale: boolean;
+    closeThreshold: number;
+    scrollLockTimeout: number;
+    snapPoints: (number | string)[];
+    fadeFromIndex: number;
+    activeSnapPoint: number | string | null;
+    onActiveSnapPointChange: (value: number | string | null) => void;
+    handleOnly: boolean;
+    noBodyStyles: boolean;
+    onDrag: (event: {
+        currentTarget: EventTarget & HTMLElement;
+    }, percentageDragged: number) => void;
+    onRelease: (event: {
+        currentTarget: EventTarget & HTMLElement;
+    }, open: boolean) => void;
+    onClose: () => void;
+    nested: boolean;
+    fixed: boolean;
+    defaultOpen: boolean;
+    disablePreventScroll: boolean;
+    repositionInputs: boolean;
+    snapToSequentialPoint: boolean;
+    container: HTMLElement | null;
+    onAnimationEnd: (open: boolean) => void;
+    preventScrollRestoration: boolean;
+    autoFocus: boolean;
+}>;
+export type { DrawerDirection };
+export type DrawerProps = VaulRootProps & {
+    /**
+     * Whether to inset the drawer from the edges with rounded corners.
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * Title text displayed in the drawer header.
+     */
+    title?: string;
+    /**
+     * Description text displayed in the drawer header.
+     */
+    description?: string;
+    /**
+     * Whether to render an overlay behind the drawer.
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * Whether to render a drag handle on the drawer.
+     * @default true
+     */
+    handle?: boolean;
+    /**
+     * Whether to render in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Override styles for specific drawer slots.
+     */
+    ui?: Partial<Record<DrawerSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the trigger element or content (when no trigger).
+     */
+    class?: ClassNameValue;
+    /**
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the drawer's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
+     */
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * Custom content slot (replaces default layout with header/body/footer).
+     */
+    content?: Snippet;
+    /**
+     * Custom header slot.
+     */
+    header?: Snippet;
+    /**
+     * Custom title slot.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom description slot.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Custom body slot.
+     */
+    body?: Snippet;
+    /**
+     * Custom footer slot.
+     */
+    footer?: Snippet;
+};

package/dist/Drawer/drawer.types.js

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