erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/color-palette-CXlCDiZz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-CXlCDiZz.mjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["export interface ColorSwatch {\n  name: string;\n  value: string;\n  textColor?: \"light\" | \"dark\";\n}\n\nexport interface ColorGroup {\n  name: string;\n  colors: ColorSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  groups?: ColorGroup[];\n  theme?: \"light\" | \"dark\" | \"all\";\n  showGradients?: boolean;\n  showUsageExamples?: boolean;\n  className?: string;\n}\n\nconst lightThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale\",\n    colors: [\n      { name: \"primary-50\", value: \"#f6efff\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"#ead9fd\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"#d8b3fb\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"#c084fc\", textColor: \"dark\" },\n      { name: \"primary-400\", value: \"#a855f7\", textColor: \"light\" },\n      { name: \"primary-500\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"primary-600\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"primary-700\", value: \"#6b21a8\", textColor: \"light\" },\n      { name: \"primary-800\", value: \"#581c87\", textColor: \"light\" },\n      { name: \"primary-900\", value: \"#3b0764\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces\",\n    colors: [\n      { name: \"bg-canvas\", value: \"#f4f7fe\", textColor: \"dark\" },\n      { name: \"bg-surface\", value: \"#ffffff\", textColor: \"dark\" },\n      { name: \"bg-elevated\", value: \"#ffffff\", textColor: \"dark\" },\n      { name: \"bg-muted\", value: \"#f4f3f8\", textColor: \"dark\" },\n      { name: \"accent-subtle\", value: \"#f3e8fd\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Semantic Foreground\",\n    colors: [\n      { name: \"fg\", value: \"#1e293b\", textColor: \"light\" },\n      { name: \"fg-muted\", value: \"#475467\", textColor: \"light\" },\n      { name: \"fg-subtle\", value: \"#64748b\", textColor: \"light\" },\n      { name: \"on-accent\", value: \"#ffffff\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Semantic Borders\",\n    colors: [\n      { name: \"border\", value: \"#e5e7eb\", textColor: \"dark\" },\n      { name: \"border-strong\", value: \"#d1d5db\", textColor: \"dark\" },\n      { name: \"border-muted\", value: \"#f3f4f6\", textColor: \"dark\" },\n      { name: \"border-field\", value: \"#e9e8e8\", textColor: \"dark\" },\n      { name: \"focus-ring\", value: \"#c595f2\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Semantic Status\",\n    colors: [\n      { name: \"success\", value: \"#1eb564\", textColor: \"light\" },\n      { name: \"warning\", value: \"#ff9500\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#e31d1c\", textColor: \"light\" },\n      { name: \"info\", value: \"#0085c4\", textColor: \"light\" },\n      { name: \"disabled\", value: \"#d2d2d3\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Compatibility Aliases\",\n    colors: [\n      { name: \"--color-primary\", value: \"#4318ff\", textColor: \"light\" },\n      {\n        name: \"--color-background-primary\",\n        value: \"#f4f7fe\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"--color-background-secondary\",\n        value: \"#ffffff\",\n        textColor: \"dark\",\n      },\n      { name: \"--color-text-primary\", value: \"#1e293b\", textColor: \"light\" },\n      { name: \"--color-border-primary\", value: \"#d1d5db\", textColor: \"dark\" },\n    ],\n  },\n];\n\nconst darkThemeGroups: ColorGroup[] = [\n  {\n    name: \"Active Accent Scale (Dark)\",\n    colors: [\n      { name: \"primary-50\", value: \"#f6efff\", textColor: \"dark\" },\n      { name: \"primary-100\", value: \"#ead9fd\", textColor: \"dark\" },\n      { name: \"primary-200\", value: \"#d8b3fb\", textColor: \"dark\" },\n      { name: \"primary-300\", value: \"#c084fc\", textColor: \"dark\" },\n      { name: \"primary-400\", value: \"#a855f7\", textColor: \"light\" },\n      { name: \"primary-500\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"primary-600\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"primary-700\", value: \"#6b21a8\", textColor: \"light\" },\n      { name: \"primary-800\", value: \"#581c87\", textColor: \"light\" },\n      { name: \"primary-900\", value: \"#3b0764\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Semantic Surfaces (Dark)\",\n    colors: [\n      { name: \"bg-canvas\", value: \"#070f2e\", textColor: \"light\" },\n      { name: \"bg-surface\", value: \"#111c44\", textColor: \"light\" },\n      { name: \"bg-elevated\", value: \"#111c44\", textColor: \"light\" },\n      { name: \"bg-muted\", value: \"#18254f\", textColor: \"light\" },\n      { name: \"accent-subtle\", value: \"#24194b\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Semantic Foreground (Dark)\",\n    colors: [\n      { name: \"fg\", value: \"#f1f5f9\", textColor: \"dark\" },\n      { name: \"fg-muted\", value: \"#cbd5e1\", textColor: \"dark\" },\n      { name: \"fg-subtle\", value: \"#94a3b8\", textColor: \"dark\" },\n      { name: \"on-accent\", value: \"#ffffff\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Semantic Borders (Dark)\",\n    colors: [\n      { name: \"border\", value: \"#4b5563\", textColor: \"light\" },\n      { name: \"border-strong\", value: \"#374151\", textColor: \"light\" },\n      { name: \"border-muted\", value: \"#6b7280\", textColor: \"light\" },\n      { name: \"border-field\", value: \"#545b58\", textColor: \"light\" },\n      { name: \"focus-ring\", value: \"#b57fe7\", textColor: \"dark\" },\n    ],\n  },\n  {\n    name: \"Semantic Status (Dark)\",\n    colors: [\n      { name: \"success\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"warning\", value: \"#f59e42\", textColor: \"dark\" },\n      { name: \"danger\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"info\", value: \"#38bdf8\", textColor: \"dark\" },\n      { name: \"disabled\", value: \"#4b5563\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Compatibility Aliases (Dark)\",\n    colors: [\n      { name: \"--color-primary\", value: \"#4318ff\", textColor: \"light\" },\n      {\n        name: \"--color-background-primary\",\n        value: \"#070f2e\",\n        textColor: \"light\",\n      },\n      {\n        name: \"--color-background-secondary\",\n        value: \"#111c44\",\n        textColor: \"light\",\n      },\n      { name: \"--color-text-primary\", value: \"#f1f5f9\", textColor: \"dark\" },\n      { name: \"--color-border-primary\", value: \"#374151\", textColor: \"light\" },\n    ],\n  },\n];\n\nconst gradientGroups: ColorGroup[] = [\n  {\n    name: \"Semantic Gradients\",\n    colors: [\n      { name: \"accent-gradient-start\", value: \"#9333ea\", textColor: \"light\" },\n      { name: \"accent-gradient-end\", value: \"#7e22ce\", textColor: \"light\" },\n      { name: \"accent-secondary\", value: \"#4318ff\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Status Gradients\",\n    colors: [\n      { name: \"success-gradient-start\", value: \"#22c55e\", textColor: \"light\" },\n      { name: \"success-gradient-end\", value: \"#16a34a\", textColor: \"light\" },\n      { name: \"warning-gradient-start\", value: \"#f59e0b\", textColor: \"dark\" },\n      { name: \"warning-gradient-end\", value: \"#d97706\", textColor: \"light\" },\n      { name: \"error-gradient-start\", value: \"#ef4444\", textColor: \"light\" },\n      { name: \"error-gradient-end\", value: \"#dc2626\", textColor: \"light\" },\n    ],\n  },\n  {\n    name: \"Glass / Opacity\",\n    colors: [\n      {\n        name: \"glass-white-90\",\n        value: \"rgba(255,255,255,0.9)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-70\",\n        value: \"rgba(255,255,255,0.7)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-50\",\n        value: \"rgba(255,255,255,0.5)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-20\",\n        value: \"rgba(255,255,255,0.2)\",\n        textColor: \"dark\",\n      },\n      {\n        name: \"glass-white-10\",\n        value: \"rgba(255,255,255,0.1)\",\n        textColor: \"dark\",\n      },\n      { name: \"glass-black-90\", value: \"rgba(0,0,0,0.9)\", textColor: \"light\" },\n      { name: \"glass-black-70\", value: \"rgba(0,0,0,0.7)\", textColor: \"light\" },\n      { name: \"glass-black-50\", value: \"rgba(0,0,0,0.5)\", textColor: \"light\" },\n      { name: \"glass-black-20\", value: \"rgba(0,0,0,0.2)\", textColor: \"light\" },\n      { name: \"glass-black-10\", value: \"rgba(0,0,0,0.1)\", textColor: \"light\" },\n    ],\n  },\n];\n\n// Default groups (backwards compatibility)\nconst defaultGroups: ColorGroup[] = lightThemeGroups;\n\nfunction ColorSwatchItem({ color }: { color: ColorSwatch }) {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(color.value);\n  };\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105\"\n      onClick={copyToClipboard}\n      title=\"Click to copy\"\n    >\n      <div\n        className=\"w-20 h-20 rounded-lg shadow-md border border-neutral-200 dark:border-neutral-700 flex items-center justify-center text-xs font-mono\"\n        style={{ backgroundColor: color.value }}\n      >\n        <span\n          className={\n            color.textColor === \"light\" ? \"text-white\" : \"text-neutral-900\"\n          }\n        >\n          {color.value.length <= 9 ? color.value.toUpperCase() : \"RGBA\"}\n        </span>\n      </div>\n      <span className=\"text-xs font-medium text-neutral-700 dark:text-neutral-300 text-center max-w-20\">\n        {color.name}\n      </span>\n    </div>\n  );\n}\n\nfunction GradientPreview() {\n  return (\n    <div className=\"mt-8\">\n      <h3 className=\"text-lg font-semibold text-neutral-900 dark:text-white mb-4\">\n        Semantic Gradient Examples\n      </h3>\n      <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-white font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #7e22ce)\",\n            }}\n          >\n            Accent Gradient\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            linear-gradient(135deg, #9333ea, #7e22ce)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-white font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #9333ea, #4318ff)\",\n            }}\n          >\n            Accent to Brand Primary\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            linear-gradient(135deg, #9333ea, #4318ff)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-white font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #22c55e, #16a34a)\",\n            }}\n          >\n            Success Gradient\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            linear-gradient(135deg, #22c55e, #16a34a)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-neutral-900 font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #fbbf24, #f59e0b)\",\n            }}\n          >\n            Warning Gradient\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            linear-gradient(135deg, #fbbf24, #f59e0b)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-white font-medium\"\n            style={{\n              background: \"linear-gradient(135deg, #ef4444, #dc2626)\",\n            }}\n          >\n            Error Gradient\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            linear-gradient(135deg, #ef4444, #dc2626)\n          </code>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          <div\n            className=\"h-24 rounded-lg flex items-center justify-center text-white font-medium backdrop-blur-xl border border-white/20\"\n            style={{\n              background: \"rgba(147, 51, 234, 0.7)\",\n            }}\n          >\n            Glass Effect\n          </div>\n          <code className=\"text-xs text-neutral-500\">\n            rgba(147, 51, 234, 0.7) + backdrop-blur\n          </code>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UsageExamples() {\n  return (\n    <div className=\"mt-8 p-6 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl\">\n      <h3 className=\"text-lg font-semibold text-neutral-900 dark:text-white mb-4\">\n        Recommended Usage\n      </h3>\n      <div className=\"space-y-4\">\n        <div className=\"p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700\">\n          <h4 className=\"font-medium text-neutral-900 dark:text-white mb-2\">\n            Semantic utilities first\n          </h4>\n          <pre className=\"text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto\">\n            {`import { Button } from \"erp-pro-ui\";\n\n<section className=\"bg-surface text-fg border border-border rounded-2xl p-6\">\n  <h2 className=\"text-accent text-xl font-semibold\">Semantic theme</h2>\n  <p className=\"text-fg-muted\">Use utilities generated by colors.css.</p>\n  <Button label=\"Save changes\" primary />\n</section>`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700\">\n          <h4 className=\"font-medium text-neutral-900 dark:text-white mb-2\">\n            Raw design-system variables\n          </h4>\n          <pre className=\"text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto\">\n            {`.dashboard-shell {\n  background: var(--ds-color-bg-surface);\n  color: var(--ds-color-fg);\n  border: 1px solid var(--ds-color-border);\n}\n\n.dashboard-shell a {\n  color: var(--ds-color-accent);\n}\n\nhtml[data-brand=\"teal\"][data-mode=\"dark\"] {\n  color-scheme: dark;\n}`}\n          </pre>\n        </div>\n\n        <div className=\"p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700\">\n          <h4 className=\"font-medium text-neutral-900 dark:text-white mb-2\">\n            Compatibility aliases for migration\n          </h4>\n          <pre className=\"text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto\">\n            {`:root {\n  --color-primary: #4318ff;\n  --color-background-primary: #f4f7fe;\n  --color-text-primary: #1e293b;\n}\n\n/* Supported for migration. Prefer semantic utilities or --ds-* in new code. */`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function ColorPalette({\n  groups,\n  theme = \"all\",\n  showGradients = true,\n  showUsageExamples = true,\n  className,\n}: ColorPaletteProps) {\n  // Determine which groups to show\n  let displayGroups: ColorGroup[];\n  if (groups) {\n    displayGroups = groups;\n  } else if (theme === \"light\") {\n    displayGroups = lightThemeGroups;\n  } else if (theme === \"dark\") {\n    displayGroups = darkThemeGroups;\n  } else {\n    // Show all\n    displayGroups = [...lightThemeGroups, ...darkThemeGroups];\n  }\n\n  // Add gradients if requested and no custom groups\n  if (showGradients && !groups) {\n    displayGroups = [...displayGroups, ...gradientGroups];\n  }\n\n  return (\n    <div\n      className={`p-6 bg-white dark:bg-neutral-900 rounded-xl ${\n        className || \"\"\n      }`}\n    >\n      <h2 className=\"text-2xl font-bold text-neutral-900 dark:text-white mb-2\">\n        Color Palette\n      </h2>\n      <p className=\"text-sm text-neutral-600 dark:text-neutral-400 mb-6\">\n        Preferred contract:{\" \"}\n        <code className=\"font-mono bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded\">\n          semantic utilities and --ds-* tokens\n        </code>{\" \"}\n        • Compatibility aliases remain available for migration. Click any swatch\n        to copy the color value.\n      </p>\n\n      <div className=\"mb-6 flex flex-wrap gap-2\">\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"light\" || theme === \"all\"\n              ? \"bg-accent-subtle text-accent\"\n              : \"bg-neutral-100 text-neutral-500\"\n          }`}\n        >\n          Light Theme\n        </span>\n        <span\n          className={`px-3 py-1 rounded-full text-xs font-medium ${\n            theme === \"dark\" || theme === \"all\"\n              ? \"bg-accent-subtle text-accent\"\n              : \"bg-neutral-100 text-neutral-500\"\n          }`}\n        >\n          Dark Theme\n        </span>\n        {showGradients && (\n          <span className=\"px-3 py-1 rounded-full text-xs font-medium bg-accent-subtle text-accent\">\n            Gradients\n          </span>\n        )}\n      </div>\n\n      {displayGroups.map((group) => (\n        <div key={group.name} className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-neutral-900 dark:text-white mb-4\">\n            {group.name}\n          </h3>\n          <div className=\"flex flex-wrap gap-4\">\n            {group.colors.map((color) => (\n              <ColorSwatchItem key={color.name} color={color} />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {showGradients && <GradientPreview />}\n      {showUsageExamples && <UsageExamples />}\n    </div>\n  );\n}\n\n// Export color groups for external use\nexport { lightThemeGroups, darkThemeGroups, gradientGroups, defaultGroups };\n"],"mappings":"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"}

package/dist/chunks/combobox-BXu3s0dt.cjs

@@ -0,0 +1,139 @@
+const require_chunk = require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+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...", className, bgClassName = "bg-background-secondary", createOptionLabel, onCreateOption }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [search, setSearch] = (0, react.useState)("");
+	const [visible, setVisible] = (0, react.useState)(false);
+	const ref = (0, react.useRef)(null);
+	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()));
+	(0, react.useEffect)(() => {
+		const handleClick = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				setOpen(false);
+				setSearch("");
+			}
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	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)("div", {
+		ref,
+		className: require_utils.mergeClassNames("relative w-full", className),
+		tabIndex: 0,
+		children: [/* @__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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("shadow-input flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/combobox:shadow-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none", bgClassName),
+				onClick: () => {
+					setOpen((current) => {
+						if (current) setSearch("");
+						return !current;
+					});
+				},
+				children: [value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1 truncate text-foreground",
+					children: options.find((opt) => opt.value === value)?.label
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1 text-muted-foreground",
+					children: placeholder
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_utils.mergeClassNames("ml-2 text-muted-foreground 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"
+					})
+				})]
+			})
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/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-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent",
+						placeholder: "Type to search...",
+						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-muted-foreground",
+						children: "No options"
+					}), 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-foreground transition", opt.value === value ? "bg-accent-subtle text-accent font-semibold" : "", "hover:bg-accent hover:text-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-accent",
+								width: 18,
+								height: 18
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 flex-1 truncate",
+							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-border-muted bg-elevated/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-foreground transition hover:bg-accent hover:text-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)("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: createOptionLabel
+						})]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Combobox", {
+	enumerable: true,
+	get: function() {
+		return Combobox;
+	}
+});
+
+//# sourceMappingURL=combobox-BXu3s0dt.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-BXu3s0dt.cjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\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  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  className,\n  bgClassName = \"bg-background-secondary\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\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  // Close dropdown on outside click\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n        setSearch(\"\");\n      }\n    };\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\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    <div\n      ref={ref}\n      className={mergeClassNames(\"relative w-full\", className)}\n      tabIndex={0}\n    >\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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"shadow-input flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/combobox:shadow-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((current) => {\n              if (current) {\n                setSearch(\"\");\n              }\n\n              return !current;\n            });\n          }}\n        >\n          {value ? (\n            <span className=\"flex-1 truncate text-foreground\">\n              {options.find((opt) => opt.value === value)?.label}\n            </span>\n          ) : (\n            <span className=\"flex-1 text-muted-foreground\">{placeholder}</span>\n          )}\n          <span\n            className={mergeClassNames(\n              \"ml-2 text-muted-foreground 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      {open && (\n        <div className=\"absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\">\n          {/* Sticky search input */}\n          <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm\">\n            <input\n              autoFocus\n              className=\"w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent\"\n              placeholder=\"Type to search...\"\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-muted-foreground\">No options</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-foreground transition\",\n                  opt.value === value\n                    ? \"bg-accent-subtle text-accent font-semibold\"\n                    : \"\",\n                  \"hover:bg-accent hover:text-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-accent\" width={18} height={18} />\n                  )}\n                </span>\n                <span className=\"min-w-0 flex-1 truncate\">{opt.label}</span>\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-border-muted bg-elevated/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-foreground transition hover:bg-accent hover:text-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                <span className=\"min-w-0 flex-1 truncate\">\n                  {createOptionLabel}\n                </span>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}

package/dist/chunks/combobox-CjK-qG4k.mjs

@@ -0,0 +1,132 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { J as CheckIcon, N as ChevronDownIcon } from "./icons-DuumN7z-.mjs";
+import { useEffect, useRef, 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...", className, bgClassName = "bg-background-secondary", createOptionLabel, onCreateOption }) => {
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [visible, setVisible] = useState(false);
+	const ref = useRef(null);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const radius = 100;
+	const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	useEffect(() => {
+		const handleClick = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+				setOpen(false);
+				setSearch("");
+			}
+		};
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: mergeClassNames("relative w-full", className),
+		tabIndex: 0,
+		children: [/* @__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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: mergeClassNames("shadow-input flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/combobox:shadow-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none", bgClassName),
+				onClick: () => {
+					setOpen((current) => {
+						if (current) setSearch("");
+						return !current;
+					});
+				},
+				children: [value ? /* @__PURE__ */ jsx("span", {
+					className: "flex-1 truncate text-foreground",
+					children: options.find((opt) => opt.value === value)?.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-muted-foreground",
+					children: placeholder
+				}), /* @__PURE__ */ jsx("span", {
+					className: mergeClassNames("ml-2 text-muted-foreground transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						width: 24,
+						height: 24,
+						color: "currentColor",
+						className: "h-5 w-5"
+					})
+				})]
+			})
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm",
+					children: /* @__PURE__ */ jsx("input", {
+						autoFocus: true,
+						className: "w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent",
+						placeholder: "Type to search...",
+						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-muted-foreground",
+						children: "No options"
+					}), 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-foreground transition", opt.value === value ? "bg-accent-subtle text-accent font-semibold" : "", "hover:bg-accent hover:text-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-accent",
+								width: 18,
+								height: 18
+							})
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: opt.label
+						})]
+					}, opt.value))]
+				}),
+				createOptionLabel && onCreateOption && /* @__PURE__ */ jsx("div", {
+					className: "sticky bottom-0 z-10 rounded-b-lg border-t border-border-muted bg-elevated/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-foreground transition hover:bg-accent hover:text-on-accent",
+						onClick: () => {
+							onCreateOption();
+							setSearch("");
+							setOpen(false);
+						},
+						children: [/* @__PURE__ */ jsx("span", { className: "flex w-5 items-center justify-center" }), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: createOptionLabel
+						})]
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { Combobox as t };
+
+//# sourceMappingURL=combobox-CjK-qG4k.mjs.map

package/dist/chunks/combobox-CjK-qG4k.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-CjK-qG4k.mjs","names":[],"sources":["../../src/components/forms/combobox/Combobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\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  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  className,\n  bgClassName = \"bg-background-secondary\",\n  createOptionLabel,\n  onCreateOption,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const [visible, setVisible] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\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  // Close dropdown on outside click\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n        setSearch(\"\");\n      }\n    };\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClick);\n    }\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\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    <div\n      ref={ref}\n      className={mergeClassNames(\"relative w-full\", className)}\n      tabIndex={0}\n    >\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 rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"shadow-input flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/combobox:shadow-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((current) => {\n              if (current) {\n                setSearch(\"\");\n              }\n\n              return !current;\n            });\n          }}\n        >\n          {value ? (\n            <span className=\"flex-1 truncate text-foreground\">\n              {options.find((opt) => opt.value === value)?.label}\n            </span>\n          ) : (\n            <span className=\"flex-1 text-muted-foreground\">{placeholder}</span>\n          )}\n          <span\n            className={mergeClassNames(\n              \"ml-2 text-muted-foreground 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      {open && (\n        <div className=\"absolute right-0 left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-border bg-background-secondary shadow-3 backdrop-blur-xl transition\">\n          {/* Sticky search input */}\n          <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-border-muted bg-elevated/95 backdrop-blur-sm\">\n            <input\n              autoFocus\n              className=\"w-full bg-transparent px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-accent\"\n              placeholder=\"Type to search...\"\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-muted-foreground\">No options</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-foreground transition\",\n                  opt.value === value\n                    ? \"bg-accent-subtle text-accent font-semibold\"\n                    : \"\",\n                  \"hover:bg-accent hover:text-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-accent\" width={18} height={18} />\n                  )}\n                </span>\n                <span className=\"min-w-0 flex-1 truncate\">{opt.label}</span>\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-border-muted bg-elevated/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-foreground transition hover:bg-accent hover:text-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                <span className=\"min-w-0 flex-1 truncate\">\n                  {createOptionLabel}\n                </span>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Combobox;\n"],"mappings":"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"}