erp-pro-ui 0.2.6 → 0.2.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-BJQdFyqr.cjs","names":[],"sources":["../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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\";\nimport { mergeClassNames } from \"../../../utils\";\n\nimport type { DatePickerProps, DatePickerValue, DateRangeValue } from \"./types\";\n\n// ── Utilities ─────────────────────────────────────────────────────────────────\n\nfunction startOfDay(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n}\n\nconst SHORT_MONTHS = Array.from({ length: 12 }, (_, i) =>\n  new Date(2026, i, 1).toLocaleString(undefined, { month: \"short\" }),\n);\n\nfunction formatDate(d: Date | null) {\n  return d?.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\", year: \"numeric\" }) ?? \"\";\n}\n\nfunction parseDate(str: string): Date | null {\n  const trimmed = str.trim();\n  if (!trimmed) return null;\n  const d = new Date(trimmed);\n  return isNaN(d.getTime()) ? null : startOfDay(d);\n}\n\nconst isRangeValue = (v: DatePickerValue): v is DateRangeValue =>\n  typeof v === \"object\" && v !== null && \"start\" in v && \"end\" in v;\n\nconst emptyRange: DateRangeValue = { start: null, end: null };\n\n// ── Built-in range presets ────────────────────────────────────────────────────\n\ninterface BuiltInPreset {\n  label: string;\n  getValue: () => DateRangeValue;\n}\n\nconst RANGE_PRESETS: BuiltInPreset[] = [\n  {\n    label: \"Today\",\n    getValue() { const t = startOfDay(new Date()); return { start: t, end: t }; },\n  },\n  {\n    label: \"Yesterday\",\n    getValue() {\n      const d = startOfDay(new Date()); d.setDate(d.getDate() - 1);\n      return { start: d, end: d };\n    },\n  },\n  {\n    label: \"Last 7 days\",\n    getValue() {\n      const end = startOfDay(new Date());\n      const start = new Date(end); start.setDate(start.getDate() - 6);\n      return { start, end };\n    },\n  },\n  {\n    label: \"Last 30 days\",\n    getValue() {\n      const end = startOfDay(new Date());\n      const start = new Date(end); start.setDate(start.getDate() - 29);\n      return { start, end };\n    },\n  },\n  {\n    label: \"Last quarter\",\n    getValue() {\n      const now = new Date();\n      const q = Math.floor(now.getMonth() / 3);\n      const pq = q === 0 ? 3 : q - 1;\n      const pqYear = q === 0 ? now.getFullYear() - 1 : now.getFullYear();\n      return {\n        start: new Date(pqYear, pq * 3, 1),\n        end:   new Date(pqYear, pq * 3 + 3, 0),\n      };\n    },\n  },\n];\n\n// ── Class constant for Calendar rendered inside a panel (no own border/bg) ───\n\nconst INNER_CAL = \"w-auto max-w-none rounded-none border-0 bg-transparent p-0 shadow-none backdrop-blur-none\";\n\n// ── Panel positioning constants ───────────────────────────────────────────────\n\nconst PANEL_GAP = 8;\nconst VMARGIN   = 12;\n\n// ── DatePicker ────────────────────────────────────────────────────────────────\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 [isMobile,  setIsMobile]  = useState(false);\n  const [hoverDate, setHoverDate] = useState<Date | null>(null);\n\n  // Text inputs for direct date entry (range mode only)\n  const [startInput, setStartInput] = useState(\"\");\n  const [endInput,   setEndInput]   = useState(\"\");\n\n  // Dual-month nav state — left calendar, right = left+1\n  const todayDate = useMemo(() => new Date(), []);\n  const [leftMonth, setLeftMonth] = useState(todayDate.getMonth());\n  const [leftYear,  setLeftYear]  = useState(todayDate.getFullYear());\n\n  const rightDate  = new Date(leftYear, leftMonth + 1, 1);\n  const rightMonth = rightDate.getMonth();\n  const rightYear  = rightDate.getFullYear();\n\n  // Value state\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<DatePickerValue>(\n    value ?? (mode === \"range\" ? emptyRange : null),\n  );\n  const current     = isControlled ? value : internal;\n  const singleValue = mode === \"range\" ? null : (current as Date | null);\n  const rangeValue  = mode === \"range\" && isRangeValue(current) ? current : { ...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      if (rangeValue.start) return `${formatDate(rangeValue.start)} — …`;\n      return \"\";\n    }\n    return formatDate(singleValue);\n  }, [mode, rangeValue.start, rangeValue.end, singleValue]);\n\n  const hasSelection = mode === \"range\"\n    ? Boolean(rangeValue.start || rangeValue.end)\n    : Boolean(singleValue);\n\n  const updateValue = (next: DatePickerValue) => {\n    if (!isControlled) setInternal(next);\n    onChange?.(next);\n  };\n\n  // ── Side effects ─────────────────────────────────────────────────────────────\n\n  // Mobile detection\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mq = window.matchMedia(\"(max-width: 640px)\");\n    setIsMobile(mq.matches);\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, []);\n\n  // Sync text inputs with range value\n  useEffect(() => {\n    setStartInput(rangeValue.start ? formatDate(rangeValue.start) : \"\");\n    setEndInput(rangeValue.end   ? formatDate(rangeValue.end)   : \"\");\n  }, [rangeValue.start, rangeValue.end]);\n\n  // Close on outside click / focus\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef   = useRef<HTMLButtonElement>(null);\n  const panelRef     = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const inside = (event: Event) => {\n      const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n      return path.some(\n        (t) => t instanceof Node && (containerRef.current?.contains(t) || panelRef.current?.contains(t)),\n      );\n    };\n\n    const onPointer = (e: PointerEvent) => {\n      if ((e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target))) || inside(e)) return;\n      setOpen(false);\n    };\n    const onFocus = (e: FocusEvent) => {\n      if ((e.target instanceof Node && (containerRef.current?.contains(e.target) || panelRef.current?.contains(e.target))) || inside(e)) return;\n      setOpen(false);\n    };\n\n    if (open) {\n      document.addEventListener(\"pointerdown\", onPointer, true);\n      document.addEventListener(\"focusin\",     onFocus,   true);\n    }\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointer, true);\n      document.removeEventListener(\"focusin\",     onFocus,   true);\n    };\n  }, [open]);\n\n  // Panel positioning\n  const [panelPos, setPanelPos] = useState({ top: 0, left: 0, minWidth: 320 });\n\n  useEffect(() => {\n    if (!open) return;\n\n    const update = () => {\n      const tRect = triggerRef.current?.getBoundingClientRect();\n      if (!tRect) return;\n\n      const panelH = panelRef.current?.offsetHeight ?? 400;\n      const panelW = panelRef.current?.offsetWidth  ?? 320;\n      const spaceBelow = window.innerHeight - tRect.bottom;\n      const openAbove  = spaceBelow < panelH + PANEL_GAP && tRect.top > panelH + PANEL_GAP;\n\n      const maxLeft = Math.max(VMARGIN, window.innerWidth - panelW - VMARGIN);\n      const left    = Math.min(Math.max(tRect.left, VMARGIN), maxLeft);\n\n      setPanelPos({\n        top: openAbove\n          ? Math.max(VMARGIN, tRect.top - panelH - PANEL_GAP)\n          : Math.min(tRect.bottom + PANEL_GAP, window.innerHeight - panelH - VMARGIN),\n        left,\n        minWidth: Math.max(tRect.width, 320),\n      });\n    };\n\n    update();\n    const id = requestAnimationFrame(update);\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n    };\n  }, [open]);\n\n  // ── Motion ────────────────────────────────────────────────────────────────────\n\n  const mouseX  = useMotionValue(0);\n  const mouseY  = useMotionValue(0);\n  const motionBg = useMotionTemplate`radial-gradient(${visible ? \"100px\" : \"0px\"} circle at ${mouseX}px ${mouseY}px, var(--ds-color-accent), transparent 90%)`;\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const { left, top } = e.currentTarget.getBoundingClientRect();\n    mouseX.set(e.clientX - left);\n    mouseY.set(e.clientY - top);\n  };\n\n  // ── Handlers ─────────────────────────────────────────────────────────────────\n\n  const handleClear = () => {\n    if (disabled) return;\n    updateValue(mode === \"range\" ? { ...emptyRange } : null);\n    setOpen(false);\n  };\n\n  const handleRangeSelect = (next: DateRangeValue) => {\n    updateValue(next);\n    if (next.start && next.end) { setOpen(false); setHoverDate(null); }\n  };\n\n  const handlePreset = (p: BuiltInPreset) => {\n    updateValue(p.getValue());\n    setOpen(false);\n  };\n\n  const commitStartInput = () => {\n    const d = parseDate(startInput);\n    if (d) updateValue({ start: d, end: rangeValue.end });\n    else setStartInput(rangeValue.start ? formatDate(rangeValue.start) : \"\");\n  };\n\n  const commitEndInput = () => {\n    const d = parseDate(endInput);\n    if (d) {\n      updateValue({ start: rangeValue.start, end: d });\n      if (rangeValue.start && d) setOpen(false);\n    } else {\n      setEndInput(rangeValue.end ? formatDate(rangeValue.end) : \"\");\n    }\n  };\n\n  const panelKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"Escape\") { setOpen(false); triggerRef.current?.focus(); }\n    if (e.key === \"Enter\" && mode === \"range\" && rangeValue.start && rangeValue.end) {\n      setOpen(false); triggerRef.current?.focus();\n    }\n  };\n\n  const isPresetActive = (p: BuiltInPreset) => {\n    const r = p.getValue();\n    return (\n      rangeValue.start?.toDateString() === r.start?.toDateString() &&\n      rangeValue.end?.toDateString()   === r.end?.toDateString()\n    );\n  };\n\n  const presetBtn = (p: BuiltInPreset, compact = false) => (\n    <button\n      key={p.label}\n      type=\"button\"\n      onClick={() => handlePreset(p)}\n      className={mergeClassNames(\n        \"rounded-md text-left text-xs font-medium transition-colors\",\n        compact ? \"px-2 py-1.5\" : \"rounded-full border px-3 py-1\",\n        isPresetActive(p)\n          ? \"bg-ds-accent-subtle text-ds-accent\" + (compact ? \"\" : \" border-ds-accent\")\n          : compact\n            ? \"text-ds-2 hover:bg-ds-surface-2 hover:text-ds-1\"\n            : \"border-ds-border-2 bg-ds-surface-2 text-ds-2 hover:border-ds-border-accent hover:text-ds-1\",\n      )}\n    >\n      {p.label}\n    </button>\n  );\n\n  // ── Trigger ───────────────────────────────────────────────────────────────────\n\n  const trigger = (\n    <div ref={containerRef} className={mergeClassNames(\"w-full space-y-2\", className)}>\n      {label && <p className=\"text-sm font-medium text-ds-1\">{label}</p>}\n      <div className=\"relative\">\n        <motion.div\n          style={{ backgroundImage: disabled ? \"none\" : motionBg }}\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={mergeClassNames(\n                \"flex w-full items-center justify-between rounded-md border border-ds-border-field bg-ds-surface-1 px-3 py-2 text-sm transition duration-400 ease-in-out\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n              style={{ paddingInlineEnd: \"2.5rem\" }}\n              onClick={() => !disabled && setOpen((p) => !p)}\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={handleClear}\n                aria-label={mode === \"range\" ? \"Clear selected date range\" : \"Clear selected date\"}\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    </div>\n  );\n\n  // ── Mobile bottom sheet (range mode) ─────────────────────────────────────────\n\n  const mobileSheet =\n    isMobile && open && mode === \"range\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-50 flex flex-col\" role=\"dialog\" aria-modal=\"true\">\n            <div className=\"flex-1 bg-black/40\" onClick={() => setOpen(false)} />\n            <motion.div\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ type: \"spring\", damping: 30, stiffness: 300 }}\n              className=\"flex max-h-[90vh] flex-col rounded-t-2xl bg-ds-surface-1 shadow-2xl\"\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-5 pb-3 pt-5\">\n                <p className=\"text-base font-semibold text-ds-1\">Select date range</p>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"flex h-7 w-7 items-center justify-center rounded-full text-ds-3 hover:bg-ds-surface-2 hover:text-ds-1\"\n                  aria-label=\"Close\"\n                >\n                  <CloseIcon className=\"h-4 w-4\" />\n                </button>\n              </div>\n\n              {/* Preset chips */}\n              <div className=\"flex flex-wrap gap-2 px-5 pb-3\">\n                {RANGE_PRESETS.map((p) => presetBtn(p, false))}\n              </div>\n\n              {/* Scrollable months */}\n              <div className=\"flex-1 overflow-y-auto px-5 pb-4\">\n                {[0, 1, 2].map((offset) => {\n                  const d = new Date(todayDate.getFullYear(), todayDate.getMonth() + offset, 1);\n                  const m = d.getMonth();\n                  const y = d.getFullYear();\n                  return (\n                    <div key={`${m}-${y}`} className=\"mb-4\">\n                      <p className=\"mb-2 text-sm font-semibold text-ds-1\">\n                        {SHORT_MONTHS[m]} {y}\n                      </p>\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={m}\n                        year={y}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Footer buttons */}\n              <div className=\"flex gap-3 border-t border-ds-border-2 px-5 py-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => updateValue({ ...emptyRange })}\n                  className=\"flex-1 rounded-lg border border-ds-border-2 bg-ds-surface-2 py-2.5 text-sm font-medium text-ds-2 transition-colors hover:bg-ds-surface-3 hover:text-ds-1\"\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"flex-1 rounded-lg bg-ds-accent py-2.5 text-sm font-semibold text-ds-on-accent transition-opacity hover:opacity-90\"\n                >\n                  Apply\n                </button>\n              </div>\n            </motion.div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Desktop range panel ───────────────────────────────────────────────────────\n\n  const desktopRangePanel =\n    !isMobile && open && mode === \"range\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-60\">\n            <div className=\"absolute inset-0\" aria-hidden=\"true\" onPointerDown={() => setOpen(false)} />\n            <div\n              ref={panelRef}\n              className=\"dropdown-panel absolute z-10 overflow-hidden rounded-xl border border-ds-border-2 bg-ds-surface-1/95 shadow-xl backdrop-blur-xl\"\n              style={{ top: panelPos.top, left: panelPos.left }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              onKeyDown={panelKeyDown}\n              tabIndex={-1}\n            >\n              <div className=\"flex\">\n                {/* Preset sidebar */}\n                <div className=\"flex w-36 flex-col gap-0.5 border-r border-ds-border-2 p-2\">\n                  <p className=\"mb-1 px-2 text-[10px] font-semibold uppercase tracking-wider text-ds-3\">\n                    Quick select\n                  </p>\n                  {RANGE_PRESETS.map((p) => presetBtn(p, true))}\n                </div>\n\n                {/* Calendar area */}\n                <div className=\"p-4\">\n                  {/* Text inputs */}\n                  <div className=\"mb-3 flex items-center gap-2\">\n                    <input\n                      type=\"text\"\n                      value={startInput}\n                      onChange={(e) => setStartInput(e.target.value)}\n                      onBlur={commitStartInput}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\")  { e.stopPropagation(); commitStartInput(); }\n                        if (e.key === \"Escape\") setOpen(false);\n                      }}\n                      placeholder=\"Start date\"\n                      aria-label=\"Start date\"\n                      className=\"w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none\"\n                    />\n                    <span className=\"text-xs text-ds-3\">→</span>\n                    <input\n                      type=\"text\"\n                      value={endInput}\n                      onChange={(e) => setEndInput(e.target.value)}\n                      onBlur={commitEndInput}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\")  { e.stopPropagation(); commitEndInput(); }\n                        if (e.key === \"Escape\") setOpen(false);\n                      }}\n                      placeholder=\"End date\"\n                      aria-label=\"End date\"\n                      className=\"w-32 rounded-md border border-ds-border-field bg-ds-surface-1 px-2.5 py-1.5 text-xs text-ds-1 placeholder:text-ds-3 transition-colors focus:border-ds-border-accent focus:outline-none\"\n                    />\n                  </div>\n\n                  {/* Dual calendar */}\n                  <div>\n                    {/* Shared nav row */}\n                    <div className=\"mb-2 flex items-center justify-between\">\n                      <button\n                        type=\"button\"\n                        onClick={() => { const d = new Date(leftYear, leftMonth - 1, 1); setLeftMonth(d.getMonth()); setLeftYear(d.getFullYear()); }}\n                        className=\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n                        aria-label=\"Previous month\"\n                      >\n                        ←\n                      </button>\n                      <div className=\"flex flex-1 justify-around px-2\">\n                        <span className=\"text-sm font-semibold text-ds-1\">\n                          {SHORT_MONTHS[leftMonth]} {leftYear}\n                        </span>\n                        <span className=\"text-sm font-semibold text-ds-1\">\n                          {SHORT_MONTHS[rightMonth]} {rightYear}\n                        </span>\n                      </div>\n                      <button\n                        type=\"button\"\n                        onClick={() => { const d = new Date(leftYear, leftMonth + 1, 1); setLeftMonth(d.getMonth()); setLeftYear(d.getFullYear()); }}\n                        className=\"inline-flex h-7 w-7 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n                        aria-label=\"Next month\"\n                      >\n                        →\n                      </button>\n                    </div>\n\n                    {/* Two months side by side */}\n                    <div className=\"flex gap-5\">\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={leftMonth}\n                        year={leftYear}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                      <div className=\"w-px self-stretch bg-ds-border-2\" />\n                      <Calendar\n                        className={INNER_CAL}\n                        showNav={false}\n                        selectionMode=\"range\"\n                        month={rightMonth}\n                        year={rightYear}\n                        range={rangeValue}\n                        onRangeSelect={handleRangeSelect}\n                        hoverDate={hoverDate}\n                        onHoverDate={setHoverDate}\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Single-date panel (& mobile single) ──────────────────────────────────────\n\n  const singlePanel =\n    open && mode === \"single\" && !disabled && typeof document !== \"undefined\"\n      ? createPortal(\n          <div className=\"fixed inset-0 z-60\">\n            <div className=\"absolute inset-0\" aria-hidden=\"true\" onPointerDown={() => setOpen(false)} />\n            <div\n              ref={panelRef}\n              className=\"dropdown-panel absolute z-10\"\n              style={{ top: panelPos.top, left: panelPos.left, minWidth: panelPos.minWidth }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              onKeyDown={panelKeyDown}\n            >\n              <Calendar\n                value={singleValue ?? null}\n                selectionMode=\"single\"\n                onSelect={(date) => { updateValue(date); setOpen(false); }}\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((p) => (\n                    <button\n                      key={p.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={() => { updateValue(p.value()); setOpen(false); }}\n                    >\n                      {p.label}\n                    </button>\n                  ))}\n                </div>\n              ) : null}\n            </div>\n          </div>,\n          document.body,\n        )\n      : null;\n\n  // ── Render ────────────────────────────────────────────────────────────────────\n\n  return (\n    <>\n      {trigger}\n      {mobileSheet}\n      {desktopRangePanel}\n      {singlePanel}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/chunks/{dialog-B60BjJz0.mjs → dialog-BHIeG3Sg.mjs}

@@ -1,5 +1,5 @@
-import { K as CloseIcon, _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, o as QuestionCircleIcon, u as InfoCircleIcon, v as AlertCircleIcon } from "./icons-JzMKLygv.mjs";
-import { t as useOverlayEffects } from "./overlay-CG1dMYtO.mjs";
+import { _ as AlertTriangleIcon, h as CheckCircleIcon, l as LoaderIcon, o as QuestionCircleIcon, q as CloseIcon, u as InfoCircleIcon, v as AlertCircleIcon } from "./icons-CkVHNbbN.mjs";
+import { t as useOverlayEffects } from "./overlay-BMbhF-EC.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
@@ -390,4 +390,4 @@ var Dialog = ({ open, onOpenChange, title, description, children, footer, closeO
 //#endregion
 export { Dialog as t };
 
-//# sourceMappingURL=dialog-B60BjJz0.mjs.map
+//# sourceMappingURL=dialog-BHIeG3Sg.mjs.map

package/dist/chunks/{dialog-B60BjJz0.mjs.map → dialog-BHIeG3Sg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-B60BjJz0.mjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog-BHIeG3Sg.mjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}

package/dist/chunks/{dialog-i9LdkXmF.cjs → dialog-CLKU0cXX.cjs}

@@ -1,6 +1,5 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-ub9iu-JG.cjs");
-const require_overlay = require("./overlay-DzE_GyYf.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
+const require_overlay = require("./overlay-15EzdrIu.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -396,4 +395,4 @@ Object.defineProperty(exports, "Dialog", {
 	}
 });
 
-//# sourceMappingURL=dialog-i9LdkXmF.cjs.map
+//# sourceMappingURL=dialog-CLKU0cXX.cjs.map

package/dist/chunks/{dialog-i9LdkXmF.cjs.map → dialog-CLKU0cXX.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-i9LdkXmF.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog-CLKU0cXX.cjs","names":[],"sources":["../../src/components/overlays/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  motion,\n  AnimatePresence,\n  type TargetAndTransition,\n} from \"framer-motion\";\nimport {\n  AlertCircleIcon,\n  AlertTriangleIcon,\n  CheckCircleIcon,\n  CloseIcon,\n  InfoCircleIcon,\n  LoaderIcon,\n  QuestionCircleIcon,\n} from \"../../icons\";\nimport type {\n  DialogProps,\n  DialogVariant,\n  DialogAnimation,\n  DialogPreset,\n} from \"./types\";\nexport type { DialogProps, DialogVariant, DialogAnimation, DialogPreset };\nimport { useOverlayEffects } from \"../../shared/overlay\";\n\n// Animation preset type\ninterface AnimationPreset {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n}\n\n// Animation presets for different entrance/exit effects\nconst animationVariants: Record<DialogAnimation, AnimationPreset> = {\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.9, y: 20 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.95, y: 10 },\n  },\n  slideUp: {\n    initial: { opacity: 0, y: 100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n  },\n  slideDown: {\n    initial: { opacity: 0, y: -100 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: -50 },\n  },\n  slideLeft: {\n    initial: { opacity: 0, x: 100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: 50 },\n  },\n  slideRight: {\n    initial: { opacity: 0, x: -100 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -50 },\n  },\n  elastic: {\n    initial: { opacity: 0, scale: 0.5, y: 50 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.8, y: 20 },\n  },\n  bounce: {\n    initial: { opacity: 0, scale: 0.3, y: -100 },\n    animate: { opacity: 1, scale: 1, y: 0 },\n    exit: { opacity: 0, scale: 0.5, y: -50 },\n  },\n  flip: {\n    initial: { opacity: 0, rotateX: -90, scale: 0.9 },\n    animate: { opacity: 1, rotateX: 0, scale: 1 },\n    exit: { opacity: 0, rotateX: 90, scale: 0.9 },\n  },\n  zoom: {\n    initial: { opacity: 0, scale: 0, rotate: -10 },\n    animate: { opacity: 1, scale: 1, rotate: 0 },\n    exit: { opacity: 0, scale: 0.5, rotate: 5 },\n  },\n};\n\n// Transition configs for each animation type\nconst animationTransitions: Record<DialogAnimation, object> = {\n  fade: { duration: 0.2 },\n  scale: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideUp: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideDown: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideLeft: { type: \"spring\", damping: 25, stiffness: 300 },\n  slideRight: { type: \"spring\", damping: 25, stiffness: 300 },\n  elastic: { type: \"spring\", damping: 10, stiffness: 100 },\n  bounce: { type: \"spring\", damping: 8, stiffness: 200, bounce: 0.5 },\n  flip: { type: \"spring\", damping: 15, stiffness: 150 },\n  zoom: { type: \"spring\", damping: 20, stiffness: 200 },\n};\n\n// Crystal glass panel base styling\nconst basePanel = `\n  relative w-full max-w-lg rounded-2xl overflow-hidden\n  border border-ds-border-2\n  backdrop-blur-2xl backdrop-saturate-150\n  bg-ds-surface-1/95\n  p-6\n  shadow-[0_8px_32px_rgba(0,0,0,0.12),0_2px_8px_rgba(0,0,0,0.08)]\n  ring-1 ring-inset ring-ds-border-3/40\n`;\n\n// Variant accent colors for icons and confirm buttons\nconst variantStyles: Record<\n  DialogVariant,\n  { icon: string; button: string; iconColor: string }\n> = {\n  default: {\n    icon: \"bg-ds-accent-subtle\",\n    button: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent\",\n    iconColor: \"text-ds-1\",\n  },\n  destructive: {\n    icon: \"bg-ds-state-error-surface\",\n    button: \"bg-ds-state-danger hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-error-text\",\n  },\n  success: {\n    icon: \"bg-ds-state-success-surface\",\n    button: \"bg-ds-state-success hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-success-text\",\n  },\n  warning: {\n    icon: \"bg-ds-state-warning-surface\",\n    button: \"bg-ds-state-warning hover:opacity-90 text-ds-1\",\n    iconColor: \"text-ds-state-warning-text\",\n  },\n  info: {\n    icon: \"bg-ds-state-info-surface\",\n    button: \"bg-ds-state-info hover:opacity-90 text-ds-on-accent\",\n    iconColor: \"text-ds-state-info-text\",\n  },\n};\n\n// Default icons per variant\nconst VariantIcon = ({ variant }: { variant: DialogVariant }): ReactElement => {\n  const icons: Record<DialogVariant, ReactElement> = {\n    default: <QuestionCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    destructive: <AlertTriangleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    success: <CheckCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    warning: <AlertCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n    info: <InfoCircleIcon className=\"w-6 h-6\" aria-hidden=\"true\" />,\n  };\n  return icons[variant];\n};\n\n// Loading spinner\nconst Spinner = () => (\n  <LoaderIcon className=\"animate-spin w-4 h-4\" aria-hidden=\"true\" />\n);\n\nconst DIALOG_ROOT_Z_INDEX = 2147483000;\n\nexport const Dialog = ({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  closeOnOverlay = true,\n  showClose = true,\n  className = \"\",\n  widthClassName = \"\",\n  variant = \"default\",\n  preset = \"custom\",\n  confirmLabel = \"OK\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  loading = false,\n  icon,\n  animation = \"scale\",\n}: DialogProps) => {\n  const currentAnimation = animationVariants[animation];\n  const currentTransition = animationTransitions[animation];\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  useOverlayEffects(panelRef, open);\n\n  useEffect(() => {\n    if (!open || typeof window === \"undefined\") return;\n    const handleKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange?.(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKey);\n    return () => window.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlay) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    if (!loading) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const styles = variantStyles[variant];\n  const showPresetButtons = preset !== \"custom\" && !footer;\n  const showCancelButton = preset === \"confirm\";\n\n  // Render preset buttons\n  const renderFooter = () => {\n    if (footer) return footer;\n    if (!showPresetButtons) return null;\n\n    return (\n      <div className=\"flex gap-3 justify-end w-full\">\n        {showCancelButton && (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={loading}\n            className=\"inline-flex items-center justify-center gap-2 cursor-pointer\n              py-2.5 px-4 text-sm font-semibold leading-none\n              rounded-lg transition-all duration-200\n              bg-ds-surface-2 border border-ds-border-2 text-ds-1\n              shadow-sm hover:bg-ds-surface-3\n              active:scale-95 hover:opacity-90\n              disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {cancelLabel}\n          </button>\n        )}\n        <button\n          type=\"button\"\n          onClick={handleConfirm}\n          disabled={loading}\n          className={`inline-flex items-center justify-center gap-2 cursor-pointer\n            py-2.5 px-4 text-sm font-semibold leading-none\n            rounded-lg transition-all duration-200\n            shadow-md hover:shadow-lg\n            active:scale-95 hover:opacity-90\n            disabled:opacity-50 disabled:cursor-not-allowed ${styles.button}`}\n        >\n          {loading && <Spinner />}\n          {confirmLabel}\n        </button>\n      </div>\n    );\n  };\n\n  const dialogNode = (\n    <AnimatePresence>\n      {open && (\n        <div\n          className=\"fixed inset-0 flex items-center justify-center px-4 overlay-backdrop\"\n          style={{ zIndex: DIALOG_ROOT_Z_INDEX }}\n          role=\"presentation\"\n        >\n          {/* Backdrop with blur */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"fixed inset-0 bg-black/30 backdrop-blur-sm\"\n            onClick={handleOverlayClick}\n          />\n\n          {/* Crystal panel */}\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className={`${basePanel} overlay-panel ${className} ${widthClassName}`.trim()}\n            tabIndex={-1}\n            ref={panelRef}\n            onClick={(event) => event.stopPropagation()}\n            initial={currentAnimation.initial}\n            animate={currentAnimation.animate}\n            exit={currentAnimation.exit}\n            transition={currentTransition}\n          >\n            {/* Subtle gradient overlay for crystal effect */}\n            <div className=\"pointer-events-none absolute inset-0 rounded-2xl bg-linear-to-tr from-ds-accent/8 via-transparent to-ds-accent/4\" />\n\n            {/* Close button */}\n            {showClose && (\n              <button\n                type=\"button\"\n                className=\"absolute right-4 top-4 z-10 w-8 h-8 flex items-center justify-center\n                  rounded-full transition-all duration-200\n                  text-ds-2 hover:text-ds-1 hover:bg-ds-surface-2\"\n                aria-label=\"Close dialog\"\n                onClick={() => onOpenChange?.(false)}\n              >\n                <CloseIcon className=\"w-4 h-4\" aria-hidden=\"true\" />\n              </button>\n            )}\n\n            {/* Content */}\n            <div className=\"relative flex gap-4\">\n              {/* Icon */}\n              {preset !== \"custom\" && (\n                <div\n                  className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${styles.icon}`}\n                >\n                  <span className={styles.iconColor}>\n                    {icon || <VariantIcon variant={variant} />}\n                  </span>\n                </div>\n              )}\n\n              {/* Text content */}\n              <div className=\"flex-1 min-w-0\">\n                {title && (\n                  <h2 className=\"pr-8 text-lg font-semibold text-ds-1\">\n                    {title}\n                  </h2>\n                )}\n                {description && (\n                  <p className=\"mt-1 text-sm leading-relaxed text-ds-2\">\n                    {description}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            {/* Children content */}\n            {children && (\n              <div className=\"mt-4 space-y-4 relative\">{children}</div>\n            )}\n\n            {/* Footer */}\n            {(footer || showPresetButtons) && (\n              <footer className=\"mt-6 flex justify-end gap-3 relative\">\n                {renderFooter()}\n              </footer>\n            )}\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  if (typeof document === \"undefined\") {\n    return dialogNode;\n  }\n\n  return createPortal(dialogNode, document.body);\n};\n"],"mappings":";;;;;;;AAiCA,IAAM,oBAA8D;CAClE,MAAM;EACJ,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,EAAE;EACtB,MAAM,EAAE,SAAS,EAAE;CACrB;CACA,OAAO;EACL,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;EAAG;EACzC,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;EAAE;EACtC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAM,GAAG;EAAG;CACzC;CACA,SAAS;EACP,SAAS;GAAE,SAAS;GAAG,GAAG;EAAI;EAC9B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAG;CAC5B;CACA,WAAW;EACT,SAAS;GAAE,SAAS;GAAG,GAAG;EAAK;EAC/B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAI;CAC7B;CACA,WAAW;EACT,SAAS;GAAE,SAAS;GAAG,GAAG;EAAI;EAC9B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAG;CAC5B;CACA,YAAY;EACV,SAAS;GAAE,SAAS;GAAG,GAAG;EAAK;EAC/B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAI;CAC7B;CACA,SAAS;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;EAAG;EACzC,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;EAAE;EACtC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;EAAG;CACxC;CACA,QAAQ;EACN,SAAS;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;EAAK;EAC3C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,GAAG;EAAE;EACtC,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,GAAG;EAAI;CACzC;CACA,MAAM;EACJ,SAAS;GAAE,SAAS;GAAG,SAAS;GAAK,OAAO;EAAI;EAChD,SAAS;GAAE,SAAS;GAAG,SAAS;GAAG,OAAO;EAAE;EAC5C,MAAM;GAAE,SAAS;GAAG,SAAS;GAAI,OAAO;EAAI;CAC9C;CACA,MAAM;EACJ,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,QAAQ;EAAI;EAC7C,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG,QAAQ;EAAE;EAC3C,MAAM;GAAE,SAAS;GAAG,OAAO;GAAK,QAAQ;EAAE;CAC5C;AACF;AAGA,IAAM,uBAAwD;CAC5D,MAAM,EAAE,UAAU,GAAI;CACtB,OAAO;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACrD,SAAS;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACvD,WAAW;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACzD,WAAW;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACzD,YAAY;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CAC1D,SAAS;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACvD,QAAQ;EAAE,MAAM;EAAU,SAAS;EAAG,WAAW;EAAK,QAAQ;CAAI;CAClE,MAAM;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;CACpD,MAAM;EAAE,MAAM;EAAU,SAAS;EAAI,WAAW;CAAI;AACtD;AAGA,IAAM,YAAY;;;;;;;;;AAWlB,IAAM,gBAGF;CACF,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;CACb;CACA,aAAa;EACX,MAAM;EACN,QAAQ;EACR,WAAW;CACb;CACA,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;CACb;CACA,SAAS;EACP,MAAM;EACN,QAAQ;EACR,WAAW;CACb;CACA,MAAM;EACJ,MAAM;EACN,QAAQ;EACR,WAAW;CACb;AACF;AAGA,IAAM,eAAe,EAAE,cAAwD;CAQ7E,OAAO;EANL,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,oBAAD;GAAoB,WAAU;GAAU,eAAY;EAAQ,CAAA;EACrE,aAAa,iBAAA,GAAA,kBAAA,KAAC,cAAA,mBAAD;GAAmB,WAAU;GAAU,eAAY;EAAQ,CAAA;EACxE,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;GAAiB,WAAU;GAAU,eAAY;EAAQ,CAAA;EAClE,SAAS,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;GAAiB,WAAU;GAAU,eAAY;EAAQ,CAAA;EAClE,MAAM,iBAAA,GAAA,kBAAA,KAAC,cAAA,gBAAD;GAAgB,WAAU;GAAU,eAAY;EAAQ,CAAA;CAEzD,EAAM;AACf;AAGA,IAAM,gBACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,YAAD;CAAY,WAAU;CAAuB,eAAY;AAAQ,CAAA;AAGnE,IAAM,sBAAsB;AAE5B,IAAa,UAAU,EACrB,MACA,cACA,OACA,aACA,UACA,QACA,iBAAiB,MACjB,YAAY,MACZ,YAAY,IACZ,iBAAiB,IACjB,UAAU,WACV,SAAS,UACT,eAAe,MACf,cAAc,UACd,WACA,UACA,UAAU,OACV,MACA,YAAY,cACK;CACjB,MAAM,mBAAmB,kBAAkB;CAC3C,MAAM,oBAAoB,qBAAqB;CAC/C,MAAM,YAAA,GAAA,MAAA,QAAyC,IAAI;CACnD,gBAAA,kBAAkB,UAAU,IAAI;CAEhC,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,QAAQ,OAAO,WAAW,aAAa;EAC5C,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAChB,eAAe,KAAK;EAExB;EACA,OAAO,iBAAiB,WAAW,SAAS;EAC5C,aAAa,OAAO,oBAAoB,WAAW,SAAS;CAC9D,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,MAAM,2BAA2B;EAC/B,IAAI,gBACF,eAAe,KAAK;CAExB;CAEA,MAAM,qBAAqB;EACzB,WAAW;EACX,eAAe,KAAK;CACtB;CAEA,MAAM,sBAAsB;EAC1B,YAAY;EACZ,IAAI,CAAC,SACH,eAAe,KAAK;CAExB;CAEA,MAAM,SAAS,cAAc;CAC7B,MAAM,oBAAoB,WAAW,YAAY,CAAC;CAClD,MAAM,mBAAmB,WAAW;CAGpC,MAAM,qBAAqB;EACzB,IAAI,QAAQ,OAAO;EACnB,IAAI,CAAC,mBAAmB,OAAO;EAE/B,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACG,oBACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAU;cAQT;GACK,CAAA,GAEV,iBAAA,GAAA,kBAAA,MAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,UAAU;IACV,WAAW;;;;;8DAKyC,OAAO;cAT7D,CAWG,WAAW,iBAAA,GAAA,kBAAA,KAAC,SAAD,CAAU,CAAA,GACrB,YACK;KACL;;CAET;CAEA,MAAM,aACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD,EAAA,UACG,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,QAAQ,oBAAoB;EACrC,MAAK;YAHP,CAME,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,EAAE;GACtB,SAAS,EAAE,SAAS,EAAE;GACtB,MAAM,EAAE,SAAS,EAAE;GACnB,YAAY,EAAE,UAAU,GAAI;GAC5B,WAAU;GACV,SAAS;EACV,CAAA,GAGD,iBAAA,GAAA,kBAAA,MAAC,cAAA,OAAO,KAAR;GACE,MAAK;GACL,cAAW;GACX,cAAY;GACZ,WAAW,GAAG,UAAU,iBAAiB,UAAU,GAAG,iBAAiB,KAAK;GAC5E,UAAU;GACV,KAAK;GACL,UAAU,UAAU,MAAM,gBAAgB;GAC1C,SAAS,iBAAiB;GAC1B,SAAS,iBAAiB;GAC1B,MAAM,iBAAiB;GACvB,YAAY;aAXd;IAcE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mHAAoH,CAAA;IAGlI,aACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,MAAK;KACL,WAAU;KAGV,cAAW;KACX,eAAe,eAAe,KAAK;eAEnC,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;MAAW,WAAU;MAAU,eAAY;KAAQ,CAAA;IAC7C,CAAA;IAIV,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CAEG,WAAW,YACV,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAW,oEAAoE,OAAO;gBAEtF,iBAAA,GAAA,kBAAA,KAAC,QAAD;OAAM,WAAW,OAAO;iBACrB,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAsB,QAAU,CAAA;MACrC,CAAA;KACH,CAAA,GAIP,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;OAAI,WAAU;iBACX;MACC,CAAA,GAEL,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBACV;MACA,CAAA,CAEF;OACF;;IAGJ,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;KAA2B;IAAc,CAAA;KAIxD,UAAU,sBACV,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAAQ,WAAU;eACf,aAAa;IACR,CAAA;GAEA;IACT;IAEQ,CAAA;CAGnB,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,QAAA,GAAA,UAAA,cAAoB,YAAY,SAAS,IAAI;AAC/C"}

package/dist/chunks/draggable-grid-2L_eHKfp.cjs

@@ -0,0 +1,245 @@
+const require_button = require("./button-D2ZYmVda.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _dnd_kit_core = require("@dnd-kit/core");
+let _dnd_kit_sortable = require("@dnd-kit/sortable");
+let _dnd_kit_utilities = require("@dnd-kit/utilities");
+//#region src/components/layout/draggable-grid/DraggableGrid.tsx
+var sizeClasses = {
+	small: "w-full md:w-[calc(50%-12px)] 2xl:w-[calc(25%-12px)] min-h-[360px]",
+	medium: "w-full xl:w-[calc(50%-12px)] min-h-[420px]",
+	large: "w-full min-h-[560px]"
+};
+var SIZE_CHIPS = [
+	{
+		key: "small",
+		label: "S"
+	},
+	{
+		key: "medium",
+		label: "M"
+	},
+	{
+		key: "large",
+		label: "L"
+	}
+];
+function Shell({ title, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "bg-ds-surface-1 border border-ds-border-2 rounded-md p-4 h-full w-full flex flex-col overflow-hidden",
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "font-semibold text-base truncate text-ds-1 mb-4",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex-1 min-h-0",
+			children
+		})]
+	});
+}
+function DragHandleIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "9",
+				cy: "5",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "15",
+				cy: "5",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "9",
+				cy: "12",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "15",
+				cy: "12",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "9",
+				cy: "19",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "15",
+				cy: "19",
+				r: "1.5"
+			})
+		]
+	});
+}
+function SortableItem({ item, size, editMode, showItemMenu, onSizeChange }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, _dnd_kit_sortable.useSortable)({ id: item.id });
+	const style = {
+		transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .35 : 1
+	};
+	const content = item.variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shell, {
+		title: item.title,
+		children: item.component
+	}) : item.component;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: setNodeRef,
+		style,
+		className: `relative flex-none ${sizeClasses[size]}`,
+		children: [editMode && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "absolute top-2 right-2 z-10 flex items-center gap-1",
+			children: [showItemMenu && SIZE_CHIPS.map(({ key, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				variant: size === key ? "primary" : "secondary",
+				size: "small",
+				onClick: () => onSizeChange(item.id, key),
+				className: "h-6 w-6 p-0! text-xs font-bold",
+				"aria-label": `Set ${item.title ?? item.id} to ${key}`,
+				"aria-pressed": size === key,
+				children: label
+			}, key)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				variant: "secondary",
+				size: "small",
+				...attributes,
+				...listeners,
+				className: "ml-1 h-6 w-6 cursor-grab p-0! active:cursor-grabbing",
+				"aria-label": `Drag ${item.title ?? item.id}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandleIcon, {})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "h-full w-full",
+			children: content
+		})]
+	});
+}
+function DraggableGrid({ items, editMode = false, storageKey, onItemsChange, onItemSizeChange, showItemMenu = false, className = "" }) {
+	const readStoredOrder = (0, react.useCallback)(() => {
+		if (!storageKey) return null;
+		try {
+			const raw = localStorage.getItem(storageKey);
+			return raw ? JSON.parse(raw) : null;
+		} catch {
+			return null;
+		}
+	}, [storageKey]);
+	const [order, setOrder] = (0, react.useState)(() => {
+		const stored = readStoredOrder();
+		if (stored) {
+			const ids = new Set(items.map((i) => i.id));
+			const filtered = stored.filter((id) => ids.has(id));
+			const missing = items.map((i) => i.id).filter((id) => !filtered.includes(id));
+			return [...filtered, ...missing];
+		}
+		return items.map((i) => i.id);
+	});
+	const [sizes, setSizes] = (0, react.useState)(() => Object.fromEntries(items.map((i) => [i.id, i.size ?? "medium"])));
+	(0, react.useEffect)(() => {
+		const known = new Set(order);
+		const newIds = items.filter((i) => !known.has(i.id)).map((i) => i.id);
+		if (newIds.length > 0) setOrder((prev) => [...prev, ...newIds]);
+		setSizes((prev) => {
+			const next = { ...prev };
+			for (const item of items) if (!(item.id in next)) next[item.id] = item.size ?? "medium";
+			return next;
+		});
+	}, [items]);
+	(0, react.useEffect)(() => {
+		if (!storageKey) return;
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(order));
+		} catch {}
+	}, [order, storageKey]);
+	const itemMap = Object.fromEntries(items.map((i) => [i.id, i]));
+	const orderedItems = order.flatMap((id) => itemMap[id] ? [itemMap[id]] : []);
+	const [activeId, setActiveId] = (0, react.useState)(null);
+	const [overlaySize, setOverlaySize] = (0, react.useState)(null);
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor, { activationConstraint: { distance: 8 } }), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const handleDragStart = (0, react.useCallback)(({ active }) => {
+		setActiveId(String(active.id));
+		const rect = active.rect.current.initial;
+		if (rect) setOverlaySize({
+			width: rect.width,
+			height: rect.height
+		});
+	}, []);
+	const handleDragEnd = (0, react.useCallback)(({ active, over }) => {
+		setActiveId(null);
+		setOverlaySize(null);
+		if (!over || active.id === over.id) return;
+		setOrder((prev) => {
+			const next = (0, _dnd_kit_sortable.arrayMove)(prev, prev.indexOf(String(active.id)), prev.indexOf(String(over.id)));
+			if (onItemsChange) onItemsChange(next.flatMap((id) => {
+				const it = itemMap[id];
+				return it ? [{
+					...it,
+					size: sizes[id] ?? it.size
+				}] : [];
+			}));
+			return next;
+		});
+	}, [
+		onItemsChange,
+		itemMap,
+		sizes
+	]);
+	const handleSizeChange = (0, react.useCallback)((id, size) => {
+		setSizes((prev) => ({
+			...prev,
+			[id]: size
+		}));
+		onItemSizeChange?.(id, size);
+	}, [onItemSizeChange]);
+	const activeItem = activeId ? itemMap[activeId] : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_dnd_kit_core.DndContext, {
+		sensors,
+		collisionDetection: _dnd_kit_core.closestCenter,
+		onDragStart: handleDragStart,
+		onDragEnd: handleDragEnd,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+			items: order,
+			strategy: _dnd_kit_sortable.rectSortingStrategy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `flex flex-wrap gap-6 ${className}`,
+				children: orderedItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableItem, {
+					item,
+					size: sizes[item.id] ?? item.size ?? "medium",
+					editMode,
+					showItemMenu,
+					onSizeChange: handleSizeChange
+				}, item.id))
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DragOverlay, {
+			dropAnimation: {
+				duration: 180,
+				easing: "ease"
+			},
+			children: activeItem ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					width: overlaySize?.width,
+					height: overlaySize?.height,
+					opacity: .85,
+					cursor: "grabbing",
+					pointerEvents: "none"
+				},
+				children: activeItem.variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shell, {
+					title: activeItem.title,
+					children: activeItem.component
+				}) : activeItem.component
+			}) : null
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DraggableGrid", {
+	enumerable: true,
+	get: function() {
+		return DraggableGrid;
+	}
+});
+
+//# sourceMappingURL=draggable-grid-2L_eHKfp.cjs.map

package/dist/chunks/draggable-grid-2L_eHKfp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-grid-2L_eHKfp.cjs","names":[],"sources":["../../src/components/layout/draggable-grid/DraggableGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useEffect, type ReactNode } from \"react\";\n\nimport { Button } from \"../../forms/button\";\n\nimport {\n  DndContext,\n  DragOverlay,\n  PointerSensor,\n  KeyboardSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragEndEvent,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  arrayMove,\n  rectSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport type DraggableGridItemSize = \"small\" | \"medium\" | \"large\";\n\nexport interface DraggableGridItem {\n  id: string;\n  component: ReactNode;\n  size?: DraggableGridItemSize;\n  title?: string;\n  variant?: \"default\" | \"bare\";\n}\n\nexport interface DraggableGridProps {\n  items: DraggableGridItem[];\n  editMode?: boolean;\n  storageKey?: string;\n  onItemsChange?: (items: DraggableGridItem[]) => void;\n  onItemSizeChange?: (id: string, size: DraggableGridItemSize) => void;\n  showItemMenu?: boolean;\n  className?: string;\n}\n\n// ── Size classes ──────────────────────────────────────────────────────────────\n\nconst sizeClasses: Record<DraggableGridItemSize, string> = {\n  small:  \"w-full md:w-[calc(50%-12px)] 2xl:w-[calc(25%-12px)] min-h-[360px]\",\n  medium: \"w-full xl:w-[calc(50%-12px)] min-h-[420px]\",\n  large:  \"w-full min-h-[560px]\",\n};\n\nconst SIZE_CHIPS: { key: DraggableGridItemSize; label: string }[] = [\n  { key: \"small\",  label: \"S\" },\n  { key: \"medium\", label: \"M\" },\n  { key: \"large\",  label: \"L\" },\n];\n\n// ── Shell wrapper ─────────────────────────────────────────────────────────────\n\nfunction Shell({ title, children }: { title?: string; children: ReactNode }) {\n  return (\n    <div className=\"bg-ds-surface-1 border border-ds-border-2 rounded-md p-4 h-full w-full flex flex-col overflow-hidden\">\n      {title && (\n        <div className=\"font-semibold text-base truncate text-ds-1 mb-4\">\n          {title}\n        </div>\n      )}\n      <div className=\"flex-1 min-h-0\">{children}</div>\n    </div>\n  );\n}\n\n// ── Drag handle icon ──────────────────────────────────────────────────────────\n\nfunction DragHandleIcon() {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"9\"  cy=\"5\"  r=\"1.5\" />\n      <circle cx=\"15\" cy=\"5\"  r=\"1.5\" />\n      <circle cx=\"9\"  cy=\"12\" r=\"1.5\" />\n      <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"9\"  cy=\"19\" r=\"1.5\" />\n      <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n    </svg>\n  );\n}\n\n// ── SortableItem ──────────────────────────────────────────────────────────────\n\ninterface SortableItemProps {\n  item: DraggableGridItem;\n  size: DraggableGridItemSize;\n  editMode: boolean;\n  showItemMenu: boolean;\n  onSizeChange: (id: string, size: DraggableGridItemSize) => void;\n}\n\nfunction SortableItem({ item, size, editMode, showItemMenu, onSizeChange }: SortableItemProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.35 : 1,\n  };\n\n  const content =\n    item.variant === \"default\" ? (\n      <Shell title={item.title}>{item.component}</Shell>\n    ) : (\n      item.component\n    );\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={`relative flex-none ${sizeClasses[size]}`}\n    >\n      {editMode && (\n        <div className=\"absolute top-2 right-2 z-10 flex items-center gap-1\">\n          {showItemMenu &&\n            SIZE_CHIPS.map(({ key, label }) => (\n              <Button\n                key={key}\n                variant={size === key ? \"primary\" : \"secondary\"}\n                size=\"small\"\n                onClick={() => onSizeChange(item.id, key)}\n                className=\"h-6 w-6 p-0! text-xs font-bold\"\n                aria-label={`Set ${item.title ?? item.id} to ${key}`}\n                aria-pressed={size === key}\n              >\n                {label}\n              </Button>\n            ))}\n          <Button\n            variant=\"secondary\"\n            size=\"small\"\n            {...attributes}\n            {...listeners}\n            className=\"ml-1 h-6 w-6 cursor-grab p-0! active:cursor-grabbing\"\n            aria-label={`Drag ${item.title ?? item.id}`}\n          >\n            <DragHandleIcon />\n          </Button>\n        </div>\n      )}\n      <div className=\"h-full w-full\">{content}</div>\n    </div>\n  );\n}\n\n// ── DraggableGrid ─────────────────────────────────────────────────────────────\n\nexport function DraggableGrid({\n  items,\n  editMode = false,\n  storageKey,\n  onItemsChange,\n  onItemSizeChange,\n  showItemMenu = false,\n  className = \"\",\n}: DraggableGridProps) {\n  const readStoredOrder = useCallback((): string[] | null => {\n    if (!storageKey) return null;\n    try {\n      const raw = localStorage.getItem(storageKey);\n      return raw ? (JSON.parse(raw) as string[]) : null;\n    } catch {\n      return null;\n    }\n  }, [storageKey]);\n\n  const [order, setOrder] = useState<string[]>(() => {\n    const stored = readStoredOrder();\n    if (stored) {\n      const ids = new Set(items.map((i) => i.id));\n      const filtered = stored.filter((id) => ids.has(id));\n      const missing = items.map((i) => i.id).filter((id) => !filtered.includes(id));\n      return [...filtered, ...missing];\n    }\n    return items.map((i) => i.id);\n  });\n\n  const [sizes, setSizes] = useState<Record<string, DraggableGridItemSize>>(\n    () => Object.fromEntries(items.map((i) => [i.id, i.size ?? \"medium\"])),\n  );\n\n  // Sync items added after mount\n  useEffect(() => {\n    const known = new Set(order);\n    const newIds = items.filter((i) => !known.has(i.id)).map((i) => i.id);\n    if (newIds.length > 0) setOrder((prev) => [...prev, ...newIds]);\n\n    setSizes((prev) => {\n      const next = { ...prev };\n      for (const item of items) {\n        if (!(item.id in next)) next[item.id] = item.size ?? \"medium\";\n      }\n      return next;\n    });\n  }, [items]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Persist order\n  useEffect(() => {\n    if (!storageKey) return;\n    try { localStorage.setItem(storageKey, JSON.stringify(order)); } catch { /* ignore */ }\n  }, [order, storageKey]);\n\n  const itemMap = Object.fromEntries(items.map((i) => [i.id, i]));\n  const orderedItems = order.flatMap((id) => (itemMap[id] ? [itemMap[id]] : []));\n\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overlaySize, setOverlaySize] = useState<{ width: number; height: number } | null>(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n\n  const handleDragStart = useCallback(({ active }: DragStartEvent) => {\n    setActiveId(String(active.id));\n    const rect = active.rect.current.initial;\n    if (rect) setOverlaySize({ width: rect.width, height: rect.height });\n  }, []);\n\n  const handleDragEnd = useCallback(\n    ({ active, over }: DragEndEvent) => {\n      setActiveId(null);\n      setOverlaySize(null);\n      if (!over || active.id === over.id) return;\n\n      setOrder((prev) => {\n        const next = arrayMove(\n          prev,\n          prev.indexOf(String(active.id)),\n          prev.indexOf(String(over.id)),\n        );\n        if (onItemsChange) {\n          onItemsChange(\n            next.flatMap((id) => {\n              const it = itemMap[id];\n              return it ? [{ ...it, size: sizes[id] ?? it.size }] : [];\n            }),\n          );\n        }\n        return next;\n      });\n    },\n    [onItemsChange, itemMap, sizes],\n  );\n\n  const handleSizeChange = useCallback(\n    (id: string, size: DraggableGridItemSize) => {\n      setSizes((prev) => ({ ...prev, [id]: size }));\n      onItemSizeChange?.(id, size);\n    },\n    [onItemSizeChange],\n  );\n\n  const activeItem = activeId ? itemMap[activeId] : null;\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order} strategy={rectSortingStrategy}>\n        <div className={`flex flex-wrap gap-6 ${className}`}>\n          {orderedItems.map((item) => (\n            <SortableItem\n              key={item.id}\n              item={item}\n              size={sizes[item.id] ?? item.size ?? \"medium\"}\n              editMode={editMode}\n              showItemMenu={showItemMenu}\n              onSizeChange={handleSizeChange}\n            />\n          ))}\n        </div>\n      </SortableContext>\n\n      <DragOverlay dropAnimation={{ duration: 180, easing: \"ease\" }}>\n        {activeItem ? (\n          <div\n            style={{\n              width: overlaySize?.width,\n              height: overlaySize?.height,\n              opacity: 0.85,\n              cursor: \"grabbing\",\n              pointerEvents: \"none\",\n            }}\n          >\n            {activeItem.variant === \"default\" ? (\n              <Shell title={activeItem.title}>{activeItem.component}</Shell>\n            ) : (\n              activeItem.component\n            )}\n          </div>\n        ) : null}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n"],"mappings":"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"}