@ucdjs-internal/shared-ui 0.1.0

package/dist/ui/combobox.mjs

@@ -0,0 +1,641 @@
+import { cn } from "../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Check, ChevronDown, X } from "lucide-react";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+
+//#region src/ui/combobox.tsx
+const Combobox = Combobox$1.Root;
+function ComboboxValue(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(Combobox$1.Value, {
+			"data-slot": "combobox-value",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function ComboboxTrigger(t0) {
+	const $ = c(11);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("[&_svg:not([class*='size-'])]:size-4", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground size-4 pointer-events-none" });
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+			"data-slot": "combobox-trigger",
+			className: t1,
+			...props,
+			children: [children, t2]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+function ComboboxClear(t0) {
+	const $ = c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		});
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== className) {
+		t2 = cn(className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(X, { className: "pointer-events-none" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== props || $[8] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Combobox$1.Clear, {
+			"data-slot": "combobox-clear",
+			render: t1,
+			className: t2,
+			...props,
+			children: t3
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+function ComboboxInput(t0) {
+	const $ = c(28);
+	let children;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, children, disabled: t1, showTrigger: t2, showClear: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+	}
+	const disabled = t1 === void 0 ? false : t1;
+	const showTrigger = t2 === void 0 ? true : t2;
+	const showClear = t3 === void 0 ? false : t3;
+	let t4;
+	if ($[7] !== className) {
+		t4 = cn("w-auto", className);
+		$[7] = className;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== disabled) {
+		t5 = /* @__PURE__ */ jsx(InputGroupInput, { disabled });
+		$[9] = disabled;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== props || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Combobox$1.Input, {
+			render: t5,
+			...props
+		});
+		$[11] = props;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== disabled || $[15] !== showTrigger) {
+		t7 = showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+			size: "icon-xs",
+			variant: "ghost",
+			render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+			"data-slot": "input-group-button",
+			className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+			disabled
+		});
+		$[14] = disabled;
+		$[15] = showTrigger;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== disabled || $[18] !== showClear) {
+		t8 = showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled });
+		$[17] = disabled;
+		$[18] = showClear;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-end",
+			children: [t7, t8]
+		});
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== children || $[24] !== t4 || $[25] !== t6 || $[26] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(InputGroup, {
+			className: t4,
+			children: [
+				t6,
+				t9,
+				children
+			]
+		});
+		$[23] = children;
+		$[24] = t4;
+		$[25] = t6;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	return t10;
+}
+function ComboboxContent(t0) {
+	const $ = c(21);
+	let anchor;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, side: t1, sideOffset: t2, align: t3, alignOffset: t4, anchor, ...props} = t0);
+		$[0] = t0;
+		$[1] = anchor;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		anchor = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+	}
+	const side = t1 === void 0 ? "bottom" : t1;
+	const sideOffset = t2 === void 0 ? 6 : t2;
+	const align = t3 === void 0 ? "start" : t3;
+	const alignOffset = t4 === void 0 ? 0 : t4;
+	const t5 = !!anchor;
+	let t6;
+	if ($[8] !== className) {
+		t6 = cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className);
+		$[8] = className;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== props || $[11] !== t5 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": t5,
+			className: t6,
+			...props
+		});
+		$[10] = props;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== align || $[15] !== alignOffset || $[16] !== anchor || $[17] !== side || $[18] !== sideOffset || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			className: "isolate z-50",
+			children: t7
+		}) });
+		$[14] = align;
+		$[15] = alignOffset;
+		$[16] = anchor;
+		$[17] = side;
+		$[18] = sideOffset;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+function ComboboxList(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.List, {
+			"data-slot": "combobox-list",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxItem(t0) {
+	const $ = c(11);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(Check, { className: "pointer-events-none" })
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Combobox$1.Item, {
+			"data-slot": "combobox-item",
+			className: t1,
+			...props,
+			children: [children, t2]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+function ComboboxGroup(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn(className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.Group, {
+			"data-slot": "combobox-group",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxLabel(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-muted-foreground px-2 py-1.5 text-xs", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+			"data-slot": "combobox-label",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxCollection(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(Combobox$1.Collection, {
+			"data-slot": "combobox-collection",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function ComboboxEmpty(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.Empty, {
+			"data-slot": "combobox-empty",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxSeparator(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("bg-border -mx-1 my-1 h-px", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.Separator, {
+			"data-slot": "combobox-separator",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxChips(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.Chips, {
+			"data-slot": "combobox-chips",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function ComboboxChip(t0) {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, children, showRemove: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const showRemove = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== showRemove) {
+		t3 = showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs"
+			}),
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
+		});
+		$[7] = showRemove;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+			"data-slot": "combobox-chip",
+			className: t2,
+			...props,
+			children: [children, t3]
+		});
+		$[9] = children;
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+function ComboboxChipsInput(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("min-w-16 flex-1 outline-none", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Combobox$1.Input, {
+			"data-slot": "combobox-chip-input",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function useComboboxAnchor() {
+	return React.useRef(null);
+}
+
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/ui/command.d.mts

@@ -0,0 +1,55 @@
+import { Dialog } from "./dialog.mjs";
+import * as React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+
+//#region src/ui/command.d.ts
+declare function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1>): react_jsx_runtime0.JSX.Element;
+declare function CommandDialog({
+  title,
+  description,
+  children,
+  className,
+  showCloseButton,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1.Input>): react_jsx_runtime0.JSX.Element;
+declare function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1.List>): react_jsx_runtime0.JSX.Element;
+declare function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime0.JSX.Element;
+declare function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1.Group>): react_jsx_runtime0.JSX.Element;
+declare function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime0.JSX.Element;
+declare function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Command$1.Item>): react_jsx_runtime0.JSX.Element;
+declare function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };