erp-pro-ui 0.1.7 → 0.1.8

package/dist/chunks/combobox-Bcwi33Qx.mjs

@@ -0,0 +1,127 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { t as TruncatedText } from "./truncated-text-DTgks5yS.mjs";
+import { J as CheckIcon, N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-C17Zqu_E.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+//#region src/components/forms/combobox/Combobox.tsx
+var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPlaceholder = "Type to search...", noOptionsText = "No options", className, bgClassName = "bg-ds-surface-1", createOptionLabel, onCreateOption }) => {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [visible, setVisible] = useState(false);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const radius = 100;
+	const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		className: mergeClassNames("w-full", className),
+		open,
+		onOpenChange: (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) setSearch("");
+		},
+		animationClassName: "origin-top-left",
+		panelClassName: " left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
+		trigger: /* @__PURE__ */ jsx(motion.div, {
+			style: { backgroundImage: useMotionTemplate`
+              radial-gradient(
+                ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                var(--ds-color-accent),
+                transparent 90%
+              )
+            ` },
+			onMouseMove: handleMouseMove,
+			onMouseEnter: () => setVisible(true),
+			onMouseLeave: () => setVisible(false),
+			className: "group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: mergeClassNames("flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none", bgClassName),
+				children: [value ? /* @__PURE__ */ jsx(TruncatedText, {
+					as: "span",
+					showTitleOnHover: true,
+					className: "flex-1 text-ds-1",
+					children: options.find((opt) => opt.value === value)?.label
+				}) : /* @__PURE__ */ jsx(TruncatedText, {
+					as: "span",
+					className: "flex-1 text-ds-2",
+					children: placeholder
+				}), /* @__PURE__ */ jsx("span", {
+					className: mergeClassNames("ml-2 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						width: 24,
+						height: 24,
+						color: "currentColor",
+						className: "h-5 w-5"
+					})
+				})]
+			})
+		}),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ jsx("input", {
+					autoFocus: true,
+					className: "w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg",
+					placeholder: searchPlaceholder,
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					onClick: (e) => e.stopPropagation()
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-h-80 flex-1 overflow-auto",
+				children: [filteredOptions.length === 0 && !createOptionLabel && /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-2 text-ds-2",
+					children: noOptionsText
+				}), filteredOptions.map((opt) => /* @__PURE__ */ jsxs("div", {
+					className: mergeClassNames("mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition", opt.value === value ? "bg-ds-accent-subtle text-ds-1 font-semibold" : "", "hover:bg-ds-accent hover:text-ds-on-accent"),
+					onClick: () => {
+						onChange(opt.value);
+						setSearch("");
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex w-5 items-center justify-center",
+						children: opt.value === value && /* @__PURE__ */ jsx(CheckIcon, {
+							className: "text-ds-1",
+							width: 18,
+							height: 18
+						})
+					}), /* @__PURE__ */ jsx(TruncatedText, {
+						as: "span",
+						showTitleOnHover: true,
+						className: "flex-1",
+						children: opt.label
+					})]
+				}, opt.value))]
+			}),
+			createOptionLabel && onCreateOption && /* @__PURE__ */ jsx("div", {
+				className: "sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent",
+					onClick: () => {
+						onCreateOption();
+						setSearch("");
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ jsx("span", { className: "flex w-5 items-center justify-center" }), /* @__PURE__ */ jsx(TruncatedText, {
+						as: "span",
+						showTitleOnHover: true,
+						className: "flex-1",
+						children: createOptionLabel
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { Combobox as t };
+
+//# sourceMappingURL=combobox-Bcwi33Qx.mjs.map

package/dist/chunks/combobox-Bcwi33Qx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-Bcwi33Qx.mjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\" left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ml-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":";;;;;;;;AA0BA,IAAM,YAAqC,EACzC,SACA,OACA,UACA,cAAc,aACd,oBAAoB,qBACpB,gBAAgB,cAChB,WACA,cAAc,mBACd,mBACA,qBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS;CAGf,MAAM,kBAAkB,QAAQ,QAAQ,QACtC,IAAI,MAAM,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC,CACvD;CAED,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,cAAD;EACE,WAAW,gBAAgB,UAAU,UAAU;EACzC;EACN,eAAe,aAAa;AAC1B,WAAQ,SAAS;AACjB,OAAI,CAAC,SACH,WAAU,GAAG;;EAGjB,oBAAmB;EACnB,gBAAe;EACf,SACE,oBAAC,OAAO,KAAR;GACE,OAAO,EACL,iBAAiB,iBAAiB;;kBAE5B,UAAU,GAAG,OAAO,MAAM,MAAM,aAAa,OAAO,KAAK,OAAO;;;;eAKvE;GACD,aAAa;GACb,oBAAoB,WAAW,KAAK;GACpC,oBAAoB,WAAW,MAAM;GACrC,WAAU;aAEV,qBAAC,OAAD;IACE,WAAW,gBACT,qPACA,YACD;cAJH,CAMG,QACC,oBAAC,eAAD;KACE,IAAG;KACH,kBAAA;KACA,WAAU;eAET,QAAQ,MAAM,QAAQ,IAAI,UAAU,MAAM,EAAE;KAC/B,CAAA,GAEhB,oBAAC,eAAD;KAAe,IAAG;KAAO,WAAU;eAChC;KACa,CAAA,EAElB,oBAAC,QAAD;KACE,WAAW,gBACT,oDACA,OAAO,eAAe,WACvB;eAED,oBAAC,iBAAD;MACE,OAAO;MACP,QAAQ;MACR,OAAM;MACN,WAAU;MACV,CAAA;KACG,CAAA,CACH;;GACK,CAAA;YA5DjB;GAgEE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,SAAD;KACE,WAAA;KACA,WAAU;KACV,aAAa;KACb,OAAO;KACP,WAAW,MAAM,UAAU,EAAE,OAAO,MAAM;KAC1C,UAAU,MAAM,EAAE,iBAAiB;KACnC,CAAA;IACE,CAAA;GAEN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,gBAAgB,WAAW,KAAK,CAAC,qBAChC,oBAAC,OAAD;KAAK,WAAU;eAAuB;KAAoB,CAAA,EAE3D,gBAAgB,KAAK,QACpB,qBAAC,OAAD;KAEE,WAAW,gBACT,sGACA,IAAI,UAAU,QACV,gDACA,IACJ,6CACD;KACD,eAAe;AACb,eAAS,IAAI,MAAM;AACnB,gBAAU,GAAG;AACb,cAAQ,MAAM;;eAZlB,CAeE,oBAAC,QAAD;MAAM,WAAU;gBACb,IAAI,UAAU,SACb,oBAAC,WAAD;OAAW,WAAU;OAAY,OAAO;OAAI,QAAQ;OAAM,CAAA;MAEvD,CAAA,EACP,oBAAC,eAAD;MAAe,IAAG;MAAO,kBAAA;MAAiB,WAAU;gBACjD,IAAI;MACS,CAAA,CACZ;OAtBC,IAAI,MAsBL,CACN,CACE;;GAEL,qBAAqB,kBACpB,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KACE,WAAU;KACV,eAAe;AACb,sBAAgB;AAChB,gBAAU,GAAG;AACb,cAAQ,MAAM;;eALlB,CAQE,oBAAC,QAAD,EAAM,WAAU,wCAET,CAAA,EACP,oBAAC,eAAD;MAAe,IAAG;MAAO,kBAAA;MAAiB,WAAU;gBACjD;MACa,CAAA,CACZ;;IACF,CAAA;GAEK"}

package/dist/chunks/combobox-DRiHHhXL.cjs

@@ -0,0 +1,134 @@
+const require_chunk = require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_truncated_text = require("./truncated-text-istgJRUq.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+const require_DropdownMenu = require("./DropdownMenu-DOvo5pV_.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/forms/combobox/Combobox.tsx
+var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPlaceholder = "Type to search...", noOptionsText = "No options", className, bgClassName = "bg-ds-surface-1", createOptionLabel, onCreateOption }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [search, setSearch] = (0, react.useState)("");
+	const [visible, setVisible] = (0, react.useState)(false);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const radius = 100;
+	const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DropdownMenu.DropdownMenu, {
+		className: require_utils.mergeClassNames("w-full", className),
+		open,
+		onOpenChange: (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) setSearch("");
+		},
+		animationClassName: "origin-top-left",
+		panelClassName: " left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
+		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			style: { backgroundImage: framer_motion.useMotionTemplate`
+              radial-gradient(
+                ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                var(--ds-color-accent),
+                transparent 90%
+              )
+            ` },
+			onMouseMove: handleMouseMove,
+			onMouseEnter: () => setVisible(true),
+			onMouseLeave: () => setVisible(false),
+			className: "group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none", bgClassName),
+				children: [value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+					as: "span",
+					showTitleOnHover: true,
+					className: "flex-1 text-ds-1",
+					children: options.find((opt) => opt.value === value)?.label
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+					as: "span",
+					className: "flex-1 text-ds-2",
+					children: placeholder
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_utils.mergeClassNames("ml-2 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
+						width: 24,
+						height: 24,
+						color: "currentColor",
+						className: "h-5 w-5"
+					})
+				})]
+			})
+		}),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					autoFocus: true,
+					className: "w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg",
+					placeholder: searchPlaceholder,
+					value: search,
+					onChange: (e) => setSearch(e.target.value),
+					onClick: (e) => e.stopPropagation()
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "max-h-80 flex-1 overflow-auto",
+				children: [filteredOptions.length === 0 && !createOptionLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "px-3 py-2 text-ds-2",
+					children: noOptionsText
+				}), filteredOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_utils.mergeClassNames("mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition", opt.value === value ? "bg-ds-accent-subtle text-ds-1 font-semibold" : "", "hover:bg-ds-accent hover:text-ds-on-accent"),
+					onClick: () => {
+						onChange(opt.value);
+						setSearch("");
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex w-5 items-center justify-center",
+						children: opt.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+							className: "text-ds-1",
+							width: 18,
+							height: 18
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+						as: "span",
+						showTitleOnHover: true,
+						className: "flex-1",
+						children: opt.label
+					})]
+				}, opt.value))]
+			}),
+			createOptionLabel && onCreateOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent",
+					onClick: () => {
+						onCreateOption();
+						setSearch("");
+						setOpen(false);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex w-5 items-center justify-center" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_truncated_text.TruncatedText, {
+						as: "span",
+						showTitleOnHover: true,
+						className: "flex-1",
+						children: createOptionLabel
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Combobox", {
+	enumerable: true,
+	get: function() {
+		return Combobox;
+	}
+});
+
+//# sourceMappingURL=combobox-DRiHHhXL.cjs.map

package/dist/chunks/combobox-DRiHHhXL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-DRiHHhXL.cjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  noOptionsText?: string;\n  className?: string;\n  bgClassName?: string;\n  createOptionLabel?: string;\n  onCreateOption?: () => void;\n}\n\nconst Combobox: React.FC<ComboboxProps> = ({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select...\",\n  searchPlaceholder = \"Type to search...\",\n  noOptionsText = \"No options\",\n  className,\n  bgClassName = \"bg-ds-surface-1\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n\n  // Filter options by search\n  const filteredOptions = options.filter((opt) =>\n    opt.label.toLowerCase().includes(search.toLowerCase()),\n  );\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - left);\n    mouseY.set(event.clientY - top);\n  };\n\n  return (\n    <DropdownMenu\n      className={mergeClassNames(\"w-full\", className)}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        setOpen(nextOpen);\n        if (!nextOpen) {\n          setSearch(\"\");\n        }\n      }}\n      animationClassName=\"origin-top-left\"\n      panelClassName=\" left-0 top-[40px] z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n      trigger={\n        <motion.div\n          style={{\n            backgroundImage: useMotionTemplate`\n              radial-gradient(\n                ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n                var(--ds-color-accent),\n                transparent 90%\n              )\n            `,\n          }}\n          onMouseMove={handleMouseMove}\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          className=\"group/combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n        >\n          <div\n            className={mergeClassNames(\n              \"flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out focus-visible:ring-2 focus-visible:ring-ds-focus focus-visible:outline-none\",\n              bgClassName,\n            )}\n          >\n            {value ? (\n              <TruncatedText\n                as=\"span\"\n                showTitleOnHover\n                className=\"flex-1 text-ds-1\"\n              >\n                {options.find((opt) => opt.value === value)?.label}\n              </TruncatedText>\n            ) : (\n              <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n                {placeholder}\n              </TruncatedText>\n            )}\n            <span\n              className={mergeClassNames(\n                \"ml-2 text-ds-2 transition-transform duration-300\",\n                open ? \"rotate-180\" : \"rotate-0\",\n              )}\n            >\n              <ChevronDownIcon\n                width={24}\n                height={24}\n                color=\"currentColor\"\n                className=\"h-5 w-5\"\n              />\n            </span>\n          </div>\n        </motion.div>\n      }\n    >\n      {/* Sticky search input */}\n      <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n        <input\n          autoFocus\n          className=\"w-full bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30 rounded-t-lg\"\n          placeholder={searchPlaceholder}\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n      {/* Scrollable options */}\n      <div className=\"max-h-80 flex-1 overflow-auto\">\n        {filteredOptions.length === 0 && !createOptionLabel && (\n          <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n        )}\n        {filteredOptions.map((opt) => (\n          <div\n            key={opt.value}\n            className={mergeClassNames(\n              \"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-ds-1 transition\",\n              opt.value === value\n                ? \"bg-ds-accent-subtle text-ds-1 font-semibold\"\n                : \"\",\n              \"hover:bg-ds-accent hover:text-ds-on-accent\",\n            )}\n            onClick={() => {\n              onChange(opt.value);\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {opt.value === value && (\n                <CheckIcon className=\"text-ds-1\" width={18} height={18} />\n              )}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {opt.label}\n            </TruncatedText>\n          </div>\n        ))}\n      </div>\n      {/* Sticky create option */}\n      {createOptionLabel && onCreateOption && (\n        <div className=\"sticky bottom-0 z-10 rounded-b-lg border-t border-ds-border-3 bg-ds-surface-1/95 backdrop-blur-sm\">\n          <div\n            className=\"mx-1 my-1 flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-ds-1 transition hover:bg-ds-accent hover:text-ds-on-accent\"\n            onClick={() => {\n              onCreateOption();\n              setSearch(\"\");\n              setOpen(false);\n            }}\n          >\n            <span className=\"flex w-5 items-center justify-center\">\n              {/* Optionally add an icon here */}\n            </span>\n            <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n              {createOptionLabel}\n            </TruncatedText>\n          </div>\n        </div>\n      )}\n    </DropdownMenu>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}