erp-pro-ui 0.1.2 → 0.1.4

package/dist/chunks/date-picker-CNPORxhv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-CNPORxhv.mjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { Calendar } from \"../calendar\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\nconst formatDate = (date: Date | null) =>\n  date?.toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  }) ?? \"\";\n\nconst isRangeValue = (value: DatePickerValue): value is DateRangeValue =>\n  typeof value === \"object\" &&\n  value !== null &&\n  \"start\" in value &&\n  \"end\" in value;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\nconst PANEL_GAP = 8;\nconst VIEWPORT_MARGIN = 12;\n\nexport const DatePicker = ({\n  mode = \"single\",\n  value,\n  onChange,\n  label,\n  placeholder = \"Pick a date\",\n  helperText,\n  disabled = false,\n  className = \"\",\n  presets,\n}: DatePickerProps) => {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<DatePickerValue>(\n    value ?? (mode === \"range\" ? emptyRange : null),\n  );\n\n  const currentValue = isControlled ? value : internalValue;\n  const singleValue = mode === \"range\" ? null : (currentValue as Date | null);\n  const rangeValue =\n    mode === \"range\" && isRangeValue(currentValue)\n      ? currentValue\n      : mode === \"range\"\n        ? { ...emptyRange }\n        : emptyRange;\n\n  const displayValue = useMemo(() => {\n    if (mode === \"range\") {\n      if (rangeValue.start && rangeValue.end) {\n        return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;\n      }\n      if (rangeValue.start) {\n        return `${formatDate(rangeValue.start)} — …`;\n      }\n      return \"\";\n    }\n    return formatDate(singleValue);\n  }, [mode, rangeValue.end, rangeValue.start, singleValue]);\n\n  const updateValue = (next: DatePickerValue) => {\n    if (!isControlled) {\n      setInternalValue(next);\n    }\n    onChange?.(next);\n  };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n  const [panelPosition, setPanelPosition] = useState({\n    top: 0,\n    left: 0,\n    minWidth: 320,\n  });\n\n  useEffect(() => {\n    const isEventInside = (event: Event) => {\n      const eventPath =\n        typeof event.composedPath === \"function\" ? event.composedPath() : [];\n\n      return eventPath.some((target) => {\n        if (!(target instanceof Node)) {\n          return false;\n        }\n\n        return (\n          containerRef.current?.contains(target) ||\n          panelRef.current?.contains(target)\n        );\n      });\n    };\n\n    const handlePointerOutside = (event: PointerEvent) => {\n      const target = event.target;\n\n      if (\n        (target instanceof Node &&\n          (containerRef.current?.contains(target) ||\n            panelRef.current?.contains(target))) ||\n        isEventInside(event)\n      ) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    const handleFocusOutside = (event: FocusEvent) => {\n      const target = event.target;\n\n      if (\n        (target instanceof Node &&\n          (containerRef.current?.contains(target) ||\n            panelRef.current?.contains(target))) ||\n        isEventInside(event)\n      ) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    if (open) {\n      document.addEventListener(\"pointerdown\", handlePointerOutside, true);\n      document.addEventListener(\"focusin\", handleFocusOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerOutside, true);\n      document.removeEventListener(\"focusin\", handleFocusOutside, true);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const updatePanelPosition = () => {\n      const triggerRect = triggerRef.current?.getBoundingClientRect();\n\n      if (!triggerRect) {\n        return;\n      }\n\n      const panelHeight = panelRef.current?.offsetHeight ?? 360;\n      const spaceBelow = window.innerHeight - triggerRect.bottom;\n      const shouldOpenAbove =\n        spaceBelow < panelHeight + PANEL_GAP &&\n        triggerRect.top > panelHeight + PANEL_GAP;\n\n      const unclampedLeft = triggerRect.left;\n      const maxLeft = Math.max(\n        VIEWPORT_MARGIN,\n        window.innerWidth - Math.max(triggerRect.width, 320) - VIEWPORT_MARGIN,\n      );\n      const left = Math.min(Math.max(unclampedLeft, VIEWPORT_MARGIN), maxLeft);\n\n      setPanelPosition({\n        top: shouldOpenAbove\n          ? Math.max(VIEWPORT_MARGIN, triggerRect.top - panelHeight - PANEL_GAP)\n          : Math.min(\n              triggerRect.bottom + PANEL_GAP,\n              window.innerHeight - panelHeight - VIEWPORT_MARGIN,\n            ),\n        left,\n        minWidth: Math.max(triggerRect.width, 320),\n      });\n    };\n\n    updatePanelPosition();\n\n    const frameId = window.requestAnimationFrame(updatePanelPosition);\n\n    window.addEventListener(\"resize\", updatePanelPosition);\n    window.addEventListener(\"scroll\", updatePanelPosition, true);\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n      window.removeEventListener(\"resize\", updatePanelPosition);\n      window.removeEventListener(\"scroll\", updatePanelPosition, true);\n    };\n  }, [open, presets]);\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  const handlePresetClick = (getValue: () => DatePickerValue) => {\n    const next = getValue();\n    updateValue(next);\n    setOpen(false);\n  };\n\n  return (\n    <div ref={containerRef} className={`w-full space-y-2 ${className}`.trim()}>\n      {label && <p className=\"text-sm font-medium text-heading\">{label}</p>}\n      <div className=\"relative\">\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={\n            disabled\n              ? \"group/date-picker rounded-lg border-none bg-muted p-[2px]\"\n              : \"group/date-picker rounded-lg border-border p-[2px]\"\n          }\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            className={`flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${\n              disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n            }`}\n            onClick={() => !disabled && setOpen((prev) => !prev)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            disabled={disabled}\n          >\n            <span\n              className={\n                displayValue ? \"text-foreground\" : \"text-muted-foreground\"\n              }\n            >\n              {displayValue || placeholder}\n            </span>\n            <span aria-hidden=\"true\">📅</span>\n          </button>\n        </motion.div>\n      </div>\n      {helperText && (\n        <p className=\"text-xs text-muted-foreground\">{helperText}</p>\n      )}\n      {open && !disabled && typeof document !== \"undefined\"\n        ? createPortal(\n            <div className=\"fixed inset-0 z-60\">\n              <div\n                className=\"absolute inset-0\"\n                aria-hidden=\"true\"\n                onPointerDown={() => setOpen(false)}\n              />\n              <div\n                ref={panelRef}\n                className=\"dropdown-panel absolute z-10\"\n                style={{\n                  top: panelPosition.top,\n                  left: panelPosition.left,\n                  minWidth: panelPosition.minWidth,\n                }}\n                role=\"dialog\"\n                aria-modal=\"false\"\n              >\n                <Calendar\n                  value={mode === \"single\" ? (singleValue ?? null) : undefined}\n                  selectionMode={mode}\n                  range={mode === \"range\" ? rangeValue : undefined}\n                  onSelect={\n                    mode === \"single\"\n                      ? (date) => {\n                          updateValue(date);\n                          setOpen(false);\n                        }\n                      : undefined\n                  }\n                  onRangeSelect={\n                    mode === \"range\"\n                      ? (nextRange) => {\n                          updateValue(nextRange);\n                          if (nextRange.start && nextRange.end) {\n                            setOpen(false);\n                          }\n                        }\n                      : undefined\n                  }\n                />\n                {presets?.length ? (\n                  <div className=\"mt-3 flex flex-wrap gap-2 rounded-lg border border-white/20 bg-white/70 p-3 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-neutral-900/70\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent\"\n                        onClick={() => handlePresetClick(preset.value)}\n                      >\n                        {preset.label}\n                      </button>\n                    ))}\n                  </div>\n                ) : null}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/{date-picker-W9om1j7A.cjs → date-picker-CZo68Fkl.cjs}

@@ -1,8 +1,9 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_calendar = require("./calendar-xrGmvukr.cjs");
+const require_calendar = require("./calendar-Cpp_Rc7T.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
+let react_dom = require("react-dom");
 //#region src/components/forms/date-picker/DatePicker.tsx
 var formatDate = (date) => date?.toLocaleDateString(void 0, {
 	month: "short",
@@ -14,6 +15,8 @@ var emptyRange = {
 	start: null,
 	end: null
 };
+var PANEL_GAP = 8;
+var VIEWPORT_MARGIN = 12;
 var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick a date", helperText, disabled = false, className = "", presets }) => {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [visible, setVisible] = (0, react.useState)(false);
@@ -40,18 +43,68 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 		onChange?.(next);
 	};
 	const containerRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
 	const mouseX = (0, framer_motion.useMotionValue)(0);
 	const mouseY = (0, framer_motion.useMotionValue)(0);
 	const radius = 100;
+	const [panelPosition, setPanelPosition] = (0, react.useState)({
+		top: 0,
+		left: 0,
+		minWidth: 320
+	});
 	(0, react.useEffect)(() => {
-		const handleClickOutside = (event) => {
-			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
+		const isEventInside = (event) => {
+			return (typeof event.composedPath === "function" ? event.composedPath() : []).some((target) => {
+				if (!(target instanceof Node)) return false;
+				return containerRef.current?.contains(target) || panelRef.current?.contains(target);
+			});
+		};
+		const handlePointerOutside = (event) => {
+			const target = event.target;
+			if (target instanceof Node && (containerRef.current?.contains(target) || panelRef.current?.contains(target)) || isEventInside(event)) return;
+			setOpen(false);
+		};
+		const handleFocusOutside = (event) => {
+			const target = event.target;
+			if (target instanceof Node && (containerRef.current?.contains(target) || panelRef.current?.contains(target)) || isEventInside(event)) return;
+			setOpen(false);
 		};
-		if (open) document.addEventListener("mousedown", handleClickOutside);
+		if (open) {
+			document.addEventListener("pointerdown", handlePointerOutside, true);
+			document.addEventListener("focusin", handleFocusOutside, true);
+		}
 		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("pointerdown", handlePointerOutside, true);
+			document.removeEventListener("focusin", handleFocusOutside, true);
 		};
 	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const updatePanelPosition = () => {
+			const triggerRect = triggerRef.current?.getBoundingClientRect();
+			if (!triggerRect) return;
+			const panelHeight = panelRef.current?.offsetHeight ?? 360;
+			const shouldOpenAbove = window.innerHeight - triggerRect.bottom < panelHeight + PANEL_GAP && triggerRect.top > panelHeight + PANEL_GAP;
+			const unclampedLeft = triggerRect.left;
+			const maxLeft = Math.max(VIEWPORT_MARGIN, window.innerWidth - Math.max(triggerRect.width, 320) - VIEWPORT_MARGIN);
+			const left = Math.min(Math.max(unclampedLeft, VIEWPORT_MARGIN), maxLeft);
+			setPanelPosition({
+				top: shouldOpenAbove ? Math.max(VIEWPORT_MARGIN, triggerRect.top - panelHeight - PANEL_GAP) : Math.min(triggerRect.bottom + PANEL_GAP, window.innerHeight - panelHeight - VIEWPORT_MARGIN),
+				left,
+				minWidth: Math.max(triggerRect.width, 320)
+			});
+		};
+		updatePanelPosition();
+		const frameId = window.requestAnimationFrame(updatePanelPosition);
+		window.addEventListener("resize", updatePanelPosition);
+		window.addEventListener("scroll", updatePanelPosition, true);
+		return () => {
+			window.cancelAnimationFrame(frameId);
+			window.removeEventListener("resize", updatePanelPosition);
+			window.removeEventListener("scroll", updatePanelPosition, true);
+		};
+	}, [open, presets]);
 	const handleMouseMove = (event) => {
 		const { left, top } = event.currentTarget.getBoundingClientRect();
 		mouseX.set(event.clientX - left);
@@ -69,9 +122,9 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 				className: "text-sm font-medium text-heading",
 				children: label
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 					style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
                   radial-gradient(
                     ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
@@ -84,8 +137,9 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 					onMouseLeave: !disabled ? () => setVisible(false) : void 0,
 					className: disabled ? "group/date-picker rounded-lg border-none bg-muted p-[2px]" : "group/date-picker rounded-lg border-border p-[2px]",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						ref: triggerRef,
 						type: "button",
-						className: `shadow-input flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${disabled ? "cursor-not-allowed opacity-50" : "group-hover/date-picker:shadow-none"}`,
+						className: `flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${disabled ? "cursor-not-allowed opacity-50" : ""}`,
 						onClick: () => !disabled && setOpen((prev) => !prev),
 						"aria-haspopup": "dialog",
 						"aria-expanded": open,
@@ -98,8 +152,28 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 							children: "📅"
 						})]
 					})
-				}), open && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "absolute left-0 top-12 z-40 dropdown-panel",
+				})
+			}),
+			helperText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-xs text-muted-foreground",
+				children: helperText
+			}),
+			open && !disabled && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fixed inset-0 z-60",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute inset-0",
+					"aria-hidden": "true",
+					onPointerDown: () => setOpen(false)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: "dropdown-panel absolute z-10",
+					style: {
+						top: panelPosition.top,
+						left: panelPosition.left,
+						minWidth: panelPosition.minWidth
+					},
+					role: "dialog",
+					"aria-modal": "false",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_calendar.Calendar, {
 						value: mode === "single" ? singleValue ?? null : void 0,
 						selectionMode: mode,
@@ -113,7 +187,7 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 							if (nextRange.start && nextRange.end) setOpen(false);
 						} : void 0
 					}), presets?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mt-3 flex flex-wrap gap-2",
+						className: "mt-3 flex flex-wrap gap-2 rounded-lg border border-white/20 bg-white/70 p-3 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-neutral-900/70",
 						children: presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							className: "rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent",
@@ -122,11 +196,7 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 						}, preset.label))
 					}) : null]
 				})]
-			}),
-			helperText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-xs text-muted-foreground",
-				children: helperText
-			})
+			}), document.body) : null
 		]
 	});
 };
@@ -138,4 +208,4 @@ Object.defineProperty(exports, "DatePicker", {
 	}
 });
 
-//# sourceMappingURL=date-picker-W9om1j7A.cjs.map
+//# sourceMappingURL=date-picker-CZo68Fkl.cjs.map

package/dist/chunks/date-picker-CZo68Fkl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-CZo68Fkl.cjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { Calendar } from \"../calendar\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\nconst formatDate = (date: Date | null) =>\n  date?.toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  }) ?? \"\";\n\nconst isRangeValue = (value: DatePickerValue): value is DateRangeValue =>\n  typeof value === \"object\" &&\n  value !== null &&\n  \"start\" in value &&\n  \"end\" in value;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\nconst PANEL_GAP = 8;\nconst VIEWPORT_MARGIN = 12;\n\nexport const DatePicker = ({\n  mode = \"single\",\n  value,\n  onChange,\n  label,\n  placeholder = \"Pick a date\",\n  helperText,\n  disabled = false,\n  className = \"\",\n  presets,\n}: DatePickerProps) => {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<DatePickerValue>(\n    value ?? (mode === \"range\" ? emptyRange : null),\n  );\n\n  const currentValue = isControlled ? value : internalValue;\n  const singleValue = mode === \"range\" ? null : (currentValue as Date | null);\n  const rangeValue =\n    mode === \"range\" && isRangeValue(currentValue)\n      ? currentValue\n      : mode === \"range\"\n        ? { ...emptyRange }\n        : emptyRange;\n\n  const displayValue = useMemo(() => {\n    if (mode === \"range\") {\n      if (rangeValue.start && rangeValue.end) {\n        return `${formatDate(rangeValue.start)} — ${formatDate(rangeValue.end)}`;\n      }\n      if (rangeValue.start) {\n        return `${formatDate(rangeValue.start)} — …`;\n      }\n      return \"\";\n    }\n    return formatDate(singleValue);\n  }, [mode, rangeValue.end, rangeValue.start, singleValue]);\n\n  const updateValue = (next: DatePickerValue) => {\n    if (!isControlled) {\n      setInternalValue(next);\n    }\n    onChange?.(next);\n  };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const radius = 100;\n  const [panelPosition, setPanelPosition] = useState({\n    top: 0,\n    left: 0,\n    minWidth: 320,\n  });\n\n  useEffect(() => {\n    const isEventInside = (event: Event) => {\n      const eventPath =\n        typeof event.composedPath === \"function\" ? event.composedPath() : [];\n\n      return eventPath.some((target) => {\n        if (!(target instanceof Node)) {\n          return false;\n        }\n\n        return (\n          containerRef.current?.contains(target) ||\n          panelRef.current?.contains(target)\n        );\n      });\n    };\n\n    const handlePointerOutside = (event: PointerEvent) => {\n      const target = event.target;\n\n      if (\n        (target instanceof Node &&\n          (containerRef.current?.contains(target) ||\n            panelRef.current?.contains(target))) ||\n        isEventInside(event)\n      ) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    const handleFocusOutside = (event: FocusEvent) => {\n      const target = event.target;\n\n      if (\n        (target instanceof Node &&\n          (containerRef.current?.contains(target) ||\n            panelRef.current?.contains(target))) ||\n        isEventInside(event)\n      ) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    if (open) {\n      document.addEventListener(\"pointerdown\", handlePointerOutside, true);\n      document.addEventListener(\"focusin\", handleFocusOutside, true);\n    }\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerOutside, true);\n      document.removeEventListener(\"focusin\", handleFocusOutside, true);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const updatePanelPosition = () => {\n      const triggerRect = triggerRef.current?.getBoundingClientRect();\n\n      if (!triggerRect) {\n        return;\n      }\n\n      const panelHeight = panelRef.current?.offsetHeight ?? 360;\n      const spaceBelow = window.innerHeight - triggerRect.bottom;\n      const shouldOpenAbove =\n        spaceBelow < panelHeight + PANEL_GAP &&\n        triggerRect.top > panelHeight + PANEL_GAP;\n\n      const unclampedLeft = triggerRect.left;\n      const maxLeft = Math.max(\n        VIEWPORT_MARGIN,\n        window.innerWidth - Math.max(triggerRect.width, 320) - VIEWPORT_MARGIN,\n      );\n      const left = Math.min(Math.max(unclampedLeft, VIEWPORT_MARGIN), maxLeft);\n\n      setPanelPosition({\n        top: shouldOpenAbove\n          ? Math.max(VIEWPORT_MARGIN, triggerRect.top - panelHeight - PANEL_GAP)\n          : Math.min(\n              triggerRect.bottom + PANEL_GAP,\n              window.innerHeight - panelHeight - VIEWPORT_MARGIN,\n            ),\n        left,\n        minWidth: Math.max(triggerRect.width, 320),\n      });\n    };\n\n    updatePanelPosition();\n\n    const frameId = window.requestAnimationFrame(updatePanelPosition);\n\n    window.addEventListener(\"resize\", updatePanelPosition);\n    window.addEventListener(\"scroll\", updatePanelPosition, true);\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n      window.removeEventListener(\"resize\", updatePanelPosition);\n      window.removeEventListener(\"scroll\", updatePanelPosition, true);\n    };\n  }, [open, presets]);\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  const handlePresetClick = (getValue: () => DatePickerValue) => {\n    const next = getValue();\n    updateValue(next);\n    setOpen(false);\n  };\n\n  return (\n    <div ref={containerRef} className={`w-full space-y-2 ${className}`.trim()}>\n      {label && <p className=\"text-sm font-medium text-heading\">{label}</p>}\n      <div className=\"relative\">\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={\n            disabled\n              ? \"group/date-picker rounded-lg border-none bg-muted p-[2px]\"\n              : \"group/date-picker rounded-lg border-border p-[2px]\"\n          }\n        >\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            className={`flex w-full items-center justify-between rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out ${\n              disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n            }`}\n            onClick={() => !disabled && setOpen((prev) => !prev)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            disabled={disabled}\n          >\n            <span\n              className={\n                displayValue ? \"text-foreground\" : \"text-muted-foreground\"\n              }\n            >\n              {displayValue || placeholder}\n            </span>\n            <span aria-hidden=\"true\">📅</span>\n          </button>\n        </motion.div>\n      </div>\n      {helperText && (\n        <p className=\"text-xs text-muted-foreground\">{helperText}</p>\n      )}\n      {open && !disabled && typeof document !== \"undefined\"\n        ? createPortal(\n            <div className=\"fixed inset-0 z-60\">\n              <div\n                className=\"absolute inset-0\"\n                aria-hidden=\"true\"\n                onPointerDown={() => setOpen(false)}\n              />\n              <div\n                ref={panelRef}\n                className=\"dropdown-panel absolute z-10\"\n                style={{\n                  top: panelPosition.top,\n                  left: panelPosition.left,\n                  minWidth: panelPosition.minWidth,\n                }}\n                role=\"dialog\"\n                aria-modal=\"false\"\n              >\n                <Calendar\n                  value={mode === \"single\" ? (singleValue ?? null) : undefined}\n                  selectionMode={mode}\n                  range={mode === \"range\" ? rangeValue : undefined}\n                  onSelect={\n                    mode === \"single\"\n                      ? (date) => {\n                          updateValue(date);\n                          setOpen(false);\n                        }\n                      : undefined\n                  }\n                  onRangeSelect={\n                    mode === \"range\"\n                      ? (nextRange) => {\n                          updateValue(nextRange);\n                          if (nextRange.start && nextRange.end) {\n                            setOpen(false);\n                          }\n                        }\n                      : undefined\n                  }\n                />\n                {presets?.length ? (\n                  <div className=\"mt-3 flex flex-wrap gap-2 rounded-lg border border-white/20 bg-white/70 p-3 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-neutral-900/70\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-input px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:bg-accent-subtle hover:text-accent\"\n                        onClick={() => handlePresetClick(preset.value)}\n                      >\n                        {preset.label}\n                      </button>\n                    ))}\n                  </div>\n                ) : null}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAM,cAAc,SAClB,MAAM,mBAAmB,KAAA,GAAW;CAClC,OAAO;CACP,KAAK;CACL,MAAM;CACP,CAAC,IAAI;AAER,IAAM,gBAAgB,UACpB,OAAO,UAAU,YACjB,UAAU,QACV,WAAW,SACX,SAAS;AAEX,IAAM,aAA6B;CAAE,OAAO;CAAM,KAAK;CAAM;AAE7D,IAAM,YAAY;AAClB,IAAM,kBAAkB;AAExB,IAAa,cAAc,EACzB,OAAO,UACP,OACA,UACA,OACA,cAAc,eACd,YACA,WAAW,OACX,YAAY,IACZ,cACqB;CACrB,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB,MAAM;CACvC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UACpB,UAAU,SAAS,UAAU,aAAa,MAC3C;CAED,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,cAAc,SAAS,UAAU,OAAQ;CAC/C,MAAM,aACJ,SAAS,WAAW,aAAa,aAAa,GAC1C,eACA,SAAS,UACP,EAAE,GAAG,YAAY,GACjB;CAER,MAAM,gBAAA,GAAA,MAAA,eAA6B;AACjC,MAAI,SAAS,SAAS;AACpB,OAAI,WAAW,SAAS,WAAW,IACjC,QAAO,GAAG,WAAW,WAAW,MAAM,CAAC,KAAK,WAAW,WAAW,IAAI;AAExE,OAAI,WAAW,MACb,QAAO,GAAG,WAAW,WAAW,MAAM,CAAC;AAEzC,UAAO;;AAET,SAAO,WAAW,YAAY;IAC7B;EAAC;EAAM,WAAW;EAAK,WAAW;EAAO;EAAY,CAAC;CAEzD,MAAM,eAAe,SAA0B;AAC7C,MAAI,CAAC,aACH,kBAAiB,KAAK;AAExB,aAAW,KAAK;;CAGlB,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,cAAA,GAAA,MAAA,QAAuC,KAAK;CAClD,MAAM,YAAA,GAAA,MAAA,QAAkC,KAAK;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,SAAS;CACf,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B;EACjD,KAAK;EACL,MAAM;EACN,UAAU;EACX,CAAC;AAEF,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,iBAAiB,UAAiB;AAItC,WAFE,OAAO,MAAM,iBAAiB,aAAa,MAAM,cAAc,GAAG,EAAE,EAErD,MAAM,WAAW;AAChC,QAAI,EAAE,kBAAkB,MACtB,QAAO;AAGT,WACE,aAAa,SAAS,SAAS,OAAO,IACtC,SAAS,SAAS,SAAS,OAAO;KAEpC;;EAGJ,MAAM,wBAAwB,UAAwB;GACpD,MAAM,SAAS,MAAM;AAErB,OACG,kBAAkB,SAChB,aAAa,SAAS,SAAS,OAAO,IACrC,SAAS,SAAS,SAAS,OAAO,KACtC,cAAc,MAAM,CAEpB;AAGF,WAAQ,MAAM;;EAGhB,MAAM,sBAAsB,UAAsB;GAChD,MAAM,SAAS,MAAM;AAErB,OACG,kBAAkB,SAChB,aAAa,SAAS,SAAS,OAAO,IACrC,SAAS,SAAS,SAAS,OAAO,KACtC,cAAc,MAAM,CAEpB;AAGF,WAAQ,MAAM;;AAGhB,MAAI,MAAM;AACR,YAAS,iBAAiB,eAAe,sBAAsB,KAAK;AACpE,YAAS,iBAAiB,WAAW,oBAAoB,KAAK;;AAGhE,eAAa;AACX,YAAS,oBAAoB,eAAe,sBAAsB,KAAK;AACvE,YAAS,oBAAoB,WAAW,oBAAoB,KAAK;;IAElE,CAAC,KAAK,CAAC;AAEV,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,KACH;EAGF,MAAM,4BAA4B;GAChC,MAAM,cAAc,WAAW,SAAS,uBAAuB;AAE/D,OAAI,CAAC,YACH;GAGF,MAAM,cAAc,SAAS,SAAS,gBAAgB;GAEtD,MAAM,kBADa,OAAO,cAAc,YAAY,SAErC,cAAc,aAC3B,YAAY,MAAM,cAAc;GAElC,MAAM,gBAAgB,YAAY;GAClC,MAAM,UAAU,KAAK,IACnB,iBACA,OAAO,aAAa,KAAK,IAAI,YAAY,OAAO,IAAI,GAAG,gBACxD;GACD,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,eAAe,gBAAgB,EAAE,QAAQ;AAExE,oBAAiB;IACf,KAAK,kBACD,KAAK,IAAI,iBAAiB,YAAY,MAAM,cAAc,UAAU,GACpE,KAAK,IACH,YAAY,SAAS,WACrB,OAAO,cAAc,cAAc,gBACpC;IACL;IACA,UAAU,KAAK,IAAI,YAAY,OAAO,IAAI;IAC3C,CAAC;;AAGJ,uBAAqB;EAErB,MAAM,UAAU,OAAO,sBAAsB,oBAAoB;AAEjE,SAAO,iBAAiB,UAAU,oBAAoB;AACtD,SAAO,iBAAiB,UAAU,qBAAqB,KAAK;AAE5D,eAAa;AACX,UAAO,qBAAqB,QAAQ;AACpC,UAAO,oBAAoB,UAAU,oBAAoB;AACzD,UAAO,oBAAoB,UAAU,qBAAqB,KAAK;;IAEhE,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;CAGjC,MAAM,qBAAqB,aAAoC;AAE7D,cADa,UAAU,CACN;AACjB,UAAQ,MAAM;;AAGhB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,KAAK;EAAc,WAAW,oBAAoB,YAAY,MAAM;YAAzE;GACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAAoC;IAAU,CAAA;GACrE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;KACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;KACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;KAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;KACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;KACpD,WACE,WACI,8DACA;eAGN,iBAAA,GAAA,kBAAA,MAAC,UAAD;MACE,KAAK;MACL,MAAK;MACL,WAAW,yKACT,WAAW,kCAAkC;MAE/C,eAAe,CAAC,YAAY,SAAS,SAAS,CAAC,KAAK;MACpD,iBAAc;MACd,iBAAe;MACL;gBATZ,CAWE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OACE,WACE,eAAe,oBAAoB;iBAGpC,gBAAgB;OACZ,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;OAAM,eAAY;iBAAO;OAAS,CAAA,CAC3B;;KACE,CAAA;IACT,CAAA;GACL,cACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAAiC;IAAe,CAAA;GAE9D,QAAQ,CAAC,YAAY,OAAO,aAAa,eAAA,GAAA,UAAA,cAEpC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KACE,WAAU;KACV,eAAY;KACZ,qBAAqB,QAAQ,MAAM;KACnC,CAAA,EACF,iBAAA,GAAA,kBAAA,MAAC,OAAD;KACE,KAAK;KACL,WAAU;KACV,OAAO;MACL,KAAK,cAAc;MACnB,MAAM,cAAc;MACpB,UAAU,cAAc;MACzB;KACD,MAAK;KACL,cAAW;eATb,CAWE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;MACE,OAAO,SAAS,WAAY,eAAe,OAAQ,KAAA;MACnD,eAAe;MACf,OAAO,SAAS,UAAU,aAAa,KAAA;MACvC,UACE,SAAS,YACJ,SAAS;AACR,mBAAY,KAAK;AACjB,eAAQ,MAAM;UAEhB,KAAA;MAEN,eACE,SAAS,WACJ,cAAc;AACb,mBAAY,UAAU;AACtB,WAAI,UAAU,SAAS,UAAU,IAC/B,SAAQ,MAAM;UAGlB,KAAA;MAEN,CAAA,EACD,SAAS,SACR,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ,QAAQ,KAAK,WACZ,iBAAA,GAAA,kBAAA,KAAC,UAAD;OAEE,MAAK;OACL,WAAU;OACV,eAAe,kBAAkB,OAAO,MAAM;iBAE7C,OAAO;OACD,EANF,OAAO,MAML,CACT;MACE,CAAA,GACJ,KACA;OACF;OACN,SAAS,KACV,GACD;GACA"}

package/dist/chunks/input-BWM6G7jq.cjs

@@ -0,0 +1,117 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/forms/input/types.ts
+var InputState = /* @__PURE__ */ function(InputState) {
+	InputState["DEFAULT"] = "default";
+	InputState["DISABLED"] = "disabled";
+	InputState["ERROR"] = "error";
+	InputState["SUCCESS"] = "success";
+	return InputState;
+}({});
+//#endregion
+//#region src/components/forms/input/Input.tsx
+var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-background-secondary", ...props }, ref) => {
+	const radius = 100;
+	const [visible, setVisible] = (0, react.useState)(false);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const resolvedState = disabled ? InputState.DISABLED : error ? InputState.ERROR : state;
+	const isDisabled = resolvedState === InputState.DISABLED;
+	const trailingIcon = rightIcon ?? icon;
+	const trailingIconClassName = rightIcon ? rightIconClassName : rightIconClassName ?? iconClassName;
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const wrapperStateStyles = {
+		[InputState.DISABLED]: "border border-input bg-muted",
+		[InputState.ERROR]: "border-destructive ",
+		[InputState.SUCCESS]: "border-success-border ",
+		[InputState.DEFAULT]: "border-border "
+	};
+	const inputStateStyles = {
+		[InputState.DISABLED]: "border-transparent bg-transparent text-muted-foreground placeholder:!text-muted-foreground",
+		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
+		[InputState.SUCCESS]: "text-success placeholder:text-success",
+		[InputState.DEFAULT]: "text-foreground"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [
+			label || labelHint ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("mb-2 flex items-center gap-3", label ? "justify-between" : "justify-end"),
+				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+					htmlFor: id,
+					className: "block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: label
+				}) : null, labelHint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "shrink-0 text-xs text-muted-foreground",
+					children: labelHint
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				style: { backgroundImage: isDisabled ? "none" : framer_motion.useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+				onMouseMove: !isDisabled ? handleMouseMove : void 0,
+				onMouseEnter: !isDisabled ? () => setVisible(true) : void 0,
+				onMouseLeave: !isDisabled ? () => setVisible(false) : void 0,
+				className: require_utils.mergeClassNames("group/input rounded-lg transition duration-300", isDisabled ? "p-px" : "p-[2px] hover:border-accent", wrapperStateStyles[resolvedState], extra),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative flex items-center",
+					children: [
+						leftIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: require_utils.mergeClassNames("pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground", leftIconClassName),
+							children: leftIcon
+						}) : null,
+						trailingIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: require_utils.mergeClassNames("pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground", trailingIconClassName),
+							children: trailingIcon
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref,
+							id,
+							placeholder,
+							disabled: isDisabled,
+							className: require_utils.mergeClassNames("flex h-10 w-full rounded-md border border-input py-2 text-sm text-foreground transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-accent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", leftIcon ? "pl-10" : "pl-3", trailingIcon ? "pr-10" : "pr-3", bgClassName, inputStateStyles[resolvedState], className),
+							...props,
+							autoComplete: "off"
+						})
+					]
+				})
+			}),
+			(error || message) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: require_utils.mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-muted-foreground"),
+				children: error || message
+			}),
+			helperText && !error && !message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400 mt-1",
+				children: helperText
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+Object.defineProperty(exports, "Input", {
+	enumerable: true,
+	get: function() {
+		return Input;
+	}
+});
+Object.defineProperty(exports, "InputState", {
+	enumerable: true,
+	get: function() {
+		return InputState;
+	}
+});
+
+//# sourceMappingURL=input-BWM6G7jq.cjs.map

package/dist/chunks/input-BWM6G7jq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-BWM6G7jq.cjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n  DEFAULT = \"default\",\n  DISABLED = \"disabled\",\n  ERROR = \"error\",\n  SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  labelHint?: ReactNode;\n  error?: string;\n  helperText?: string;\n  id?: string;\n  extra?: string;\n  state?: InputState;\n  message?: string;\n  leftIcon?: ReactNode;\n  leftIconClassName?: string;\n  rightIcon?: ReactNode;\n  rightIconClassName?: string;\n  icon?: ReactNode;\n  iconClassName?: string;\n  /** Custom background classes for light/dark mode (e.g. \"ui:bg-white ui:dark:bg-zinc-900\") */\n  bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-background-secondary\",\n      ...props\n    },\n    ref,\n  ) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n    const resolvedState = disabled\n      ? InputState.DISABLED\n      : error\n        ? InputState.ERROR\n        : state;\n    const isDisabled = resolvedState === InputState.DISABLED;\n    const trailingIcon = rightIcon ?? icon;\n    const trailingIconClassName = rightIcon\n      ? rightIconClassName\n      : (rightIconClassName ?? iconClassName);\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    const wrapperStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]: \"border border-input bg-muted\",\n      [InputState.ERROR]: \"border-destructive \",\n      [InputState.SUCCESS]: \"border-success-border \",\n      [InputState.DEFAULT]: \"border-border \",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-muted-foreground placeholder:!text-muted-foreground\",\n      [InputState.ERROR]: \"text-destructive placeholder:text-destructive\",\n      [InputState.SUCCESS]: \"text-success placeholder:text-success\",\n      [InputState.DEFAULT]: \"text-foreground\",\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label || labelHint ? (\n          <div\n            className={mergeClassNames(\n              \"mb-2 flex items-center gap-3\",\n              label ? \"justify-between\" : \"justify-end\",\n            )}\n          >\n            {label ? (\n              <label\n                htmlFor={id}\n                className=\"block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-muted-foreground\">\n                {labelHint}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n\n        <motion.div\n          style={{\n            backgroundImage: isDisabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!isDisabled ? handleMouseMove : undefined}\n          onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/input rounded-lg transition duration-300\",\n            isDisabled ? \"p-px\" : \"p-[2px] hover:border-accent\",\n            wrapperStateStyles[resolvedState],\n            extra,\n          )}\n        >\n          <div className=\"relative flex items-center\">\n            {leftIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground\",\n                  leftIconClassName,\n                )}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground\",\n                  trailingIconClassName,\n                )}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-input py-2 text-sm text-foreground transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-accent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                leftIcon ? \"pl-10\" : \"pl-3\",\n                trailingIcon ? \"pr-10\" : \"pr-3\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              {...props}\n              autoComplete=\"off\"\n            />\n          </div>\n        </motion.div>\n\n        {(error || message) && (\n          <p\n            className={mergeClassNames(\n              \"text-sm font-medium mt-1\",\n              error ? \"text-destructive\" : \"text-muted-foreground\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-neutral-500 dark:text-neutral-400 mt-1\">\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}

package/dist/chunks/input-Bt_r_B_c.mjs

@@ -0,0 +1,105 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+//#region src/components/forms/input/types.ts
+var InputState = /* @__PURE__ */ function(InputState) {
+	InputState["DEFAULT"] = "default";
+	InputState["DISABLED"] = "disabled";
+	InputState["ERROR"] = "error";
+	InputState["SUCCESS"] = "success";
+	return InputState;
+}({});
+//#endregion
+//#region src/components/forms/input/Input.tsx
+var Input = forwardRef(({ className = "", label, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-background-secondary", ...props }, ref) => {
+	const radius = 100;
+	const [visible, setVisible] = useState(false);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const resolvedState = disabled ? InputState.DISABLED : error ? InputState.ERROR : state;
+	const isDisabled = resolvedState === InputState.DISABLED;
+	const trailingIcon = rightIcon ?? icon;
+	const trailingIconClassName = rightIcon ? rightIconClassName : rightIconClassName ?? iconClassName;
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	const wrapperStateStyles = {
+		[InputState.DISABLED]: "border border-input bg-muted",
+		[InputState.ERROR]: "border-destructive ",
+		[InputState.SUCCESS]: "border-success-border ",
+		[InputState.DEFAULT]: "border-border "
+	};
+	const inputStateStyles = {
+		[InputState.DISABLED]: "border-transparent bg-transparent text-muted-foreground placeholder:!text-muted-foreground",
+		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
+		[InputState.SUCCESS]: "text-success placeholder:text-success",
+		[InputState.DEFAULT]: "text-foreground"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			label || labelHint ? /* @__PURE__ */ jsxs("div", {
+				className: mergeClassNames("mb-2 flex items-center gap-3", label ? "justify-between" : "justify-end"),
+				children: [label ? /* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: label
+				}) : null, labelHint ? /* @__PURE__ */ jsx("div", {
+					className: "shrink-0 text-xs text-muted-foreground",
+					children: labelHint
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ jsx(motion.div, {
+				style: { backgroundImage: isDisabled ? "none" : useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+				onMouseMove: !isDisabled ? handleMouseMove : void 0,
+				onMouseEnter: !isDisabled ? () => setVisible(true) : void 0,
+				onMouseLeave: !isDisabled ? () => setVisible(false) : void 0,
+				className: mergeClassNames("group/input rounded-lg transition duration-300", isDisabled ? "p-px" : "p-[2px] hover:border-accent", wrapperStateStyles[resolvedState], extra),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative flex items-center",
+					children: [
+						leftIcon ? /* @__PURE__ */ jsx("div", {
+							className: mergeClassNames("pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground", leftIconClassName),
+							children: leftIcon
+						}) : null,
+						trailingIcon ? /* @__PURE__ */ jsx("div", {
+							className: mergeClassNames("pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground", trailingIconClassName),
+							children: trailingIcon
+						}) : null,
+						/* @__PURE__ */ jsx("input", {
+							ref,
+							id,
+							placeholder,
+							disabled: isDisabled,
+							className: mergeClassNames("flex h-10 w-full rounded-md border border-input py-2 text-sm text-foreground transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-accent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", leftIcon ? "pl-10" : "pl-3", trailingIcon ? "pr-10" : "pr-3", bgClassName, inputStateStyles[resolvedState], className),
+							...props,
+							autoComplete: "off"
+						})
+					]
+				})
+			}),
+			(error || message) && /* @__PURE__ */ jsx("p", {
+				className: mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-muted-foreground"),
+				children: error || message
+			}),
+			helperText && !error && !message && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-neutral-500 dark:text-neutral-400 mt-1",
+				children: helperText
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { InputState as n, Input as t };
+
+//# sourceMappingURL=input-Bt_r_B_c.mjs.map

package/dist/chunks/input-Bt_r_B_c.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Bt_r_B_c.mjs","names":[],"sources":["../../src/components/forms/input/types.ts","../../src/components/forms/input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, ReactNode } from \"react\";\n\nexport enum InputState {\n  DEFAULT = \"default\",\n  DISABLED = \"disabled\",\n  ERROR = \"error\",\n  SUCCESS = \"success\",\n}\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  labelHint?: ReactNode;\n  error?: string;\n  helperText?: string;\n  id?: string;\n  extra?: string;\n  state?: InputState;\n  message?: string;\n  leftIcon?: ReactNode;\n  leftIconClassName?: string;\n  rightIcon?: ReactNode;\n  rightIconClassName?: string;\n  icon?: ReactNode;\n  iconClassName?: string;\n  /** Custom background classes for light/dark mode (e.g. \"ui:bg-white ui:dark:bg-zinc-900\") */\n  bgClassName?: string;\n}\n","import { forwardRef, useState } from \"react\";\nimport { type InputProps, InputState } from \"./types\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-background-secondary\",\n      ...props\n    },\n    ref,\n  ) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n    const resolvedState = disabled\n      ? InputState.DISABLED\n      : error\n        ? InputState.ERROR\n        : state;\n    const isDisabled = resolvedState === InputState.DISABLED;\n    const trailingIcon = rightIcon ?? icon;\n    const trailingIconClassName = rightIcon\n      ? rightIconClassName\n      : (rightIconClassName ?? iconClassName);\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    const wrapperStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]: \"border border-input bg-muted\",\n      [InputState.ERROR]: \"border-destructive \",\n      [InputState.SUCCESS]: \"border-success-border \",\n      [InputState.DEFAULT]: \"border-border \",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-muted-foreground placeholder:!text-muted-foreground\",\n      [InputState.ERROR]: \"text-destructive placeholder:text-destructive\",\n      [InputState.SUCCESS]: \"text-success placeholder:text-success\",\n      [InputState.DEFAULT]: \"text-foreground\",\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label || labelHint ? (\n          <div\n            className={mergeClassNames(\n              \"mb-2 flex items-center gap-3\",\n              label ? \"justify-between\" : \"justify-end\",\n            )}\n          >\n            {label ? (\n              <label\n                htmlFor={id}\n                className=\"block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-muted-foreground\">\n                {labelHint}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n\n        <motion.div\n          style={{\n            backgroundImage: isDisabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!isDisabled ? handleMouseMove : undefined}\n          onMouseEnter={!isDisabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!isDisabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/input rounded-lg transition duration-300\",\n            isDisabled ? \"p-px\" : \"p-[2px] hover:border-accent\",\n            wrapperStateStyles[resolvedState],\n            extra,\n          )}\n        >\n          <div className=\"relative flex items-center\">\n            {leftIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground\",\n                  leftIconClassName,\n                )}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground\",\n                  trailingIconClassName,\n                )}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-input py-2 text-sm text-foreground transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-accent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                leftIcon ? \"pl-10\" : \"pl-3\",\n                trailingIcon ? \"pr-10\" : \"pr-3\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              {...props}\n              autoComplete=\"off\"\n            />\n          </div>\n        </motion.div>\n\n        {(error || message) && (\n          <p\n            className={mergeClassNames(\n              \"text-sm font-medium mt-1\",\n              error ? \"text-destructive\" : \"text-muted-foreground\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-neutral-500 dark:text-neutral-400 mt-1\">\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;AAEA,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,aAAA;AACA,YAAA,cAAA;AACA,YAAA,WAAA;AACA,YAAA,aAAA;;KACD;;;ACFD,IAAa,QAAQ,YAEjB,EACE,YAAY,IACZ,OACA,WACA,OACA,YACA,IACA,OACA,aACA,QAAQ,WAAW,SACnB,UACA,SACA,UACA,mBACA,WACA,oBACA,MACA,eACA,cAAc,2BACd,GAAG,SAEL,QACG;CACH,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,gBAAgB,WAClB,WAAW,WACX,QACE,WAAW,QACX;CACN,MAAM,aAAa,kBAAkB,WAAW;CAChD,MAAM,eAAe,aAAa;CAClC,MAAM,wBAAwB,YAC1B,qBACC,sBAAsB;CAE3B,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;CAGjC,MAAM,qBAAiD;GACpD,WAAW,WAAW;GACtB,WAAW,QAAQ;GACnB,WAAW,UAAU;GACrB,WAAW,UAAU;EACvB;CAED,MAAM,mBAA+C;GAClD,WAAW,WACV;GACD,WAAW,QAAQ;GACnB,WAAW,UAAU;GACrB,WAAW,UAAU;EACvB;AAED,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SAAS,YACR,qBAAC,OAAD;IACE,WAAW,gBACT,gCACA,QAAQ,oBAAoB,cAC7B;cAJH,CAMG,QACC,oBAAC,SAAD;KACE,SAAS;KACT,WAAU;eAET;KACK,CAAA,GACN,MACH,YACC,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA,GACJ,KACA;QACJ;GAEJ,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,aACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,aAAa,kBAAkB,KAAA;IAC7C,cAAc,CAAC,mBAAmB,WAAW,KAAK,GAAG,KAAA;IACrD,cAAc,CAAC,mBAAmB,WAAW,MAAM,GAAG,KAAA;IACtD,WAAW,gBACT,kDACA,aAAa,SAAS,+BACtB,mBAAmB,gBACnB,MACD;cAED,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,WACC,oBAAC,OAAD;OACE,WAAW,gBACT,8FACA,kBACD;iBAEA;OACG,CAAA,GACJ;MACH,eACC,oBAAC,OAAD;OACE,WAAW,gBACT,+FACA,sBACD;iBAEA;OACG,CAAA,GACJ;MACJ,oBAAC,SAAD;OACO;OACD;OACS;OACb,UAAU;OACV,WAAW,gBACT,4TACA,WAAW,UAAU,QACrB,eAAe,UAAU,QACzB,aACA,iBAAiB,gBACjB,UACD;OACD,GAAI;OACJ,cAAa;OACb,CAAA;MACE;;IACK,CAAA;IAEX,SAAS,YACT,oBAAC,KAAD;IACE,WAAW,gBACT,4BACA,QAAQ,qBAAqB,wBAC9B;cAEA,SAAS;IACR,CAAA;GAEL,cAAc,CAAC,SAAS,CAAC,WACxB,oBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAEF;;EAGX;AAED,MAAM,cAAc"}

package/dist/chunks/{multi-select-combobox-ELSH_Xr4.mjs → multi-select-combobox-D46M-AN9.mjs}

@@ -54,7 +54,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 			onMouseLeave: () => setVisible(false),
 			className: "group/multi-combobox rounded-lg border-border p-[2px] transition duration-300 hover:border-accent",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: mergeClassNames("shadow-input flex min-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/multi-combobox:shadow-none", bgClassName),
+				className: mergeClassNames("flex min-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/multi-combobox:shadow-none", bgClassName),
 				onClick: () => {
 					setOpen((o) => {
 						if (o) setSearch("");
@@ -129,4 +129,4 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 //#endregion
 export { MultiSelectCombobox as t };
 
-//# sourceMappingURL=multi-select-combobox-ELSH_Xr4.mjs.map
+//# sourceMappingURL=multi-select-combobox-D46M-AN9.mjs.map

package/dist/chunks/multi-select-combobox-D46M-AN9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-D46M-AN9.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  className,\n  bgClassName = \"bg-background-secondary\",\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  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\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/multi-combobox rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"flex min-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/multi-combobox:shadow-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((o) => {\n              if (o) setSearch(\"\");\n              return !o;\n            });\n          }}\n        >\n          <div className=\"flex flex-1 flex-wrap gap-1\">\n            {selectedLabels.length > 0 ? (\n              selectedLabels.map((label, index) => (\n                <span\n                  key={value[index]}\n                  className=\"inline-flex items-center gap-1 rounded-md bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent\"\n                >\n                  {label}\n                  <button\n                    type=\"button\"\n                    onClick={(e) => handleRemoveTag(value[index], e)}\n                    className=\"ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10\"\n                  >\n                    <CloseIcon className=\"w-3 h-3\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n              ))\n            ) : (\n              <span className=\"text-muted-foreground\">{placeholder}</span>\n            )}\n          </div>\n          <span\n            className={mergeClassNames(\n              \"ml-2 shrink-0 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 && (\n              <div className=\"p-3 text-center text-muted-foreground text-sm\">\n                No options found\n              </div>\n            )}\n            {filteredOptions.map((option) => {\n              const isSelected = value.includes(option.value);\n              return (\n                <div\n                  key={option.value}\n                  className={mergeClassNames(\n                    \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                    isSelected\n                      ? \"bg-accent-subtle text-accent\"\n                      : \"text-foreground hover:bg-accent hover:text-on-accent\",\n                  )}\n                  onClick={() => handleOptionClick(option.value)}\n                >\n                  <span\n                    className={mergeClassNames(\n                      \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                      isSelected\n                        ? \"border-accent bg-accent text-on-accent\"\n                        : \"border-border\",\n                    )}\n                  >\n                    {isSelected && <CheckIcon width={12} height={12} />}\n                  </span>\n                  <span className=\"flex-1\">{option.label}</span>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/{multi-select-combobox-UW0X15W7.cjs → multi-select-combobox-dS6bJE_e.cjs}

@@ -56,7 +56,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
 			onMouseLeave: () => setVisible(false),
 			className: "group/multi-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 min-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/multi-combobox:shadow-none", bgClassName),
+				className: require_utils.mergeClassNames("flex min-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/multi-combobox:shadow-none", bgClassName),
 				onClick: () => {
 					setOpen((o) => {
 						if (o) setSearch("");
@@ -136,4 +136,4 @@ Object.defineProperty(exports, "MultiSelectCombobox", {
 	}
 });
 
-//# sourceMappingURL=multi-select-combobox-UW0X15W7.cjs.map
+//# sourceMappingURL=multi-select-combobox-dS6bJE_e.cjs.map

package/dist/chunks/multi-select-combobox-dS6bJE_e.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-combobox-dS6bJE_e.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (values: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n  options,\n  value = [],\n  onChange,\n  placeholder = \"Select...\",\n  className,\n  bgClassName = \"bg-background-secondary\",\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  const handleOptionClick = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onChange(value.filter((v) => v !== optionValue));\n    } else {\n      onChange([...value, optionValue]);\n    }\n  };\n\n  const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange(value.filter((v) => v !== optionValue));\n  };\n\n  const selectedLabels = value\n    .map((v) => options.find((opt) => opt.value === v)?.label)\n    .filter(Boolean);\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/multi-combobox rounded-lg border-border p-[2px] transition duration-300 hover:border-accent\"\n      >\n        <div\n          className={mergeClassNames(\n            \"flex min-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/multi-combobox:shadow-none\",\n            bgClassName,\n          )}\n          onClick={() => {\n            setOpen((o) => {\n              if (o) setSearch(\"\");\n              return !o;\n            });\n          }}\n        >\n          <div className=\"flex flex-1 flex-wrap gap-1\">\n            {selectedLabels.length > 0 ? (\n              selectedLabels.map((label, index) => (\n                <span\n                  key={value[index]}\n                  className=\"inline-flex items-center gap-1 rounded-md bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent\"\n                >\n                  {label}\n                  <button\n                    type=\"button\"\n                    onClick={(e) => handleRemoveTag(value[index], e)}\n                    className=\"ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent/10\"\n                  >\n                    <CloseIcon className=\"w-3 h-3\" aria-hidden=\"true\" />\n                  </button>\n                </span>\n              ))\n            ) : (\n              <span className=\"text-muted-foreground\">{placeholder}</span>\n            )}\n          </div>\n          <span\n            className={mergeClassNames(\n              \"ml-2 shrink-0 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 && (\n              <div className=\"p-3 text-center text-muted-foreground text-sm\">\n                No options found\n              </div>\n            )}\n            {filteredOptions.map((option) => {\n              const isSelected = value.includes(option.value);\n              return (\n                <div\n                  key={option.value}\n                  className={mergeClassNames(\n                    \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n                    isSelected\n                      ? \"bg-accent-subtle text-accent\"\n                      : \"text-foreground hover:bg-accent hover:text-on-accent\",\n                  )}\n                  onClick={() => handleOptionClick(option.value)}\n                >\n                  <span\n                    className={mergeClassNames(\n                      \"flex h-4 w-4 items-center justify-center rounded border transition\",\n                      isSelected\n                        ? \"border-accent bg-accent text-on-accent\"\n                        : \"border-border\",\n                    )}\n                  >\n                    {isSelected && <CheckIcon width={12} height={12} />}\n                  </span>\n                  <span className=\"flex-1\">{option.label}</span>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}

package/dist/chunks/{otp-input-B6zzOEqw.cjs → otp-input-DSW9Ca_D.cjs}

@@ -9,7 +9,7 @@ var sizeStyles = {
 };
 var variantStyles = {
 	outlined: {
-		base: "border border-input bg-background-secondary rounded-lg shadow-input text-foreground",
+		base: "border border-input bg-background-secondary rounded-lg text-foreground",
 		focus: "focus:border-accent focus:ring-2 focus:ring-accent",
 		error: "border-destructive"
 	},
@@ -183,4 +183,4 @@ Object.defineProperty(exports, "OTPInput", {
 	}
 });
 
-//# sourceMappingURL=otp-input-B6zzOEqw.cjs.map
+//# sourceMappingURL=otp-input-DSW9Ca_D.cjs.map