erp-pro-ui 0.1.9 → 0.2.0

package/dist/chunks/{date-picker-CDACysPq.mjs → date-picker-BmQ0rgwH.mjs}

@@ -1,5 +1,5 @@
 import { q as CloseIcon } from "./icons-bx3nrxNv.mjs";
-import { t as Calendar } from "./calendar-BVuDnWUc.mjs";
+import { t as Calendar } from "./calendar-5XzPqKbE.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -225,4 +225,4 @@ var DatePicker = ({ mode = "single", value, onChange, label, placeholder = "Pick
 //#endregion
 export { DatePicker as t };
 
-//# sourceMappingURL=date-picker-CDACysPq.mjs.map
+//# sourceMappingURL=date-picker-BmQ0rgwH.mjs.map

package/dist/chunks/{date-picker-CDACysPq.mjs.map → date-picker-BmQ0rgwH.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-picker-CDACysPq.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\";\nimport { CloseIcon } from \"../../icons\";\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 hasSelection =\n    mode === \"range\"\n      ? Boolean(rangeValue.start || rangeValue.end)\n      : Boolean(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  const handleClearSelection = () => {\n    if (disabled) {\n      return;\n    }\n\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\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-ds-1\">{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-ds-surface-1 p-[2px]\"\n              : \"group/date-picker rounded-lg border-ds-border-2 p-[2px]\"\n          }\n        >\n          <div className=\"relative\">\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              className={`flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out ${\n                disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n              }`}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((prev) => !prev)}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              disabled={disabled}\n            >\n              <span className={displayValue ? \"text-ds-1\" : \"text-ds-2\"}>\n                {displayValue || placeholder}\n              </span>\n            </button>\n\n            {hasSelection && !disabled ? (\n              <button\n                type=\"button\"\n                className=\"absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                onClick={handleClearSelection}\n                aria-label={\n                  mode === \"range\"\n                    ? \"Clear selected date range\"\n                    : \"Clear selected date\"\n                }\n              >\n                <CloseIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </button>\n            ) : (\n              <span\n                className=\"pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                aria-hidden=\"true\"\n              >\n                📅\n              </span>\n            )}\n          </div>\n        </motion.div>\n      </div>\n      {helperText && <p className=\"text-xs text-ds-2\">{helperText}</p>}\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-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1\"\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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"}
+{"version":3,"file":"date-picker-BmQ0rgwH.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\";\nimport { CloseIcon } from \"../../icons\";\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 hasSelection =\n    mode === \"range\"\n      ? Boolean(rangeValue.start || rangeValue.end)\n      : Boolean(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  const handleClearSelection = () => {\n    if (disabled) {\n      return;\n    }\n\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\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-ds-1\">{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-ds-surface-1 p-[2px]\"\n              : \"group/date-picker rounded-lg border-ds-border-2 p-[2px]\"\n          }\n        >\n          <div className=\"relative\">\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              className={`flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out ${\n                disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n              }`}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((prev) => !prev)}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              disabled={disabled}\n            >\n              <span className={displayValue ? \"text-ds-1\" : \"text-ds-2\"}>\n                {displayValue || placeholder}\n              </span>\n            </button>\n\n            {hasSelection && !disabled ? (\n              <button\n                type=\"button\"\n                className=\"absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                onClick={handleClearSelection}\n                aria-label={\n                  mode === \"range\"\n                    ? \"Clear selected date range\"\n                    : \"Clear selected date\"\n                }\n              >\n                <CloseIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </button>\n            ) : (\n              <span\n                className=\"pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                aria-hidden=\"true\"\n              >\n                📅\n              </span>\n            )}\n          </div>\n        </motion.div>\n      </div>\n      {helperText && <p className=\"text-xs text-ds-2\">{helperText}</p>}\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-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1\"\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-duwF35Rk.cjs → date-picker-qpUZMtZC.cjs}

@@ -1,6 +1,6 @@
 require("./chunk-B_GkZjkl.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
-const require_calendar = require("./calendar-CYxkfvDv.cjs");
+const require_calendar = require("./calendar-CQJgQ5H_.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -231,4 +231,4 @@ Object.defineProperty(exports, "DatePicker", {
 	}
 });
 
-//# sourceMappingURL=date-picker-duwF35Rk.cjs.map
+//# sourceMappingURL=date-picker-qpUZMtZC.cjs.map

package/dist/chunks/{date-picker-duwF35Rk.cjs.map → date-picker-qpUZMtZC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"date-picker-duwF35Rk.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\";\nimport { CloseIcon } from \"../../icons\";\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 hasSelection =\n    mode === \"range\"\n      ? Boolean(rangeValue.start || rangeValue.end)\n      : Boolean(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  const handleClearSelection = () => {\n    if (disabled) {\n      return;\n    }\n\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\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-ds-1\">{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-ds-surface-1 p-[2px]\"\n              : \"group/date-picker rounded-lg border-ds-border-2 p-[2px]\"\n          }\n        >\n          <div className=\"relative\">\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              className={`flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out ${\n                disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n              }`}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((prev) => !prev)}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              disabled={disabled}\n            >\n              <span className={displayValue ? \"text-ds-1\" : \"text-ds-2\"}>\n                {displayValue || placeholder}\n              </span>\n            </button>\n\n            {hasSelection && !disabled ? (\n              <button\n                type=\"button\"\n                className=\"absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                onClick={handleClearSelection}\n                aria-label={\n                  mode === \"range\"\n                    ? \"Clear selected date range\"\n                    : \"Clear selected date\"\n                }\n              >\n                <CloseIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </button>\n            ) : (\n              <span\n                className=\"pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                aria-hidden=\"true\"\n              >\n                📅\n              </span>\n            )}\n          </div>\n        </motion.div>\n      </div>\n      {helperText && <p className=\"text-xs text-ds-2\">{helperText}</p>}\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-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1\"\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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"}
+{"version":3,"file":"date-picker-qpUZMtZC.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\";\nimport { CloseIcon } from \"../../icons\";\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 hasSelection =\n    mode === \"range\"\n      ? Boolean(rangeValue.start || rangeValue.end)\n      : Boolean(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  const handleClearSelection = () => {\n    if (disabled) {\n      return;\n    }\n\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\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-ds-1\">{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-ds-surface-1 p-[2px]\"\n              : \"group/date-picker rounded-lg border-ds-border-2 p-[2px]\"\n          }\n        >\n          <div className=\"relative\">\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              className={`flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out ${\n                disabled ? \"cursor-not-allowed opacity-50\" : \"\"\n              }`}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((prev) => !prev)}\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              disabled={disabled}\n            >\n              <span className={displayValue ? \"text-ds-1\" : \"text-ds-2\"}>\n                {displayValue || placeholder}\n              </span>\n            </button>\n\n            {hasSelection && !disabled ? (\n              <button\n                type=\"button\"\n                className=\"absolute top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-ds-2 transition-colors hover:bg-ds-accent-subtle hover:text-ds-1\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                onClick={handleClearSelection}\n                aria-label={\n                  mode === \"range\"\n                    ? \"Clear selected date range\"\n                    : \"Clear selected date\"\n                }\n              >\n                <CloseIcon className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n              </button>\n            ) : (\n              <span\n                className=\"pointer-events-none absolute top-1/2 -translate-y-1/2 text-ds-2\"\n                style={{ insetInlineEnd: \"0.75rem\" }}\n                aria-hidden=\"true\"\n              >\n                📅\n              </span>\n            )}\n          </div>\n        </motion.div>\n      </div>\n      {helperText && <p className=\"text-xs text-ds-2\">{helperText}</p>}\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-ds-border-2 bg-ds-surface-1/95 p-3 shadow-xl backdrop-blur-xl\">\n                    {presets.map((preset) => (\n                      <button\n                        key={preset.label}\n                        type=\"button\"\n                        className=\"rounded-full border border-ds-border-field px-3 py-1 text-xs text-ds-2 transition-colors hover:border-ds-border-accent hover:bg-ds-accent-subtle hover:text-ds-1\"\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/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs}

@@ -103,7 +103,7 @@ var FormField = ({ label, description, error, required, htmlFor, helperAction, l
 			htmlFor: fieldId,
 			className: "text-sm font-medium text-ds-1",
 			children: [label, required && /* @__PURE__ */ jsx("span", {
-				className: "ml-1 text-destructive",
+				className: "ms-1 text-destructive",
 				children: "*"
 			})]
 		}), helperAction && /* @__PURE__ */ jsx("div", {
@@ -158,4 +158,4 @@ var InputGroup = ({ columns = 2, children, className = "" }) => /* @__PURE__ */
 //#endregion
 export { FormMessage as a, FormField as i, FormActions as n, FormSection as o, FormDescription as r, InputGroup as s, Form as t };
 
-//# sourceMappingURL=form-CvNNjA1i.mjs.map
+//# sourceMappingURL=form-CtZ6U-_B.mjs.map

package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-CvNNjA1i.mjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}
+{"version":3,"file":"form-CtZ6U-_B.mjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ms-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs}

@@ -104,7 +104,7 @@ var FormField = ({ label, description, error, required, htmlFor, helperAction, l
 			htmlFor: fieldId,
 			className: "text-sm font-medium text-ds-1",
 			children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "ml-1 text-destructive",
+				className: "ms-1 text-destructive",
 				children: "*"
 			})]
 		}), helperAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -200,4 +200,4 @@ Object.defineProperty(exports, "InputGroup", {
 	}
 });
 
-//# sourceMappingURL=form-C_JxqsSZ.cjs.map
+//# sourceMappingURL=form-X6Vyaavl.cjs.map

package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"form-C_JxqsSZ.cjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ml-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}
+{"version":3,"file":"form-X6Vyaavl.cjs","names":[],"sources":["../../src/components/forms/form/Form.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useId } from \"react\";\nimport type { ReactElement } from \"react\";\n\nimport type {\n  FormProps,\n  FormSectionProps,\n  FormFieldProps,\n  FormActionsProps,\n  InputGroupProps,\n  FormDescriptionProps,\n  FormMessageProps,\n} from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n  classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst gapClassMap: Record<NonNullable<FormProps[\"gap\"]>, string> = {\n  sm: \"space-y-4\",\n  md: \"space-y-6\",\n  lg: \"space-y-8\",\n};\n\nconst sectionColumnsMap: Record<\n  NonNullable<FormSectionProps[\"columns\"]>,\n  string\n> = {\n  1: \"space-y-4\",\n  2: \"grid grid-cols-2 gap-4\",\n  3: \"grid grid-cols-3 gap-4\",\n};\n\nconst inputGroupMap: Record<NonNullable<InputGroupProps[\"columns\"]>, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-2\",\n  3: \"grid-cols-3\",\n  4: \"grid-cols-4\",\n};\n\nconst actionsAlignMap: Record<\n  NonNullable<FormActionsProps[\"align\"]>,\n  string\n> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst messageIntentMap: Record<\n  NonNullable<FormMessageProps[\"intent\"]>,\n  string\n> = {\n  default: \"text-ds-2\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n};\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Form = ({\n  title,\n  description,\n  gap = \"lg\",\n  children,\n  className = \"\",\n  ...props\n}: FormProps) => {\n  return (\n    <form\n      className={cx(\n        \"w-full space-y-6 rounded-lg border border-ds-border-2 bg-ds-surface-1 p-6\",\n        className,\n      )}\n      {...props}\n    >\n      {(title || description) && (\n        <div className=\"space-y-2\">\n          {title && (\n            <h2 className=\"text-xl font-semibold text-ds-1\">{title}</h2>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </div>\n      )}\n      <div className={gapClassMap[gap]}>{children}</div>\n    </form>\n  );\n};\n\nexport const FormSection = ({\n  title,\n  description,\n  columns = 1,\n  children,\n  className = \"\",\n}: FormSectionProps) => {\n  return (\n    <section className={cx(\"space-y-4\", className)}>\n      {(title || description) && (\n        <header className=\"space-y-1\">\n          {title && (\n            <h3 className=\"text-base font-medium text-ds-1\">{title}</h3>\n          )}\n          {description && <p className=\"text-sm text-ds-2\">{description}</p>}\n        </header>\n      )}\n      <div className={sectionColumnsMap[columns] || sectionColumnsMap[1]}>\n        {children}\n      </div>\n    </section>\n  );\n};\n\nexport const FormDescription = ({\n  children,\n  className = \"\",\n  id,\n}: FormDescriptionProps) => (\n  <p id={id} className={cx(\"text-sm text-ds-2\", className)}>\n    {children}\n  </p>\n);\n\nexport const FormMessage = ({\n  children,\n  intent = \"default\",\n  className = \"\",\n  id,\n}: FormMessageProps) => (\n  <p\n    id={id}\n    role={intent === \"error\" ? \"alert\" : \"status\"}\n    className={cx(\"text-sm\", messageIntentMap[intent], className)}\n  >\n    {children}\n  </p>\n);\n\nexport const FormField = ({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  helperAction,\n  layout = \"stacked\",\n  children,\n  className = \"\",\n}: FormFieldProps) => {\n  const autoId = useId();\n  const fieldId = sanitizeId(htmlFor ?? autoId);\n  const descriptionId = description ? `${fieldId}-description` : undefined;\n  const errorId = error ? `${fieldId}-error` : undefined;\n\n  const controls = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    const element = child as ReactElement<Record<string, unknown>>;\n    const currentDescribedBy = element.props?.[\"aria-describedby\"] as\n      | string\n      | undefined;\n    const describedBy = [currentDescribedBy, descriptionId, errorId]\n      .filter(Boolean)\n      .join(\" \")\n      .trim();\n\n    return cloneElement(element, {\n      id: element.props?.id ?? fieldId,\n      \"aria-describedby\": describedBy || undefined,\n      \"aria-invalid\": element.props?.[\"aria-invalid\"] ?? Boolean(error),\n    });\n  });\n\n  const labelNode = (\n    <div className=\"flex items-center justify-between gap-2\">\n      <label htmlFor={fieldId} className=\"text-sm font-medium text-ds-1\">\n        {label}\n        {required && <span className=\"ms-1 text-destructive\">*</span>}\n      </label>\n      {helperAction && <div className=\"text-xs text-ds-2\">{helperAction}</div>}\n    </div>\n  );\n\n  if (layout === \"inline\") {\n    return (\n      <div className={cx(\"flex flex-wrap items-start gap-6\", className)}>\n        <div className=\"min-w-[200px] space-y-1\">\n          {labelNode}\n          {description && (\n            <FormDescription id={descriptionId}>{description}</FormDescription>\n          )}\n        </div>\n        <div className=\"flex-1 space-y-2\">\n          {controls}\n          {error && (\n            <FormMessage id={errorId} intent=\"error\">\n              {error}\n            </FormMessage>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(\"space-y-2\", className)}>\n      {labelNode}\n      {description && (\n        <FormDescription id={descriptionId}>{description}</FormDescription>\n      )}\n      <div className=\"space-y-2\">\n        {controls}\n        {error && (\n          <FormMessage id={errorId} intent=\"error\">\n            {error}\n          </FormMessage>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const FormActions = ({\n  children,\n  align = \"end\",\n  className = \"\",\n}: FormActionsProps) => (\n  <div\n    className={cx(\"flex flex-wrap gap-3\", actionsAlignMap[align], className)}\n  >\n    {children}\n  </div>\n);\n\nexport const InputGroup = ({\n  columns = 2,\n  children,\n  className = \"\",\n}: InputGroupProps) => (\n  <div className={cx(\"grid gap-4\", inputGroupMap[columns], className)}>\n    {children}\n  </div>\n);\n"],"mappings":"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"}

package/dist/chunks/{input-BvTrWtRn.mjs → input-Bqo9Q5zF.mjs}

@@ -1,4 +1,6 @@
 import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { u as InfoCircleIcon } from "./icons-bx3nrxNv.mjs";
+import { t as Tooltip } from "./Tooltip-DK3B879v.mjs";
 import { forwardRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -12,7 +14,7 @@ var InputState = /* @__PURE__ */ function(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-ds-surface-1", ...props }, ref) => {
+var Input = forwardRef(({ className = "", label, labelTooltip, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, required, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
 	const radius = 100;
 	const [visible, setVisible] = useState(false);
 	const mouseX = useMotionValue(0);
@@ -28,25 +30,43 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 	};
 	const wrapperStateStyles = {
 		[InputState.DISABLED]: "border border-ds-border-field bg-ds-surface-1",
-		[InputState.ERROR]: "border-destructive ",
-		[InputState.SUCCESS]: "border-success-border ",
-		[InputState.DEFAULT]: "border-ds-border-2 "
+		[InputState.ERROR]: "border-ds-state-danger",
+		[InputState.SUCCESS]: "border-ds-state-success",
+		[InputState.DEFAULT]: "border-ds-border-2"
 	};
 	const inputStateStyles = {
 		[InputState.DISABLED]: "border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60",
-		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
-		[InputState.SUCCESS]: "text-success placeholder:text-success",
-		[InputState.DEFAULT]: "text-ds-1"
+		[InputState.ERROR]: "border-ds-state-danger! text-ds-1",
+		[InputState.SUCCESS]: "border-ds-state-success! text-ds-1",
+		[InputState.DEFAULT]: "border-ds-border-field text-ds-1"
 	};
 	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", {
+				children: [label ? /* @__PURE__ */ jsxs("label", {
 					htmlFor: id,
-					className: "block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-					children: label
+					className: "inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: [
+						label,
+						required && /* @__PURE__ */ jsx("sup", {
+							className: "ms-0.5 text-ds-state-danger",
+							children: "*"
+						}),
+						labelTooltip && /* @__PURE__ */ jsx(Tooltip, {
+							content: labelTooltip,
+							position: "top",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "cursor-help text-ds-3 hover:text-ds-2 transition-colors",
+								children: /* @__PURE__ */ jsx(InfoCircleIcon, {
+									width: 14,
+									height: 14,
+									color: "currentColor"
+								})
+							})
+						})
+					]
 				}) : null, labelHint ? /* @__PURE__ */ jsx("div", {
 					className: "shrink-0 text-xs text-ds-2",
 					children: labelHint
@@ -88,6 +108,7 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 							id,
 							placeholder,
 							disabled: isDisabled,
+							required,
 							className: mergeClassNames("flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", bgClassName, inputStateStyles[resolvedState], className),
 							style: {
 								paddingInlineStart: leftIcon ? "2.5rem" : "0.75rem",
@@ -100,7 +121,7 @@ var Input = forwardRef(({ className = "", label, labelHint, error, helperText, i
 				})
 			}),
 			(error || message) && /* @__PURE__ */ jsx("p", {
-				className: mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-ds-2"),
+				className: mergeClassNames("text-sm font-medium mt-1", error ? "text-ds-state-danger" : "text-ds-2"),
 				children: error || message
 			}),
 			helperText && !error && !message && /* @__PURE__ */ jsx("p", {
@@ -114,4 +135,4 @@ Input.displayName = "Input";
 //#endregion
 export { InputState as n, Input as t };
 
-//# sourceMappingURL=input-BvTrWtRn.mjs.map
+//# sourceMappingURL=input-Bqo9Q5zF.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-Bqo9Q5zF.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  /** Text shown in a tooltip on the info icon next to the label. */\n  labelTooltip?: 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 (e.g. \"ui:bg-ds-surface-1\"). */\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\";\nimport { Tooltip } from \"../../overlays/tooltip/Tooltip\";\nimport { InfoCircleIcon } from \"../../icons\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelTooltip,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      required,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-ds-surface-1\",\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-ds-border-field bg-ds-surface-1\",\n      [InputState.ERROR]: \"border-ds-state-danger\",\n      [InputState.SUCCESS]: \"border-ds-state-success\",\n      [InputState.DEFAULT]: \"border-ds-border-2\",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n      [InputState.ERROR]: \"border-ds-state-danger! text-ds-1\",\n      [InputState.SUCCESS]: \"border-ds-state-success! text-ds-1\",\n      [InputState.DEFAULT]: \"border-ds-border-field text-ds-1\",\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=\"inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n                {required && (\n                  <sup className=\"ms-0.5 text-ds-state-danger\">*</sup>\n                )}\n                {labelTooltip && (\n                  <Tooltip content={labelTooltip} position=\"top\">\n                    <span className=\"cursor-help text-ds-3 hover:text-ds-2 transition-colors\">\n                      <InfoCircleIcon width={14} height={14} color=\"currentColor\" />\n                    </span>\n                  </Tooltip>\n                )}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</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-ds-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 flex items-center text-ds-2\",\n                  leftIconClassName,\n                )}\n                style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  trailingIconClassName,\n                )}\n                style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              required={required}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              style={{\n                paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n                paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\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-ds-state-danger\" : \"text-ds-2\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}

package/dist/chunks/{input-wAznik-_.cjs → input-DkCPyWXi.cjs}

@@ -1,5 +1,7 @@
 require("./chunk-B_GkZjkl.cjs");
 const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+const require_Tooltip = require("./Tooltip-DD30yj3A.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -13,7 +15,7 @@ var InputState = /* @__PURE__ */ function(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-ds-surface-1", ...props }, ref) => {
+var Input = (0, react.forwardRef)(({ className = "", label, labelTooltip, labelHint, error, helperText, id, extra, placeholder, state = InputState.DEFAULT, disabled, required, message, leftIcon, leftIconClassName, rightIcon, rightIconClassName, icon, iconClassName, bgClassName = "bg-ds-surface-1", ...props }, ref) => {
 	const radius = 100;
 	const [visible, setVisible] = (0, react.useState)(false);
 	const mouseX = (0, framer_motion.useMotionValue)(0);
@@ -29,25 +31,43 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 	};
 	const wrapperStateStyles = {
 		[InputState.DISABLED]: "border border-ds-border-field bg-ds-surface-1",
-		[InputState.ERROR]: "border-destructive ",
-		[InputState.SUCCESS]: "border-success-border ",
-		[InputState.DEFAULT]: "border-ds-border-2 "
+		[InputState.ERROR]: "border-ds-state-danger",
+		[InputState.SUCCESS]: "border-ds-state-success",
+		[InputState.DEFAULT]: "border-ds-border-2"
 	};
 	const inputStateStyles = {
 		[InputState.DISABLED]: "border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60",
-		[InputState.ERROR]: "text-destructive placeholder:text-destructive",
-		[InputState.SUCCESS]: "text-success placeholder:text-success",
-		[InputState.DEFAULT]: "text-ds-1"
+		[InputState.ERROR]: "border-ds-state-danger! text-ds-1",
+		[InputState.SUCCESS]: "border-ds-state-success! text-ds-1",
+		[InputState.DEFAULT]: "border-ds-border-field text-ds-1"
 	};
 	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", {
+				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					htmlFor: id,
-					className: "block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-					children: label
+					className: "inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+					children: [
+						label,
+						required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", {
+							className: "ms-0.5 text-ds-state-danger",
+							children: "*"
+						}),
+						labelTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							content: labelTooltip,
+							position: "top",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "cursor-help text-ds-3 hover:text-ds-2 transition-colors",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.InfoCircleIcon, {
+									width: 14,
+									height: 14,
+									color: "currentColor"
+								})
+							})
+						})
+					]
 				}) : null, labelHint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "shrink-0 text-xs text-ds-2",
 					children: labelHint
@@ -89,6 +109,7 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 							id,
 							placeholder,
 							disabled: isDisabled,
+							required,
 							className: require_utils.mergeClassNames("flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", bgClassName, inputStateStyles[resolvedState], className),
 							style: {
 								paddingInlineStart: leftIcon ? "2.5rem" : "0.75rem",
@@ -101,7 +122,7 @@ var Input = (0, react.forwardRef)(({ className = "", label, labelHint, error, he
 				})
 			}),
 			(error || message) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: require_utils.mergeClassNames("text-sm font-medium mt-1", error ? "text-destructive" : "text-ds-2"),
+				className: require_utils.mergeClassNames("text-sm font-medium mt-1", error ? "text-ds-state-danger" : "text-ds-2"),
 				children: error || message
 			}),
 			helperText && !error && !message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -126,4 +147,4 @@ Object.defineProperty(exports, "InputState", {
 	}
 });
 
-//# sourceMappingURL=input-wAznik-_.cjs.map
+//# sourceMappingURL=input-DkCPyWXi.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-DkCPyWXi.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  /** Text shown in a tooltip on the info icon next to the label. */\n  labelTooltip?: 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 (e.g. \"ui:bg-ds-surface-1\"). */\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\";\nimport { Tooltip } from \"../../overlays/tooltip/Tooltip\";\nimport { InfoCircleIcon } from \"../../icons\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      label,\n      labelTooltip,\n      labelHint,\n      error,\n      helperText,\n      id,\n      extra,\n      placeholder,\n      state = InputState.DEFAULT,\n      disabled,\n      required,\n      message,\n      leftIcon,\n      leftIconClassName,\n      rightIcon,\n      rightIconClassName,\n      icon,\n      iconClassName,\n      bgClassName = \"bg-ds-surface-1\",\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-ds-border-field bg-ds-surface-1\",\n      [InputState.ERROR]: \"border-ds-state-danger\",\n      [InputState.SUCCESS]: \"border-ds-state-success\",\n      [InputState.DEFAULT]: \"border-ds-border-2\",\n    };\n\n    const inputStateStyles: Record<InputState, string> = {\n      [InputState.DISABLED]:\n        \"border-transparent bg-transparent text-ds-2 placeholder:!text-ds-3 placeholder:opacity-60\",\n      [InputState.ERROR]: \"border-ds-state-danger! text-ds-1\",\n      [InputState.SUCCESS]: \"border-ds-state-success! text-ds-1\",\n      [InputState.DEFAULT]: \"border-ds-border-field text-ds-1\",\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=\"inline-flex items-center gap-1.5 text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                {label}\n                {required && (\n                  <sup className=\"ms-0.5 text-ds-state-danger\">*</sup>\n                )}\n                {labelTooltip && (\n                  <Tooltip content={labelTooltip} position=\"top\">\n                    <span className=\"cursor-help text-ds-3 hover:text-ds-2 transition-colors\">\n                      <InfoCircleIcon width={14} height={14} color=\"currentColor\" />\n                    </span>\n                  </Tooltip>\n                )}\n              </label>\n            ) : null}\n            {labelHint ? (\n              <div className=\"shrink-0 text-xs text-ds-2\">{labelHint}</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-ds-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 flex items-center text-ds-2\",\n                  leftIconClassName,\n                )}\n                style={{ insetInlineStart: 0, paddingInlineStart: \"0.75rem\" }}\n              >\n                {leftIcon}\n              </div>\n            ) : null}\n            {trailingIcon ? (\n              <div\n                className={mergeClassNames(\n                  \"pointer-events-none absolute inset-y-0 flex items-center text-ds-2\",\n                  trailingIconClassName,\n                )}\n                style={{ insetInlineEnd: 0, paddingInlineEnd: \"0.75rem\" }}\n              >\n                {trailingIcon}\n              </div>\n            ) : null}\n            <input\n              ref={ref}\n              id={id}\n              placeholder={placeholder}\n              disabled={isDisabled}\n              required={required}\n              className={mergeClassNames(\n                \"flex h-10 w-full rounded-md border border-ds-border-field py-2 text-sm text-ds-1 transition duration-400 ease-in-out file:border-0 file:text-sm file:font-medium placeholder:text-ds-3 placeholder:opacity-70 focus-visible:ring-1 focus-visible:ring-ds-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n                bgClassName,\n                inputStateStyles[resolvedState],\n                className,\n              )}\n              style={{\n                paddingInlineStart: leftIcon ? \"2.5rem\" : \"0.75rem\",\n                paddingInlineEnd: trailingIcon ? \"2.5rem\" : \"0.75rem\",\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-ds-state-danger\" : \"text-ds-2\",\n            )}\n          >\n            {error || message}\n          </p>\n        )}\n        {helperText && !error && !message && (\n          <p className=\"text-sm text-ds-2 mt-1\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"],"mappings":"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"}

package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs}

@@ -15,7 +15,7 @@ var Label = (0, react.forwardRef)(({ className = "", children, required, ...prop
         `.trim().replace(/\s+/g, " "),
 		...props,
 		children: [children, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-destructive ml-1",
+			className: "text-destructive ms-1",
 			children: "*"
 		})]
 	});
@@ -29,4 +29,4 @@ Object.defineProperty(exports, "Label", {
 	}
 });
 
-//# sourceMappingURL=label-CxmbGh0l.cjs.map
+//# sourceMappingURL=label-BKzqfAAq.cjs.map

package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"label-CxmbGh0l.cjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ml-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;AAGA,IAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}
+{"version":3,"file":"label-BKzqfAAq.cjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className = \"\", children, required, ...props }, ref) => {\n    return (\n      <label\n        ref={ref}\n        className={`\n          text-sm\n          font-medium\n          leading-none\n          peer-disabled:cursor-not-allowed\n          peer-disabled:opacity-70\n          ${className}\n        `\n          .trim()\n          .replace(/\\s+/g, \" \")}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-destructive ms-1\">*</span>}\n      </label>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;AAGA,IAAa,SAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}