@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/Tabs/TabsTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.js","sources":["../../../../../src/ui/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTabsContext } from \"./TabsContext\";\nimport type { HTMLAttributes, ReactNode, KeyboardEvent } from \"react\";\nimport {\n  getRadiusClass,\n  getSpacingClass,\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens\";\nimport { cn } from \"../../utils\";\n\nexport interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string;\n  children: ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * TabsTrigger Component\n *\n * Individual tab trigger button.\n * Must be used within a TabsList component.\n */\nexport function TabsTrigger({\n  value,\n  children,\n  disabled = false,\n  className = \"\",\n  onClick,\n  onKeyDown,\n  ...props\n}: TabsTriggerProps) {\n  const {\n    value: activeValue,\n    onValueChange,\n    orientation: _orientation,\n    activationMode,\n  } = useTabsContext();\n\n  const isActive = activeValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    if (activationMode === \"automatic\" || isActive) {\n      onValueChange(value);\n    }\n    onClick?.(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n    // In automatic mode, activate tab on focus\n    if (activationMode === \"automatic\" && !disabled && !isActive) {\n      onValueChange(value);\n    }\n    props.onFocus?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    // Let parent handle arrow keys, Home, End\n    if (\n      e.key === \"ArrowRight\" ||\n      e.key === \"ArrowLeft\" ||\n      e.key === \"ArrowDown\" ||\n      e.key === \"ArrowUp\" ||\n      e.key === \"Home\" ||\n      e.key === \"End\"\n    ) {\n      // These are handled by TabsList\n      return;\n    }\n\n    // Handle Enter/Space for manual activation\n    if (activationMode === \"manual\" && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onValueChange(value);\n      return;\n    }\n\n    onKeyDown?.(e);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`tabpanel-${value}`}\n      id={`tab-${value}`}\n      tabIndex={disabled ? -1 : isActive ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        \"inline-flex\",\n        \"items-center\",\n        \"justify-center\",\n        getSpacingClass(\"sm\", \"px\"),\n        getSpacingClass(\"xs\", \"py\"),\n        getTypographySize(\"bodySmall\"),\n        getTypographyWeight(\"label\"),\n        \"transition-colors\",\n        \"focus:outline-none\",\n        \"focus:ring-2\",\n        \"focus:ring-line-focus\",\n        \"focus:ring-offset-2\",\n        getRadiusClass(\"sm\"),\n        isActive\n          ? cn(\"bg-surface-brand-strong\", \"text-fg-inverse\")\n          : cn(\"text-fg-secondary\", \"hover:bg-surface-active\"),\n        disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["TabsTrigger","_a","_b","value","children","disabled","className","onClick","onKeyDown","props","__objRest","activeValue","onValueChange","_orientation","activationMode","useTabsContext","isActive","handleClick","handleFocus","handleKeyDown","jsx","__spreadProps","__spreadValues","cn","getSpacingClass","getTypographySize","getTypographyWeight","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,SAASA,EAAYC,GAQP;AARO,MAAAC,IAAAD,GAC1B;AAAA,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,WAAAC;AAAA,MAN0BN,GAOvBO,IAAAC,EAPuBR,GAOvB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ,OAAOS;AAAA,IACP,eAAAC;AAAA,IACA,aAAaC;AAAA,IACb,gBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAWL,MAAgBR,GAE3Bc,IAAc,CAAC,MAA2C;AAC9D,IAAIZ,OACAS,MAAmB,eAAeE,MACpCJ,EAAcT,CAAK,GAErBI,KAAA,QAAAA,EAAU;AAAA,EACZ,GAEMW,IAAc,CAAC,MAA2C;;AAE9D,IAAIJ,MAAmB,eAAe,CAACT,KAAY,CAACW,KAClDJ,EAAcT,CAAK,IAErBF,IAAAQ,EAAM,YAAN,QAAAR,EAAA,KAAAQ,GAAgB;AAAA,EAClB,GAEMU,IAAgB,CAAC,MAAwC;AAC7D,QAAI,CAAAd,KAIF,IAAE,QAAQ,gBACV,EAAE,QAAQ,eACV,EAAE,QAAQ,eACV,EAAE,QAAQ,aACV,EAAE,QAAQ,UACV,EAAE,QAAQ,QAOZ;AAAA,UAAIS,MAAmB,aAAa,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AACvE,UAAE,eAAA,GACFF,EAAcT,CAAK;AACnB;AAAA,MACF;AAEA,MAAAK,KAAA,QAAAA,EAAY;AAAA;AAAA,EACd;AAEA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAeN;AAAA,MACf,iBAAe,YAAYb,CAAK;AAAA,MAChC,IAAI,OAAOA,CAAK;AAAA,MAChB,UAAUE,IAAW,KAAKW,IAAW,IAAI;AAAA,MACzC,UAAAX;AAAA,MACA,SAASY;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAC,EAAgB,MAAM,IAAI;AAAA,QAC1BA,EAAgB,MAAM,IAAI;AAAA,QAC1BC,EAAkB,WAAW;AAAA,QAC7BC,EAAoB,OAAO;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAC,EAAe,IAAI;AAAA,QACnBX,IACIO,EAAG,2BAA2B,iBAAiB,IAC/CA,EAAG,qBAAqB,yBAAyB;AAAA,QACrDlB,IAAW,kCAAkC;AAAA,QAC7CC;AAAA,MAAA;AAAA,OAEEG,IA/BL;AAAA,MAiCE,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/TimePicker/TimePicker.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import { useState as x, useCallback as E, useEffect as O } from "react";
+import { Clock as U } from "lucide-react";
+import q from "../../primitives/Input/Input.js";
+import F from "../Popover/Popover.js";
+import { Button as o } from "../../primitives/Button/Button.js";
+import { getSpacingClass as u } from "../../tokens/spacing.js";
+function X({
+  value: A,
+  defaultValue: H,
+  format: r = "24h",
+  onChange: c,
+  disabled: l = !1,
+  label: I,
+  error: b = !1,
+  helperText: z,
+  className: y = ""
+}) {
+  const [T, P] = x(H || ""), [i, S] = x(12), [m, N] = x(0), [a, $] = x("AM"), d = A !== void 0, h = d ? A : T, k = E(
+    (e) => {
+      if (!e) return { hours: 12, minutes: 0, amPm: "AM" };
+      if (r === "24h") {
+        const [t, n] = e.split(":").map(Number);
+        return { hours: t || 12, minutes: n || 0, amPm: "AM" };
+      } else {
+        const t = e.match(/(\d+):(\d+)\s*(AM|PM)/i);
+        return t ? {
+          hours: parseInt(t[1]),
+          minutes: parseInt(t[2]),
+          amPm: t[3].toUpperCase()
+        } : { hours: 12, minutes: 0, amPm: "AM" };
+      }
+    },
+    [r]
+  ), p = (e, t, n) => {
+    if (r === "24h")
+      return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
+    {
+      const M = n === "PM" && e !== 12 ? e + 12 : n === "AM" && e === 12 ? 0 : e;
+      return `${String(M === 0 ? 12 : M > 12 ? M - 12 : M).padStart(2, "0")}:${String(t).padStart(2, "0")} ${n || "AM"}`;
+    }
+  };
+  O(() => {
+    if (h) {
+      const e = k(h);
+      S(e.hours), N(e.minutes), $(e.amPm);
+    }
+  }, [h, k]);
+  const f = (e) => {
+    const t = r === "24h" ? Math.max(0, Math.min(23, e)) : Math.max(1, Math.min(12, e));
+    S(t);
+    const n = p(
+      t,
+      m,
+      r === "12h" ? a : void 0
+    );
+    d || P(n), c == null || c(n);
+  }, w = (e) => {
+    const t = Math.max(0, Math.min(59, e));
+    N(t);
+    const n = p(
+      i,
+      t,
+      r === "12h" ? a : void 0
+    );
+    d || P(n), c == null || c(n);
+  }, g = () => {
+    const e = a === "AM" ? "PM" : "AM";
+    $(e);
+    const t = p(i, m, e);
+    d || P(t), c == null || c(t);
+  }, V = () => {
+    if (r === "24h")
+      f((i + 1) % 24);
+    else {
+      const e = i === 12 ? 1 : i + 1;
+      f(e);
+    }
+  }, j = () => {
+    if (r === "24h")
+      f(i === 0 ? 23 : i - 1);
+    else {
+      const e = i === 1 ? 12 : i - 1;
+      f(e);
+    }
+  }, B = () => {
+    w((m + 1) % 60);
+  }, D = () => {
+    w(m === 0 ? 59 : m - 1);
+  }, C = /* @__PURE__ */ s("div", { className: `${u("base", "p")} min-w-48`, children: /* @__PURE__ */ v(
+    "div",
+    {
+      className: `flex items-center justify-center ${u("base", "gap")}`,
+      children: [
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col items-center ${u("sm", "gap")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: V,
+                  disabled: l,
+                  "aria-label": "Increment hours",
+                  children: "↑"
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-2xl font-mono font-semibold w-12 text-center", children: String(i).padStart(2, "0") }),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: j,
+                  disabled: l,
+                  "aria-label": "Decrement hours",
+                  children: "↓"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: "text-2xl font-semibold", children: ":" }),
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col items-center ${u("sm", "gap")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: B,
+                  disabled: l,
+                  "aria-label": "Increment minutes",
+                  children: "↑"
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-2xl font-mono font-semibold w-12 text-center", children: String(m).padStart(2, "0") }),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: D,
+                  disabled: l,
+                  "aria-label": "Decrement minutes",
+                  children: "↓"
+                }
+              )
+            ]
+          }
+        ),
+        r === "12h" && /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col ${u("sm", "gap")} ${u("sm", "ml")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: a === "AM" ? "primary" : "outline",
+                  size: "sm",
+                  onClick: () => g(),
+                  disabled: l,
+                  children: "AM"
+                }
+              ),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: a === "PM" ? "primary" : "outline",
+                  size: "sm",
+                  onClick: () => g(),
+                  disabled: l,
+                  children: "PM"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ s("div", { className: y, children: /* @__PURE__ */ s(
+    F,
+    {
+      trigger: /* @__PURE__ */ s(
+        q,
+        {
+          label: I,
+          value: h || p(i, m, r === "12h" ? a : void 0),
+          readOnly: !0,
+          disabled: l,
+          error: b,
+          helperText: z,
+          leftIcon: /* @__PURE__ */ s(U, { className: "h-4 w-4" }),
+          className: "cursor-pointer"
+        }
+      ),
+      placement: "bottom-start",
+      showCloseButton: !0,
+      title: "Select Time",
+      children: C
+    }
+  ) });
+}
+export {
+  X as default
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/granular/ui/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["../../../../../src/ui/components/TimePicker/TimePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { Clock } from \"lucide-react\";\nimport Input from \"../../primitives/Input/Input\";\nimport Popover from \"../Popover/Popover\";\nimport Button from \"../../primitives/Button/Button\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type TimeFormat = \"12h\" | \"24h\";\n\nexport interface TimePickerProps {\n  value?: string; // Format: \"HH:mm\" for 24h or \"hh:mm AM/PM\" for 12h\n  defaultValue?: string;\n  format?: TimeFormat;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  label?: string;\n  error?: boolean;\n  helperText?: string;\n  className?: string;\n}\n\n/**\n * TimePicker Component\n *\n * A time picker component for selecting time values.\n * Supports 12h and 24h formats.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <TimePicker\n *   value=\"14:30\"\n *   format=\"24h\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport default function TimePicker({\n  value: controlledValue,\n  defaultValue,\n  format = \"24h\",\n  onChange,\n  disabled = false,\n  label,\n  error = false,\n  helperText,\n  className = \"\",\n}: TimePickerProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue || \"\");\n  const [hours, setHours] = useState(12);\n  const [minutes, setMinutes] = useState(0);\n  const [amPm, setAmPm] = useState<\"AM\" | \"PM\">(\"AM\");\n\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  // Parse time value\n  const parseTime = useCallback(\n    (timeStr: string) => {\n      if (!timeStr) return { hours: 12, minutes: 0, amPm: \"AM\" as const };\n\n      if (format === \"24h\") {\n        const [h, m] = timeStr.split(\":\").map(Number);\n        return { hours: h || 12, minutes: m || 0, amPm: \"AM\" as const };\n      } else {\n        const match = timeStr.match(/(\\d+):(\\d+)\\s*(AM|PM)/i);\n        if (match) {\n          return {\n            hours: parseInt(match[1]),\n            minutes: parseInt(match[2]),\n            amPm: match[3].toUpperCase() as \"AM\" | \"PM\",\n          };\n        }\n        return { hours: 12, minutes: 0, amPm: \"AM\" as const };\n      }\n    },\n    [format],\n  );\n\n  // Format time value\n  const formatTime = (h: number, m: number, ap?: \"AM\" | \"PM\"): string => {\n    if (format === \"24h\") {\n      return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}`;\n    } else {\n      const displayHours =\n        ap === \"PM\" && h !== 12 ? h + 12 : ap === \"AM\" && h === 12 ? 0 : h;\n      return `${String(displayHours === 0 ? 12 : displayHours > 12 ? displayHours - 12 : displayHours).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")} ${ap || \"AM\"}`;\n    }\n  };\n\n  // Initialize from value\n  useEffect(() => {\n    if (currentValue) {\n      const parsed = parseTime(currentValue);\n      setHours(parsed.hours);\n      setMinutes(parsed.minutes);\n      setAmPm(parsed.amPm);\n    }\n  }, [currentValue, parseTime]);\n\n  const handleHoursChange = (newHours: number) => {\n    const validHours =\n      format === \"24h\"\n        ? Math.max(0, Math.min(23, newHours))\n        : Math.max(1, Math.min(12, newHours));\n\n    setHours(validHours);\n    const newValue = formatTime(\n      validHours,\n      minutes,\n      format === \"12h\" ? amPm : undefined,\n    );\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleMinutesChange = (newMinutes: number) => {\n    const validMinutes = Math.max(0, Math.min(59, newMinutes));\n    setMinutes(validMinutes);\n    const newValue = formatTime(\n      hours,\n      validMinutes,\n      format === \"12h\" ? amPm : undefined,\n    );\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleAmPmToggle = () => {\n    const newAmPm = amPm === \"AM\" ? \"PM\" : \"AM\";\n    setAmPm(newAmPm);\n    const newValue = formatTime(hours, minutes, newAmPm);\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const incrementHours = () => {\n    if (format === \"24h\") {\n      handleHoursChange((hours + 1) % 24);\n    } else {\n      const newHours = hours === 12 ? 1 : hours + 1;\n      handleHoursChange(newHours);\n    }\n  };\n\n  const decrementHours = () => {\n    if (format === \"24h\") {\n      handleHoursChange(hours === 0 ? 23 : hours - 1);\n    } else {\n      const newHours = hours === 1 ? 12 : hours - 1;\n      handleHoursChange(newHours);\n    }\n  };\n\n  const incrementMinutes = () => {\n    handleMinutesChange((minutes + 1) % 60);\n  };\n\n  const decrementMinutes = () => {\n    handleMinutesChange(minutes === 0 ? 59 : minutes - 1);\n  };\n\n  const timePickerContent = (\n    <div className={`${getSpacingClass(\"base\", \"p\")} min-w-48`}>\n      <div\n        className={`flex items-center justify-center ${getSpacingClass(\"base\", \"gap\")}`}\n      >\n        {/* Hours */}\n        <div\n          className={`flex flex-col items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={incrementHours}\n            disabled={disabled}\n            aria-label=\"Increment hours\"\n          >\n            ↑\n          </Button>\n          <div className=\"text-2xl font-mono font-semibold w-12 text-center\">\n            {String(hours).padStart(2, \"0\")}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={decrementHours}\n            disabled={disabled}\n            aria-label=\"Decrement hours\"\n          >\n            ↓\n          </Button>\n        </div>\n\n        <div className=\"text-2xl font-semibold\">:</div>\n\n        {/* Minutes */}\n        <div\n          className={`flex flex-col items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={incrementMinutes}\n            disabled={disabled}\n            aria-label=\"Increment minutes\"\n          >\n            ↑\n          </Button>\n          <div className=\"text-2xl font-mono font-semibold w-12 text-center\">\n            {String(minutes).padStart(2, \"0\")}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={decrementMinutes}\n            disabled={disabled}\n            aria-label=\"Decrement minutes\"\n          >\n            ↓\n          </Button>\n        </div>\n\n        {/* AM/PM for 12h format */}\n        {format === \"12h\" && (\n          <div\n            className={`flex flex-col ${getSpacingClass(\"sm\", \"gap\")} ${getSpacingClass(\"sm\", \"ml\")}`}\n          >\n            <Button\n              variant={amPm === \"AM\" ? \"primary\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => handleAmPmToggle()}\n              disabled={disabled}\n            >\n              AM\n            </Button>\n            <Button\n              variant={amPm === \"PM\" ? \"primary\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => handleAmPmToggle()}\n              disabled={disabled}\n            >\n              PM\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={className}>\n      <Popover\n        trigger={\n          <Input\n            label={label}\n            value={\n              currentValue ||\n              formatTime(hours, minutes, format === \"12h\" ? amPm : undefined)\n            }\n            readOnly\n            disabled={disabled}\n            error={error}\n            helperText={helperText}\n            leftIcon={<Clock className=\"h-4 w-4\" />}\n            className=\"cursor-pointer\"\n          />\n        }\n        placement=\"bottom-start\"\n        showCloseButton\n        title=\"Select Time\"\n      >\n        {timePickerContent}\n      </Popover>\n    </div>\n  );\n}\n"],"names":["TimePicker","controlledValue","defaultValue","format","onChange","disabled","label","error","helperText","className","internalValue","setInternalValue","useState","hours","setHours","minutes","setMinutes","amPm","setAmPm","isControlled","currentValue","parseTime","useCallback","timeStr","h","m","match","formatTime","ap","displayHours","useEffect","parsed","handleHoursChange","newHours","validHours","newValue","handleMinutesChange","newMinutes","validMinutes","handleAmPmToggle","newAmPm","incrementHours","decrementHours","incrementMinutes","decrementMinutes","timePickerContent","getSpacingClass","jsxs","jsx","Button","Popover","Input","Clock"],"mappings":"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"}

package/dist/granular/ui/components/Timeline/Timeline.js

@@ -0,0 +1,152 @@
+"use client";
+var h = Object.defineProperty, u = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var x = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
+var p = (t, r, c) => r in t ? h(t, r, { enumerable: !0, configurable: !0, writable: !0, value: c }) : t[r] = c, m = (t, r) => {
+  for (var c in r || (r = {}))
+    N.call(r, c) && p(t, c, r[c]);
+  if (x)
+    for (var c of x(r))
+      $.call(r, c) && p(t, c, r[c]);
+  return t;
+}, f = (t, r) => u(t, v(r));
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import { CheckCircle2 as b } from "lucide-react";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { getRadiusClass as g } from "../../tokens/radius.js";
+function q({
+  items: t,
+  orientation: r = "vertical",
+  className: c = ""
+}) {
+  return r === "horizontal" ? /* @__PURE__ */ s("div", { className: `flex items-start ${c}`, children: t.map((e, n) => {
+    const a = e.status || (n === 0 ? "active" : n < t.findIndex((o) => o.status === "active") ? "completed" : "default"), d = n === t.length - 1;
+    return /* @__PURE__ */ s("div", { className: "flex items-start flex-1", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center flex-1", children: [
+      /* @__PURE__ */ s(
+        "div",
+        f(m({}, a === "default" ? { "data-marker": "pending" } : {}), {
+          className: `
+                  flex
+                  items-center
+                  justify-center
+                  w-10
+                  h-10
+                  ${g("full")}
+                  border-2
+                  ${a === "completed" ? "bg-success border-success text-fg-inverse" : a === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : a === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+                `,
+          children: e.icon || (a === "completed" ? /* @__PURE__ */ s(b, { className: "h-4 w-4" }) : n + 1)
+        })
+      ),
+      !d && /* @__PURE__ */ s(
+        "div",
+        {
+          className: `
+                      w-full
+                      h-0.5
+                      ${l("sm", "mt")}
+                      ${a === "completed" ? "bg-success" : "bg-line-emphasis"}
+                    `
+        }
+      ),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: `${l("base", "mt")} text-center ${l("base", "px")}`,
+          children: [
+            e.timestamp && /* @__PURE__ */ s(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${l("xs", "mb")}`,
+                children: e.timestamp
+              }
+            ),
+            /* @__PURE__ */ s("h3", { className: "text-sm font-semibold text-fg-primary", children: e.title }),
+            e.description && /* @__PURE__ */ s(
+              "p",
+              {
+                className: `text-xs text-fg-secondary ${l("xs", "mt")}`,
+                children: e.description
+              }
+            ),
+            e.content && /* @__PURE__ */ s("div", { className: l("sm", "mt"), children: e.content })
+          ]
+        }
+      )
+    ] }) }, e.id);
+  }) }) : /* @__PURE__ */ s("div", { className: `${l("none", "space-y")} ${c}`, children: t.map((e, n) => {
+    const a = e.status || (n === 0 ? "active" : n < t.findIndex((o) => o.status === "active") ? "completed" : "default"), d = n === t.length - 1;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        className: `flex items-start ${l("base", "gap")}`,
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ s(
+              "div",
+              f(m({}, a === "default" ? { "data-marker": "pending" } : {}), {
+                className: `
+                flex
+                items-center
+                justify-center
+                w-10
+                h-10
+                ${g("full")}
+                border-2
+                ${a === "completed" ? "bg-success border-success text-fg-inverse" : a === "active" ? "bg-surface-brand-strong border-line-brand text-fg-inverse" : a === "error" ? "bg-error border-error text-fg-inverse" : "bg-surface-base border-line-emphasis text-fg-quaternary"}
+              `,
+                children: e.icon || (a === "completed" ? /* @__PURE__ */ s(b, { className: "h-4 w-4" }) : n + 1)
+              })
+            ),
+            !d && /* @__PURE__ */ s(
+              "div",
+              {
+                className: `
+                    w-0.5
+                    flex-1
+                    min-h-16
+                    ${l("sm", "mt")}
+                    ${a === "completed" ? "bg-success" : "bg-line-emphasis"}
+                  `
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i("div", { className: `flex-1 ${l("xl", "pb")}`, children: [
+            e.timestamp && /* @__PURE__ */ s(
+              "p",
+              {
+                className: `text-xs text-fg-tertiary ${l("xs", "mb")}`,
+                children: e.timestamp
+              }
+            ),
+            /* @__PURE__ */ s(
+              "h3",
+              {
+                className: `
+                text-base
+                font-semibold
+                ${a === "active" ? "text-fg-brand-emphasis" : "text-fg-primary"}
+              `,
+                children: e.title
+              }
+            ),
+            e.description && /* @__PURE__ */ s(
+              "p",
+              {
+                className: `text-sm text-fg-secondary ${l("xs", "mt")}`,
+                children: e.description
+              }
+            ),
+            e.content && /* @__PURE__ */ s("div", { className: l("md", "mt"), children: e.content })
+          ] })
+        ]
+      },
+      e.id
+    );
+  }) });
+}
+export {
+  q as default
+};
+//# sourceMappingURL=Timeline.js.map

package/dist/granular/ui/components/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sources":["../../../../../src/ui/components/Timeline/Timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CheckCircle2 } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type TimelineOrientation = \"horizontal\" | \"vertical\";\n\nexport interface TimelineItem {\n  id: string;\n  title: string;\n  description?: string;\n  content?: ReactNode;\n  timestamp?: string;\n  icon?: ReactNode;\n  status?: \"default\" | \"active\" | \"completed\" | \"error\";\n}\n\nexport interface TimelineProps {\n  items: TimelineItem[];\n  orientation?: TimelineOrientation;\n  className?: string;\n}\n\n/**\n * Timeline Component\n *\n * A timeline component for displaying events in chronological order.\n * Supports horizontal and vertical orientations.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <Timeline\n *   items={[\n *     { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },\n *     { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },\n *   ]}\n * />\n * ```\n */\nexport default function Timeline({\n  items,\n  orientation = \"vertical\",\n  className = \"\",\n}: TimelineProps) {\n  if (orientation === \"horizontal\") {\n    return (\n      <div className={`flex items-start ${className}`}>\n        {items.map((item, index) => {\n          const status =\n            item.status ||\n            (index === 0\n              ? \"active\"\n              : index < items.findIndex((i) => i.status === \"active\")\n                ? \"completed\"\n                : \"default\");\n          const isLast = index === items.length - 1;\n\n          return (\n            <div key={item.id} className=\"flex items-start flex-1\">\n              <div className=\"flex flex-col items-center flex-1\">\n                {/* Icon/Indicator */}\n                <div\n                  // data-marker=\"pending\" — see .claude/rules/colors.md\n                  // \"fg-quaternary: AA-by-construction exception\".\n                  {...(status === \"default\"\n                    ? { \"data-marker\": \"pending\" }\n                    : {})}\n                  className={`\n                  flex\n                  items-center\n                  justify-center\n                  w-10\n                  h-10\n                  ${getRadiusClass(\"full\")}\n                  border-2\n                  ${\n                    status === \"completed\"\n                      ? \"bg-success border-success text-fg-inverse\"\n                      : status === \"active\"\n                        ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n                        : status === \"error\"\n                          ? \"bg-error border-error text-fg-inverse\"\n                          : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                  }\n                `}\n                >\n                  {item.icon ||\n                    (status === \"completed\" ? (\n                      <CheckCircle2 className=\"h-4 w-4\" />\n                    ) : (\n                      index + 1\n                    ))}\n                </div>\n\n                {/* Connector Line */}\n                {!isLast && (\n                  <div\n                    className={`\n                      w-full\n                      h-0.5\n                      ${getSpacingClass(\"sm\", \"mt\")}\n                      ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n                    `}\n                  />\n                )}\n\n                {/* Content */}\n                <div\n                  className={`${getSpacingClass(\"base\", \"mt\")} text-center ${getSpacingClass(\"base\", \"px\")}`}\n                >\n                  {item.timestamp && (\n                    <p\n                      className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n                    >\n                      {item.timestamp}\n                    </p>\n                  )}\n                  <h3 className=\"text-sm font-semibold text-fg-primary\">\n                    {item.title}\n                  </h3>\n                  {item.description && (\n                    <p\n                      className={`text-xs text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n                    >\n                      {item.description}\n                    </p>\n                  )}\n                  {item.content && (\n                    <div className={getSpacingClass(\"sm\", \"mt\")}>\n                      {item.content}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  // Vertical orientation\n  return (\n    <div className={`${getSpacingClass(\"none\", \"space-y\")} ${className}`}>\n      {items.map((item, index) => {\n        const status =\n          item.status ||\n          (index === 0\n            ? \"active\"\n            : index < items.findIndex((i) => i.status === \"active\")\n              ? \"completed\"\n              : \"default\");\n        const isLast = index === items.length - 1;\n\n        return (\n          <div\n            key={item.id}\n            className={`flex items-start ${getSpacingClass(\"base\", \"gap\")}`}\n          >\n            {/* Timeline Line & Icon */}\n            <div className=\"flex flex-col items-center\">\n              <div\n                // data-marker=\"pending\" — see .claude/rules/colors.md\n                // \"fg-quaternary: AA-by-construction exception\".\n                {...(status === \"default\" ? { \"data-marker\": \"pending\" } : {})}\n                className={`\n                flex\n                items-center\n                justify-center\n                w-10\n                h-10\n                ${getRadiusClass(\"full\")}\n                border-2\n                ${\n                  status === \"completed\"\n                    ? \"bg-success border-success text-fg-inverse\"\n                    : status === \"active\"\n                      ? \"bg-surface-brand-strong border-line-brand text-fg-inverse\"\n                      : status === \"error\"\n                        ? \"bg-error border-error text-fg-inverse\"\n                        : \"bg-surface-base border-line-emphasis text-fg-quaternary\"\n                }\n              `}\n              >\n                {item.icon ||\n                  (status === \"completed\" ? (\n                    <CheckCircle2 className=\"h-4 w-4\" />\n                  ) : (\n                    index + 1\n                  ))}\n              </div>\n              {!isLast && (\n                <div\n                  className={`\n                    w-0.5\n                    flex-1\n                    min-h-16\n                    ${getSpacingClass(\"sm\", \"mt\")}\n                    ${status === \"completed\" ? \"bg-success\" : \"bg-line-emphasis\"}\n                  `}\n                />\n              )}\n            </div>\n\n            {/* Content */}\n            <div className={`flex-1 ${getSpacingClass(\"xl\", \"pb\")}`}>\n              {item.timestamp && (\n                <p\n                  className={`text-xs text-fg-tertiary ${getSpacingClass(\"xs\", \"mb\")}`}\n                >\n                  {item.timestamp}\n                </p>\n              )}\n              <h3\n                className={`\n                text-base\n                font-semibold\n                ${status === \"active\" ? \"text-fg-brand-emphasis\" : \"text-fg-primary\"}\n              `}\n              >\n                {item.title}\n              </h3>\n              {item.description && (\n                <p\n                  className={`text-sm text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n                >\n                  {item.description}\n                </p>\n              )}\n              {item.content && (\n                <div className={getSpacingClass(\"md\", \"mt\")}>\n                  {item.content}\n                </div>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["Timeline","items","orientation","className","jsx","item","index","status","i","isLast","jsxs","__spreadProps","__spreadValues","getRadiusClass","CheckCircle2","getSpacingClass"],"mappings":"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"}

package/dist/granular/ui/components/Toast/Toast.js

@@ -0,0 +1,159 @@
+"use client";
+var E = Object.defineProperty, S = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var u = (e, t, r) => t in e ? E(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, x = (e, t) => {
+  for (var r in t || (t = {}))
+    g.call(t, r) && u(e, r, t[r]);
+  if (n)
+    for (var r of n(t))
+      p.call(t, r) && u(e, r, t[r]);
+  return e;
+}, h = (e, t) => S(e, j(t));
+var v = (e, t) => {
+  var r = {};
+  for (var i in e)
+    g.call(e, i) && t.indexOf(i) < 0 && (r[i] = e[i]);
+  if (e != null && n)
+    for (var i of n(e))
+      t.indexOf(i) < 0 && p.call(e, i) && (r[i] = e[i]);
+  return r;
+};
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { useState as C, useEffect as $ } from "react";
+import { Info as z, AlertTriangle as A, AlertCircle as B, CheckCircle2 as V, X as O } from "lucide-react";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import { Button as w } from "../../primitives/Button/Button.js";
+import { getRadiusClass as R } from "../../tokens/radius.js";
+import { getShadowClass as X } from "../../tokens/shadows.js";
+import { getZIndexClass as Z } from "../../tokens/z-index.js";
+const q = {
+  success: V,
+  error: B,
+  warning: A,
+  info: z
+}, D = {
+  success: "border-success",
+  error: "border-error",
+  warning: "border-warning",
+  info: "border-info"
+}, F = {
+  success: "text-fg-success",
+  error: "text-fg-error",
+  warning: "text-fg-warning",
+  info: "text-fg-info"
+};
+function Y(G) {
+  var l = G, {
+    toast: e,
+    onDismiss: t,
+    position: r = "top-right",
+    className: i = "",
+    style: y
+  } = l, N = v(l, [
+    "toast",
+    "onDismiss",
+    "position",
+    "className",
+    "style"
+  ]);
+  const [T, c] = C(!1), [m, d] = C(!1), k = q[e.variant];
+  $(() => {
+    if (e.duration === void 0) return;
+    c(!0);
+    const a = setTimeout(() => {
+      d(!0), setTimeout(() => {
+        t(e.id);
+      }, 300);
+    }, e.duration);
+    return () => clearTimeout(a);
+  }, [e.duration, e.id, t]), $(() => {
+    const a = setTimeout(() => c(!0), 10);
+    return () => clearTimeout(a);
+  }, []);
+  const I = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  }, f = () => {
+    d(!0), setTimeout(() => {
+      t(e.id);
+    }, 300);
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    h(x({
+      className: `
+        fixed ${I[r]} ${Z("toast")}
+        w-full max-w-sm
+        transition-all duration-300 ease-in-out
+        ${T && !m ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}
+        ${m ? "opacity-0 translate-y-2" : ""}
+        ${i}
+      `,
+      style: y,
+      role: "alert",
+      "aria-live": e.variant === "error" ? "assertive" : "polite",
+      "aria-atomic": "true"
+    }, N), {
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          className: `
+          flex items-start ${o("md", "gap")}
+          ${o("base", "p")}
+          bg-surface-overlay
+          ${R("lg")}
+          ${X("lg")}
+          border
+          ${D[e.variant]}
+        `,
+          children: [
+            /* @__PURE__ */ s("div", { className: `flex-shrink-0 ${F[e.variant]}`, children: /* @__PURE__ */ s(k, { className: "h-5 w-5", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ b("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ s("div", { className: "font-medium text-fg-primary", children: e.title }),
+              e.description && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: `${o("xs", "mt")} text-sm text-fg-secondary`,
+                  children: e.description
+                }
+              ),
+              e.action && /* @__PURE__ */ s("div", { className: o("md", "mt"), children: /* @__PURE__ */ s(
+                w,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => {
+                    var a;
+                    (a = e.action) == null || a.onClick(), f();
+                  },
+                  children: e.action.label
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ s(
+              w,
+              {
+                variant: "iconOnly",
+                size: "sm",
+                onClick: f,
+                className: "flex-shrink-0",
+                "aria-label": "Dismiss notification",
+                children: /* @__PURE__ */ s(O, { className: "h-4 w-4" })
+              }
+            )
+          ]
+        }
+      )
+    })
+  );
+}
+export {
+  Y as Toast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/granular/ui/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../../src/ui/components/Toast/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type HTMLAttributes } from \"react\";\nimport {\n  X,\n  CheckCircle2,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n} from \"lucide-react\";\nimport { type Toast as ToastType } from \"../../providers/ToastContext\";\nimport { getRadiusClass, getShadowClass, getZIndexClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport interface ToastProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"title\"\n> {\n  toast: ToastType;\n  onDismiss: (id: string) => void;\n  position?:\n    | \"top-right\"\n    | \"top-left\"\n    | \"bottom-right\"\n    | \"bottom-left\"\n    | \"top-center\"\n    | \"bottom-center\";\n}\n\nconst variantIcons = {\n  success: CheckCircle2,\n  error: AlertCircle,\n  warning: AlertTriangle,\n  info: Info,\n};\n\nconst variantBorderClass = {\n  success: \"border-success\",\n  error: \"border-error\",\n  warning: \"border-warning\",\n  info: \"border-info\",\n} as const;\n\nconst variantTextClass = {\n  success: \"text-fg-success\",\n  error: \"text-fg-error\",\n  warning: \"text-fg-warning\",\n  info: \"text-fg-info\",\n} as const;\n\nexport function Toast({\n  toast,\n  onDismiss,\n  position = \"top-right\",\n  className = \"\",\n  style,\n  ...props\n}: ToastProps) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isExiting, setIsExiting] = useState(false);\n  const Icon = variantIcons[toast.variant];\n\n  // Auto-dismiss\n  useEffect(() => {\n    if (toast.duration === undefined) return;\n\n    setIsVisible(true);\n\n    const timer = setTimeout(() => {\n      setIsExiting(true);\n      setTimeout(() => {\n        onDismiss(toast.id);\n      }, 300); // Animation duration\n    }, toast.duration);\n\n    return () => clearTimeout(timer);\n  }, [toast.duration, toast.id, onDismiss]);\n\n  // Show animation\n  useEffect(() => {\n    const timer = setTimeout(() => setIsVisible(true), 10);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const positionClasses = {\n    \"top-right\": \"top-4 right-4\",\n    \"top-left\": \"top-4 left-4\",\n    \"bottom-right\": \"bottom-4 right-4\",\n    \"bottom-left\": \"bottom-4 left-4\",\n    \"top-center\": \"top-4 left-1/2 -translate-x-1/2\",\n    \"bottom-center\": \"bottom-4 left-1/2 -translate-x-1/2\",\n  };\n\n  const handleDismiss = () => {\n    setIsExiting(true);\n    setTimeout(() => {\n      onDismiss(toast.id);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`\n        fixed ${positionClasses[position]} ${getZIndexClass(\"toast\")}\n        w-full max-w-sm\n        transition-all duration-300 ease-in-out\n        ${isVisible && !isExiting ? \"opacity-100 translate-y-0\" : \"opacity-0 -translate-y-2\"}\n        ${isExiting ? \"opacity-0 translate-y-2\" : \"\"}\n        ${className}\n      `}\n      style={style}\n      role=\"alert\"\n      aria-live={toast.variant === \"error\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n      {...props}\n    >\n      <div\n        className={`\n          flex items-start ${getSpacingClass(\"md\", \"gap\")}\n          ${getSpacingClass(\"base\", \"p\")}\n          bg-surface-overlay\n          ${getRadiusClass(\"lg\")}\n          ${getShadowClass(\"lg\")}\n          border\n          ${variantBorderClass[toast.variant]}\n        `}\n      >\n        {/* Icon */}\n        <div className={`flex-shrink-0 ${variantTextClass[toast.variant]}`}>\n          <Icon className=\"h-5 w-5\" aria-hidden=\"true\" />\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"font-medium text-fg-primary\">{toast.title}</div>\n          {toast.description && (\n            <div\n              className={`${getSpacingClass(\"xs\", \"mt\")} text-sm text-fg-secondary`}\n            >\n              {toast.description}\n            </div>\n          )}\n          {toast.action && (\n            <div className={getSpacingClass(\"md\", \"mt\")}>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => {\n                  toast.action?.onClick();\n                  handleDismiss();\n                }}\n              >\n                {toast.action.label}\n              </Button>\n            </div>\n          )}\n        </div>\n\n        {/* Close Button */}\n        <Button\n          variant=\"iconOnly\"\n          size=\"sm\"\n          onClick={handleDismiss}\n          className=\"flex-shrink-0\"\n          aria-label=\"Dismiss notification\"\n        >\n          <X className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["variantIcons","CheckCircle2","AlertCircle","AlertTriangle","Info","variantBorderClass","variantTextClass","Toast","_a","_b","toast","onDismiss","position","className","style","props","__objRest","isVisible","setIsVisible","useState","isExiting","setIsExiting","Icon","useEffect","timer","positionClasses","handleDismiss","jsx","__spreadProps","__spreadValues","getZIndexClass","jsxs","getSpacingClass","getRadiusClass","getShadowClass","Button","X"],"mappings":"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"}