@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

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

@@ -0,0 +1,63 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import ChartStyle from "./chart-style.svelte";
+import { setChartContext } from "./chart-utils.js";
+const uid = $props.id();
+let { ref = $bindable(null), id = uid, class: className, children, config, ...restProps } = $props();
+const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
+setChartContext({ get config() {
+	return config;
+} });
+</script>
+
+<div
+	bind:this={ref}
+	data-chart={chartId}
+	data-slot="chart"
+	class={cn(
+		'flex aspect-video justify-center overflow-visible text-xs',
+		// Overrides
+		//
+		// Stroke around dots/marks when hovering
+		'[&_.stroke-white]:stroke-transparent',
+		// override the default stroke color of lines
+		'[&_.lc-line]:stroke-border/50',
+
+		// by default, layerchart shows a line intersecting the point when hovering, this hides that
+		'[&_.lc-highlight-line]:stroke-0',
+
+		// by default, when you hover a point on a stacked series chart, it will drop the opacity
+		// of the other series, this overrides that
+		'[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible',
+
+		// We don't want the little tick lines between the axis labels and the chart, so we remove
+		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+		// chart.
+		'[&_.lc-axis-tick]:stroke-0',
+
+		// We don't want to display the rule on the x/y axis, as there is already going to be
+		// a grid line there and rule ends up overlapping the marks because it is rendered after
+		// the marks
+		'[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+		'[&_.lc-grid-x-radial-circle]:stroke-border [&_.lc-grid-x-radial-line]:stroke-border',
+		'[&_.lc-grid-y-radial-circle]:stroke-border [&_.lc-grid-y-radial-line]:stroke-border',
+
+		// Legend adjustments
+		'[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+		'[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+		'[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+
+		// Labels
+		'[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+
+		// Tick labels on th x/y axes
+		'[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+		'[&_.lc-tooltip-rects-g]:fill-transparent',
+		'[&_.lc-layout-svg-g]:fill-transparent',
+		'[&_.lc-root-container]:w-full',
+		className
+	)}
+	{...restProps}
+>
+	<ChartStyle id={chartId} {config} />
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ChartConfig } from './chart-utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    config: ChartConfig;
+};
+declare const ChartContainer: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

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

@@ -0,0 +1,13 @@
+<script lang="ts">import { buildChartThemeCss } from "./chart-theme-css.js";
+let { id, config } = $props();
+// Keys and colours often come from data; the builder keeps each inside its declaration.
+const themeContents = $derived(config ? buildChartThemeCss(id, config) : undefined);
+</script>
+
+{#if themeContents}
+	{#key id}
+		<svelte:element this={'style'}>
+			{themeContents}
+		</svelte:element>
+	{/key}
+{/if}

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

@@ -0,0 +1,8 @@
+import type { ChartConfig } from './chart-utils.js';
+type $$ComponentProps = {
+    id: string;
+    config: ChartConfig;
+};
+declare const ChartStyle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartStyle = ReturnType<typeof ChartStyle>;
+export default ChartStyle;

package/dist/lib/components/ui/chart/chart-theme-css.d.ts

@@ -0,0 +1,18 @@
+import { type ChartConfig } from './chart-utils.js';
+/**
+ * A config key as the tail of a CSS custom property name. Valid identifier
+ * characters are unchanged, so `--color-desktop` stays `--color-desktop`;
+ * anything else is a hex escape and cannot end the declaration or the rule.
+ */
+export declare function escapeCssIdentTail(value: string): string;
+/**
+ * A colour value that stays inside its declaration: no statement or block
+ * delimiters, markup, escapes, comments or line breaks. Anything else is not
+ * written, and the series keeps the chart's default colour.
+ */
+export declare function isContainedCssValue(value: string): boolean;
+/**
+ * The per-theme custom properties a chart config declares, scoped to the chart
+ * with `data-chart` equal to `id`; `undefined` when the config declares none.
+ */
+export declare function buildChartThemeCss(id: string, config: ChartConfig): string | undefined;

package/dist/lib/components/ui/chart/chart-theme-css.js

@@ -0,0 +1,58 @@
+import { THEMES } from './chart-utils.js';
+/** ASCII letters, digits, `-` and `_` stay as written; the rest of ASCII is hex-escaped. */
+const IDENT_SAFE = /^[A-Za-z0-9_-]$/;
+const THEME_NAMES = ['light', 'dark'];
+function hexEscape(character) {
+    return `\\${(character.codePointAt(0) ?? 0xfffd).toString(16)} `;
+}
+/**
+ * A config key as the tail of a CSS custom property name. Valid identifier
+ * characters are unchanged, so `--color-desktop` stays `--color-desktop`;
+ * anything else is a hex escape and cannot end the declaration or the rule.
+ */
+export function escapeCssIdentTail(value) {
+    let escaped = '';
+    for (const character of value) {
+        const code = character.codePointAt(0) ?? 0;
+        escaped += code >= 0x80 || IDENT_SAFE.test(character) ? character : hexEscape(character);
+    }
+    return escaped;
+}
+/** A value for a double-quoted CSS string, with every non-identifier character hex-escaped. */
+function escapeCssString(value) {
+    let escaped = '';
+    for (const character of value) {
+        escaped += IDENT_SAFE.test(character) ? character : hexEscape(character);
+    }
+    return escaped;
+}
+/**
+ * A colour value that stays inside its declaration: no statement or block
+ * delimiters, markup, escapes, comments or line breaks. Anything else is not
+ * written, and the series keeps the chart's default colour.
+ */
+export function isContainedCssValue(value) {
+    return value.trim() !== '' && !/[;{}<>\\\r\n\f]|\/\*/.test(value);
+}
+/**
+ * The per-theme custom properties a chart config declares, scoped to the chart
+ * with `data-chart` equal to `id`; `undefined` when the config declares none.
+ */
+export function buildChartThemeCss(id, config) {
+    const entries = Object.entries(config).filter(([, item]) => item.theme || item.color);
+    if (entries.length === 0)
+        return undefined;
+    const selector = `[data-chart="${escapeCssString(id)}"]`;
+    const rules = [];
+    for (const theme of THEME_NAMES) {
+        const declarations = [];
+        for (const [key, item] of entries) {
+            const color = item.theme?.[theme] || item.color;
+            if (color && isContainedCssValue(color)) {
+                declarations.push(`\t--color-${escapeCssIdentTail(key)}: ${color};`);
+            }
+        }
+        rules.push(`${THEMES[theme]} ${selector} {\n${declarations.join('\n')}\n}`);
+    }
+    return rules.join('\n');
+}

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

@@ -0,0 +1,120 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { getPayloadConfigFromPayload, isChartString, useChart } from "./chart-utils.js";
+import { isContainedCssValue } from "./chart-theme-css.js";
+import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+function defaultFormatter(value, _payload) {
+	return `${value}`;
+}
+function isSnippet(value) {
+	return typeof value === "function";
+}
+let { ref = $bindable(null), class: className, hideLabel = false, indicator = "dot", hideIndicator = false, labelKey, label, labelFormatter = defaultFormatter, labelClassName, formatter, nameKey, color, ...restProps } = $props();
+const chart = useChart();
+const layerChart = getChartContext();
+const payload = $derived(layerChart.tooltip.series.filter((series) => series.visible && series.value != null).map((series) => ({
+	...series,
+	name: series.label,
+	payload: layerChart.tooltip.data ?? undefined
+})));
+const formattedLabel = $derived.by(() => {
+	if (hideLabel || payload.length === 0) return null;
+	const [item] = payload;
+	const key = labelKey ?? item?.label ?? item?.name ?? "value";
+	const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+	const value = !labelKey && label !== undefined ? Object.hasOwn(chart.config, label) ? chart.config[label]?.label ?? label : label : itemConfig?.label ?? item.label;
+	if (value === undefined) return null;
+	if (!labelFormatter) return value;
+	return labelFormatter(value, payload);
+});
+const nestLabel = $derived(payload.length === 1 && indicator !== "dot");
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel !== null && formattedLabel !== undefined}
+		<div class={cn('font-medium', labelClassName)}>
+			{#if isSnippet(formattedLabel)}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		bind:this={ref}
+		class={cn(
+			'grid min-w-[9rem] 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 payload as item, i (item.key ?? item.name ?? String(i))}
+				{@const key = `${nameKey || item.key || item.name || 'value'}`}
+				{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+				{@const proposedColor = color || item.payload?.color || item.color}
+				{@const indicatorColor =
+					isChartString(proposedColor) && isContainedCssValue(proposedColor)
+						? proposedColor
+						: undefined}
+				<div
+					class={cn(
+						'flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground',
+						indicator === 'dot' && 'items-center'
+					)}
+				>
+					{#if formatter && item.value !== undefined && item.name}
+						{@render formatter({
+							value: item.value,
+							name: item.name,
+							item,
+							index: i,
+							payload
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								data-slot="chart-tooltip-indicator"
+								style:--color-bg={indicatorColor}
+								style:--color-border={indicatorColor}
+								class={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+									'size-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.name}
+								</span>
+							</div>
+							{#if item.value !== undefined && item.value !== null}
+								<span class="font-mono font-medium text-foreground tabular-nums">
+									{String(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 { HTMLAttributes } from 'svelte/elements';
+import { type TooltipPayload } from './chart-utils.js';
+import type { Snippet } from 'svelte';
+type TooltipLabel = string | number | Snippet;
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: ((value: TooltipPayload['value'], payload: TooltipPayload[]) => TooltipLabel) | null;
+    formatter?: Snippet<[
+        {
+            value: TooltipPayload['value'];
+            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,31 @@
+import { type Component } from 'svelte';
+import type { TooltipSeries, TooltipState } 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 TooltipPayload = TooltipSeries & {
+    name: string;
+    payload?: TooltipState['data'];
+};
+/** LayerChart's datum value can be any shape; only strings name config entries. */
+export declare function isChartString(value: TooltipSeries['value']): value is string;
+export declare function getPayloadConfigFromPayload<TPayload extends object>(config: ChartConfig, payload: TPayload, key: string): ChartConfig[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,34 @@
+import { getContext, setContext } from 'svelte';
+export const THEMES = { light: '', dark: '.dark' };
+/** LayerChart's datum value can be any shape; only strings name config entries. */
+export function isChartString(value) {
+    return typeof value === 'string';
+}
+/** A string the record holds under its own `key`; inherited members never count. */
+function ownString(record, key) {
+    if (!record)
+        return undefined;
+    const value = Object.entries(record).find(([entryKey]) => entryKey === key)?.[1];
+    return isChartString(value) ? value : undefined;
+}
+/** The config entry under its own `key`; `constructor` or `toString` name no entry. */
+function ownConfigEntry(config, key) {
+    return Object.hasOwn(config, key) ? config[key] : undefined;
+}
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config, payload, key) {
+    const nested = Object.entries(payload).find(([entryKey]) => entryKey === 'payload')?.[1];
+    const configLabelKey = ownString(payload, 'key') === key || ownString(payload, 'name') === key
+        ? key
+        : (ownString(payload, key) ??
+            ownString(nested == null ? undefined : Object(nested), key) ??
+            key);
+    return ownConfigEntry(config, configLabelKey) ?? ownConfigEntry(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

@@ -0,0 +1,28 @@
+<script lang="ts">import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { Icon } from "../../icon";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), checked = $bindable(false), indeterminate = $bindable(false), class: className, ...restProps } = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"relative min-h-0 max-md:before:absolute max-md:before:-inset-3.5 max-md:before:content-['']",
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<Icon icon="lucide:check" class="size-3.5" />
+			{:else if indeterminate}
+				<Icon icon="lucide:minus" class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

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

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

@@ -0,0 +1,2 @@
+import Root from './checkbox.svelte';
+export { Root, Root as Checkbox };

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

@@ -0,0 +1,4 @@
+import Root from './checkbox.svelte';
+export { Root, 
+//
+Root as Checkbox };

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

@@ -0,0 +1,5 @@
+<script lang="ts">import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+let { ref = $bindable(null), ...restProps } = $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,5 @@
+<script lang="ts">import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+let { ref = $bindable(null), ...restProps } = $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,5 @@
+<script lang="ts">import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+let { ref = $bindable(null), open = $bindable(false), ...restProps } = $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, {}, "open" | "ref">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,20 @@
+<script lang="ts">import Command from "./command.svelte";
+import * as Dialog from "../dialog/index.js";
+let { open = $bindable(false), ref = $bindable(null), value = $bindable(""), title = "Command Palette", description = "Search for a command to run", portalProps, children, ...restProps } = $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-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[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
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,12 @@
+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, {}, "value" | "open" | "ref">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

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

@@ -0,0 +1,11 @@
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<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-empty.svelte.d.ts

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">import { Command as CommandPrimitive, useId } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, heading, value, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn('overflow-hidden p-1 text-foreground', className)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

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

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

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

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

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

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+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

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

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

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