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

package/dist/lib/components/ui/chart/chart-tooltip.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../utils.js";
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+		return `${value}`;
+	}
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		hideLabel = false,
+		indicator = "dot",
+		hideIndicator = false,
+		labelKey,
+		label,
+		labelFormatter = defaultFormatter,
+		labelClassName,
+		formatter,
+		nameKey,
+		color,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		hideLabel?: boolean;
+		label?: string;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+		hideIndicator?: boolean;
+		labelClassName?: string;
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+		formatter?: Snippet<
+			[
+				{
+					value: unknown;
+					name: string;
+					item: TooltipPayload;
+					index: number;
+					payload: TooltipPayload[];
+				},
+			]
+		>;
+	} = $props();
+
+	const chart = useChart();
+	const chartCtx = getChartContext();
+
+	// Filter to series with defined values (important for item-based charts like Pie/Arc
+	// where only the hovered item has a value)
+	const visibleSeries = $derived(
+		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
+	);
+
+	const formattedLabel = $derived.by(() => {
+		if (hideLabel || !visibleSeries?.length) return null;
+
+		const [item] = visibleSeries;
+		const tooltipData = chartCtx.tooltip.data;
+
+		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
+		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+
+		const key = labelKey ?? item?.label ?? item?.key ?? "value";
+		const itemConfig = getPayloadConfigFromPayload(
+			chart.config,
+			item,
+			key,
+			tooltipData as Record<string, unknown> | null
+		);
+
+		let value: unknown;
+		if (!labelKey && typeof label === "string") {
+			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+		} else if (labelKey) {
+			value = itemConfig?.label ?? dataLabel;
+		} else {
+			value = dataLabel;
+		}
+
+		if (value === undefined) return null;
+		if (!labelFormatter) return value;
+		return labelFormatter(value, visibleSeries);
+	});
+
+	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel}
+		<div class={cn("font-medium", labelClassName)}>
+			{#if typeof formattedLabel === "function"}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		bind:this={ref}
+		class={cn(
+			"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+			className
+		)}
+		{...restProps}
+	>
+		{#if !nestLabel}
+			{@render TooltipLabel()}
+		{/if}
+		<div class="grid gap-1.5">
+			{#each visibleSeries as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || item.label || "value"}`}
+				{@const itemConfig = getPayloadConfigFromPayload(
+					chart.config,
+					item,
+					key,
+					chartCtx.tooltip.data
+				)}
+				{@const indicatorColor = color || item.config?.color || item.color}
+				<div
+					class={cn(
+						"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+						indicator === "dot" && "items-center"
+					)}
+				>
+					{#if formatter && item.value !== undefined && item.label}
+						{@render formatter({
+							value: item.value,
+							name: item.label,
+							item,
+							index: i,
+							payload: visibleSeries,
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+								class={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+									"h-2.5 w-2.5": indicator === "dot",
+									"h-full w-1": indicator === "line",
+									"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+									"my-0.5": nestLabel && indicator === "dashed",
+								})}
+							></div>
+						{/if}
+						<div
+							class={cn(
+								"flex flex-1 shrink-0 justify-between leading-none",
+								nestLabel ? "items-end" : "items-center"
+							)}
+						>
+							<div class="grid gap-1.5">
+								{#if nestLabel}
+									{@render TooltipLabel()}
+								{/if}
+								<span class="text-muted-foreground">
+									{itemConfig?.label || item.label}
+								</span>
+							</div>
+							{#if item.value !== undefined}
+								<span class="font-mono font-medium text-foreground tabular-nums">
+									{item.value.toLocaleString()}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</TooltipPrimitive.Root>

package/dist/lib/components/ui/chart/chart-tooltip.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type WithElementRef, type WithoutChildren } from "../../utils.js";
+import { type TooltipPayload } from "./chart-utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+    formatter?: Snippet<[
+        {
+            value: unknown;
+            name: string;
+            item: TooltipPayload;
+            index: number;
+            payload: TooltipPayload[];
+        }
+    ]>;
+};
+declare const ChartTooltip: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ChartTooltip = ReturnType<typeof ChartTooltip>;
+export default ChartTooltip;

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

@@ -0,0 +1,36 @@
+import { type Component, type Snippet } from "svelte";
+import type { Tooltip } from "layerchart";
+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 = Tooltip.TooltipSeries;
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string, data?: Record<string, any> | null): ({
+    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,38 @@
+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, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+data) {
+    if (typeof payload !== "object" || payload === null)
+        return undefined;
+    const payloadConfig = "config" in payload && typeof payload.config === "object" && payload.config !== null
+        ? payload.config
+        : undefined;
+    let configLabelKey = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    }
+    else if (payload.label === key) {
+        configLabelKey = payload.label;
+    }
+    else if (key in payload && typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadConfig !== undefined &&
+        key in payloadConfig &&
+        typeof payloadConfig[key] === "string") {
+        configLabelKey = payloadConfig[key];
+    }
+    else if (data != null && key in data && typeof data[key] === "string") {
+        configLabelKey = data[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,39 @@
 <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-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{:else if indeterminate}
+				<MinusIcon  />
 			{/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 Content from "./collapsible-content.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Root from "./collapsible.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 Content from "./collapsible-content.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Root from "./collapsible.svelte";
 export { Root, Content, Trigger, 
 //
 Root as Collapsible, Content as CollapsibleContent, Trigger as CollapsibleTrigger, };

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

@@ -1,35 +1,42 @@
 <script lang="ts">
-	import {
-		Command as CommandPrimitive,
-		Dialog as DialogPrimitive,
-		type WithoutChildrenOrChild,
-	} from "bits-ui";
-	import type { Snippet } from "svelte";
-	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import Command from "./command.svelte";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run...",
+		showCloseButton = false,
 		portalProps,
 		children,
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
 			portalProps?: DialogPrimitive.PortalProps;
 			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
 		} = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-	<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"
-			{...restProps}
-			bind:value
-			bind:ref
-			{children}
-		/>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>

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

@@ -1,8 +1,13 @@
-import { Command as CommandPrimitive, Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
 };
 declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
 type CommandDialog = ReturnType<typeof 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,14 +15,14 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn("text-foreground overflow-hidden p-1", className)}
 	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium", className)}
+	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading
-			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
-		>
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import Search from "@lucide/svelte/icons/search";
-	import { cn } from "../../../utils";
+	import * as InputGroup from "../input-group/index.js";
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,15 +12,23 @@
 	}: 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" />
-	<CommandPrimitive.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",
-			className
-		)}
-		bind:ref
-		bind:value
-		{...restProps}
-	/>
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
 </div>

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

@@ -1,19 +1,27 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
 	}: CommandPrimitive.ItemProps = $props();
 </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",
+		"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
-	bind:ref
 	{...restProps}
-/>
+>
+	{@render children?.()}
+	<CheckIcon class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+</CommandPrimitive.Item>

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),
@@ -9,11 +9,14 @@
 	}: CommandPrimitive.LinkItemProps = $props();
 </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",
+		"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />