@stll/ui 0.0.1-placeholder.0 → 0.2.0

package/dist/components/color-picker.d.ts

@@ -0,0 +1,47 @@
+import * as React$1 from "react";
+//#region src/components/color-picker.d.ts
+type ColorPreset = {
+  label: string;
+  /** Value emitted on select (e.g. "red" or "FF0000") */
+  value: string;
+  /** CSS color for the swatch (e.g. "var(--option-red)" or "#FF0000").
+   *  Falls back to `#${value}` when omitted. */
+  color?: string;
+};
+type ColorPickerProps = {
+  /** Currently selected value (matches a preset value, or a hex without #) */
+  value?: string | undefined;
+  /** Called with the preset value on selection, or a hex string from the input */
+  onSelect?: (value: string) => void;
+  /** Show "No Color" button; fires on click */
+  onClear?: () => void;
+  /** Color presets. Falls back to DEFAULT_PRESETS when omitted. */
+  presets?: ColorPreset[];
+  /** Grid columns (default 9) */
+  columns?: number;
+  /** Start with hex input visible (default false) */
+  defaultExpanded?: boolean;
+  /** Localized label for expanding the custom color controls. */
+  moreLabel: string;
+  /** Popover trigger element */
+  children: React$1.ReactNode;
+  /** Popover placement side */
+  side?: "top" | "bottom" | "left" | "right";
+  /** Popover placement alignment */
+  align?: "start" | "center" | "end";
+  className?: string;
+};
+type ColorPickerContentProps = {
+  value?: string | undefined;
+  onSelect?: ((value: string) => void) | undefined;
+  onClear?: (() => void) | undefined;
+  presets: ColorPreset[];
+  columns: number;
+  defaultExpanded: boolean;
+  moreLabel: string;
+};
+declare const DEFAULT_PRESETS: ColorPreset[];
+declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }: ColorPickerContentProps) => React$1.JSX.Element;
+declare const ColorPicker: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, children, side, align, className }: ColorPickerProps) => React$1.JSX.Element;
+//#endregion
+export { ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, DEFAULT_PRESETS };

package/dist/components/color-picker.js

@@ -0,0 +1,249 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/color-picker.tsx
+const HexColorPicker = lazy(async () => {
+	return { default: (await import("./hex-color-picker.js")).HexColorPicker };
+});
+const DEFAULT_PRESETS = [
+	{
+		label: "Black",
+		value: "000000",
+		color: "#000000"
+	},
+	{
+		label: "White",
+		value: "FFFFFF",
+		color: "#FFFFFF"
+	},
+	{
+		label: "Red",
+		value: "red",
+		color: "var(--option-red)"
+	},
+	{
+		label: "Orange",
+		value: "orange",
+		color: "var(--option-orange)"
+	},
+	{
+		label: "Amber",
+		value: "amber",
+		color: "var(--option-amber)"
+	},
+	{
+		label: "Yellow",
+		value: "yellow",
+		color: "var(--option-yellow)"
+	},
+	{
+		label: "Lime",
+		value: "lime",
+		color: "var(--option-lime)"
+	},
+	{
+		label: "Green",
+		value: "green",
+		color: "var(--option-green)"
+	},
+	{
+		label: "Emerald",
+		value: "emerald",
+		color: "var(--option-emerald)"
+	},
+	{
+		label: "Teal",
+		value: "teal",
+		color: "var(--option-teal)"
+	},
+	{
+		label: "Cyan",
+		value: "cyan",
+		color: "var(--option-cyan)"
+	},
+	{
+		label: "Sky",
+		value: "sky",
+		color: "var(--option-sky)"
+	},
+	{
+		label: "Blue",
+		value: "blue",
+		color: "var(--option-blue)"
+	},
+	{
+		label: "Indigo",
+		value: "indigo",
+		color: "var(--option-indigo)"
+	},
+	{
+		label: "Violet",
+		value: "violet",
+		color: "var(--option-violet)"
+	},
+	{
+		label: "Purple",
+		value: "purple",
+		color: "var(--option-purple)"
+	},
+	{
+		label: "Fuchsia",
+		value: "fuchsia",
+		color: "var(--option-fuchsia)"
+	},
+	{
+		label: "Gray",
+		value: "gray",
+		color: "var(--option-gray)"
+	}
+];
+const isValidHex = (hex) => /^[0-9A-Fa-f]{6}$/u.test(hex);
+const normalizeHex = (hex) => hex.replace(/^#/u, "").toUpperCase();
+/** CSS color to render for a preset swatch. */
+const swatchColor = (preset) => preset.color ?? `#${preset.value}`;
+/** Returns true when a 6-char hex is light enough to need a visible border. */
+const isLightHex = (hex) => {
+	if (hex.length !== 6) return false;
+	const r = Number.parseInt(hex.slice(0, 2), 16);
+	const g = Number.parseInt(hex.slice(2, 4), 16);
+	const b = Number.parseInt(hex.slice(4, 6), 16);
+	return (r * 299 + g * 587 + b * 114) / 1e3 > 220;
+};
+/** Check if a value looks like a 6-char hex (no CSS vars, no named colors). */
+const looksLikeHex = (v) => /^[0-9A-Fa-f]{6}$/u.test(v);
+const ColorSwatch = ({ cssColor, selected, label, isLight, onClick }) => /* @__PURE__ */ jsx(Popover.Close, {
+	render: /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		className: cn("hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selected ? "border-foreground ring-ring/24 ring-1" : "border-border/40", isLight && !selected && "border-border"),
+		onClick,
+		style: { backgroundColor: cssColor },
+		type: "button"
+	}),
+	children: selected && /* @__PURE__ */ jsx(CheckIcon, {
+		className: "pointer-events-none size-3 sm:size-2.5",
+		style: { color: isLight ? "#000" : "#fff" }
+	})
+});
+const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }) => {
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const [pickerHex, setPickerHex] = useState(() => (looksLikeHex(value ?? "") ? value : "000000") ?? "000000");
+	const [inputHex, setInputHex] = useState("");
+	/** Called when the visual picker (SB square / hue strip) emits a color. */
+	const handlePickerChange = (hex) => {
+		const normalized = normalizeHex(hex);
+		setPickerHex(normalized);
+		setInputHex(normalized);
+		if (isValidHex(normalized)) onSelect?.(normalized);
+	};
+	/** Called when the hex text input changes. */
+	const handleInputChange = (raw) => {
+		const cleaned = raw.replace(/[^0-9A-Fa-f]/gu, "").slice(0, 6).toUpperCase();
+		setInputHex(cleaned);
+		if (isValidHex(cleaned)) {
+			setPickerHex(cleaned);
+			onSelect?.(cleaned);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		"data-slot": "color-picker",
+		children: [
+			onClear && /* @__PURE__ */ jsxs(Popover.Close, {
+				render: /* @__PURE__ */ jsx("button", {
+					"aria-label": "No color",
+					className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6 w-full items-center gap-1.5 rounded px-1 text-[11px] transition-colors",
+					onClick: onClear,
+					type: "button"
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-popover border-border relative flex size-4 items-center justify-center rounded-sm border",
+					children: /* @__PURE__ */ jsx("span", { className: "bg-destructive absolute h-px w-[140%] rotate-[-45deg]" })
+				}), "No Color"]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid gap-0.5",
+				role: "grid",
+				style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+				children: presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatch, {
+					cssColor: swatchColor(preset),
+					isLight: looksLikeHex(preset.value) && isLightHex(preset.value),
+					label: preset.label,
+					onClick: () => onSelect?.(preset.value),
+					selected: value === preset.value
+				}, preset.value))
+			}),
+			!expanded ? /* @__PURE__ */ jsxs("button", {
+				className: "text-muted-foreground hover:text-foreground flex items-center justify-center gap-1 py-0.5 text-[11px] transition-colors",
+				onClick: () => setExpanded(true),
+				type: "button",
+				children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "border-border flex flex-col gap-2 border-t pt-2",
+				children: [/* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: "ring-border/30 h-[140px] w-full rounded-lg ring-1"
+					}),
+					children: /* @__PURE__ */ jsx(HexColorPicker, {
+						className: "ring-border/30 !h-[140px] !w-full overflow-hidden rounded-lg ring-1",
+						color: pickerHex,
+						onChange: (hex) => handlePickerChange(hex.replace("#", ""))
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-[11px]",
+							children: "#"
+						}),
+						/* @__PURE__ */ jsx("input", {
+							"aria-label": "Custom hex color",
+							className: "border-input bg-background text-foreground h-6 flex-1 rounded border px-1.5 font-mono text-[11px] outline-none",
+							dir: "ltr",
+							maxLength: 6,
+							onChange: (e) => handleInputChange(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							onMouseDown: (e) => e.stopPropagation(),
+							onPointerDown: (e) => e.stopPropagation(),
+							placeholder: "FF0000",
+							value: inputHex
+						}),
+						isValidHex(inputHex) && /* @__PURE__ */ jsx("span", {
+							className: "border-border size-6 shrink-0 rounded border",
+							style: { backgroundColor: `#${inputHex}` }
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, columns = 9, defaultExpanded = false, moreLabel, children, side = "bottom", align = "start", className }) => /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+	"data-slot": "color-picker-trigger",
+	nativeButton: false,
+	render: /* @__PURE__ */ jsx("div", { className: "inline-flex" }),
+	children
+}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+	align,
+	className: "z-50",
+	side,
+	sideOffset: 4,
+	children: /* @__PURE__ */ jsx(Popover.Popup, {
+		className: cn("bg-popover text-popover-foreground origin-(--transform-origin) rounded-lg border p-2 shadow-lg/5 transition-[scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "color-picker-popup",
+		children: /* @__PURE__ */ jsx(ColorPickerContent, {
+			columns,
+			defaultExpanded,
+			moreLabel,
+			onClear,
+			onSelect,
+			presets,
+			value
+		})
+	})
+}) })] });
+//#endregion
+export { ColorPicker, ColorPickerContent, DEFAULT_PRESETS };

package/dist/components/combobox.d.ts

@@ -0,0 +1,40 @@
+import * as React$1 from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/components/combobox.d.ts
+declare const Combobox: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
+declare const ComboboxChipsInput: ({ className, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React$1.Ref<HTMLInputElement>;
+}) => React$1.JSX.Element;
+declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React$1.ReactNode;
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React$1.Ref<HTMLInputElement>;
+}) => React$1.JSX.Element;
+declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;
+declare const ComboboxPopup: ({ className, children, side, sideOffset, alignOffset, align, ...props }: Combobox$1.Popup.Props & {
+  align?: Combobox$1.Positioner.Props["align"];
+  sideOffset?: Combobox$1.Positioner.Props["sideOffset"];
+  alignOffset?: Combobox$1.Positioner.Props["alignOffset"];
+  side?: Combobox$1.Positioner.Props["side"];
+}) => React$1.JSX.Element;
+declare const ComboboxItem: ({ className, children, ...props }: Combobox$1.Item.Props) => React$1.JSX.Element;
+declare const ComboboxSeparator: ({ className, ...props }: Combobox$1.Separator.Props) => React$1.JSX.Element;
+declare const ComboboxGroup: ({ className, ...props }: Combobox$1.Group.Props) => React$1.JSX.Element;
+declare const ComboboxGroupLabel: ({ className, ...props }: Combobox$1.GroupLabel.Props) => React$1.JSX.Element;
+declare const ComboboxEmpty: ({ className, ...props }: Combobox$1.Empty.Props) => React$1.JSX.Element;
+declare const ComboboxRow: ({ className, ...props }: Combobox$1.Row.Props) => React$1.JSX.Element;
+declare const ComboboxValue: ({ ...props }: Combobox$1.Value.Props) => React$1.JSX.Element;
+declare const ComboboxList: ({ className, ...props }: Combobox$1.List.Props) => React$1.JSX.Element;
+declare const ComboboxClear: ({ className, ...props }: Combobox$1.Clear.Props) => React$1.JSX.Element;
+declare const ComboboxStatus: ({ className, ...props }: Combobox$1.Status.Props) => React$1.JSX.Element;
+declare const ComboboxCollection: (props: Combobox$1.Collection.Props) => React$1.JSX.Element;
+declare const ComboboxChips: ({ className, children, startAddon, ...props }: Combobox$1.Chips.Props & {
+  startAddon?: React$1.ReactNode;
+}) => React$1.JSX.Element;
+declare const ComboboxChip: ({ children, ...props }: Combobox$1.Chip.Props) => React$1.JSX.Element;
+declare const useComboboxFilter: typeof Combobox$1.useFilter;
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };

package/dist/components/combobox.js

@@ -0,0 +1,208 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { containedHandler } from "../hooks/use-contained-handler.js";
+import { Input } from "./input.js";
+import { ScrollArea } from "./scroll-area.js";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/components/combobox.tsx
+const ComboboxContext = React$1.createContext({
+	chipsRef: null,
+	multiple: false
+});
+const Combobox = (props) => {
+	const chipsRef = React$1.useRef(null);
+	const contextValue = React$1.useMemo(() => ({
+		chipsRef,
+		multiple: !!props.multiple
+	}), [chipsRef, props.multiple]);
+	return /* @__PURE__ */ jsx(ComboboxContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, { ...props })
+	});
+};
+const ComboboxChipsInput = ({ className, size, ...props }) => {
+	const sizeValue = size ?? "default";
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", sizeValue === "sm" ? "ps-1.5" : "ps-2", className),
+		"data-size": typeof sizeValue === "string" ? sizeValue : void 0,
+		"data-slot": "combobox-chips-input",
+		size: typeof sizeValue === "number" ? sizeValue : void 0,
+		...props
+	});
+};
+const ComboboxInput = ({ className, showTrigger = true, showClear = false, startAddon, size, ...props }) => {
+	const sizeValue = size ?? "default";
+	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
+		className: "text-foreground relative w-full not-has-[>*.w-full]:w-fit has-disabled:opacity-64",
+		children: [
+			Boolean(startAddon) && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+				"data-slot": "combobox-start-addon",
+				children: startAddon
+			}),
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				className: cn(Boolean(startAddon) && "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)]", sizeValue === "sm" ? "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5" : "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7", className),
+				"data-slot": "combobox-input",
+				render: /* @__PURE__ */ jsx(Input, {
+					className: "has-disabled:opacity-100",
+					nativeInput: true,
+					size: sizeValue
+				}),
+				...props
+			}),
+			showTrigger && /* @__PURE__ */ jsx(ComboboxTrigger, {
+				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", sizeValue === "sm" ? "end-0" : "end-0.5"),
+				children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+			}),
+			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
+				className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", sizeValue === "sm" ? "end-0" : "end-0.5"),
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+};
+const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+	className,
+	"data-slot": "combobox-trigger",
+	...props
+});
+const ComboboxPopup = ({ className, children, side = "bottom", sideOffset = 4, alignOffset, align = "start", ...props }) => {
+	const { chipsRef } = React$1.use(ComboboxContext);
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		align,
+		alignOffset,
+		anchor: chipsRef,
+		className: cn(OVERLAY_LAYER_CLASS_NAMES.popup, "select-none"),
+		"data-slot": "combobox-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("bg-popover relative flex max-h-full max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) rounded-lg border shadow-lg/5 transition-[scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+				className: "text-foreground flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col",
+				"data-slot": "combobox-popup",
+				...props,
+				children
+			})
+		})
+	}) });
+};
+const ComboboxItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
+	className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground grid min-h-8 cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", className),
+	"data-slot": "combobox-item",
+	...props,
+	children: [/* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+		className: "col-start-1",
+		children: /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			height: "24",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: "24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ jsx("title", { children: "Selected" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })]
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "col-start-2",
+		children
+	})]
+});
+const ComboboxSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Separator, {
+	className: cn("bg-border mx-2 my-1 h-px last:hidden", className),
+	"data-slot": "combobox-separator",
+	...props
+});
+const ComboboxGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Group, {
+	className: cn("[[role=group]+&]:mt-1.5", className),
+	"data-slot": "combobox-group",
+	...props
+});
+const ComboboxGroupLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+	className: cn("text-muted-foreground px-2 py-1.5 text-xs font-medium", className),
+	"data-slot": "combobox-group-label",
+	...props
+});
+const ComboboxEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Empty, {
+	className: cn("text-muted-foreground text-center text-base not-empty:p-2 sm:text-sm", className),
+	"data-slot": "combobox-empty",
+	...props
+});
+const ComboboxRow = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Row, {
+	className,
+	"data-slot": "combobox-row",
+	...props
+});
+const ComboboxValue = ({ ...props }) => /* @__PURE__ */ jsx(Combobox$1.Value, {
+	"data-slot": "combobox-value",
+	...props
+});
+const ComboboxList = ({ className, ...props }) => /* @__PURE__ */ jsx(ScrollArea, {
+	scrollbarGutter: true,
+	scrollFade: true,
+	children: /* @__PURE__ */ jsx(Combobox$1.List, {
+		className: cn("not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3", className),
+		"data-slot": "combobox-list",
+		...props
+	})
+});
+const ComboboxClear = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Clear, {
+	className,
+	"data-slot": "combobox-clear",
+	...props
+});
+const ComboboxStatus = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Status, {
+	className: cn("text-muted-foreground px-3 py-2 text-xs font-medium empty:m-0 empty:p-0", className),
+	"data-slot": "combobox-status",
+	...props
+});
+const ComboboxCollection = (props) => /* @__PURE__ */ jsx(Combobox$1.Collection, {
+	"data-slot": "combobox-collection",
+	...props
+});
+const ComboboxChips = ({ className, children, startAddon, ...props }) => {
+	const { chipsRef } = React$1.use(ComboboxContext);
+	return /* @__PURE__ */ jsxs(Combobox$1.Chips, {
+		className: cn("border-input bg-background ring-ring/24 focus-within:border-ring has-autofill:bg-foreground/4 has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 transition-shadow outline-none *:min-h-7 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:opacity-64 has-data-[size=lg]:min-h-10 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:min-h-8 has-data-[size=sm]:*:min-h-6 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none sm:min-h-8 sm:text-sm sm:*:min-h-6 sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "combobox-chips",
+		onMouseDown: containedHandler(chipsRef, (e) => {
+			const { target } = e;
+			if (!(target instanceof Element)) return;
+			if (target.closest("[data-slot=\"combobox-chip\"]") || !chipsRef?.current) return;
+			e.preventDefault();
+			const input = chipsRef.current.querySelector("input");
+			if (input && !chipsRef.current.querySelector("input:focus")) input.focus();
+		}),
+		ref: chipsRef,
+		...props,
+		children: [Boolean(startAddon) && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 has-[~[data-size=sm]]:ps-1.5 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+			"data-slot": "combobox-start-addon",
+			children: startAddon
+		}), children]
+	});
+};
+const ComboboxChip = ({ children, ...props }) => /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+	className: "bg-accent text-accent-foreground flex items-center rounded-[calc(var(--radius-md)-1px)] ps-2 text-sm font-medium outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+	"data-slot": "combobox-chip",
+	...props,
+	children: [children, /* @__PURE__ */ jsx(ComboboxChipRemove, {})]
+});
+const ComboboxChipRemove = (props) => /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+	"aria-label": "Remove",
+	className: "h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+	"data-slot": "combobox-chip-remove",
+	...props,
+	children: /* @__PURE__ */ jsx(XIcon, {})
+});
+const useComboboxFilter = Combobox$1.useFilter;
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };

package/dist/components/command.d.ts

@@ -0,0 +1,34 @@
+import { DialogContent as DialogPopup } from "./dialog.js";
+import * as React$1 from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/command.d.ts
+type CommandProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, "items"> & {
+  items?: readonly ItemValue[] | undefined;
+};
+declare const Command: <ItemValue>({ autoHighlight, keepHighlight, open, ...props }: CommandProps<ItemValue>) => React$1.JSX.Element;
+declare const CommandDialog: typeof Dialog.Root;
+declare const CommandDialogTrigger: (props: Dialog.Trigger.Props) => React$1.JSX.Element;
+declare const CommandDialogPopup: ({ className, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPopup>) => React$1.JSX.Element;
+type CommandInputProps = Omit<Autocomplete.Input.Props, "size"> & {
+  size?: "sm" | "default" | "lg" | number;
+  wrapperClassName?: string;
+  ref?: React$1.Ref<HTMLInputElement>;
+};
+declare const CommandInput: ({ className, size, wrapperClassName, dir, onChange, ...props }: CommandInputProps) => React$1.JSX.Element;
+declare const CommandPanel: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const CommandEmpty: ({ className, ...props }: Autocomplete.Empty.Props) => React$1.JSX.Element;
+declare const CommandList: ({ className, ...props }: Autocomplete.List.Props & {
+  ref?: React$1.Ref<HTMLDivElement>;
+}) => React$1.JSX.Element;
+declare const CommandGroup: ({ className, ...props }: Autocomplete.Group.Props) => React$1.JSX.Element;
+declare const CommandGroupLabel: ({ className, ...props }: Autocomplete.GroupLabel.Props) => React$1.JSX.Element;
+declare const CommandCollection: (props: Autocomplete.Collection.Props) => React$1.JSX.Element;
+declare const CommandItem: ({ className, ...props }: Autocomplete.Item.Props & {
+  ref?: React$1.Ref<HTMLDivElement>;
+}) => React$1.JSX.Element;
+declare const CommandSeparator: ({ className, ...props }: Autocomplete.Separator.Props) => React$1.JSX.Element;
+declare const CommandShortcut: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const CommandFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+//#endregion
+export { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };