@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.1.0

package/dist/lib/components/ui/chart/chart-utils.d.ts

@@ -0,0 +1,36 @@
+import type { Tooltip } from "layerchart";
+import { type Component, type ComponentProps, type Snippet } from "svelte";
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: string;
+        icon?: Component;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>["children"]>["payload"][number];
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string): ({
+    label?: string;
+    icon?: Component;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+type ChartContextValue = {
+    config: ChartConfig;
+};
+export declare function setChartContext(value: ChartContextValue): ChartContextValue;
+export declare function useChart(): ChartContextValue;
+export {};

package/dist/lib/components/ui/chart/chart-utils.js

@@ -0,0 +1,33 @@
+import { getContext, setContext } from "svelte";
+export const THEMES = { light: "", dark: ".dark" };
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null)
+        return undefined;
+    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    }
+    else if (payload.name === key) {
+        configLabelKey = payload.name;
+    }
+    else if (key in payload && typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload !== undefined &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const chartContextKey = Symbol("chart-context");
+export function setChartContext(value) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext(chartContextKey);
+}

package/dist/lib/components/ui/chart/index.d.ts

@@ -0,0 +1,4 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils.js";
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

package/dist/lib/components/ui/chart/index.js

@@ -0,0 +1,4 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+export { getPayloadConfigFromPayload } from "./chart-utils.js";
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

package/dist/lib/components/ui/checkbox/checkbox.svelte

@@ -1,35 +1,36 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "../../../utils";
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
 </script>
 
 <CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
 	class={cn(
-		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
-	bind:ref
 	bind:indeterminate
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="flex items-center justify-center text-current">
-			{#if indeterminate}
-				<Minus class="size-4" />
-			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
 			{/if}
-		</span>
+		</div>
 	{/snippet}
 </CheckboxPrimitive.Root>

package/dist/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

package/dist/lib/components/ui/collapsible/collapsible-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const CollapsibleContent: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/lib/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

package/dist/lib/components/ui/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const CollapsibleTrigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

package/dist/lib/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

package/dist/lib/components/ui/collapsible/collapsible.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const Collapsible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/lib/components/ui/collapsible/index.d.ts

@@ -1,5 +1,4 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const Root: typeof CollapsiblePrimitive.Root;
-declare const Trigger: typeof CollapsiblePrimitive.Trigger;
-declare const Content: typeof CollapsiblePrimitive.Content;
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
 export { Root, Content, Trigger, Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/lib/components/ui/collapsible/index.js

@@ -1,7 +1,6 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-const Root = CollapsiblePrimitive.Root;
-const Trigger = CollapsiblePrimitive.Trigger;
-const Content = CollapsiblePrimitive.Content;
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
 export { Root, Content, Trigger, 
 //
 Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

package/dist/lib/components/ui/command/command-dialog.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-	import {
-		Command as CommandPrimitive,
-		Dialog as DialogPrimitive,
-		type WithoutChildrenOrChild,
-	} from "bits-ui";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
+	import type { WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
 		portalProps,
 		children,
 		...restProps
@@ -19,13 +18,19 @@
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
 			portalProps?: DialogPrimitive.PortalProps;
 			children: Snippet;
+			title?: string;
+			description?: string;
 		} = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
 	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
 		<Command
-			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
 			{...restProps}
 			bind:value
 			bind:ref

package/dist/lib/components/ui/command/command-dialog.svelte.d.ts

@@ -1,9 +1,12 @@
-import { Command as CommandPrimitive, Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
+import type { WithoutChildrenOrChild } from "../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
+    title?: string;
+    description?: string;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/lib/components/ui/command/command-empty.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,9 @@
 	}: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty bind:ref class={cn("py-6 text-center text-sm", className)} {...restProps} />
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/command/command-group.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		heading,
+		value,
 		...restProps
 	}: CommandPrimitive.GroupProps & {
 		heading?: string;
@@ -14,8 +15,10 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn("text-foreground overflow-hidden p-1", className)}
 	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}

package/dist/lib/components/ui/command/command-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import Search from "@lucide/svelte/icons/search";
-	import { cn } from "../../../utils";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,15 +11,16 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-3" data-command-input-wrapper="">
-	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+<div class="flex h-9 items-center gap-2 border-b pe-8 ps-3" data-slot="command-input-wrapper">
+	<SearchIcon class="size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
+		data-slot="command-input"
 		class={cn(
-			"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		bind:ref
-		bind:value
 		{...restProps}
+		bind:value
 	/>
 </div>

package/dist/lib/components/ui/command/command-input.svelte.d.ts

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

package/dist/lib/components/ui/command/command-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,10 +10,11 @@
 </script>
 
 <CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

package/dist/lib/components/ui/command/command-link-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,10 +10,11 @@
 </script>
 
 <CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

package/dist/lib/components/ui/command/command-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +10,8 @@
 </script>
 
 <CommandPrimitive.List
-	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 	bind:ref
+	data-slot="command-list"
+	class={cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/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/lib/components/ui/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/lib/components/ui/command/command-separator.svelte

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

package/dist/lib/components/ui/command/command-shortcut.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +11,10 @@
 </script>
 
 <span
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...restProps}
 	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
 >
 	{@render children?.()}
 </span>

package/dist/lib/components/ui/command/command-shortcut.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+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>;

package/dist/lib/components/ui/command/command.svelte

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

package/dist/lib/components/ui/command/command.svelte.d.ts

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

package/dist/lib/components/ui/command/index.d.ts

@@ -1,5 +1,5 @@
-import { Command as CommandPrimitive } from "bits-ui";
 import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
@@ -9,5 +9,4 @@ import List from "./command-list.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
 import LinkItem from "./command-link-item.svelte";
-declare const Loading: typeof CommandPrimitive.Loading;
 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/lib/components/ui/command/index.js

@@ -1,5 +1,5 @@
-import { Command as CommandPrimitive } from "bits-ui";
 import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
@@ -9,7 +9,6 @@ import List from "./command-list.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
 import LinkItem from "./command-link-item.svelte";
-const Loading = CommandPrimitive.Loading;
 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/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		class: className,
 		children: childrenProp,
 		...restProps
 	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
@@ -21,18 +20,19 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
-			{#if indeterminate}
-				<Minus class="size-4" />
-			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if checked}
+				<CheckIcon class="size-4" />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/dist/lib/components/ui/context-menu/context-menu-checkbox-item.svelte.d.ts

@@ -1,4 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../utils.js";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
     children?: Snippet;