@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.12

package/dist/components/primitives/command/command-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandList: import("svelte").Component<CommandPrimitive.ListProps, {}, "ref">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/primitives/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

package/dist/components/primitives/command/command-loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandLoading: import("svelte").Component<CommandPrimitive.LoadingProps, {}, "ref">;
+type CommandLoading = ReturnType<typeof CommandLoading>;
+export default CommandLoading;

package/dist/components/primitives/command/command-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('-mx-1 h-px bg-border', className)}
+	{...restProps}
+/>

package/dist/components/primitives/command/command-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandSeparator: import("svelte").Component<CommandPrimitive.SeparatorProps, {}, "ref">;
+type CommandSeparator = ReturnType<typeof CommandSeparator>;
+export default CommandSeparator;

package/dist/components/primitives/command/command-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn(
+		'text-xs tracking-widest ml-auto text-muted-foreground group-data-selected/command-item:text-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/primitives/command/command-shortcut.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type CommandShortcut = ReturnType<typeof CommandShortcut>;
+export default CommandShortcut;

package/dist/components/primitives/command/command.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		'p-1 flex size-full flex-col overflow-hidden rounded-xl! bg-popover text-popover-foreground',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/primitives/command/command.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+export type CommandRootApi = CommandPrimitive.Root;
+type $$ComponentProps = CommandPrimitive.RootProps & {
+    api?: CommandRootApi | null;
+};
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "api">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/primitives/command/index.d.ts

@@ -0,0 +1,12 @@
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
+import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import Root from './command.svelte';
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };

package/dist/components/primitives/command/index.js

@@ -0,0 +1,14 @@
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Input from './command-input.svelte';
+import Item from './command-item.svelte';
+import LinkItem from './command-link-item.svelte';
+import List from './command-list.svelte';
+import Loading from './command-loading.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+import Root from './command.svelte';
+export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
+//
+Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading };

package/dist/components/primitives/context-menu/context-menu-content.svelte

@@ -17,7 +17,7 @@
 		bind:ref
 		data-slot="context-menu-content"
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-md z-50 max-h-(--bits-context-menu-content-available-height) min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-md min-w-32 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
 			className
 		)}
 		{...restProps}

package/dist/components/primitives/context-menu/context-menu-sub-content.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="context-menu-sub-content"
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-lg z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground',
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 p-1 shadow-lg min-w-32 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/dialog/dialog-content.svelte

@@ -4,6 +4,7 @@
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -11,12 +12,17 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		variant = 'default',
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;
 		children: Snippet;
 		showCloseButton?: boolean;
+		/** `flush` drops padding and gap, for content that draws its own sections edge to edge. */
+		variant?: 'default' | 'flush';
 	} = $props();
+
+	const locale = getLocaleContext();
 </script>
 
 <Dialog.Portal {...portalProps}>
@@ -25,18 +31,20 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'gap-4 p-6 shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-[50%] left-[50%] z-50 grid max-h-[85dvh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-y-auto rounded-lg border bg-background duration-200',
+			variant === 'flush' ? 'gap-0' : 'gap-4 p-6',
+			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		{#if showCloseButton}
+			<!-- 24px around the 16px icon, and 44px of hit area on touch, without moving the icon. -->
 			<DialogPrimitive.Close
-				class="end-4 top-4 rounded-xs [&_svg:not([class*='size-'])]:size-4 absolute opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="end-3 top-3 p-1 rounded-xs [&_svg:not([class*='size-'])]:size-4 pointer-coarse:after:-inset-2.5 absolute opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none pointer-coarse:after:absolute [&_svg]:pointer-events-none [&_svg]:shrink-0"
 			>
 				<XIcon />
-				<span class="sr-only">Close</span>
+				<span class="sr-only">{locale.messages.close}</span>
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>

package/dist/components/primitives/dialog/dialog-content.svelte.d.ts

@@ -5,6 +5,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
     showCloseButton?: boolean;
+    /** `flush` drops padding and gap, for content that draws its own sections edge to edge. */
+    variant?: 'default' | 'flush';
 };
 declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;

package/dist/components/primitives/dialog/dialog-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		'inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed z-50',
+		'inset-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed z-50 bg-overlay',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/dialog/dialog-title.svelte

@@ -5,13 +5,17 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		size = 'default',
 		...restProps
-	}: DialogPrimitive.TitleProps = $props();
+	}: DialogPrimitive.TitleProps & {
+		/** `sm` for compact, popover-like dialogs that title a single object. */
+		size?: 'default' | 'sm';
+	} = $props();
 </script>
 
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn('text-lg font-semibold leading-none', className)}
+	class={cn('font-semibold leading-none', size === 'sm' ? 'text-sm' : 'text-lg', className)}
 	{...restProps}
 />

package/dist/components/primitives/dialog/dialog-title.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Dialog as DialogPrimitive } from 'bits-ui';
-declare const DialogTitle: import("svelte").Component<DialogPrimitive.TitleProps, {}, "ref">;
+type $$ComponentProps = DialogPrimitive.TitleProps & {
+    /** `sm` for compact, popover-like dialogs that title a single object. */
+    size?: 'default' | 'sm';
+};
+declare const DialogTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogTitle = ReturnType<typeof DialogTitle>;
 export default DialogTitle;

package/dist/components/primitives/drawer/Drawer.svelte

@@ -21,12 +21,12 @@
 	role="button"
 	tabindex="-1"
 	aria-label={ariaLabel}
-	class="inset-0 bg-black/30 fixed z-50"
+	class="inset-0 fixed z-50 bg-overlay"
 	onclick={onClose}
 	onkeydown={handleKey}
 ></div>
 <div
-	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
+	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
 >
 	{@render children()}
 </div>

package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>

package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuCheckboxGroup: import("svelte").Component<DropdownMenuPrimitive.CheckboxGroupProps, {}, "ref" | "value">;
+type DropdownMenuCheckboxGroup = ReturnType<typeof DropdownMenuCheckboxGroup>;
+export default DropdownMenuCheckboxGroup;

package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		closeOnSelect = false,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	{closeOnSelect}
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"gap-1.5 py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="right-2 pointer-events-none absolute flex items-center justify-center"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<MinusIcon />
+			{:else if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

package/dist/components/primitives/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+};
+declare const DropdownMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
+type DropdownMenuCheckboxItem = ReturnType<typeof DropdownMenuCheckboxItem>;
+export default DropdownMenuCheckboxItem;

package/dist/components/primitives/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		align = 'start',
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 min-w-32 p-1 shadow-md z-50 max-h-(--bits-dropdown-menu-content-available-height) w-(--bits-dropdown-menu-anchor-width) origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[state=closed]:overflow-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>

package/dist/components/primitives/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import DropdownMenuPortal from './dropdown-menu-portal.svelte';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = DropdownMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+};
+declare const DropdownMenuContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
+export default DropdownMenuContent;

package/dist/components/primitives/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn('px-1.5 py-1 text-xs font-medium data-inset:pl-7 text-muted-foreground', className)}
+	{...restProps}
+/>

package/dist/components/primitives/dropdown-menu/dropdown-menu-group-heading.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+    inset?: boolean;
+};
+declare const DropdownMenuGroupHeading: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuGroupHeading = ReturnType<typeof DropdownMenuGroupHeading>;
+export default DropdownMenuGroupHeading;

package/dist/components/primitives/dropdown-menu/dropdown-menu-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

package/dist/components/primitives/dropdown-menu/dropdown-menu-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuGroup: import("svelte").Component<DropdownMenuPrimitive.GroupProps, {}, "ref">;
+type DropdownMenuGroup = ReturnType<typeof DropdownMenuGroup>;
+export default DropdownMenuGroup;

package/dist/components/primitives/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = 'default',
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"gap-1.5 px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/primitives/dropdown-menu/dropdown-menu-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+type $$ComponentProps = DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+};
+declare const DropdownMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
+export default DropdownMenuItem;

package/dist/components/primitives/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn('px-1.5 py-1 text-xs font-medium data-inset:pl-7 text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/dropdown-menu/dropdown-menu-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+};
+declare const DropdownMenuLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuLabel = ReturnType<typeof DropdownMenuLabel>;
+export default DropdownMenuLabel;

package/dist/components/primitives/dropdown-menu/dropdown-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />

package/dist/components/primitives/dropdown-menu/dropdown-menu-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DropdownMenuPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type DropdownMenuPortal = ReturnType<typeof DropdownMenuPortal>;
+export default DropdownMenuPortal;

package/dist/components/primitives/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

package/dist/components/primitives/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
+type DropdownMenuRadioGroup = ReturnType<typeof DropdownMenuRadioGroup>;
+export default DropdownMenuRadioGroup;

package/dist/components/primitives/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		closeOnSelect = false,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	{closeOnSelect}
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"gap-1.5 py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="right-2 pointer-events-none absolute flex items-center justify-center"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			{#if checked}
+				<CheckIcon />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>

package/dist/components/primitives/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuRadioItem: import("svelte").Component<Omit<DropdownMenuPrimitive.RadioItemProps, "child">, {}, "ref">;
+type DropdownMenuRadioItem = ReturnType<typeof DropdownMenuRadioItem>;
+export default DropdownMenuRadioItem;

package/dist/components/primitives/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
+	{...restProps}
+/>