svelora 3.0.0 → 3.0.2

package/dist/Command/Command.svelte

@@ -1,82 +1,45 @@
-<script lang="ts" module>
-    import type { CommandProps } from './command.types.js'
-
-    export type Props = CommandProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { Command } from 'bits-ui'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { commandDefaults, commandVariants } from './command.variants.js'
-
-    const config = getComponentConfig('command', commandDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(''),
-        search = $bindable(''),
-        onValueChange,
-        groups = [],
-        placeholder = 'Type a command or search...',
-        loading = false,
-        emptyText = 'No results found.',
-        icon,
-        label,
-        filter,
-        shouldFilter = true,
-        loop = false,
-        vimBindings = true,
-        size = config.defaultVariants.size,
-        item: itemSlot,
-        itemLeading: itemLeadingSlot,
-        itemLabel: itemLabelSlot,
-        itemTrailing: itemTrailingSlot,
-        empty: emptySlot,
-        footer: footerSlot,
-        ui,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const slots = $derived(commandVariants({ size }))
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            inputWrapper: slots.inputWrapper({
-                class: [config.slots.inputWrapper, u.inputWrapper]
-            }),
-            inputIcon: slots.inputIcon({ class: [config.slots.inputIcon, u.inputIcon] }),
-            input: slots.input({ class: [config.slots.input, u.input] }),
-            list: slots.list({ class: [config.slots.list, u.list] }),
-            empty: slots.empty({ class: [config.slots.empty, u.empty] }),
-            loading: slots.loading({ class: [config.slots.loading, u.loading] }),
-            group: slots.group({ class: [config.slots.group, u.group] }),
-            groupHeading: slots.groupHeading({
-                class: [config.slots.groupHeading, u.groupHeading]
-            }),
-            groupItems: slots.groupItems({ class: [config.slots.groupItems, u.groupItems] }),
-            separator: slots.separator({ class: [config.slots.separator, u.separator] }),
-            item: slots.item({ class: [config.slots.item, u.item] }),
-            itemIcon: slots.itemIcon({ class: [config.slots.itemIcon, u.itemIcon] }),
-            itemWrapper: slots.itemWrapper({ class: [config.slots.itemWrapper, u.itemWrapper] }),
-            itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, u.itemLabel] }),
-            itemDescription: slots.itemDescription({
-                class: [config.slots.itemDescription, u.itemDescription]
-            }),
-            itemTrailing: slots.itemTrailing({
-                class: [config.slots.itemTrailing, u.itemTrailing]
-            }),
-            footer: slots.footer({ class: [config.slots.footer, u.footer] })
-        }
-    })
-
-    function handleValueChange(v: string) {
-        value = v
-        onValueChange?.(v)
-    }
+<script lang="ts">import { Command } from "bits-ui";
+import { getComponentConfig, iconsDefaults } from "../config.js";
+import Icon from "../Icon/Icon.svelte";
+import { commandDefaults, commandVariants } from "./command.variants.js";
+const config = getComponentConfig("command", commandDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let { ref = $bindable(null), value = $bindable(""), search = $bindable(""), onValueChange, groups = [], placeholder = "Type a command or search...", loading = false, emptyText = "No results found.", icon, label, filter, shouldFilter = true, loop = false, vimBindings = true, size = config.defaultVariants.size, item: itemSlot, itemLeading: itemLeadingSlot, itemLabel: itemLabelSlot, itemTrailing: itemTrailingSlot, empty: emptySlot, footer: footerSlot, ui, class: className, ...restProps } = $props();
+const slots = $derived(commandVariants({ size }));
+const classes = $derived.by(() => {
+	const u = ui ?? {};
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			u.root
+		] }),
+		inputWrapper: slots.inputWrapper({ class: [config.slots.inputWrapper, u.inputWrapper] }),
+		inputIcon: slots.inputIcon({ class: [config.slots.inputIcon, u.inputIcon] }),
+		input: slots.input({ class: [config.slots.input, u.input] }),
+		list: slots.list({ class: [config.slots.list, u.list] }),
+		empty: slots.empty({ class: [config.slots.empty, u.empty] }),
+		loading: slots.loading({ class: [config.slots.loading, u.loading] }),
+		group: slots.group({ class: [config.slots.group, u.group] }),
+		groupHeading: slots.groupHeading({ class: [config.slots.groupHeading, u.groupHeading] }),
+		groupItems: slots.groupItems({ class: [config.slots.groupItems, u.groupItems] }),
+		separator: slots.separator({ class: [config.slots.separator, u.separator] }),
+		item: slots.item({ class: [config.slots.item, u.item] }),
+		itemIcon: slots.itemIcon({ class: [config.slots.itemIcon, u.itemIcon] }),
+		itemWrapper: slots.itemWrapper({ class: [config.slots.itemWrapper, u.itemWrapper] }),
+		itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, u.itemLabel] }),
+		itemDescription: slots.itemDescription({ class: [config.slots.itemDescription, u.itemDescription] }),
+		itemTrailing: slots.itemTrailing({ class: [config.slots.itemTrailing, u.itemTrailing] }),
+		footer: slots.footer({ class: [config.slots.footer, u.footer] })
+	};
+});
+function handleValueChange(v) {
+	value = v;
+	onValueChange?.(v);
+}
 </script>
 
 <Command.Root

package/dist/Command/Command.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { CommandProps } from './command.types.js';
 export type Props = CommandProps;
 import { Command } from 'bits-ui';
-declare const Command: import("svelte").Component<CommandProps, {}, "search" | "value" | "ref">;
+declare const Command: import("svelte").Component<CommandProps, {}, "search" | "ref" | "value">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/Command/CommandTestWrapper.svelte

@@ -1,13 +1,5 @@
-<script lang="ts">
-    import Command from './Command.svelte'
-    import type { CommandProps } from './command.types.js'
-
-    let {
-        ...props
-    }: Omit<
-        CommandProps,
-        'item' | 'itemLeading' | 'itemLabel' | 'itemTrailing' | 'empty' | 'footer'
-    > = $props()
+<script lang="ts">import Command from "./Command.svelte";
+let { ...props } = $props();
 </script>
 
 <Command {...props} />

package/dist/Command/CommandTestWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CommandProps } from './command.types.js';
-declare const CommandTestWrapper: import("svelte").Component<Omit<CommandProps, "item" | "footer" | "empty" | "itemLabel" | "itemTrailing" | "itemLeading">, {}, "">;
+declare const CommandTestWrapper: import("svelte").Component<Omit<CommandProps, "itemLeading" | "itemLabel" | "item" | "footer" | "itemTrailing" | "empty">, {}, "">;
 type CommandTestWrapper = ReturnType<typeof CommandTestWrapper>;
 export default CommandTestWrapper;

package/dist/Container/Container.svelte

@@ -1,19 +1,16 @@
-<script lang="ts" module>
-    import type { ContainerProps } from './container.types.js'
-
-    export type Props = ContainerProps
+<script lang="ts" module>export {};
 </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 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();
+const rootClass = $derived(slots.root({ class: [
+	config.slots.root,
+	className,
+	ui?.root
+] }));
 </script>
 
 <svelte:element this={as} class={rootClass} {...restProps}>

package/dist/ContextMenu/ContextMenu.svelte

@@ -1,119 +1,56 @@
-<script lang="ts" module>
-    import type {
-        ContextMenuItem,
-        ContextMenuItemAction,
-        ContextMenuItemCheckbox,
-        ContextMenuItemRadio,
-        ContextMenuItemSub, 
-        ContextMenuProps
-    } from './context-menu.types.js'
-
-    export type Props = ContextMenuProps
+<script lang="ts" module>export {};
 </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 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();
+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) {
+	return !item.type || item.type === "item";
+}
+function isCheckboxItem(item) {
+	return item.type === "checkbox";
+}
+function isRadioItem(item) {
+	return item.type === "radio";
+}
+function isSubItem(item) {
+	return item.type === "sub";
+}
+function isSeparator(item) {
+	return item.type === "separator";
+}
+function isLabel(item) {
+	return item.type === "label";
+}
 </script>
 
 {#snippet renderKbds(kbds: ContextMenuItemAction['kbds'])}

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

@@ -1,6 +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">;
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open" | "ref">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

package/dist/Drawer/Drawer.svelte

@@ -1,115 +1,77 @@
-<script lang="ts" module>
-    import type { DrawerProps } from './drawer.types.js'
-
-    export type Props = DrawerProps
+<script lang="ts" module>export {};
 </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: Record<string, unknown> = {
-            ...rest,
-            open,
-            onOpenChange: handleOpenChange,
-            direction,
-            dismissible,
-            modal,
-            shouldScaleBackground,
-            closeThreshold,
-            scrollLockTimeout,
-            activeSnapPoint,
-            onActiveSnapPointChange: handleActiveSnapPointChange,
-            handleOnly,
-            noBodyStyles,
-            onDrag,
-            onRelease,
-            onClose
-        }
-        if (rest.container) {
-            base.container = rest.container
-        }
-        if (snapPoints && fadeFromIndex !== null) {
-            return { ...base, snapPoints, fadeFromIndex }
-        }
-        if (snapPoints) {
-            return { ...base, snapPoints }
-        }
-        return base
-    })
+<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();
+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) {
+	open = value;
+	onOpenChange?.(value);
+}
+function handleActiveSnapPointChange(value) {
+	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 (rest.container) {
+		base.container = rest.container;
+	}
+	if (snapPoints && fadeFromIndex !== null) {
+		return {
+			...base,
+			snapPoints,
+			fadeFromIndex
+		};
+	}
+	if (snapPoints) {
+		return {
+			...base,
+			snapPoints
+		};
+	}
+	return base;
+});
 </script>
 
 {#snippet drawerInner()}

package/dist/Drawer/DrawerTriggerTestWrapper.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">
-    import Drawer from './Drawer.svelte'
+<script lang="ts">import Drawer from "./Drawer.svelte";
 </script>
 
 <Drawer>