svelora 2.1.0

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import DropdownMenu from './DropdownMenu.svelte';
+import type { DropdownMenuItem } from './dropdown-menu.types.js';
+let { items = [] }: {
+    items?: DropdownMenuItem[];
+} = $props();
+</script>
+
+<DropdownMenu {items}>
+    {#snippet children({ open, props })}
+        <button data-testid="trigger" data-open={open} {...props}>Open</button>
+    {/snippet}
+</DropdownMenu>

package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownMenuItem } from './dropdown-menu.types.js';
+type $$ComponentProps = {
+    items?: DropdownMenuItem[];
+};
+declare const DropdownMenuTriggerTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropdownMenuTriggerTestWrapper = ReturnType<typeof DropdownMenuTriggerTestWrapper>;
+export default DropdownMenuTriggerTestWrapper;

package/dist/DropdownMenu/dropdown-menu.types.d.ts

@@ -0,0 +1,279 @@
+import type { DropdownMenuArrowPropsWithoutHTML, DropdownMenuContentPropsWithoutHTML, DropdownMenuRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { KbdProps } from '../Kbd/kbd.types.js';
+import type { DropdownMenuSlots, DropdownMenuVariantProps, itemColorClasses } from './dropdown-menu.variants.js';
+export type DropdownMenuItemColor = Exclude<keyof typeof itemColorClasses, 'default'>;
+/**
+ * Base item properties shared across all item types.
+ */
+interface DropdownMenuItemBase {
+    /**
+     * The visible text displayed in the menu item.
+     */
+    label?: string;
+    /**
+     * Icon displayed before the label (leading position).
+     * Supports any Iconify icon name (e.g., 'lucide:home', 'mdi:account').
+     */
+    icon?: string;
+    /**
+     * Whether this item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Keyboard shortcut(s) displayed on the trailing side.
+     * Can be an array of key strings or KbdProps objects.
+     * @example ['meta', 'k'] or [{ value: 'meta' }, { value: 'k' }]
+     */
+    kbds?: (string | Pick<KbdProps, 'value' | 'size' | 'variant' | 'color'>)[];
+    /**
+     * Additional CSS classes applied to this item.
+     */
+    class?: ClassNameValue;
+}
+/**
+ * Standard clickable menu item.
+ */
+export interface DropdownMenuItemAction extends DropdownMenuItemBase {
+    type?: 'item';
+    /**
+     * Callback fired when the item is selected.
+     */
+    onSelect?: () => void;
+    /**
+     * Whether to close the menu after selection.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Color variant for the item (useful for destructive actions).
+     */
+    color?: DropdownMenuItemColor;
+}
+/**
+ * Checkbox menu item for toggling boolean state.
+ */
+export interface DropdownMenuItemCheckbox extends DropdownMenuItemBase {
+    type: 'checkbox';
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Callback fired when the checkbox state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether to close the menu after selection.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+}
+/**
+ * Radio menu item for single selection within a group.
+ */
+export interface DropdownMenuItemRadio extends DropdownMenuItemBase {
+    type: 'radio';
+    /**
+     * Unique value for this radio item within its group.
+     */
+    value: string;
+    /**
+     * Whether to close the menu after selection.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+}
+/**
+ * Visual separator between menu items.
+ */
+export interface DropdownMenuItemSeparator {
+    type: 'separator';
+}
+/**
+ * Group label/heading for organizing items.
+ */
+export interface DropdownMenuItemLabel {
+    type: 'label';
+    /**
+     * The text displayed as the group label.
+     */
+    label: string;
+}
+/**
+ * Submenu item that opens a nested dropdown menu.
+ */
+export interface DropdownMenuItemSub extends DropdownMenuItemBase {
+    type: 'sub';
+    /**
+     * Nested items in the submenu.
+     */
+    items: DropdownMenuItem[];
+    /**
+     * Submenu open state (for controlled behavior).
+     */
+    open?: boolean;
+    /**
+     * Callback when submenu open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Union type for all possible dropdown menu items.
+ */
+export type DropdownMenuItem = DropdownMenuItemAction | DropdownMenuItemCheckbox | DropdownMenuItemRadio | DropdownMenuItemSeparator | DropdownMenuItemLabel | DropdownMenuItemSub;
+/**
+ * Configuration for a radio group within the dropdown menu.
+ */
+export interface DropdownMenuRadioGroup {
+    /**
+     * Currently selected value in the group.
+     */
+    value?: string;
+    /**
+     * Callback fired when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Props passed to dropdown menu item snippet slots.
+ */
+export interface DropdownMenuItemSlotProps {
+    /** The current dropdown menu item data */
+    item: DropdownMenuItem;
+    /** Zero-based index of the item */
+    index: number;
+    /** Whether the item is currently highlighted/focused */
+    highlighted?: boolean;
+}
+type RootProps = Pick<DropdownMenuRootPropsWithoutHTML, 'open' | 'onOpenChange'>;
+type ContentProps = Pick<DropdownMenuContentPropsWithoutHTML, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'onEscapeKeydown' | 'onInteractOutside' | 'onCloseAutoFocus' | 'forceMount' | 'loop'>;
+/**
+ * Props for the DropdownMenu component.
+ *
+ * @example
+ * ```svelte
+ * <DropdownMenu items={menuItems}>
+ *   <Button>Open Menu</Button>
+ * </DropdownMenu>
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/dropdown-menu
+ */
+export interface DropdownMenuProps extends RootProps, ContentProps {
+    /**
+     * Bindable reference to the content DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Array of menu items to render.
+     * Each item can be an action, checkbox, radio, separator, label, or submenu.
+     */
+    items?: DropdownMenuItem[];
+    /**
+     * Radio group configuration for managing radio item selections.
+     * Only the first entry is used — all `type: 'radio'` items belong to it.
+     * @example [{ value: 'dark', onValueChange: (v) => theme = v }]
+     */
+    radioGroups?: DropdownMenuRadioGroup[];
+    /**
+     * Icon displayed when a checkbox item is checked.
+     * @default 'lucide:check'
+     */
+    checkedIcon?: string;
+    /**
+     * Icon displayed for submenu indicators.
+     * @default 'lucide:chevron-right'
+     */
+    submenuIcon?: string;
+    /**
+     * Display an arrow alongside the dropdown.
+     * Can be a boolean or arrow props for customization.
+     * @default false
+     */
+    arrow?: boolean | Pick<DropdownMenuArrowPropsWithoutHTML, 'width' | 'height'>;
+    /**
+     * Animate the dropdown on open and close.
+     * @default true
+     */
+    transition?: NonNullable<DropdownMenuVariantProps['transition']>;
+    /**
+     * Render the dropdown content in a portal.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Size variant for the dropdown menu.
+     * @default 'md'
+     */
+    size?: NonNullable<DropdownMenuVariantProps['size']>;
+    /**
+     * Additional CSS class for the dropdown content.
+     * Applied only when no trigger `children` are provided (style your own
+     * trigger element directly otherwise).
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for dropdown menu slots.
+     */
+    ui?: Partial<Record<DropdownMenuSlots, ClassNameValue>>;
+    /**
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the trigger's ARIA and event handlers land
+     * on the real control.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ open, props })}
+     *   <Button {...props}>{open ? 'Close' : 'Open'}</Button>
+     * {/snippet}
+     * ```
+     */
+    children?: Snippet<[{
+        open: boolean;
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * Custom content to render at the top of the dropdown menu.
+     */
+    header?: Snippet<[{
+        close: () => void;
+    }]>;
+    /**
+     * Custom content to render at the bottom of the dropdown menu.
+     */
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    /**
+     * Custom snippet for rendering individual items.
+     * When provided, replaces the default item rendering.
+     */
+    item?: Snippet<[DropdownMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the leading section of items.
+     * Replaces the default icon when provided.
+     */
+    itemLeading?: Snippet<[DropdownMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the label section of items.
+     * Replaces the default label text when provided.
+     */
+    itemLabel?: Snippet<[DropdownMenuItemSlotProps]>;
+    /**
+     * Custom snippet for the trailing section of items.
+     * Replaces the default keyboard shortcuts when provided.
+     */
+    itemTrailing?: Snippet<[DropdownMenuItemSlotProps]>;
+    /**
+     * Custom dropdown content.
+     * When provided, replaces the default items rendering entirely.
+     */
+    content?: Snippet<[{
+        open: boolean;
+        close: () => void;
+    }]>;
+}
+export {};

package/dist/DropdownMenu/dropdown-menu.types.js

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

package/dist/DropdownMenu/dropdown-menu.variants.d.ts

@@ -0,0 +1,312 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const itemColorClasses: Record<string, {
+    item: string;
+    itemLeadingIcon: string;
+}>;
+export declare const dropdownMenuVariants: import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+            subContent: string[];
+        };
+    };
+    size: {
+        xs: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        sm: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        md: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        lg: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        xl: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    group: string;
+    separator: string;
+    label: string;
+    item: string[];
+    itemLeadingIcon: string;
+    itemLabel: string;
+    itemTrailingKbds: string;
+    itemIndicator: string;
+    subTrigger: string[];
+    subTriggerIcon: string;
+    subContent: string[];
+}, undefined, {
+    transition: {
+        true: {
+            content: string[];
+            subContent: string[];
+        };
+    };
+    size: {
+        xs: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        sm: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        md: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        lg: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        xl: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    group: string;
+    separator: string;
+    label: string;
+    item: string[];
+    itemLeadingIcon: string;
+    itemLabel: string;
+    itemTrailingKbds: string;
+    itemIndicator: string;
+    subTrigger: string[];
+    subTriggerIcon: string;
+    subContent: string[];
+}, import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+            subContent: string[];
+        };
+    };
+    size: {
+        xs: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        sm: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+            label: string;
+        };
+        md: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        lg: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+        xl: {
+            item: string;
+            subTrigger: string;
+            itemLeadingIcon: string;
+            subTriggerIcon: string;
+            itemIndicator: string;
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+    group: string;
+    separator: string;
+    label: string;
+    item: string[];
+    itemLeadingIcon: string;
+    itemLabel: string;
+    itemTrailingKbds: string;
+    itemIndicator: string;
+    subTrigger: string[];
+    subTriggerIcon: string;
+    subContent: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type DropdownMenuVariantProps = VariantProps<typeof dropdownMenuVariants>;
+export type DropdownMenuSlots = keyof ReturnType<typeof dropdownMenuVariants>;
+export declare const dropdownMenuDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        transition: {
+            true: {
+                content: string[];
+                subContent: string[];
+            };
+        };
+        size: {
+            xs: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+                label: string;
+            };
+            sm: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+                label: string;
+            };
+            md: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+            lg: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+            xl: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+        group: string;
+        separator: string;
+        label: string;
+        item: string[];
+        itemLeadingIcon: string;
+        itemLabel: string;
+        itemTrailingKbds: string;
+        itemIndicator: string;
+        subTrigger: string[];
+        subTriggerIcon: string;
+        subContent: string[];
+    }, {
+        transition: {
+            true: {
+                content: string[];
+                subContent: string[];
+            };
+        };
+        size: {
+            xs: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+                label: string;
+            };
+            sm: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+                label: string;
+            };
+            md: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+            lg: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+            xl: {
+                item: string;
+                subTrigger: string;
+                itemLeadingIcon: string;
+                subTriggerIcon: string;
+                itemIndicator: string;
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+        group: string;
+        separator: string;
+        label: string;
+        item: string[];
+        itemLeadingIcon: string;
+        itemLabel: string;
+        itemTrailingKbds: string;
+        itemIndicator: string;
+        subTrigger: string[];
+        subTriggerIcon: string;
+        subContent: string[];
+    }>;
+    slots: Partial<Record<DropdownMenuSlots, string>>;
+};