@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4

package/dist/components/chart.d.mts

@@ -0,0 +1,93 @@
+import * as _$react from "react";
+import { ComponentProps, ComponentType, JSX, ReactNode } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+import * as RechartsPrimitive from "recharts";
+import { TooltipContentProps, TooltipProps } from "recharts";
+import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+
+//#region src/components/chart.d.ts
+type ExtractProps<T> = T extends ((props: infer P) => ReactNode) ? P : never;
+type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+declare const THEMES: {
+  readonly dark: ".dark";
+  readonly light: "";
+};
+type ChartConfig = Record<string, {
+  label?: ReactNode;
+  icon?: ComponentType;
+} & ({
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+} | {
+  color?: string;
+  theme?: never;
+})>;
+type ScopedProps<P> = P & {
+  __scopeChart?: Scope;
+};
+declare const createChartScope: _$_radix_ui_react_context0.CreateScope;
+interface ChartContainerProps extends ComponentProps<"div"> {
+  children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  config: ChartConfig;
+}
+declare function ChartContainer({
+  __scopeChart,
+  children,
+  className,
+  config,
+  id,
+  ...props
+}: ScopedProps<ChartContainerProps>): JSX.Element;
+interface ChartStyleProps {
+  config: ChartConfig;
+  id: string;
+}
+declare function ChartStyle({
+  config,
+  id
+}: ChartStyleProps): ReactNode;
+type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<TooltipContentProps<TValue, TName>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
+  hideIndicator?: boolean;
+  hideLabel?: boolean;
+  indicator?: "dashed" | "dot" | "line";
+  labelKey?: string;
+  nameKey?: string;
+  color?: string | undefined;
+  className?: string | undefined;
+  payload?: Payload<TValue, TName>[];
+};
+declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
+  __scopeChart,
+  active,
+  className,
+  color,
+  formatter,
+  hideIndicator,
+  hideLabel,
+  indicator,
+  label,
+  labelClassName,
+  labelFormatter,
+  labelKey,
+  nameKey,
+  payload
+}: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode;
+type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
+declare const ChartLegend: _$react.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type ChartLegendContentProps = ComponentProps<"div"> & ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+};
+declare function ChartLegendContent({
+  __scopeChart,
+  className,
+  hideIcon,
+  nameKey,
+  payload,
+  verticalAlign
+}: ScopedProps<ChartLegendContentProps>): ReactNode;
+//#endregion
+export { type ChartConfig, ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, ChartStyle, type ChartStyleProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, createChartScope };

package/dist/components/chart.mjs

@@ -0,0 +1,189 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import * as RechartsPrimitive from "recharts";
+//#region src/components/chart.tsx
+const THEMES = {
+	dark: ".dark",
+	light: ""
+};
+const CHART_PROVIDER_NAME = "ChartProvider";
+const [createChartContext, createChartScope] = createContextScope(CHART_PROVIDER_NAME);
+const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
+function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
+	const uniqueId = useId();
+	const chartId = `chart-${id ?? uniqueId}`;
+	return /* @__PURE__ */ jsx(ChartContextProvider, {
+		config,
+		scope: __scopeChart,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex aspect-video justify-center text-xs", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "[&_.recharts-dot[stroke='#fff']]:stroke-transparent", "[&_.recharts-layer]:outline-hidden", "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border", "[&_.recharts-radial-bar-background-sector]:fill-muted", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted", "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border", "[&_.recharts-sector]:outline-hidden", "[&_.recharts-sector[stroke='#fff']]:stroke-transparent", "[&_.recharts-surface]:outline-hidden", className),
+			"data-chart": chartId,
+			"data-slot": "chart",
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				config,
+				id: chartId
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })]
+		})
+	});
+}
+function ChartStyle({ config, id }) {
+	const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme ?? itemConfig.color);
+	if (colorConfig.length === 0) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: generateChartStyles(id, colorConfig) } });
+}
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const CHART_TOOLTIP_CONTENT_NAME = "ChartTooltipContent";
+function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = "dot", label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
+	const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
+	const tooltipLabel = useMemo(() => {
+		if (hideLabel || payload.length === 0) return null;
+		const item = payload[0];
+		if (item === void 0) return null;
+		const itemConfig = getPayloadConfigFromPayload(config, item, safeToString(labelKey ?? item.dataKey ?? item.name ?? "value"));
+		const configEntry = typeof label === "string" && label in config ? config[label] : void 0;
+		const value = !labelKey && typeof label === "string" ? configEntry !== void 0 ? configEntry.label ?? label : label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || payload.length === 0) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5", "rounded-lg border border-border/50", "bg-background text-xs shadow-xl", className),
+		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.map((item, index) => {
+				const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? "value");
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? (isRecord(item.payload) && "fill" in item.payload && typeof item.payload.fill === "string" ? item.payload.fill : void 0) ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2", "[&>svg]:size-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, [item]) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0", "rounded-xs border-(--color-border)", "bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"my-0.5": nestLabel && indicator === "dashed",
+							"border-1.5 w-0 border-dashed bg-transparent": indicator === "dashed",
+							"w-1": indicator === "line"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between", "leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: cn("font-mono font-medium text-foreground", "tabular-nums"),
+							children: typeof item.value === "number" ? item.value.toLocaleString() : safeToString(item.value)
+						})]
+					})] })
+				}, key);
+			})
+		})]
+	});
+}
+const ChartLegend = RechartsPrimitive.Legend;
+const CHART_LEGEND_CONTENT_NAME = "ChartLegendContent";
+function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = "bottom" }) {
+	const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.map((item) => {
+			let key = "value";
+			if (nameKey) key = nameKey;
+			else if (item.dataKey != null) key = safeToString(item.dataKey);
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5", "[&>svg]:size-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: cn("size-2 shrink-0", "rounded-md"),
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? ""));
+		})
+	});
+}
+/**
+* Type guard to check if an unknown value is a record with string keys
+*/
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* Safely gets a string value from a record by key
+*/
+function getStringValue(record, key) {
+	if (key in record) {
+		const value = record[key];
+		return typeof value === "string" ? value : void 0;
+	}
+}
+/**
+* Safely converts a value to string without type coercion
+*/
+function safeToString(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return value.toString();
+	if (value === null || value === void 0) return "";
+	if (typeof value === "boolean") return value.toString();
+	if (typeof value === "bigint") return value.toString();
+	if (typeof value === "symbol") return value.toString();
+	return "";
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (!isRecord(payload)) return;
+	const payloadPayload = isRecord(payload.payload) ? payload.payload : void 0;
+	let configLabelKey = key;
+	const payloadValue = getStringValue(payload, key);
+	if (payloadValue) configLabelKey = payloadValue;
+	else if (payloadPayload) {
+		const nestedValue = getStringValue(payloadPayload, key);
+		if (nestedValue) configLabelKey = nestedValue;
+	}
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+/**
+* Generates CSS custom property for a specific theme and config item
+*/
+function generateCssVariable(key, itemConfig, theme) {
+	const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+	return color ? `  --color-${key}: ${color};` : null;
+}
+/**
+* Generates CSS rules for a specific theme
+*/
+function generateThemeStyles(theme, prefix, id, colorConfig) {
+	return `${prefix} [data-chart=${id}] {\n${colorConfig.map(([key, itemConfig]) => generateCssVariable(key, itemConfig, theme)).filter(Boolean).join("\n")}\n}`;
+}
+/**
+* Generates complete CSS styles for all themes
+*/
+function generateChartStyles(id, colorConfig) {
+	return Object.entries(THEMES).map(([theme, prefix]) => generateThemeStyles(theme, prefix, id, colorConfig)).join("\n\n");
+}
+//#endregion
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, createChartScope };

package/dist/components/checkbox-cards.d.mts

@@ -0,0 +1,17 @@
+import { CheckboxGroup, CheckboxGroupItem } from "../primitives/checkbox-group.mjs";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/checkbox-cards.d.ts
+type CheckboxCardsProps = ComponentProps<typeof CheckboxGroup>;
+declare function CheckboxCards(props: CheckboxCardsProps): JSX.Element;
+interface CheckboxCardsItemProps extends ComponentProps<typeof CheckboxGroupItem> {
+  checkboxClassName?: string;
+}
+declare function CheckboxCardsItem({
+  checkboxClassName,
+  children,
+  className,
+  ...props
+}: CheckboxCardsItemProps): JSX.Element;
+//#endregion
+export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsItemProps, type CheckboxCardsProps };

package/dist/components/checkbox-cards.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Label } from "./label.mjs";
+import { CheckboxGroup, CheckboxGroupIndicator, CheckboxGroupItem } from "../primitives/checkbox-group.mjs";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/checkbox-cards.tsx
+function CheckboxCards(props) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		"data-slot": "checkbox-cards",
+		...props
+	});
+}
+function CheckboxCardsItem({ checkboxClassName, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Label, {
+		className: cn("flex items-start gap-3", "p-3", "rounded-lg border border-input", "transition", "hover:not-has-disabled:not-has-aria-checked:bg-secondary", "has-focus-visible:border-ring", "has-disabled:opacity-50", "has-aria-checked:border-primary has-aria-checked:bg-primary/10", className),
+		"data-slot": "checkbox-card",
+		children: [/* @__PURE__ */ jsx(CheckboxGroupItem, {
+			className: cn("peer flex size-4 shrink-0", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", checkboxClassName),
+			"data-slot": "checkbox-card-item",
+			...props,
+			children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
+				"data-slot": "checkbox-card-indicator",
+				children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+			})
+		}), children]
+	});
+}
+//#endregion
+export { CheckboxCards, CheckboxCardsItem };

package/dist/components/checkbox-group.d.mts

@@ -0,0 +1,16 @@
+import { CheckboxGroup as CheckboxGroup$1, CheckboxGroupItem as CheckboxGroupItem$1 } from "../primitives/checkbox-group.mjs";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/checkbox-group.d.ts
+type CheckboxGroupProps = ComponentProps<typeof CheckboxGroup$1>;
+declare function CheckboxGroup({
+  className,
+  ...props
+}: CheckboxGroupProps): JSX.Element;
+type CheckboxGroupItemProps = ComponentProps<typeof CheckboxGroupItem$1>;
+declare function CheckboxGroupItem({
+  className,
+  ...props
+}: CheckboxGroupItemProps): JSX.Element;
+//#endregion
+export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupItemProps, type CheckboxGroupProps };

package/dist/components/checkbox-group.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { CheckboxGroup as CheckboxGroup$1, CheckboxGroupIndicator, CheckboxGroupItem as CheckboxGroupItem$1 } from "../primitives/checkbox-group.mjs";
+import { CheckIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/checkbox-group.tsx
+function CheckboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		className: cn("grid gap-2", className),
+		"data-slot": "checkbox-group",
+		...props
+	});
+}
+function CheckboxGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroupItem$1, {
+		className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		"data-slot": "checkbox-group-item",
+		...props,
+		children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
+			className: cn("flex items-center justify-center text-current", "transition-none"),
+			"data-slot": "checkbox-group-indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+		})
+	});
+}
+//#endregion
+export { CheckboxGroup, CheckboxGroupItem };

package/dist/components/checkbox.d.mts

@@ -0,0 +1,11 @@
+import { ComponentProps, JSX } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+//#region src/components/checkbox.d.ts
+type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+declare function Checkbox({
+  className,
+  ...props
+}: CheckboxProps): JSX.Element;
+//#endregion
+export { Checkbox, type CheckboxProps };

package/dist/components/checkbox.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { CheckIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/components/checkbox.tsx
+function Checkbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+		className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "aria-checked:focus-visible:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:aria-checked:focus-visible:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		"data-slot": "checkbox",
+		...props,
+		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+			className: cn("flex items-center justify-center text-current", "transition-none"),
+			"data-slot": "checkbox-indicator",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+		})
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/components/collapsible.d.mts

@@ -0,0 +1,18 @@
+import { ComponentProps, JSX } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+//#region src/components/collapsible.d.ts
+type CollapsibleProps = ComponentProps<typeof CollapsiblePrimitive.Root>;
+declare function Collapsible({
+  ...props
+}: CollapsibleProps): JSX.Element;
+type CollapsibleTriggerProps = ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>;
+declare function CollapsibleTrigger({
+  ...props
+}: CollapsibleTriggerProps): JSX.Element;
+type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>;
+declare function CollapsibleContent({
+  ...props
+}: CollapsibleContentProps): JSX.Element;
+//#endregion
+export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/components/collapsible.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+//#region src/components/collapsible.tsx
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/command.d.mts

@@ -0,0 +1,57 @@
+import { Dialog } from "./dialog.mjs";
+import { ComponentProps, JSX } from "react";
+import { Command as Command$1 } from "cmdk";
+
+//#region src/components/command.d.ts
+type CommandProps = ComponentProps<typeof Command$1>;
+declare function Command({
+  className,
+  ...props
+}: CommandProps): JSX.Element;
+type CommandDialogProps = ComponentProps<typeof Dialog>;
+declare function CommandDialog({
+  children,
+  ...props
+}: CommandDialogProps): JSX.Element;
+type CommandInputProps = ComponentProps<typeof Command$1.Input>;
+declare function CommandInput({
+  className,
+  ...props
+}: CommandInputProps): JSX.Element;
+type CommandListProps = ComponentProps<typeof Command$1.List>;
+declare function CommandList({
+  className,
+  ...props
+}: CommandListProps): JSX.Element;
+type CommandEmptyProps = ComponentProps<typeof Command$1.Empty>;
+declare function CommandEmpty({
+  className,
+  ...props
+}: CommandEmptyProps): JSX.Element;
+type CommandGroupProps = ComponentProps<typeof Command$1.Group>;
+declare function CommandGroup({
+  className,
+  ...props
+}: CommandGroupProps): JSX.Element;
+type CommandSeparatorProps = ComponentProps<typeof Command$1.Separator>;
+declare function CommandSeparator({
+  className,
+  ...props
+}: CommandSeparatorProps): JSX.Element;
+type CommandItemProps = ComponentProps<typeof Command$1.Item>;
+declare function CommandItem({
+  className,
+  ...props
+}: CommandItemProps): JSX.Element;
+type CommandLoadingProps = ComponentProps<typeof Command$1.Loading>;
+declare function CommandLoading({
+  className,
+  ...props
+}: CommandLoadingProps): JSX.Element;
+type CommandShortcutProps = ComponentProps<"span">;
+declare function CommandShortcut({
+  className,
+  ...props
+}: CommandShortcutProps): JSX.Element;
+//#endregion
+export { Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, CommandLoading, type CommandLoadingProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps };

package/dist/components/command.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.mjs";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { Command as Command$1 } from "cmdk";
+//#region src/components/command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		className: cn("flex flex-col overflow-hidden", "rounded-[inherit]", "bg-popover text-popover-foreground outline-hidden", className),
+		"data-slot": "command",
+		...props
+	});
+}
+function CommandDialog({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		"data-slot": "command-dialog",
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("rounded-t-lg", "sm:rounded-lg"),
+			"data-slot": "command-dialog-content",
+			children: [/* @__PURE__ */ jsxs(VisuallyHidden, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Search command" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Use the search bar to find and select the desired command." })] }), /* @__PURE__ */ jsx(Command, {
+				className: cn("[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", "[&_[cmdk-input]]:h-12"),
+				children
+			})]
+		})
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"cmdk-input-wrapper": true,
+		className: cn("flex items-center gap-2", "px-3", "border-b"),
+		"data-slot": "command-input-wrapper",
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: cn("size-4 shrink-0", "opacity-50") }), /* @__PURE__ */ jsx(Command$1.Input, {
+			className: cn("flex h-10 w-full", "text-base", "outline-hidden", "placeholder:text-muted-foreground", "disabled:opacity-50", "md:text-sm", className),
+			"data-slot": "command-input",
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		className: cn("max-h-75 overflow-x-hidden overflow-y-auto", className),
+		"data-slot": "command-list",
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		className: cn("py-6", "text-center text-sm", className),
+		"data-slot": "command-empty",
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		className: cn("overflow-hidden p-1 text-foreground", "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+		"data-slot": "command-group",
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		className: cn("-mx-1 h-px", "bg-border", className),
+		"data-slot": "command-separator",
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		className: cn("group/command-item relative flex items-center gap-x-2", "px-2 py-1.5", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "aria-disabled:opacity-50", "aria-selected:bg-accent aria-selected:text-accent-foreground", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		"data-slot": "command-item",
+		...props
+	});
+}
+function CommandLoading({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Loading, {
+		className: cn("flex justify-center", "p-2", className),
+		"data-slot": "command-loading",
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto", "text-xs tracking-widest text-muted-foreground", className),
+		"data-slot": "command-shortcut",
+		...props
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };