erp-pro-ui 0.1.9 → 0.2.0

package/dist/chunks/color-palette-pLh6En3n.cjs

@@ -0,0 +1,384 @@
+const require_chunk = require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/data-display/color-palette/ColorPalette.tsx
+var surfaceGroup = {
+	name: "Surfaces",
+	swatches: [
+		{
+			twClass: "bg-ds-canvas",
+			cssVar: "var(--ds-surface-canvas)",
+			role: "Page / app canvas",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-surface-1",
+			cssVar: "var(--ds-surface-1)",
+			role: "Card / panel",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-surface-2",
+			cssVar: "var(--ds-surface-2)",
+			role: "Elevated (modal/popover)",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-surface-3",
+			cssVar: "var(--ds-surface-3)",
+			role: "Highest elevated",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-accent-subtle",
+			cssVar: "var(--ds-color-accent-subtle)",
+			role: "Accent tinted surface",
+			textOnColor: "dark"
+		}
+	]
+};
+var textGroup = {
+	name: "Text",
+	swatches: [
+		{
+			twClass: "text-ds-1",
+			cssVar: "var(--ds-text-1)",
+			role: "Primary text",
+			textOnColor: "light"
+		},
+		{
+			twClass: "text-ds-2",
+			cssVar: "var(--ds-text-2)",
+			role: "Secondary / labels",
+			textOnColor: "light"
+		},
+		{
+			twClass: "text-ds-3",
+			cssVar: "var(--ds-text-3)",
+			role: "Muted / hints",
+			textOnColor: "light"
+		},
+		{
+			twClass: "text-ds-on-accent",
+			cssVar: "var(--ds-color-on-accent)",
+			role: "On accent bg",
+			textOnColor: "dark"
+		}
+	]
+};
+var borderGroup = {
+	name: "Borders",
+	swatches: [
+		{
+			twClass: "border-ds-border-1",
+			cssVar: "var(--ds-border-1)",
+			role: "Strong border",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "border-ds-border-2",
+			cssVar: "var(--ds-border-2)",
+			role: "Default border",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "border-ds-border-3",
+			cssVar: "var(--ds-border-3)",
+			role: "Subtle divider",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "border-ds-border-4",
+			cssVar: "var(--ds-border-4)",
+			role: "Faintest border",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "border-ds-border-field",
+			cssVar: "var(--ds-border-field)",
+			role: "Input field border",
+			textOnColor: "dark"
+		}
+	]
+};
+var accentGroup = {
+	name: "Accent",
+	swatches: [
+		{
+			twClass: "bg-ds-accent",
+			cssVar: "var(--ds-color-accent)",
+			role: "Brand / interactive",
+			textOnColor: "light"
+		},
+		{
+			twClass: "bg-ds-accent-hover",
+			cssVar: "var(--ds-color-accent-hover)",
+			role: "Hover state",
+			textOnColor: "light"
+		},
+		{
+			twClass: "ring-ds-focus",
+			cssVar: "var(--ds-color-focus-ring)",
+			role: "Focus ring",
+			textOnColor: "light"
+		}
+	]
+};
+var accentScaleGroup = {
+	name: "Accent Scale",
+	swatches: [
+		{
+			twClass: "--ds-accent-50",
+			cssVar: "var(--ds-accent-50)",
+			role: "Lightest",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "--ds-accent-100",
+			cssVar: "var(--ds-accent-100)",
+			role: "100",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "--ds-accent-200",
+			cssVar: "var(--ds-accent-200)",
+			role: "200",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "--ds-accent-300",
+			cssVar: "var(--ds-accent-300)",
+			role: "300",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "--ds-accent-400",
+			cssVar: "var(--ds-accent-400)",
+			role: "400",
+			textOnColor: "light"
+		},
+		{
+			twClass: "--ds-accent-500",
+			cssVar: "var(--ds-accent-500)",
+			role: "Base (500)",
+			textOnColor: "light"
+		},
+		{
+			twClass: "--ds-accent-600",
+			cssVar: "var(--ds-accent-600)",
+			role: "600",
+			textOnColor: "light"
+		},
+		{
+			twClass: "--ds-accent-700",
+			cssVar: "var(--ds-accent-700)",
+			role: "700",
+			textOnColor: "light"
+		},
+		{
+			twClass: "--ds-accent-800",
+			cssVar: "var(--ds-accent-800)",
+			role: "800",
+			textOnColor: "light"
+		},
+		{
+			twClass: "--ds-accent-900",
+			cssVar: "var(--ds-accent-900)",
+			role: "Darkest",
+			textOnColor: "light"
+		}
+	]
+};
+var brandGroup = {
+	name: "Brand Themes",
+	swatches: [
+		{
+			twClass: "bg-ds-brand-purple",
+			cssVar: "var(--ds-brand-purple)",
+			role: "Purple (default)",
+			textOnColor: "light"
+		},
+		{
+			twClass: "bg-ds-brand-teal",
+			cssVar: "var(--ds-brand-teal)",
+			role: "Teal",
+			textOnColor: "light"
+		},
+		{
+			twClass: "bg-ds-brand-yellow",
+			cssVar: "var(--ds-brand-yellow)",
+			role: "Yellow",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-brand-green",
+			cssVar: "var(--ds-brand-green)",
+			role: "Green",
+			textOnColor: "light"
+		}
+	]
+};
+var statusGroup = {
+	name: "Status",
+	swatches: [
+		{
+			twClass: "bg-ds-state-success",
+			cssVar: "var(--ds-color-success)",
+			role: "Success",
+			textOnColor: "light"
+		},
+		{
+			twClass: "bg-ds-state-warning",
+			cssVar: "var(--ds-color-warning)",
+			role: "Warning",
+			textOnColor: "dark"
+		},
+		{
+			twClass: "bg-ds-state-danger",
+			cssVar: "var(--ds-color-danger)",
+			role: "Danger",
+			textOnColor: "light"
+		},
+		{
+			twClass: "bg-ds-state-info",
+			cssVar: "var(--ds-color-info)",
+			role: "Info",
+			textOnColor: "light"
+		}
+	]
+};
+var defaultGroups = [
+	surfaceGroup,
+	textGroup,
+	borderGroup,
+	accentGroup,
+	accentScaleGroup,
+	brandGroup,
+	statusGroup
+];
+function SwatchCard({ swatch }) {
+	const swatchRef = react.default.useRef(null);
+	const [hex, setHex] = react.default.useState("");
+	const [copied, setCopied] = react.default.useState(false);
+	react.default.useEffect(() => {
+		const el = swatchRef.current;
+		if (!el) return;
+		const bg = getComputedStyle(el).backgroundColor;
+		setHex(bg || "");
+	}, [swatch.cssVar]);
+	const handleCopy = () => {
+		navigator.clipboard.writeText(swatch.twClass).catch(() => {});
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1500);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: handleCopy,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") handleCopy();
+		},
+		title: `Copy ${swatch.twClass}`,
+		className: "group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: swatchRef,
+			className: "relative h-16 w-full flex items-end px-2 pb-1.5",
+			style: { backgroundColor: swatch.cssVar },
+			children: [copied && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl",
+				children: "Copied!"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-mono text-[9px] leading-none opacity-70",
+				style: { color: swatch.textOnColor === "light" ? "#fff" : "#000" },
+				children: hex || "LIVE"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[11px] font-semibold font-mono text-ds-1 truncate",
+					children: swatch.twClass
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] font-mono text-ds-3 truncate",
+					children: swatch.cssVar
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] text-ds-2 mt-0.5",
+					children: swatch.role
+				})
+			]
+		})]
+	});
+}
+function ColorPalette({ groups, className }) {
+	const displayGroups = groups ?? defaultGroups;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `space-y-8 ${className ?? ""}`,
+		children: displayGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2",
+			children: group.name
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6",
+			children: group.swatches.map((swatch) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwatchCard, { swatch }, swatch.twClass))
+		})] }, group.name))
+	});
+}
+//#endregion
+Object.defineProperty(exports, "ColorPalette", {
+	enumerable: true,
+	get: function() {
+		return ColorPalette;
+	}
+});
+Object.defineProperty(exports, "accentGroup", {
+	enumerable: true,
+	get: function() {
+		return accentGroup;
+	}
+});
+Object.defineProperty(exports, "accentScaleGroup", {
+	enumerable: true,
+	get: function() {
+		return accentScaleGroup;
+	}
+});
+Object.defineProperty(exports, "borderGroup", {
+	enumerable: true,
+	get: function() {
+		return borderGroup;
+	}
+});
+Object.defineProperty(exports, "brandGroup", {
+	enumerable: true,
+	get: function() {
+		return brandGroup;
+	}
+});
+Object.defineProperty(exports, "defaultGroups", {
+	enumerable: true,
+	get: function() {
+		return defaultGroups;
+	}
+});
+Object.defineProperty(exports, "statusGroup", {
+	enumerable: true,
+	get: function() {
+		return statusGroup;
+	}
+});
+Object.defineProperty(exports, "surfaceGroup", {
+	enumerable: true,
+	get: function() {
+		return surfaceGroup;
+	}
+});
+Object.defineProperty(exports, "textGroup", {
+	enumerable: true,
+	get: function() {
+		return textGroup;
+	}
+});
+
+//# sourceMappingURL=color-palette-pLh6En3n.cjs.map

package/dist/chunks/color-palette-pLh6En3n.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-pLh6En3n.cjs","names":[],"sources":["../../src/components/data-display/color-palette/ColorPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TokenSwatch {\n  /** Tailwind class displayed as the main label, e.g. \"bg-ds-surface-1\" */\n  twClass: string;\n  /** Underlying CSS variable, e.g. \"var(--ds-surface-1)\" */\n  cssVar: string;\n  /** Short role description */\n  role: string;\n  /** Hint for readable label on the swatch itself */\n  textOnColor?: \"light\" | \"dark\" | \"auto\";\n}\n\nexport interface TokenGroup {\n  /** Section heading */\n  name: string;\n  swatches: TokenSwatch[];\n}\n\nexport interface ColorPaletteProps {\n  /** Override the built-in groups with custom data */\n  groups?: TokenGroup[];\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Canonical token groups (correct --ds-* CSS variables)\n// ---------------------------------------------------------------------------\n\nexport const surfaceGroup: TokenGroup = {\n  name: \"Surfaces\",\n  swatches: [\n    { twClass: \"bg-ds-canvas\",    cssVar: \"var(--ds-surface-canvas)\", role: \"Page / app canvas\",      textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-1\", cssVar: \"var(--ds-surface-1)\",      role: \"Card / panel\",           textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-2\", cssVar: \"var(--ds-surface-2)\",      role: \"Elevated (modal/popover)\", textOnColor: \"dark\" },\n    { twClass: \"bg-ds-surface-3\", cssVar: \"var(--ds-surface-3)\",      role: \"Highest elevated\",       textOnColor: \"dark\" },\n    { twClass: \"bg-ds-accent-subtle\", cssVar: \"var(--ds-color-accent-subtle)\", role: \"Accent tinted surface\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const textGroup: TokenGroup = {\n  name: \"Text\",\n  swatches: [\n    { twClass: \"text-ds-1\", cssVar: \"var(--ds-text-1)\", role: \"Primary text\",         textOnColor: \"light\" },\n    { twClass: \"text-ds-2\", cssVar: \"var(--ds-text-2)\", role: \"Secondary / labels\",   textOnColor: \"light\" },\n    { twClass: \"text-ds-3\", cssVar: \"var(--ds-text-3)\", role: \"Muted / hints\",        textOnColor: \"light\" },\n    { twClass: \"text-ds-on-accent\", cssVar: \"var(--ds-color-on-accent)\", role: \"On accent bg\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const borderGroup: TokenGroup = {\n  name: \"Borders\",\n  swatches: [\n    { twClass: \"border-ds-border-1\",     cssVar: \"var(--ds-border-1)\",    role: \"Strong border\",    textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-2\",     cssVar: \"var(--ds-border-2)\",    role: \"Default border\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-3\",     cssVar: \"var(--ds-border-3)\",    role: \"Subtle divider\",   textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-4\",     cssVar: \"var(--ds-border-4)\",    role: \"Faintest border\",  textOnColor: \"dark\" },\n    { twClass: \"border-ds-border-field\", cssVar: \"var(--ds-border-field)\", role: \"Input field border\", textOnColor: \"dark\" },\n  ],\n};\n\nexport const accentGroup: TokenGroup = {\n  name: \"Accent\",\n  swatches: [\n    { twClass: \"bg-ds-accent\",       cssVar: \"var(--ds-color-accent)\",       role: \"Brand / interactive\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-accent-hover\", cssVar: \"var(--ds-color-accent-hover)\", role: \"Hover state\",          textOnColor: \"light\" },\n    { twClass: \"ring-ds-focus\",      cssVar: \"var(--ds-color-focus-ring)\",   role: \"Focus ring\",           textOnColor: \"light\" },\n  ],\n};\n\nexport const accentScaleGroup: TokenGroup = {\n  name: \"Accent Scale\",\n  swatches: [\n    { twClass: \"--ds-accent-50\",  cssVar: \"var(--ds-accent-50)\",  role: \"Lightest\",  textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-100\", cssVar: \"var(--ds-accent-100)\", role: \"100\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-200\", cssVar: \"var(--ds-accent-200)\", role: \"200\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-300\", cssVar: \"var(--ds-accent-300)\", role: \"300\",       textOnColor: \"dark\"  },\n    { twClass: \"--ds-accent-400\", cssVar: \"var(--ds-accent-400)\", role: \"400\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-500\", cssVar: \"var(--ds-accent-500)\", role: \"Base (500)\", textOnColor: \"light\" },\n    { twClass: \"--ds-accent-600\", cssVar: \"var(--ds-accent-600)\", role: \"600\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-700\", cssVar: \"var(--ds-accent-700)\", role: \"700\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-800\", cssVar: \"var(--ds-accent-800)\", role: \"800\",       textOnColor: \"light\" },\n    { twClass: \"--ds-accent-900\", cssVar: \"var(--ds-accent-900)\", role: \"Darkest\",   textOnColor: \"light\" },\n  ],\n};\n\nexport const brandGroup: TokenGroup = {\n  name: \"Brand Themes\",\n  swatches: [\n    { twClass: \"bg-ds-brand-purple\", cssVar: \"var(--ds-brand-purple)\", role: \"Purple (default)\", textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-teal\",   cssVar: \"var(--ds-brand-teal)\",   role: \"Teal\",             textOnColor: \"light\" },\n    { twClass: \"bg-ds-brand-yellow\", cssVar: \"var(--ds-brand-yellow)\", role: \"Yellow\",           textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-brand-green\",  cssVar: \"var(--ds-brand-green)\",  role: \"Green\",            textOnColor: \"light\" },\n  ],\n};\n\nexport const statusGroup: TokenGroup = {\n  name: \"Status\",\n  swatches: [\n    { twClass: \"bg-ds-state-success\", cssVar: \"var(--ds-color-success)\", role: \"Success\",  textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-warning\", cssVar: \"var(--ds-color-warning)\", role: \"Warning\",  textOnColor: \"dark\"  },\n    { twClass: \"bg-ds-state-danger\",  cssVar: \"var(--ds-color-danger)\",  role: \"Danger\",   textOnColor: \"light\" },\n    { twClass: \"bg-ds-state-info\",    cssVar: \"var(--ds-color-info)\",    role: \"Info\",     textOnColor: \"light\" },\n  ],\n};\n\nexport const defaultGroups: TokenGroup[] = [\n  surfaceGroup,\n  textGroup,\n  borderGroup,\n  accentGroup,\n  accentScaleGroup,\n  brandGroup,\n  statusGroup,\n];\n\n// ---------------------------------------------------------------------------\n// SwatchCard\n// ---------------------------------------------------------------------------\n\nfunction SwatchCard({ swatch }: { swatch: TokenSwatch }) {\n  const swatchRef = React.useRef<HTMLDivElement>(null);\n  const [hex, setHex] = React.useState<string>(\"\");\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = swatchRef.current;\n    if (!el) return;\n    const bg = getComputedStyle(el).backgroundColor;\n    setHex(bg || \"\");\n  }, [swatch.cssVar]);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(swatch.twClass).catch(() => {});\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleCopy}\n      onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") handleCopy(); }}\n      title={`Copy ${swatch.twClass}`}\n      className=\"group flex flex-col gap-0 rounded-xl border border-ds-border-2 overflow-hidden text-start cursor-pointer transition hover:shadow-md hover:border-ds-border-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus\"\n    >\n      {/* Color preview */}\n      <div\n        ref={swatchRef}\n        className=\"relative h-16 w-full flex items-end px-2 pb-1.5\"\n        style={{ backgroundColor: swatch.cssVar }}\n      >\n        {copied && (\n          <span className=\"absolute inset-0 flex items-center justify-center text-xs font-semibold bg-black/30 text-white rounded-t-xl\">\n            Copied!\n          </span>\n        )}\n        <span\n          className=\"font-mono text-[9px] leading-none opacity-70\"\n          style={{ color: swatch.textOnColor === \"light\" ? \"#fff\" : \"#000\" }}\n        >\n          {hex || \"LIVE\"}\n        </span>\n      </div>\n\n      {/* Meta */}\n      <div className=\"flex flex-col gap-0.5 px-3 py-2.5 bg-ds-surface-1\">\n        <span className=\"text-[11px] font-semibold font-mono text-ds-1 truncate\">\n          {swatch.twClass}\n        </span>\n        <span className=\"text-[10px] font-mono text-ds-3 truncate\">\n          {swatch.cssVar}\n        </span>\n        <span className=\"text-[10px] text-ds-2 mt-0.5\">{swatch.role}</span>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ColorPalette\n// ---------------------------------------------------------------------------\n\nexport default function ColorPalette({ groups, className }: ColorPaletteProps) {\n  const displayGroups = groups ?? defaultGroups;\n\n  return (\n    <div className={`space-y-8 ${className ?? \"\"}`}>\n      {displayGroups.map((group) => (\n        <section key={group.name}>\n          <h3 className=\"mb-3 text-sm font-semibold uppercase tracking-widest text-ds-2\">\n            {group.name}\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\">\n            {group.swatches.map((swatch) => (\n              <SwatchCard key={swatch.twClass} swatch={swatch} />\n            ))}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport { ColorPalette };\n"],"mappings":";;;;;AAmCA,IAAa,eAA2B;CACtC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;GAAQ;EACvH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;GAAQ;EACvH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA4B,aAAa;GAAQ;EACzH;GAAE,SAAS;GAAmB,QAAQ;GAA4B,MAAM;GAA0B,aAAa;GAAQ;EACvH;GAAE,SAAS;GAAuB,QAAQ;GAAiC,MAAM;GAAyB,aAAa;GAAQ;EAChI;CACF;AAED,IAAa,YAAwB;CACnC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;GAAS;EACxG;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;GAAS;EACxG;GAAE,SAAS;GAAa,QAAQ;GAAoB,MAAM;GAAwB,aAAa;GAAS;EACxG;GAAE,SAAS;GAAqB,QAAQ;GAA6B,MAAM;GAAgB,aAAa;GAAQ;EACjH;CACF;AAED,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;GAAQ;EACrH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;GAAQ;EACrH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;GAAQ;EACrH;GAAE,SAAS;GAA0B,QAAQ;GAAyB,MAAM;GAAoB,aAAa;GAAQ;EACrH;GAAE,SAAS;GAA0B,QAAQ;GAA0B,MAAM;GAAsB,aAAa;GAAQ;EACzH;CACF;AAED,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;GAAS;EAC7H;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;GAAS;EAC7H;GAAE,SAAS;GAAsB,QAAQ;GAAgC,MAAM;GAAwB,aAAa;GAAS;EAC9H;CACF;AAED,IAAa,mBAA+B;CAC1C,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAc,aAAa;GAAS;EACxG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACvG;GAAE,SAAS;GAAmB,QAAQ;GAAwB,MAAM;GAAa,aAAa;GAAS;EACxG;CACF;AAED,IAAa,aAAyB;CACpC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;GAAS;EACnH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;GAAS;EACnH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;GAAS;EACnH;GAAE,SAAS;GAAsB,QAAQ;GAA0B,MAAM;GAAoB,aAAa;GAAS;EACpH;CACF;AAED,IAAa,cAA0B;CACrC,MAAM;CACN,UAAU;EACR;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;GAAS;EAC7G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;GAAS;EAC7G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;GAAS;EAC7G;GAAE,SAAS;GAAuB,QAAQ;GAA2B,MAAM;GAAY,aAAa;GAAS;EAC9G;CACF;AAED,IAAa,gBAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAMD,SAAS,WAAW,EAAE,UAAmC;CACvD,MAAM,YAAY,MAAA,QAAM,OAAuB,KAAK;CACpD,MAAM,CAAC,KAAK,UAAU,MAAA,QAAM,SAAiB,GAAG;CAChD,MAAM,CAAC,QAAQ,aAAa,MAAA,QAAM,SAAS,MAAM;AAEjD,OAAA,QAAM,gBAAgB;EACpB,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,iBAAiB,GAAG,CAAC;AAChC,SAAO,MAAM,GAAG;IACf,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,mBAAmB;AACvB,YAAU,UAAU,UAAU,OAAO,QAAQ,CAAC,YAAY,GAAG;AAC7D,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,KAAK;;AAG1C,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AAAE,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IAAK,aAAY;;EACxE,OAAO,QAAQ,OAAO;EACtB,WAAU;YANZ,CASE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,OAAO,EAAE,iBAAiB,OAAO,QAAQ;aAH3C,CAKG,UACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA8G;IAEvH,CAAA,EAET,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,OAAO,gBAAgB,UAAU,SAAS,QAAQ;cAEjE,OAAO;IACH,CAAA,CACH;MAGN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,OAAO;KACH,CAAA;IACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,OAAO;KACH,CAAA;IACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAgC,OAAO;KAAY,CAAA;IAC/D;KACF;;;AAQV,SAAwB,aAAa,EAAE,QAAQ,aAAgC;CAC7E,MAAM,gBAAgB,UAAU;AAEhC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,aAAa,aAAa;YACvC,cAAc,KAAK,UAClB,iBAAA,GAAA,kBAAA,MAAC,WAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAU;aACX,MAAM;GACJ,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,MAAM,SAAS,KAAK,WACnB,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAyC,QAAU,EAAlC,OAAO,QAA2B,CACnD;GACE,CAAA,CACE,EAAA,EATI,MAAM,KASV,CACV;EACE,CAAA"}

package/dist/chunks/{combobox-0n1_tB8L.mjs → combobox-B6yk5U82.mjs}

@@ -1,7 +1,7 @@
 import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
 import { t as TruncatedText } from "./truncated-text-C9t9o9IA.mjs";
 import { J as CheckIcon, N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
-import { t as DropdownMenu } from "./DropdownMenu-CBdZoVQs.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -27,7 +27,7 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 			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",
+		panelClassName: "start-0 top-[40px] z-20 mt-1 flex w-full 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(
@@ -52,7 +52,7 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 					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"),
+					className: mergeClassNames("ms-2 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
 					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
 						width: 24,
 						height: 24,
@@ -124,4 +124,4 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 //#endregion
 export { Combobox as t };
 
-//# sourceMappingURL=combobox-0n1_tB8L.mjs.map
+//# sourceMappingURL=combobox-B6yk5U82.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-B6yk5U82.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=\"start-0 top-[40px] z-20 mt-1 flex w-full 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                \"ms-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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"}

package/dist/chunks/{combobox-Ca7-BcLO.cjs → combobox-CtNrGmuR.cjs}

@@ -2,7 +2,7 @@ const require_chunk = require("./chunk-B_GkZjkl.cjs");
 const require_utils = require("./utils-LRbEQHYs.cjs");
 const require_truncated_text = require("./truncated-text-BIXqNfOL.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CeD9kl_N.cjs");
+const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -29,7 +29,7 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 			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",
+		panelClassName: "start-0 top-[40px] z-20 mt-1 flex w-full 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(
@@ -54,7 +54,7 @@ var Combobox = ({ options, value, onChange, placeholder = "Select...", searchPla
 					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"),
+					className: require_utils.mergeClassNames("ms-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,
@@ -131,4 +131,4 @@ Object.defineProperty(exports, "Combobox", {
 	}
 });
 
-//# sourceMappingURL=combobox-Ca7-BcLO.cjs.map
+//# sourceMappingURL=combobox-CtNrGmuR.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-CtNrGmuR.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=\"start-0 top-[40px] z-20 mt-1 flex w-full 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                \"ms-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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"}

package/dist/chunks/{data-table-Bt2c9dog.mjs → data-table-Dtf6lKpp.mjs}

@@ -1,16 +1,16 @@
 import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
 import { H as SearchIcon, L as ArrowDownIcon, M as ChevronLeftIcon, O as ChevronsRightIcon, R as TrashIcon, T as EllipsisVerticalIcon, a as RefreshIcon, d as FilterXIcon, f as FilterProfileIcon, j as ChevronRightIcon, k as ChevronsLeftIcon, l as LoaderIcon, m as ColumnsIcon, p as FilterIcon, r as SelectionIcon } from "./icons-bx3nrxNv.mjs";
-import { t as Button } from "./button-DddUhuR-.mjs";
-import { t as DropdownMenu } from "./DropdownMenu-CBdZoVQs.mjs";
-import { t as Select } from "./select-B3tfHqQo.mjs";
+import { t as Button } from "./button-A6UTvrOu.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
+import { t as Select } from "./select-CUaSNR09.mjs";
 import { t as Checkbox } from "./checkbox-3aB7XC9_.mjs";
-import { r as Chip } from "./chip-Dt0p0_zd.mjs";
-import { t as Combobox } from "./combobox-0n1_tB8L.mjs";
-import { t as Input } from "./input-BvTrWtRn.mjs";
-import { t as Tooltip } from "./tooltip-CmB8xKOF.mjs";
-import { t as MultiSelectCombobox } from "./multi-select-combobox-_nuc3cZ3.mjs";
-import { t as Switch } from "./switch-C1gKE0m0.mjs";
-import { t as DatePicker } from "./date-picker-CDACysPq.mjs";
+import { r as Chip } from "./chip-CqcdcSs2.mjs";
+import { t as Combobox } from "./combobox-B6yk5U82.mjs";
+import { t as Input } from "./input-Bqo9Q5zF.mjs";
+import { t as Tooltip } from "./Tooltip-DK3B879v.mjs";
+import { t as MultiSelectCombobox } from "./multi-select-combobox-Do23ZfOQ.mjs";
+import { t as Switch } from "./switch-iPsN1NS2.mjs";
+import { t as DatePicker } from "./date-picker-BmQ0rgwH.mjs";
 import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -1524,4 +1524,4 @@ function DataTable({ columns, data, direction = "auto", isLoading = false, onCol
 //#endregion
 export { FilterButton as a, TableBody as c, TableContainer as d, TableFooter as f, TableRow as h, ColumnToggle as i, TableCaption as l, TableHeader as m, FilterProfile as n, FilterDropdown as o, TableHead as p, ToolbarIconButton as r, Table as s, DataTable as t, TableCell as u };
 
-//# sourceMappingURL=data-table-Bt2c9dog.mjs.map
+//# sourceMappingURL=data-table-Dtf6lKpp.mjs.map