@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/combobox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.mts","names":[],"sources":["../src/combobox.tsx"],"mappings":";;iBASiB,eAAe;EAC/B;EACA;EACA;;;;;;EAMA,OAAO,MAAM;;;;;;EAMb,OAAO;;iBAGS,cAAc;EAC9B,SAAS,eAAe;EACxB;;EAEA,iBAAiB,eAAe,SAAS,eAAe;EACxD;EACA;EACA;EACA;;EAEA;EACA;;EAEA;;EAEA,kBAAkB;;EAElB,eAAe;;EAOf,YAAY;;EAEZ;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;EAKA,iBAAiB,eAAe;;EAOhC;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EASA;;EAEA,gBAAgB;;;;;;;EAOhB;;;;;;EAMA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8BJ,SAAS,mBACjB,SACA,OACA,eACA,aACA,mBACA,cACA,WACA,kBACA,UACA,WACA,gBACA,aACA,UACA,gBACA,cACA,SACA,gBACA,YACA,SACA,gBAAgB,oBAChB,kBACc,8BACK,oCACC,iCACJ,aAChB,MAAM,UACN,cACA,OACA,aACE,cAAc,qCAAM,IAAA"}

package/dist/combobox.mjs

@@ -0,0 +1,149 @@
+import { Button } from "./button.mjs";
+import { useDebouncedValue } from "./use-debounced-value.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Check, ChevronsUpDown, Loader2, Plus } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/combobox.tsx
+/** Distance in px from the bottom of the list at which the next page is requested. */
+const LOAD_MORE_THRESHOLD = 48;
+/**
+* A searchable dropdown combining a Popover, Command palette, and Button. Optionally creatable.
+*
+* Static list — filtered as you type:
+*
+* ```tsx
+* <Combobox options={trades} value={trade} onValueChange={setTrade} />
+* ```
+*
+* Server-backed list — searched and paged by the caller. `onSearch` turns client-side filtering off,
+* so whatever the server returns is shown in order:
+*
+* ```tsx
+* <Combobox
+*   options={page.items}
+*   loading={isFetching}
+*   hasMore={page.hasNextPage}
+*   onSearch={setTerm}
+*   onLoadMore={fetchNextPage}
+*   selectedOption={selected}
+*   onValueChange={(_, option) => field.onChange(option?.data)}
+* />
+* ```
+*/
+function Combobox({ options, value, onValueChange, placeholder = "Select option...", searchPlaceholder = "Search...", emptyMessage = "No option found.", className, popoverClassName, disabled = false, creatable = false, onCreateOption, createLabel = (input) => `Create "${input}"`, onSearch, searchDebounce = 300, shouldFilter, loading = false, loadingMessage = "Loading…", onLoadMore, hasMore = true, selectedOption: selectedOptionProp, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, open: openProp, onOpenChange, modal, container }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const [query, setQuery] = React.useState("");
+	const isAsync = onSearch != null;
+	const filterList = shouldFilter ?? !isAsync;
+	const debouncedQuery = useDebouncedValue(query, isAsync ? searchDebounce : 0);
+	const lastSearched = React.useRef(null);
+	React.useEffect(() => {
+		if (!onSearch) return;
+		if (lastSearched.current === null && debouncedQuery === "") {
+			lastSearched.current = "";
+			return;
+		}
+		if (lastSearched.current === debouncedQuery) return;
+		lastSearched.current = debouncedQuery;
+		onSearch(debouncedQuery);
+	}, [debouncedQuery, onSearch]);
+	const loadMorePending = React.useRef(false);
+	React.useEffect(() => {
+		loadMorePending.current = false;
+	}, [options.length, loading]);
+	const handleListScroll = (event) => {
+		if (!onLoadMore || !hasMore || loading || loadMorePending.current) return;
+		const el = event.currentTarget;
+		if (el.scrollHeight - el.scrollTop - el.clientHeight > LOAD_MORE_THRESHOLD) return;
+		loadMorePending.current = true;
+		onLoadMore();
+	};
+	const selectedOption = options.find((option) => option.value === value) ?? selectedOptionProp;
+	const trimmed = query.trim();
+	const hasExactMatch = options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
+	const showCreate = creatable && trimmed.length > 0 && !hasExactMatch;
+	const handleOpenChange = (next) => {
+		setUncontrolledOpen(next);
+		onOpenChange?.(next);
+		if (!next && !isAsync) setQuery("");
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				role: "combobox",
+				id,
+				"aria-expanded": open,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid,
+				className: cn("wwc:w-[200px] wwc:justify-between", className),
+				disabled,
+				children: [selectedOption ? /* @__PURE__ */ jsxs("span", {
+					className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1.5",
+					children: [selectedOption.icon, /* @__PURE__ */ jsx("span", {
+						className: "wwc:truncate",
+						children: selectedOption.label
+					})]
+				}) : placeholder, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			container,
+			className: cn("wwc:w-[200px] wwc:p-0", popoverClassName),
+			children: /* @__PURE__ */ jsxs(Command, {
+				shouldFilter: filterList,
+				children: [/* @__PURE__ */ jsx(CommandInput, {
+					placeholder: searchPlaceholder,
+					value: query,
+					onValueChange: setQuery
+				}), /* @__PURE__ */ jsxs(CommandList, {
+					onScroll: handleListScroll,
+					children: [
+						!showCreate && /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? /* @__PURE__ */ jsxs("span", {
+							className: "wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:text-muted-foreground",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "wwc:h-4 wwc:w-4 wwc:animate-spin" }), loadingMessage]
+						}) : emptyMessage }),
+						/* @__PURE__ */ jsxs(CommandGroup, { children: [options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+							value: filterList ? option.label : option.value,
+							onSelect: () => {
+								const next = option.value === value ? "" : option.value;
+								onValueChange?.(next, next === "" ? void 0 : option);
+								handleOpenChange(false);
+							},
+							disabled: option.disabled,
+							children: [
+								/* @__PURE__ */ jsx(Check, { className: cn("wwc:mr-2 wwc:h-4 wwc:w-4", value === option.value ? "wwc:opacity-100" : "wwc:opacity-0") }),
+								option.icon,
+								option.label
+							]
+						}, option.value)), showCreate && /* @__PURE__ */ jsxs(CommandItem, {
+							value: trimmed,
+							onSelect: () => {
+								onCreateOption?.(trimmed);
+								handleOpenChange(false);
+							},
+							children: [/* @__PURE__ */ jsx(Plus, { className: "wwc:mr-2 wwc:h-4 wwc:w-4" }), createLabel(trimmed)]
+						})] }),
+						loading && options.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:py-2 wwc:text-sm wwc:text-muted-foreground",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "wwc:h-4 wwc:w-4 wwc:animate-spin" }), loadingMessage]
+						})
+					]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=combobox.mjs.map

package/dist/combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.mjs","names":[],"sources":["../src/combobox.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Check, ChevronsUpDown, Loader2, Plus} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from \"./command\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\nimport {useDebouncedValue} from \"./use-debounced-value\";\n\nexport interface ComboboxOption<TData = unknown> {\n\tvalue: string;\n\tlabel: string;\n\tdisabled?: boolean;\n\t/**\n\t * Optional leading visual, rendered in the list and on the trigger once selected. Lets a caller\n\t * whose options carry an identity (an object type's glyph) stay searchable without forking this\n\t * component. Omitted, the option renders exactly as it always has.\n\t */\n\ticon?: React.ReactNode;\n\t/**\n\t * The record this option was derived from. Handed back as the second argument to `onValueChange`,\n\t * so a caller binding a whole object (`{id, name}`) into a form gets it without re-deriving it from\n\t * the value.\n\t */\n\tdata?: TData;\n}\n\nexport interface ComboboxProps<TData = unknown> {\n\toptions: ComboboxOption<TData>[];\n\tvalue?: string;\n\t/** Receives the new value, and the option it came from when one is in `options`. */\n\tonValueChange?: (value: string, option?: ComboboxOption<TData>) => void;\n\tplaceholder?: string;\n\tsearchPlaceholder?: string;\n\temptyMessage?: string;\n\tclassName?: string;\n\t/** Class applied to the popover content. Overrides the default 200px width. */\n\tpopoverClassName?: string;\n\tdisabled?: boolean;\n\t/** When true, typing a value not in the list offers a \"Create …\" action. */\n\tcreatable?: boolean;\n\t/** Called with the trimmed search text when the create action is chosen. */\n\tonCreateOption?: (input: string) => void;\n\t/** Label for the create action; defaults to `Create \"<input>\"`. */\n\tcreateLabel?: (input: string) => string;\n\n\t// ── Async data source ───────────────────────────────────────────────────────\n\t// Pass `onSearch` and the combobox stops filtering: `options` is displayed exactly as given,\n\t// so the server's result set is what the user sees.\n\n\t/** Called with the debounced search term. Supplying it switches the combobox to async mode. */\n\tonSearch?: (term: string) => void;\n\t/** Debounce applied before `onSearch` fires. Default 300 ms; `0` fires on every keystroke. */\n\tsearchDebounce?: number;\n\t/** Client-side filtering. Defaults to off in async mode, on otherwise — set it to override. */\n\tshouldFilter?: boolean;\n\t/** Renders a spinner in the list. Also gates `onLoadMore`, so paging cannot stack requests. */\n\tloading?: boolean;\n\t/** Shown in place of `emptyMessage` while `loading` and the list is empty. */\n\tloadingMessage?: string;\n\t/** Called when the list is scrolled near its end and `hasMore` is not false — fetch the next page. */\n\tonLoadMore?: () => void;\n\t/** Set false once the server has no further pages; stops `onLoadMore` firing. Default true. */\n\thasMore?: boolean;\n\t/**\n\t * The selected option, for when it is not in the current page of `options` — an async list that has\n\t * been searched or paged past the selection would otherwise show the raw value on the trigger.\n\t */\n\tselectedOption?: ComboboxOption<TData>;\n\n\t// ── Labelling ───────────────────────────────────────────────────────────────\n\t// Forwarded to the trigger, which is the element assistive tech actually lands on. Without these\n\t// a combobox inside a labelled field still announces as a bare \"combobox\".\n\n\t/** Id of the trigger, so a `<label htmlFor>` can point at it. */\n\tid?: string;\n\t/** Accessible name, when no visible label points at the trigger. */\n\t\"aria-label\"?: string;\n\t/** Id of the visible label naming this combobox. */\n\t\"aria-labelledby\"?: string;\n\t/** Id of the hint or error line describing this combobox. */\n\t\"aria-describedby\"?: string;\n\t/** Marks the trigger invalid to assistive tech. Pair it with the field's error text. */\n\t\"aria-invalid\"?: boolean;\n\n\t// ── Popover ─────────────────────────────────────────────────────────────────\n\n\t/**\n\t * Controls the popover. Omit it and the combobox opens and closes itself, as before; pass it with\n\t * `onOpenChange` and the caller owns the state — for a form that must keep the list open across a\n\t * re-render, or a test that wants it open on mount.\n\t */\n\topen?: boolean;\n\t/** Called with the popover's next open state. Pair it with `open` to control the combobox. */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Makes the popover its own modal layer: it takes `pointer-events` from everything beneath and\n\t * traps focus. Off by default. Inside a `Dialog` you should not need it — the popover already\n\t * renders inside the dialog (see `container`) — so reach for it only for a popover that must sit\n\t * above a non-Radix overlay of the host's own.\n\t */\n\tmodal?: boolean;\n\t/**\n\t * Where the popover is portalled. Defaults to the enclosing `DialogContent` when there is one and\n\t * `document.body` otherwise, which is what keeps the list clickable inside a dialog (issue #294).\n\t * Pass an element to override that, or `null` to force `document.body`.\n\t */\n\tcontainer?: HTMLElement | null;\n}\n\n/** Distance in px from the bottom of the list at which the next page is requested. */\nconst LOAD_MORE_THRESHOLD = 48;\n\n/**\n * A searchable dropdown combining a Popover, Command palette, and Button. Optionally creatable.\n *\n * Static list — filtered as you type:\n *\n * ```tsx\n * <Combobox options={trades} value={trade} onValueChange={setTrade} />\n * ```\n *\n * Server-backed list — searched and paged by the caller. `onSearch` turns client-side filtering off,\n * so whatever the server returns is shown in order:\n *\n * ```tsx\n * <Combobox\n *   options={page.items}\n *   loading={isFetching}\n *   hasMore={page.hasNextPage}\n *   onSearch={setTerm}\n *   onLoadMore={fetchNextPage}\n *   selectedOption={selected}\n *   onValueChange={(_, option) => field.onChange(option?.data)}\n * />\n * ```\n */\nfunction Combobox<TData = unknown>({\n\toptions,\n\tvalue,\n\tonValueChange,\n\tplaceholder = \"Select option...\",\n\tsearchPlaceholder = \"Search...\",\n\temptyMessage = \"No option found.\",\n\tclassName,\n\tpopoverClassName,\n\tdisabled = false,\n\tcreatable = false,\n\tonCreateOption,\n\tcreateLabel = (input) => `Create \"${input}\"`,\n\tonSearch,\n\tsearchDebounce = 300,\n\tshouldFilter,\n\tloading = false,\n\tloadingMessage = \"Loading…\",\n\tonLoadMore,\n\thasMore = true,\n\tselectedOption: selectedOptionProp,\n\tid,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy,\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-invalid\": ariaInvalid,\n\topen: openProp,\n\tonOpenChange,\n\tmodal,\n\tcontainer,\n}: ComboboxProps<TData>) {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n\tconst open = openProp ?? uncontrolledOpen;\n\tconst [query, setQuery] = React.useState(\"\");\n\n\tconst isAsync = onSearch != null;\n\tconst filterList = shouldFilter ?? !isAsync;\n\n\tconst debouncedQuery = useDebouncedValue(query, isAsync ? searchDebounce : 0);\n\tconst lastSearched = React.useRef<string | null>(null);\n\tReact.useEffect(() => {\n\t\tif (!onSearch) return;\n\t\t// Skip the initial \"\" — the caller's first page is already loaded by whatever mounted it.\n\t\tif (lastSearched.current === null && debouncedQuery === \"\") {\n\t\t\tlastSearched.current = \"\";\n\t\t\treturn;\n\t\t}\n\t\tif (lastSearched.current === debouncedQuery) return;\n\t\tlastSearched.current = debouncedQuery;\n\t\tonSearch(debouncedQuery);\n\t}, [debouncedQuery, onSearch]);\n\n\t// One page request per scroll to the end. Released when the caller's answer arrives — either more\n\t// options or a flip of `loading` — so a stalled fetch cannot be re-fired by further scrolling.\n\tconst loadMorePending = React.useRef(false);\n\tReact.useEffect(() => {\n\t\tloadMorePending.current = false;\n\t}, [options.length, loading]);\n\n\tconst handleListScroll = (event: React.UIEvent<HTMLDivElement>) => {\n\t\tif (!onLoadMore || !hasMore || loading || loadMorePending.current) return;\n\t\tconst el = event.currentTarget;\n\t\tif (el.scrollHeight - el.scrollTop - el.clientHeight > LOAD_MORE_THRESHOLD) return;\n\t\tloadMorePending.current = true;\n\t\tonLoadMore();\n\t};\n\n\tconst selectedOption = options.find((option) => option.value === value) ?? selectedOptionProp;\n\tconst trimmed = query.trim();\n\tconst hasExactMatch = options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());\n\tconst showCreate = creatable && trimmed.length > 0 && !hasExactMatch;\n\n\tconst handleOpenChange = (next: boolean) => {\n\t\t// The internal state is kept up to date even while controlled, so a caller that drops `open`\n\t\t// later resumes from where the combobox actually was rather than snapping shut.\n\t\tsetUncontrolledOpen(next);\n\t\tonOpenChange?.(next);\n\t\t// In async mode the term is what produced the list on screen — clearing it on close would\n\t\t// throw away a page the caller paid for and refetch on reopen.\n\t\tif (!next && !isAsync) setQuery(\"\");\n\t};\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={handleOpenChange} modal={modal}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\tid={id}\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\tclassName={cn(\"wwc:w-[200px] wwc:justify-between\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t{selectedOption ? (\n\t\t\t\t\t\t<span className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t\t{selectedOption.icon}\n\t\t\t\t\t\t\t<span className=\"wwc:truncate\">{selectedOption.label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplaceholder\n\t\t\t\t\t)}\n\t\t\t\t\t<ChevronsUpDown className=\"wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent container={container} className={cn(\"wwc:w-[200px] wwc:p-0\", popoverClassName)}>\n\t\t\t\t<Command shouldFilter={filterList}>\n\t\t\t\t\t<CommandInput placeholder={searchPlaceholder} value={query} onValueChange={setQuery} />\n\t\t\t\t\t<CommandList onScroll={handleListScroll}>\n\t\t\t\t\t\t{!showCreate && (\n\t\t\t\t\t\t\t<CommandEmpty>\n\t\t\t\t\t\t\t\t{loading ? (\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t<Loader2 className=\"wwc:h-4 wwc:w-4 wwc:animate-spin\" />\n\t\t\t\t\t\t\t\t\t\t{loadingMessage}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\temptyMessage\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</CommandEmpty>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\t// With filtering off the label carries no meaning to cmdk, and duplicate labels\n\t\t\t\t\t\t\t\t\t// from a server page would collide — key the item by its own value instead.\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\tvalue={filterList ? option.label : option.value}\n\t\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\t\tconst next = option.value === value ? \"\" : option.value;\n\t\t\t\t\t\t\t\t\t\tonValueChange?.(next, next === \"\" ? undefined : option);\n\t\t\t\t\t\t\t\t\t\thandleOpenChange(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"wwc:mr-2 wwc:h-4 wwc:w-4\",\n\t\t\t\t\t\t\t\t\t\t\tvalue === option.value ? \"wwc:opacity-100\" : \"wwc:opacity-0\",\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.icon}\n\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{showCreate && (\n\t\t\t\t\t\t\t\t// value carries the query so cmdk always keeps this item visible while typing.\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tvalue={trimmed}\n\t\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\t\tonCreateOption?.(trimmed);\n\t\t\t\t\t\t\t\t\t\thandleOpenChange(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Plus className=\"wwc:mr-2 wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t\t\t{createLabel(trimmed)}\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t\t{loading && options.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-center wwc:gap-2 wwc:py-2 wwc:text-sm wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t<Loader2 className=\"wwc:h-4 wwc:w-4 wwc:animate-spin\" />\n\t\t\t\t\t\t\t\t{loadingMessage}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nexport {Combobox};\n"],"mappings":"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"}

package/dist/command-palette.d.mts

@@ -0,0 +1,43 @@
+import * as React from "react";
+//#region src/command-palette.d.ts
+export interface CommandPaletteItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  shortcut?: string[];
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+export interface CommandPaletteGroup {
+  heading?: string;
+  items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+  /** Whether the palette is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Grouped command items */
+  groups: CommandPaletteGroup[];
+  /** Placeholder for search input */
+  placeholder?: string;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Callback when an item is selected */
+  onSelect?: (item: CommandPaletteItem) => void;
+}
+/** Full-featured command palette with search and keyboard navigation. */
+declare const CommandPalette: {
+  ({ open, onOpenChange, groups, placeholder, emptyMessage, onSelect }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+export interface CommandPaletteTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Shortcut hint text */
+  shortcutHint?: string;
+}
+/** Button trigger for opening command palette with keyboard shortcut hint. */
+declare const CommandPaletteTrigger: React.ForwardRefExoticComponent<CommandPaletteTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { CommandPalette, CommandPaletteTrigger };
+//# sourceMappingURL=command-palette.d.mts.map

package/dist/command-palette.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.mts","names":[],"sources":["../src/command-palette.tsx"],"mappings":";;iBAeiB;EAChB;EACA;EACA;EACA,OAAO,MAAM;EACb;EACA;EACA;;iBAGgB;EAChB;EACA,OAAO;;iBAGS;;EAEhB;;EAEA,eAAe;;EAEf,QAAQ;;EAER;;EAEA;;EAEA,YAAY,MAAM;;;cAIb;KAOH,MAAA,cAAA,QAAA,aAAA,cAAA,YAAA,kDAAmB,IAAA;;;iBAqDL,mCAAmC,MAAM,qBAAqB;;EAE9E;;;cAIK,uBAAqB,MAAA,0BAAA,6BAAA,MAAA,cAAA"}

package/dist/command-palette.mjs

@@ -0,0 +1,70 @@
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./command.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/command-palette.tsx
+/** Full-featured command palette with search and keyboard navigation. */
+const CommandPalette = ({ open, onOpenChange, groups, placeholder = "Type a command or search...", emptyMessage = "No results found.", onSelect }) => {
+	const handleSelect = (item) => {
+		item.onSelect?.();
+		onSelect?.(item);
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsxs(CommandDialog, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(CommandInput, { placeholder }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsx(CommandGroup, {
+			heading: group.heading,
+			children: group.items.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
+				disabled: item.disabled,
+				onSelect: () => handleSelect(item),
+				className: "wwc:gap-2",
+				children: [
+					item.icon && /* @__PURE__ */ jsx("span", {
+						className: "wwc:flex-shrink-0 wwc:text-muted-foreground",
+						children: item.icon
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex-1 wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "wwc:truncate",
+							children: item.label
+						}), item.description && /* @__PURE__ */ jsx("div", {
+							className: "wwc:text-xs wwc:text-muted-foreground wwc:truncate",
+							children: item.description
+						})]
+					}),
+					item.shortcut && /* @__PURE__ */ jsx("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-1",
+						children: item.shortcut.map((key, keyIndex) => /* @__PURE__ */ jsx("kbd", {
+							className: "wwc:pointer-events-none wwc:inline-flex wwc:h-5 wwc:select-none wwc:items-center wwc:gap-1 wwc:rounded wwc:border wwc:bg-muted wwc:px-1.5 wwc:font-mono wwc:text-[10px] wwc:font-medium wwc:text-muted-foreground",
+							children: key
+						}, keyIndex))
+					})
+				]
+			}, item.id))
+		})] }, groupIndex))] })]
+	});
+};
+CommandPalette.displayName = "CommandPalette";
+/** Button trigger for opening command palette with keyboard shortcut hint. */
+const CommandPaletteTrigger = React.forwardRef(({ className, shortcutHint = "⌘K", children, ...props }, ref) => /* @__PURE__ */ jsxs("button", {
+	ref,
+	type: "button",
+	className: cn("wwc:inline-flex wwc:items-center wwc:gap-2 wwc:rounded-md wwc:border wwc:border-border wwc:bg-background wwc:px-3 wwc:py-2 wwc:text-sm wwc:text-muted-foreground wwc:transition-colors hover:wwc:bg-accent hover:wwc:text-accent-foreground", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(Search, { className: "wwc:h-4 wwc:w-4" }),
+		children || /* @__PURE__ */ jsx("span", { children: "Search..." }),
+		shortcutHint && /* @__PURE__ */ jsx("kbd", {
+			className: "wwc:pointer-events-none wwc:ml-auto wwc:hidden wwc:h-5 wwc:select-none wwc:items-center wwc:gap-1 wwc:rounded wwc:border wwc:bg-muted wwc:px-1.5 wwc:font-mono wwc:text-[10px] wwc:font-medium wwc:text-muted-foreground wwc:sm:flex",
+			children: shortcutHint
+		})
+	]
+}));
+CommandPaletteTrigger.displayName = "CommandPaletteTrigger";
+//#endregion
+export { CommandPalette, CommandPaletteTrigger };
+
+//# sourceMappingURL=command-palette.mjs.map

package/dist/command-palette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.mjs","names":[],"sources":["../src/command-palette.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Search} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n\tCommand,\n\tCommandDialog,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n\tCommandSeparator,\n} from \"./command\";\n\nexport interface CommandPaletteItem {\n\tid: string;\n\tlabel: string;\n\tdescription?: string;\n\ticon?: React.ReactNode;\n\tshortcut?: string[];\n\tonSelect?: () => void;\n\tdisabled?: boolean;\n}\n\nexport interface CommandPaletteGroup {\n\theading?: string;\n\titems: CommandPaletteItem[];\n}\n\nexport interface CommandPaletteProps {\n\t/** Whether the palette is open */\n\topen: boolean;\n\t/** Callback when open state changes */\n\tonOpenChange: (open: boolean) => void;\n\t/** Grouped command items */\n\tgroups: CommandPaletteGroup[];\n\t/** Placeholder for search input */\n\tplaceholder?: string;\n\t/** Empty state message */\n\temptyMessage?: string;\n\t/** Callback when an item is selected */\n\tonSelect?: (item: CommandPaletteItem) => void;\n}\n\n/** Full-featured command palette with search and keyboard navigation. */\nconst CommandPalette = ({\n\topen,\n\tonOpenChange,\n\tgroups,\n\tplaceholder = \"Type a command or search...\",\n\temptyMessage = \"No results found.\",\n\tonSelect,\n}: CommandPaletteProps) => {\n\tconst handleSelect = (item: CommandPaletteItem) => {\n\t\titem.onSelect?.();\n\t\tonSelect?.(item);\n\t\tonOpenChange(false);\n\t};\n\n\treturn (\n\t\t<CommandDialog open={open} onOpenChange={onOpenChange}>\n\t\t\t<CommandInput placeholder={placeholder} />\n\t\t\t<CommandList>\n\t\t\t\t<CommandEmpty>{emptyMessage}</CommandEmpty>\n\t\t\t\t{groups.map((group, groupIndex) => (\n\t\t\t\t\t<React.Fragment key={groupIndex}>\n\t\t\t\t\t\t{groupIndex > 0 && <CommandSeparator />}\n\t\t\t\t\t\t<CommandGroup heading={group.heading}>\n\t\t\t\t\t\t\t{group.items.map((item) => (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleSelect(item)}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:gap-2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.icon && <span className=\"wwc:flex-shrink-0 wwc:text-muted-foreground\">{item.icon}</span>}\n\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex-1 wwc:min-w-0\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:truncate\">{item.label}</div>\n\t\t\t\t\t\t\t\t\t\t{item.description && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:text-xs wwc:text-muted-foreground wwc:truncate\">{item.description}</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{item.shortcut && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t{item.shortcut.map((key, keyIndex) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<kbd\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={keyIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:inline-flex wwc:h-5 wwc:select-none wwc:items-center wwc:gap-1 wwc:rounded wwc:border wwc:bg-muted wwc:px-1.5 wwc:font-mono wwc:text-[10px] wwc:font-medium wwc:text-muted-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{key}\n\t\t\t\t\t\t\t\t\t\t\t\t</kbd>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</CommandList>\n\t\t</CommandDialog>\n\t);\n};\nCommandPalette.displayName = \"CommandPalette\";\n\nexport interface CommandPaletteTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\t/** Shortcut hint text */\n\tshortcutHint?: string;\n}\n\n/** Button trigger for opening command palette with keyboard shortcut hint. */\nconst CommandPaletteTrigger = React.forwardRef<HTMLButtonElement, CommandPaletteTriggerProps>(\n\t({className, shortcutHint = \"⌘K\", children, ...props}, ref) => (\n\t\t<button\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:inline-flex wwc:items-center wwc:gap-2 wwc:rounded-md wwc:border wwc:border-border wwc:bg-background wwc:px-3 wwc:py-2 wwc:text-sm wwc:text-muted-foreground wwc:transition-colors hover:wwc:bg-accent hover:wwc:text-accent-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t{children || <span>Search...</span>}\n\t\t\t{shortcutHint && (\n\t\t\t\t<kbd className=\"wwc:pointer-events-none wwc:ml-auto wwc:hidden wwc:h-5 wwc:select-none wwc:items-center wwc:gap-1 wwc:rounded wwc:border wwc:bg-muted wwc:px-1.5 wwc:font-mono wwc:text-[10px] wwc:font-medium wwc:text-muted-foreground wwc:sm:flex\">\n\t\t\t\t\t{shortcutHint}\n\t\t\t\t</kbd>\n\t\t\t)}\n\t\t</button>\n\t),\n);\nCommandPaletteTrigger.displayName = \"CommandPaletteTrigger\";\n\nexport {CommandPalette, CommandPaletteTrigger};\n"],"mappings":";;;;;;;AA8CA,MAAM,kBAAkB,EACvB,MACA,cACA,QACA,cAAc,+BACd,eAAe,qBACf,eAC0B;CAC1B,MAAM,gBAAgB,SAA6B;EAClD,KAAK,WAAW;EAChB,WAAW,IAAI;EACf,aAAa,KAAK;CACnB;CAEA,OACC,qBAAC,eAAD;EAAqB;EAAoB;EAAzC,UAAA,CACC,oBAAC,cAAD,EAA2B,YAAc,CAAA,GACzC,qBAAC,aAAD,EAAA,UAAA,CACC,oBAAC,cAAD,EAAA,UAAe,aAA2B,CAAA,GACzC,OAAO,KAAK,OAAO,eACnB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,aAAa,KAAK,oBAAC,kBAAD,CAAmB,CAAA,GACtC,oBAAC,cAAD;GAAc,SAAS,MAAM;GAC3B,UAAA,MAAM,MAAM,KAAK,SACjB,qBAAC,aAAD;IAEC,UAAU,KAAK;IACf,gBAAgB,aAAa,IAAI;IACjC,WAAU;IAJX,UAAA;KAME,KAAK,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAA+C,UAAA,KAAK;KAAW,CAAA;KAC7F,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,oBAAC,OAAD;OAAK,WAAU;OAAgB,UAAA,KAAK;MAAW,CAAA,GAC9C,KAAK,eACL,oBAAC,OAAD;OAAK,WAAU;OAAsD,UAAA,KAAK;MAAiB,CAAA,CAExF;;KACJ,KAAK,YACL,oBAAC,OAAD;MAAK,WAAU;MACb,UAAA,KAAK,SAAS,KAAK,KAAK,aACxB,oBAAC,OAAD;OAEC,WAAU;OAET,UAAA;MACG,GAJC,QAID,CACL;KACG,CAAA;IAEM;GAxBP,GAAA,KAAK,EAwBE,CACb;EACY,CAAA,CACC,EAAA,GAhCK,UAgCL,CAChB,CACW,EAAA,CAAA,CACC;;AAEjB;AACA,eAAe,cAAc;;AAQ7B,MAAM,wBAAwB,MAAM,YAClC,EAAC,WAAW,eAAe,MAAM,UAAU,GAAG,SAAQ,QACtD,qBAAC,UAAD;CACM;CACL,MAAK;CACL,WAAW,GACV,+OACA,SACD;CACA,GAAI;CAPL,UAAA;EASC,oBAAC,QAAD,EAAQ,WAAU,kBAAmB,CAAA;EACpC,YAAY,oBAAC,QAAD,EAAA,UAAM,YAAe,CAAA;EACjC,gBACA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA;EACG,CAAA;CAEC;AAEV,CAAA,CAAA;AACA,sBAAsB,cAAc"}

package/dist/command.d.mts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { DialogProps } from "@radix-ui/react-dialog";
+//#region src/command.d.ts
+/** A command palette and search interface built on cmdk. */
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+  children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  label?: string;
+  shouldFilter?: boolean;
+  filter?: (value: string, search: string, keywords?: string[]) => number;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  loop?: boolean;
+  disablePointerSelection?: boolean;
+  vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `contentClassName` reaches the dialog surface itself — width, height, anything about the panel
+ * rather than the palette inside it. Without it a caller could only restyle the list, and the
+ * surface stayed pinned at `DialogContent`'s default `max-w-lg`.
+ */
+declare const CommandDialog: ({ children, contentClassName, ...props }: DialogProps & {
+  contentClassName?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+  ref?: React.Ref<HTMLInputElement>;
+} & {
+  asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  value?: string;
+  onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+  children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+  children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+  children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+  heading?: React.ReactNode;
+  value?: string;
+  forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+  children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+  ref?: React.Ref<HTMLDivElement>;
+} & {
+  asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+  value?: string;
+  keywords?: string[];
+  forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+  ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.d.mts.map

package/dist/command.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.mts","names":[],"sources":["../src/command.tsx"],"mappings":";;;;cAUM,SAAO,MAAA,0BAAA;;;;;;;;;;;;;;;;IAYX,MAAA,cAAA,0BAAA,MAAA,cAAA;;;;;;cAQI,kBAAiB,UAAA,qBAAA,SAAwC;EAAe;kCAA0B,IAAA;cAYlG,cAAY,MAAA,0BAAA,KAAA,KAAA,KAAA,KAAA,MAAA,kBAAA,MAAA,oBAAA,mBAAA,iCAAA,MAAA,oBAAA;;;;;;;IAehB,MAAA,cAAA,4BAAA,MAAA,cAAA;cAII,aAAW,MAAA,0BAAA;;;;;;;;IASf,MAAA,cAAA,0BAAA,MAAA,cAAA;cAII,cAAY,MAAA,0BAAA;;;;;;iBAGiG,MAAA,eAAA,+BAAA,MAAA,cAAA,0BAAA,MAAA,cAAA;cAI7G,cAAY,MAAA,0BAAA;;;;;;;;;;IAYhB,MAAA,cAAA,0BAAA,MAAA,cAAA;cAII,kBAAgB,MAAA,0BAAA,KAAA,KAAA,KAAA,MAAA,kBAAA,MAAA,eAAA,iBAAA,+BAAA,MAAA,eAAA;;;;;;IAKpB,MAAA,cAAA,0BAAA,MAAA,cAAA;cAGI,aAAW,MAAA,0BAAA;;;;;;;;;;;;IAYf,MAAA,cAAA,0BAAA,MAAA,cAAA;cAII;KAA0C,cAAA,SAAA,MAAM,eAAe,+CAAgB,IAAA"}

package/dist/command.mjs

@@ -0,0 +1,82 @@
+import { Dialog, DialogContent } from "./dialog.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region src/command.tsx
+/** A command palette and search interface built on cmdk. */
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+	ref,
+	className: cn("wwc:flex wwc:h-full wwc:w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-md wwc:bg-popover wwc:text-popover-foreground", className),
+	...props
+}));
+Command.displayName = Command$1.displayName;
+/**
+* `contentClassName` reaches the dialog surface itself — width, height, anything about the panel
+* rather than the palette inside it. Without it a caller could only restyle the list, and the
+* surface stayed pinned at `DialogContent`'s default `max-w-lg`.
+*/
+const CommandDialog = ({ children, contentClassName, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("wwc:overflow-hidden wwc:p-0 wwc:shadow-lg", contentClassName),
+			children: /* @__PURE__ */ jsx(Command, {
+				className: "wwc:[&_[cmdk-group-heading]]:px-2 wwc:[&_[cmdk-group-heading]]:font-medium wwc:[&_[cmdk-group-heading]]:text-muted-foreground wwc:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 wwc:[&_[cmdk-group]]:px-2 wwc:[&_[cmdk-input-wrapper]_svg]:h-5 wwc:[&_[cmdk-input-wrapper]_svg]:w-5 wwc:[&_[cmdk-input]]:h-12 wwc:[&_[cmdk-item]]:px-2 wwc:[&_[cmdk-item]]:py-3 wwc:[&_[cmdk-item]_svg]:h-5 wwc:[&_[cmdk-item]_svg]:w-5",
+				children
+			})
+		})
+	});
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: "wwc:flex wwc:items-center wwc:border-b wwc:px-3",
+	"cmdk-input-wrapper": "",
+	children: [/* @__PURE__ */ jsx(Search, { className: "wwc:mr-2 wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+		ref,
+		className: cn("wwc:flex wwc:h-11 wwc:w-full wwc:rounded-md wwc:bg-transparent wwc:py-3 wwc:text-sm wwc:outline-none wwc:placeholder:text-muted-foreground wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50", className),
+		...props
+	})]
+}));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+	ref,
+	className: cn("wwc:max-h-[300px] wwc:overflow-y-auto wwc:overflow-x-hidden", className),
+	...props
+}));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+	ref,
+	className: "wwc:py-6 wwc:text-center wwc:text-sm",
+	...props
+}));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+	ref,
+	className: cn("wwc:overflow-hidden wwc:p-1 wwc:text-foreground wwc:[&_[cmdk-group-heading]]:px-2 wwc:[&_[cmdk-group-heading]]:py-1.5 wwc:[&_[cmdk-group-heading]]:text-xs wwc:[&_[cmdk-group-heading]]:font-medium wwc:[&_[cmdk-group-heading]]:text-muted-foreground", className),
+	...props
+}));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+	ref,
+	className: cn("wwc:-mx-1 wwc:h-px wwc:bg-border", className),
+	...props
+}));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+	ref,
+	className: cn("wwc:relative wwc:flex wwc:cursor-pointer wwc:gap-2 wwc:select-none wwc:items-center wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:data-[disabled=true]:pointer-events-none wwc:data-[selected=true]:bg-menu-highlight wwc:data-[selected=true]:text-menu-highlight-foreground wwc:data-[disabled=true]:opacity-50 wwc:[&_svg]:pointer-events-none wwc:[&_svg]:size-4 wwc:[&_svg]:shrink-0", className),
+	...props
+}));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("wwc:ml-auto wwc:text-xs wwc:tracking-widest wwc:text-muted-foreground", className),
+		...props
+	});
+};
+CommandShortcut.displayName = "CommandShortcut";
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command.mjs.map

package/dist/command.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.mjs","names":["CommandPrimitive"],"sources":["../src/command.tsx"],"sourcesContent":["import type {DialogProps} from \"@radix-ui/react-dialog\";\n\nimport {cn} from \"@corensystem/coren-utils\";\nimport {Command as CommandPrimitive} from \"cmdk\";\nimport {Search} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Dialog, DialogContent} from \"./dialog\";\n\n/** A command palette and search interface built on cmdk. */\nconst Command = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({className, ...props}, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"wwc:flex wwc:h-full wwc:w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-md wwc:bg-popover wwc:text-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = CommandPrimitive.displayName;\n\n/**\n * `contentClassName` reaches the dialog surface itself — width, height, anything about the panel\n * rather than the palette inside it. Without it a caller could only restyle the list, and the\n * surface stayed pinned at `DialogContent`'s default `max-w-lg`.\n */\nconst CommandDialog = ({children, contentClassName, ...props}: DialogProps & {contentClassName?: string}) => {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogContent className={cn(\"wwc:overflow-hidden wwc:p-0 wwc:shadow-lg\", contentClassName)}>\n\t\t\t\t<Command className=\"wwc:[&_[cmdk-group-heading]]:px-2 wwc:[&_[cmdk-group-heading]]:font-medium wwc:[&_[cmdk-group-heading]]:text-muted-foreground wwc:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 wwc:[&_[cmdk-group]]:px-2 wwc:[&_[cmdk-input-wrapper]_svg]:h-5 wwc:[&_[cmdk-input-wrapper]_svg]:w-5 wwc:[&_[cmdk-input]]:h-12 wwc:[&_[cmdk-item]]:px-2 wwc:[&_[cmdk-item]]:py-3 wwc:[&_[cmdk-item]_svg]:h-5 wwc:[&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t\t{children}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n};\n\nconst CommandInput = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Input>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({className, ...props}, ref) => (\n\t<div className=\"wwc:flex wwc:items-center wwc:border-b wwc:px-3\" cmdk-input-wrapper=\"\">\n\t\t<Search className=\"wwc:mr-2 wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:h-11 wwc:w-full wwc:rounded-md wwc:bg-transparent wwc:py-3 wwc:text-sm wwc:outline-none wwc:placeholder:text-muted-foreground wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({className, ...props}, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"wwc:max-h-[300px] wwc:overflow-y-auto wwc:overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Empty>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} className=\"wwc:py-6 wwc:text-center wwc:text-sm\" {...props} />);\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Group>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({className, ...props}, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"wwc:overflow-hidden wwc:p-1 wwc:text-foreground wwc:[&_[cmdk-group-heading]]:px-2 wwc:[&_[cmdk-group-heading]]:py-1.5 wwc:[&_[cmdk-group-heading]]:text-xs wwc:[&_[cmdk-group-heading]]:font-medium wwc:[&_[cmdk-group-heading]]:text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Separator>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({className, ...props}, ref) => (\n\t<CommandPrimitive.Separator ref={ref} className={cn(\"wwc:-mx-1 wwc:h-px wwc:bg-border\", className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({className, ...props}, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"wwc:relative wwc:flex wwc:cursor-pointer wwc:gap-2 wwc:select-none wwc:items-center wwc:rounded-sm wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:outline-none wwc:data-[disabled=true]:pointer-events-none wwc:data-[selected=true]:bg-menu-highlight wwc:data-[selected=true]:text-menu-highlight-foreground wwc:data-[disabled=true]:opacity-50 wwc:[&_svg]:pointer-events-none wwc:[&_svg]:size-4 wwc:[&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({className, ...props}: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"wwc:ml-auto wwc:text-xs wwc:tracking-widest wwc:text-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n"],"mappings":";;;;;;;;AAUA,MAAM,UAAU,MAAM,YAGnB,EAAC,WAAW,GAAG,SAAQ,QACzB,oBAACA,WAAD;CACM;CACL,WAAW,GACV,6HACA,SACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,QAAQ,cAAcA,UAAiB;;;;;;AAOvC,MAAM,iBAAiB,EAAC,UAAU,kBAAkB,GAAG,YAAsD;CAC5G,OACC,oBAAC,QAAD;EAAQ,GAAI;EACX,UAAA,oBAAC,eAAD;GAAe,WAAW,GAAG,6CAA6C,gBAAgB;GACzF,UAAA,oBAAC,SAAD;IAAS,WAAU;IACjB;GACO,CAAA;EACK,CAAA;CACR,CAAA;AAEV;AAEA,MAAM,eAAe,MAAM,YAGxB,EAAC,WAAW,GAAG,SAAQ,QACzB,qBAAC,OAAD;CAAK,WAAU;CAAkD,sBAAmB;CAApF,UAAA,CACC,oBAAC,QAAD,EAAQ,WAAU,uDAAwD,CAAA,GAC1E,oBAACA,UAAiB,OAAlB;EACM;EACL,WAAW,GACV,sMACA,SACD;EACA,GAAI;CACJ,CAAA,CACG;AACL,CAAA,CAAA;AAED,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,cAAc,MAAM,YAGvB,EAAC,WAAW,GAAG,SAAQ,QACzB,oBAACA,UAAiB,MAAlB;CACM;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;AACJ,CAAA,CACD;AAED,YAAY,cAAcA,UAAiB,KAAK;AAEhD,MAAM,eAAe,MAAM,YAGxB,OAAO,QAAQ,oBAACA,UAAiB,OAAlB;CAA6B;CAAK,WAAU;CAAuC,GAAI;AAAQ,CAAA,CAAC;AAElH,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,eAAe,MAAM,YAGxB,EAAC,WAAW,GAAG,SAAQ,QACzB,oBAACA,UAAiB,OAAlB;CACM;CACL,WAAW,GACV,0PACA,SACD;CACA,GAAI;AACJ,CAAA,CACD;AAED,aAAa,cAAcA,UAAiB,MAAM;AAElD,MAAM,mBAAmB,MAAM,YAG5B,EAAC,WAAW,GAAG,SAAQ,QACzB,oBAACA,UAAiB,WAAlB;CAAiC;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;AAAQ,CAAA,CAChH;AACD,iBAAiB,cAAcA,UAAiB,UAAU;AAE1D,MAAM,cAAc,MAAM,YAGvB,EAAC,WAAW,GAAG,SAAQ,QACzB,oBAACA,UAAiB,MAAlB;CACM;CACL,WAAW,GACV,mZACA,SACD;CACA,GAAI;AACJ,CAAA,CACD;AAED,YAAY,cAAcA,UAAiB,KAAK;AAEhD,MAAM,mBAAmB,EAAC,WAAW,GAAG,YAAkD;CACzF,OACC,oBAAC,QAAD;EACC,WAAW,GAAG,yEAAyE,SAAS;EAChG,GAAI;CACJ,CAAA;AAEH;AACA,gBAAgB,cAAc"}

package/dist/comment-composer.d.mts

@@ -0,0 +1,29 @@
+//#region src/comment-composer.d.ts
+export type CommentToolbarAction = "bold" | "italic" | "underline" | "strikethrough" | "align-left" | "align-center" | "align-right" | "list-bulleted" | "list-numbered" | "list-checklist" | "quote" | "code" | "image";
+export interface CommentComposerProps {
+  /** Controlled HTML value of the editor. Pair with onChange. */
+  value?: string;
+  /** Uncontrolled initial HTML value. */
+  defaultValue?: string;
+  /** Fires on every editor update with the current HTML. */
+  onChange?: (html: string) => void;
+  /** Fires when the submit button is clicked or the user presses Cmd/Ctrl+Enter. Receives the editor HTML. */
+  onSubmit?: (html: string) => void;
+  /** Optional instrumentation hook fired in addition to applying the formatting command. */
+  onToolbarAction?: (action: CommentToolbarAction) => void;
+  placeholder?: string;
+  /** Label shown on the submit button. Defaults to "Comment". */
+  submitLabel?: string;
+  /** Initial visible height (rem). Defaults to 4. */
+  minHeight?: string;
+  /** Restrict the toolbar to this subset (in this order). Defaults to all actions. */
+  toolbarActions?: CommentToolbarAction[];
+  disabled?: boolean;
+  /** When true, the submit button shows the loading state and is disabled. */
+  isSubmitting?: boolean;
+  /** Class name applied to the outer container. */
+  className?: string;
+}
+export declare function CommentComposer({ value, defaultValue, onChange, onSubmit, onToolbarAction, placeholder, submitLabel, minHeight, toolbarActions, disabled, isSubmitting, className }: CommentComposerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=comment-composer.d.mts.map

package/dist/comment-composer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-composer.d.mts","names":[],"sources":["../src/comment-composer.tsx"],"mappings":";YA4BY;iBAwIK;;EAEhB;;EAEA;;EAEA,YAAY;;EAEZ,YAAY;;EAEZ,mBAAmB,QAAQ;EAE3B;;EAEA;;EAEA;;EAGA,iBAAiB;EAEjB;;EAEA;;EAEA;;wBAoBe,kBACf,OACA,cACA,UACA,UACA,iBACA,aACA,aACA,WACA,gBACA,UACA,cACA,aACE,mDAAoB,IAAA"}