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

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOC;AAAA,EACP,SAASC;AAAA,EACT,MAAMC;AACR,GAEMC,IAAqB;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR,GAEMC,IAAmB;AAAA,EACvB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAASC,EAAMC,GAOP;AAPO,MAAAC,IAAAD,GACpB;AAAA,WAAAE;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,MALoBL,GAMjBM,IAAAC,EANiBP,GAMjB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAACQ,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAOtB,EAAaU,EAAM,OAAO;AAGvC,EAAAa,EAAU,MAAM;AACd,QAAIb,EAAM,aAAa,OAAW;AAElC,IAAAQ,EAAa,EAAI;AAEjB,UAAMM,IAAQ,WAAW,MAAM;AAC7B,MAAAH,EAAa,EAAI,GACjB,WAAW,MAAM;AACf,QAAAV,EAAUD,EAAM,EAAE;AAAA,MACpB,GAAG,GAAG;AAAA,IACR,GAAGA,EAAM,QAAQ;AAEjB,WAAO,MAAM,aAAac,CAAK;AAAA,EACjC,GAAG,CAACd,EAAM,UAAUA,EAAM,IAAIC,CAAS,CAAC,GAGxCY,EAAU,MAAM;AACd,UAAMC,IAAQ,WAAW,MAAMN,EAAa,EAAI,GAAG,EAAE;AACrD,WAAO,MAAM,aAAaM,CAAK;AAAA,EACjC,GAAG,CAAA,CAAE;AAEL,QAAMC,IAAkB;AAAA,IACtB,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,iBAAiB;AAAA,EAAA,GAGbC,IAAgB,MAAM;AAC1B,IAAAL,EAAa,EAAI,GACjB,WAAW,MAAM;AACf,MAAAV,EAAUD,EAAM,EAAE;AAAA,IACpB,GAAG,GAAG;AAAA,EACR;AAEA,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA,gBACDJ,EAAgBb,CAAQ,CAAC,IAAIkB,EAAe,OAAO,CAAC;AAAA;AAAA;AAAA,UAG1Db,KAAa,CAACG,IAAY,8BAA8B,0BAA0B;AAAA,UAClFA,IAAY,4BAA4B,EAAE;AAAA,UAC1CP,CAAS;AAAA;AAAA,MAEb,OAAAC;AAAA,MACA,MAAK;AAAA,MACL,aAAWJ,EAAM,YAAY,UAAU,cAAc;AAAA,MACrD,eAAY;AAAA,OACRK,IAbL;AAAA,MAeC,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,6BACUC,EAAgB,MAAM,KAAK,CAAC;AAAA,YAC7CA,EAAgB,QAAQ,GAAG,CAAC;AAAA;AAAA,YAE5BC,EAAe,IAAI,CAAC;AAAA,YACpBC,EAAe,IAAI,CAAC;AAAA;AAAA,YAEpB7B,EAAmBK,EAAM,OAAO,CAAC;AAAA;AAAA,UAIrC,UAAA;AAAA,YAAA,gBAAAiB,EAAC,OAAA,EAAI,WAAW,iBAAiBrB,EAAiBI,EAAM,OAAO,CAAC,IAC9D,UAAA,gBAAAiB,EAACL,GAAA,EAAK,WAAU,WAAU,eAAY,QAAO,GAC/C;AAAA,YAGA,gBAAAS,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,cAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,+BAA+B,UAAAjB,EAAM,OAAM;AAAA,cACzDA,EAAM,eACL,gBAAAiB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,GAAGK,EAAgB,MAAM,IAAI,CAAC;AAAA,kBAExC,UAAAtB,EAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGVA,EAAM,UACL,gBAAAiB,EAAC,OAAA,EAAI,WAAWK,EAAgB,MAAM,IAAI,GACxC,UAAA,gBAAAL;AAAA,gBAACQ;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAAS,MAAM;;AACb,qBAAA3B,IAAAE,EAAM,WAAN,QAAAF,EAAc,WACdkB,EAAA;AAAA,kBACF;AAAA,kBAEC,YAAM,OAAO;AAAA,gBAAA;AAAA,cAAA,EAChB,CACF;AAAA,YAAA,GAEJ;AAAA,YAGA,gBAAAC;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,SAAST;AAAA,gBACT,WAAU;AAAA,gBACV,cAAW;AAAA,gBAEX,UAAA,gBAAAC,EAACS,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACzB;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { createPortal as f } from "react-dom";
+import { useToastContext as p } from "../../providers/ToastContext.js";
+import { getZIndexClass as d } from "../../tokens/z-index.js";
+import { Toast as u } from "./Toast.js";
+function g({
+  position: t = "top-right",
+  maxToasts: o
+}) {
+  const { toasts: e, removeToast: a } = p(), n = o ? e.slice(0, o) : e;
+  if (n.length === 0) return null;
+  const i = /* @__PURE__ */ s(
+    "div",
+    {
+      className: `fixed inset-0 pointer-events-none ${d("toast")}`,
+      "aria-live": "polite",
+      "aria-label": "Notifications",
+      children: n.map((r, m) => {
+        const c = t.includes("top"), l = 1 + m * 5;
+        return /* @__PURE__ */ s(
+          u,
+          {
+            toast: r,
+            onDismiss: a,
+            position: t,
+            style: {
+              [c ? "top" : "bottom"]: `${l}rem`
+            }
+          },
+          r.id
+        );
+      })
+    }
+  );
+  return typeof window != "undefined" ? f(i, document.body) : i;
+}
+export {
+  g as ToastContainer
+};
+//# sourceMappingURL=ToastContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sources":["../../../../../src/ui/components/Toast/ToastContainer.tsx"],"sourcesContent":["\"use client\";\n\nimport { createPortal } from \"react-dom\";\nimport { useToastContext } from \"../../providers/ToastContext\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { Toast } from \"./Toast\";\n\nexport interface ToastContainerProps {\n  position?:\n    | \"top-right\"\n    | \"top-left\"\n    | \"bottom-right\"\n    | \"bottom-left\"\n    | \"top-center\"\n    | \"bottom-center\";\n  maxToasts?: number;\n}\n\nexport function ToastContainer({\n  position = \"top-right\",\n  maxToasts,\n}: ToastContainerProps) {\n  const { toasts, removeToast } = useToastContext();\n\n  const toastsToShow = maxToasts ? toasts.slice(0, maxToasts) : toasts;\n\n  if (toastsToShow.length === 0) return null;\n\n  const container = (\n    <div\n      className={`fixed inset-0 pointer-events-none ${getZIndexClass(\"toast\")}`}\n      aria-live=\"polite\"\n      aria-label=\"Notifications\"\n    >\n      {toastsToShow.map((toast, index) => {\n        const isTop = position.includes(\"top\");\n        // Calculate offset: base 1rem + (index * 5rem for spacing)\n        const offset = 1 + index * 5;\n\n        return (\n          <Toast\n            key={toast.id}\n            toast={toast}\n            onDismiss={removeToast}\n            position={position}\n            style={{\n              [isTop ? \"top\" : \"bottom\"]: `${offset}rem`,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n\n  // Portal rendering\n  if (typeof window !== \"undefined\") {\n    return createPortal(container, document.body);\n  }\n\n  return container;\n}\n"],"names":["ToastContainer","position","maxToasts","toasts","removeToast","useToastContext","toastsToShow","container","jsx","getZIndexClass","toast","index","isTop","offset","Toast","createPortal"],"mappings":";;;;;;AAkBO,SAASA,EAAe;AAAA,EAC7B,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,GAAwB;AACtB,QAAM,EAAE,QAAAC,GAAQ,aAAAC,EAAA,IAAgBC,EAAA,GAE1BC,IAAeJ,IAAYC,EAAO,MAAM,GAAGD,CAAS,IAAIC;AAE9D,MAAIG,EAAa,WAAW,EAAG,QAAO;AAEtC,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,qCAAqCC,EAAe,OAAO,CAAC;AAAA,MACvE,aAAU;AAAA,MACV,cAAW;AAAA,MAEV,UAAAH,EAAa,IAAI,CAACI,GAAOC,MAAU;AAClC,cAAMC,IAAQX,EAAS,SAAS,KAAK,GAE/BY,IAAS,IAAIF,IAAQ;AAE3B,eACE,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YAEC,OAAAJ;AAAA,YACA,WAAWN;AAAA,YACX,UAAAH;AAAA,YACA,OAAO;AAAA,cACL,CAACW,IAAQ,QAAQ,QAAQ,GAAG,GAAGC,CAAM;AAAA,YAAA;AAAA,UACvC;AAAA,UANKH,EAAM;AAAA,QAAA;AAAA,MASjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAKL,SAAI,OAAO,UAAW,cACbK,EAAaR,GAAW,SAAS,IAAI,IAGvCA;AACT;"}

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

@@ -0,0 +1,64 @@
+"use client";
+var b = Object.defineProperty;
+var u = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var l = (o, t, n) => t in o ? b(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n, c = (o, t) => {
+  for (var n in t || (t = {}))
+    g.call(t, n) && l(o, n, t[n]);
+  if (u)
+    for (var n of u(t))
+      h.call(t, n) && l(o, n, t[n]);
+  return o;
+};
+import { useCallback as s } from "react";
+import { useToastContext as k } from "../../providers/ToastContext.js";
+function A() {
+  const { addToast: o, removeToast: t, clearAll: n } = k(), a = s(
+    (r) => o({
+      title: r.title,
+      description: r.description,
+      variant: r.variant || "info",
+      duration: r.duration,
+      action: r.action
+    }),
+    [o]
+  ), d = s(
+    (r, i, e) => a(c({ title: r, description: i, variant: "success" }, e)),
+    [a]
+  ), f = s(
+    (r, i, e) => a(c({ title: r, description: i, variant: "error" }, e)),
+    [a]
+  ), v = s(
+    (r, i, e) => a(c({ title: r, description: i, variant: "warning" }, e)),
+    [a]
+  ), m = s(
+    (r, i, e) => a(c({ title: r, description: i, variant: "info" }, e)),
+    [a]
+  ), w = s(
+    (r, i, e, T = "info", C) => a({
+      title: r,
+      description: i,
+      variant: T,
+      duration: C,
+      action: {
+        label: "Undo",
+        onClick: e
+      }
+    }),
+    [a]
+  );
+  return {
+    show: a,
+    success: d,
+    error: f,
+    warning: v,
+    info: m,
+    withUndo: w,
+    dismiss: t,
+    clearAll: n
+  };
+}
+export {
+  A as useToast
+};
+//# sourceMappingURL=useToast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../../../../src/ui/components/Toast/useToast.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport {\n  useToastContext,\n  type ToastVariant,\n} from \"../../providers/ToastContext\";\n\nexport interface ToastOptions {\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  duration?: number; // in milliseconds, undefined = no auto-dismiss\n  action?: {\n    label: string;\n    onClick: () => void;\n  };\n}\n\n/**\n * useToast Hook\n *\n * Hook for showing toast notifications.\n *\n * @example\n * ```tsx\n * const toast = useToast();\n *\n * toast.success('Success!', 'Operation completed successfully');\n * toast.error('Error!', 'Something went wrong');\n * toast.info('Info', 'Here is some information');\n * toast.warning('Warning', 'Please be careful');\n * ```\n */\nexport function useToast() {\n  const { addToast, removeToast, clearAll } = useToastContext();\n\n  const show = useCallback(\n    (options: ToastOptions) => {\n      return addToast({\n        title: options.title,\n        description: options.description,\n        variant: options.variant || \"info\",\n        duration: options.duration,\n        action: options.action,\n      });\n    },\n    [addToast],\n  );\n\n  const success = useCallback(\n    (\n      title: string,\n      description?: string,\n      options?: Omit<ToastOptions, \"title\" | \"description\" | \"variant\">,\n    ) => {\n      return show({ title, description, variant: \"success\", ...options });\n    },\n    [show],\n  );\n\n  const error = useCallback(\n    (\n      title: string,\n      description?: string,\n      options?: Omit<ToastOptions, \"title\" | \"description\" | \"variant\">,\n    ) => {\n      return show({ title, description, variant: \"error\", ...options });\n    },\n    [show],\n  );\n\n  const warning = useCallback(\n    (\n      title: string,\n      description?: string,\n      options?: Omit<ToastOptions, \"title\" | \"description\" | \"variant\">,\n    ) => {\n      return show({ title, description, variant: \"warning\", ...options });\n    },\n    [show],\n  );\n\n  const info = useCallback(\n    (\n      title: string,\n      description?: string,\n      options?: Omit<ToastOptions, \"title\" | \"description\" | \"variant\">,\n    ) => {\n      return show({ title, description, variant: \"info\", ...options });\n    },\n    [show],\n  );\n\n  const withUndo = useCallback(\n    (\n      title: string,\n      description: string | undefined,\n      onUndo: () => void,\n      variant: ToastVariant = \"info\",\n      duration?: number,\n    ) => {\n      return show({\n        title,\n        description,\n        variant,\n        duration,\n        action: {\n          label: \"Undo\",\n          onClick: onUndo,\n        },\n      });\n    },\n    [show],\n  );\n\n  return {\n    show,\n    success,\n    error,\n    warning,\n    info,\n    withUndo,\n    dismiss: removeToast,\n    clearAll,\n  };\n}\n"],"names":["useToast","addToast","removeToast","clearAll","useToastContext","show","useCallback","options","success","title","description","__spreadValues","error","warning","info","withUndo","onUndo","variant","duration"],"mappings":";;;;;;;;;;;;;;AAkCO,SAASA,IAAW;AACzB,QAAM,EAAE,UAAAC,GAAU,aAAAC,GAAa,UAAAC,EAAA,IAAaC,EAAA,GAEtCC,IAAOC;AAAA,IACX,CAACC,MACQN,EAAS;AAAA,MACd,OAAOM,EAAQ;AAAA,MACf,aAAaA,EAAQ;AAAA,MACrB,SAASA,EAAQ,WAAW;AAAA,MAC5B,UAAUA,EAAQ;AAAA,MAClB,QAAQA,EAAQ;AAAA,IAAA,CACjB;AAAA,IAEH,CAACN,CAAQ;AAAA,EAAA,GAGLO,IAAUF;AAAA,IACd,CACEG,GACAC,GACAH,MAEOF,EAAKM,EAAA,EAAE,OAAAF,GAAO,aAAAC,GAAa,SAAS,aAAcH,EAAS;AAAA,IAEpE,CAACF,CAAI;AAAA,EAAA,GAGDO,IAAQN;AAAA,IACZ,CACEG,GACAC,GACAH,MAEOF,EAAKM,EAAA,EAAE,OAAAF,GAAO,aAAAC,GAAa,SAAS,WAAYH,EAAS;AAAA,IAElE,CAACF,CAAI;AAAA,EAAA,GAGDQ,IAAUP;AAAA,IACd,CACEG,GACAC,GACAH,MAEOF,EAAKM,EAAA,EAAE,OAAAF,GAAO,aAAAC,GAAa,SAAS,aAAcH,EAAS;AAAA,IAEpE,CAACF,CAAI;AAAA,EAAA,GAGDS,IAAOR;AAAA,IACX,CACEG,GACAC,GACAH,MAEOF,EAAKM,EAAA,EAAE,OAAAF,GAAO,aAAAC,GAAa,SAAS,UAAWH,EAAS;AAAA,IAEjE,CAACF,CAAI;AAAA,EAAA,GAGDU,IAAWT;AAAA,IACf,CACEG,GACAC,GACAM,GACAC,IAAwB,QACxBC,MAEOb,EAAK;AAAA,MACV,OAAAI;AAAA,MACA,aAAAC;AAAA,MACA,SAAAO;AAAA,MACA,UAAAC;AAAA,MACA,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,SAASF;AAAA,MAAA;AAAA,IACX,CACD;AAAA,IAEH,CAACX,CAAI;AAAA,EAAA;AAGP,SAAO;AAAA,IACL,MAAAA;AAAA,IACA,SAAAG;AAAA,IACA,OAAAI;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASb;AAAA,IACT,UAAAC;AAAA,EAAA;AAEJ;"}

package/dist/granular/ui/hooks/createGenericContext.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as a, useContext as n } from "react";
+function f(r) {
+  const e = a(void 0);
+  e.displayName = r.displayName;
+  function o({
+    value: t,
+    children: c
+  }) {
+    return /* @__PURE__ */ s(e.Provider, { value: t, children: c });
+  }
+  function i() {
+    const t = n(e);
+    if (t === void 0)
+      throw new Error(r.errorMessage);
+    return t;
+  }
+  function u() {
+    return n(e);
+  }
+  return { Context: e, Provider: o, useContextRequired: i, useContextOptional: u };
+}
+export {
+  f as createGenericContext
+};
+//# sourceMappingURL=createGenericContext.js.map

package/dist/granular/ui/hooks/createGenericContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGenericContext.js","sources":["../../../../src/ui/hooks/createGenericContext.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  type Context,\n  type JSX,\n  type ReactNode,\n} from \"react\";\n\n/**\n * Options for createGenericContext.\n */\nexport interface CreateGenericContextOptions {\n  /**\n   * displayName surfaced in React DevTools for the underlying Context.\n   */\n  displayName: string;\n  /**\n   * Error thrown by the required hook when called outside the Provider\n   * tree. Keep this verbatim to whatever the legacy hook threw — it is\n   * a behavioural contract consumers rely on.\n   */\n  errorMessage: string;\n}\n\n/**\n * Surface returned by createGenericContext.\n *\n * @typeParam TBase - The \"default\" shape stored in the underlying\n *  React Context. For generic context families this is the type fully\n *  instantiated at the default generic argument (e.g. for\n *  `XxxContextValue<TGeneric extends Base = Base>` use\n *  `XxxContextValue` — no argument — which TS resolves to the default).\n */\nexport interface GenericContext<TBase> {\n  /**\n   * Raw React Context object. Exposed unchanged so existing consumers\n   * (especially `useContextSelector`) keep working. `useContext(Context)`\n   * returns `TBase | undefined`; the typed hooks below carry the\n   * per-call generic.\n   */\n  Context: Context<TBase | undefined>;\n  /**\n   * Generic Provider. Accepts `value` typed at the per-call `TSpecific`,\n   * not at `TBase`, so each call site is cast-free.\n   *\n   * Inside, the single `as TBase` assignment encodes the cost of React's\n   * invariant Context typing — see the implementation comment for the\n   * full reason.\n   */\n  Provider: <TSpecific = TBase>(props: {\n    value: TSpecific;\n    children: ReactNode;\n  }) => JSX.Element;\n  // Note: TSpecific is intentionally unconstrained — see implementation\n  // comment for the invariance reason. The two casts inside the helper\n  // are the entire price; consumer sites stay cast-free.\n  /**\n   * Required hook. Returns the context value typed at the per-call\n   * `TSpecific` (defaults to `TBase`). Throws `options.errorMessage`\n   * when called outside the Provider tree.\n   */\n  useContextRequired: <TSpecific = TBase>() => TSpecific;\n  /**\n   * Optional variant — returns `undefined` outside the Provider tree\n   * instead of throwing.\n   */\n  useContextOptional: <TSpecific = TBase>() => TSpecific | undefined;\n}\n\n/**\n * Build a React Context family where the value carries a per-call\n * generic that is preserved at the Provider and at the consuming hook\n * site, without spreading `as unknown as` casts through every consumer.\n *\n * The motivation: React's `Context<T>` is invariant in `T`. A generic\n * value type whose generic flows into an invariant inner position\n * (e.g. `UseFormReturn<T>` inside `FormContextValue<T>`, or\n * `TableColumn<T>` / `(row: T) => …` inside `TableContextValue<T>`)\n * cannot be made structurally assignable to its default-generic\n * counterpart. The cast is irreducible. This factory confines it to\n * three sites inside the helper — the Provider value and both hook\n * returns — and consumers stay cast-free.\n *\n * @example\n * ```ts\n * const formContext = createGenericContext<FormContextValue>({\n *   displayName: \"FormContext\",\n *   errorMessage: \"useFormContext must be used within a Form …\",\n * });\n *\n * export const FormContext = formContext.Context;\n * export function useFormContext<T extends FieldValues = FieldValues>() {\n *   return formContext.useContextRequired<FormContextValue<T>>();\n * }\n * ```\n */\nexport function createGenericContext<TBase>(\n  options: CreateGenericContextOptions,\n): GenericContext<TBase> {\n  const Context = createContext<TBase | undefined>(undefined);\n  Context.displayName = options.displayName;\n\n  function Provider<TSpecific = TBase>({\n    value,\n    children,\n  }: {\n    value: TSpecific;\n    children: ReactNode;\n  }): JSX.Element {\n    // React.Context is invariant in its value type. TSpecific is whatever\n    // the per-call site uses (e.g. FormContextValue<MyForm>); TBase is\n    // the same family at its default generic (FormContextValue<FieldValues>).\n    // When the per-call generic flows into an invariant inner position\n    // (UseFormReturn<T> inside FormContextValue<T>; TableColumn<T> inside\n    // TableContextValue<T>), the two types have no structural overlap\n    // from TS's perspective — TS itself recommends going through\n    // `unknown`. We do, but we confine it here so every consumer site\n    // stays cast-free.\n    return (\n      <Context.Provider value={value as unknown as TBase}>\n        {children}\n      </Context.Provider>\n    );\n  }\n\n  function useContextRequired<TSpecific = TBase>(): TSpecific {\n    const value = useContext(Context);\n    if (value === undefined) {\n      throw new Error(options.errorMessage);\n    }\n    // Symmetric to the Provider cast — same invariance reason.\n    return value as unknown as TSpecific;\n  }\n\n  function useContextOptional<TSpecific = TBase>(): TSpecific | undefined {\n    return useContext(Context) as unknown as TSpecific | undefined;\n  }\n\n  return { Context, Provider, useContextRequired, useContextOptional };\n}\n"],"names":["createGenericContext","options","Context","createContext","Provider","value","children","jsx","useContextRequired","useContext","useContextOptional"],"mappings":";;;AAkGO,SAASA,EACdC,GACuB;AACvB,QAAMC,IAAUC,EAAiC,MAAS;AAC1D,EAAAD,EAAQ,cAAcD,EAAQ;AAE9B,WAASG,EAA4B;AAAA,IACnC,OAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,GAIc;AAUd,WACE,gBAAAC,EAACL,EAAQ,UAAR,EAAiB,OAAAG,GACf,UAAAC,EAAA,CACH;AAAA,EAEJ;AAEA,WAASE,IAAmD;AAC1D,UAAMH,IAAQI,EAAWP,CAAO;AAChC,QAAIG,MAAU;AACZ,YAAM,IAAI,MAAMJ,EAAQ,YAAY;AAGtC,WAAOI;AAAA,EACT;AAEA,WAASK,IAA+D;AACtE,WAAOD,EAAWP,CAAO;AAAA,EAC3B;AAEA,SAAO,EAAE,SAAAA,GAAS,UAAAE,GAAU,oBAAAI,GAAoB,oBAAAE,EAAA;AAClD;"}

package/dist/granular/ui/hooks/focusable.js

@@ -0,0 +1,14 @@
+"use client";
+const n = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function r(t) {
+  return Array.from(
+    t.querySelectorAll(n)
+  ).filter(
+    (e) => !e.disabled && e.offsetParent !== null
+  );
+}
+export {
+  n as FOCUSABLE_SELECTOR,
+  r as getFocusableElements
+};
+//# sourceMappingURL=focusable.js.map

package/dist/granular/ui/hooks/focusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable.js","sources":["../../../../src/ui/hooks/focusable.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Shared focusable-element helpers consumed by the focus-management\n * hooks (`useFocusTrap`, `useAutoFocus`). Centralised so the selector\n * and visibility filter have one definition — if the rules change\n * (a new tabbable role lands, jsdom's offsetParent quirk needs a\n * different handling pivot, etc.), there's exactly one site to edit.\n *\n * Originally lived inline in `DialogContent`'s focus trap; the trap\n * hook took ownership in Phase 3 PR 1, and PR 2 split it out again\n * once `useAutoFocus` became the second consumer.\n */\n\n/**\n * Selector covering tabbable elements per WAI-ARIA Authoring Practices.\n * Mirrors the selector DialogContent has shipped with since the dialog\n * pattern landed.\n */\nexport const FOCUSABLE_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Return the focusable descendants of `container` that are eligible to\n * receive Tab focus.\n *\n * Filters out:\n *  - `disabled` form controls (button/input/select/textarea expose the\n *    DOM property; the cast is safe at the call site because every\n *    selector match either has the property or returns `undefined`,\n *    which short-circuits to falsy).\n *  - hidden elements (`offsetParent === null` — covers `display: none`,\n *    `visibility: hidden`, detached subtrees). In jsdom this filter\n *    rejects every connected element because jsdom doesn't compute\n *    layout; tests work around this by stubbing `offsetParent` on the\n *    nodes they care about. Production stays correct.\n */\nexport function getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter(\n    (el) =>\n      !(el as HTMLButtonElement | HTMLInputElement).disabled &&\n      el.offsetParent !== null,\n  );\n}\n"],"names":["FOCUSABLE_SELECTOR","getFocusableElements","container","el"],"mappings":";AAmBO,MAAMA,IACX;AAiBK,SAASC,EAAqBC,GAAuC;AAC1E,SAAO,MAAM;AAAA,IACXA,EAAU,iBAA8BF,CAAkB;AAAA,EAAA,EAC1D;AAAA,IACA,CAACG,MACC,CAAEA,EAA4C,YAC9CA,EAAG,iBAAiB;AAAA,EAAA;AAE1B;"}

package/dist/granular/ui/hooks/useAutoFocus.js

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect as n } from "react";
+import { getFocusableElements as s } from "./focusable.js";
+function f(e, r) {
+  n(() => {
+    if (!r) return;
+    const o = setTimeout(() => {
+      const t = e.current;
+      if (!t) return;
+      const u = s(t);
+      if (u.length > 0) {
+        u[0].focus();
+        return;
+      }
+      t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1"), t.focus();
+    }, 0);
+    return () => clearTimeout(o);
+  }, [r, e]);
+}
+export {
+  f as useAutoFocus
+};
+//# sourceMappingURL=useAutoFocus.js.map

package/dist/granular/ui/hooks/useAutoFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoFocus.js","sources":["../../../../src/ui/hooks/useAutoFocus.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\nimport { getFocusableElements } from \"./focusable\";\n\n/**\n * On `isActive` rising edge, move keyboard focus to the first focusable\n * element inside `containerRef`. Falls back to focusing the container\n * itself (after temporarily setting `tabindex=\"-1\"` if needed) when the\n * container has no focusable children — so the modal still owns focus\n * and Escape/Tab handlers attached to it remain reachable.\n *\n * Deferred via `setTimeout(0)`, matching the timing the existing Dialog\n * implementation proved out. Two reasons that timing matters:\n *\n *   1. The overlay's content (button, input, link) is committed to the\n *      DOM in the same render that flips `isActive` true. Synchronous\n *      focus from inside the effect can land on the *previous* DOM\n *      snapshot in React 19's concurrent paths; the timer guarantees\n *      we run after commit.\n *   2. Composes with `useFocusRestore`. Restore snapshots\n *      `document.activeElement` on open *before* this hook moves focus\n *      inside the overlay — order guaranteed by the snapshot running in\n *      its own effect at the rising edge while auto-focus is deferred.\n *\n * Idempotent on `isActive=false`: the hook does nothing on the falling\n * edge (focus restoration is `useFocusRestore`'s concern; this hook\n * only handles the rising-edge auto-focus).\n *\n * @example\n * ```tsx\n * function MyModal({ isOpen }: { isOpen: boolean }) {\n *   const contentRef = useRef<HTMLDivElement>(null);\n *   useFocusRestore(isOpen);\n *   useFocusTrap(contentRef, isOpen);\n *   useAutoFocus(contentRef, isOpen);\n *   // ...\n * }\n * ```\n */\nexport function useAutoFocus(\n  containerRef: RefObject<HTMLElement | null>,\n  isActive: boolean,\n): void {\n  useEffect(() => {\n    if (!isActive) return;\n\n    const timer = setTimeout(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const focusables = getFocusableElements(container);\n      if (focusables.length > 0) {\n        focusables[0].focus();\n        return;\n      }\n\n      // Container has no focusable child (e.g., a confirmation modal\n      // rendered with body text only). Make the container itself\n      // focusable so the trap has something to anchor to and the\n      // surface receives keyboard events. We don't restore the original\n      // tabindex on cleanup — the container is about to unmount with\n      // the closing overlay; persisting tabindex=\"-1\" through the\n      // closing frame is harmless.\n      if (!container.hasAttribute(\"tabindex\")) {\n        container.setAttribute(\"tabindex\", \"-1\");\n      }\n      container.focus();\n    }, 0);\n\n    return () => clearTimeout(timer);\n  }, [isActive, containerRef]);\n}\n"],"names":["useAutoFocus","containerRef","isActive","useEffect","timer","container","focusables","getFocusableElements"],"mappings":";;;AAwCO,SAASA,EACdC,GACAC,GACM;AACN,EAAAC,EAAU,MAAM;AACd,QAAI,CAACD,EAAU;AAEf,UAAME,IAAQ,WAAW,MAAM;AAC7B,YAAMC,IAAYJ,EAAa;AAC/B,UAAI,CAACI,EAAW;AAEhB,YAAMC,IAAaC,EAAqBF,CAAS;AACjD,UAAIC,EAAW,SAAS,GAAG;AACzB,QAAAA,EAAW,CAAC,EAAE,MAAA;AACd;AAAA,MACF;AASA,MAAKD,EAAU,aAAa,UAAU,KACpCA,EAAU,aAAa,YAAY,IAAI,GAEzCA,EAAU,MAAA;AAAA,IACZ,GAAG,CAAC;AAEJ,WAAO,MAAM,aAAaD,CAAK;AAAA,EACjC,GAAG,CAACF,GAAUD,CAAY,CAAC;AAC7B;"}

package/dist/granular/ui/hooks/useCollapsible.js

@@ -0,0 +1,37 @@
+"use client";
+import { useCallback as f, useState as S, useEffect as m } from "react";
+function v({
+  defaultOpen: e = !0,
+  open: t,
+  onOpenChange: u,
+  storageKey: i
+}) {
+  const d = f(() => {
+    if (i && typeof window != "undefined") {
+      const l = localStorage.getItem(i);
+      if (l !== null)
+        return l === "true";
+    }
+    return e;
+  }, [e, i]), [c, o] = S(d), r = t !== void 0 ? t : c;
+  m(() => {
+    i && typeof window != "undefined" && t === void 0 && localStorage.setItem(i, String(c));
+  }, [c, i, t]);
+  const s = f(
+    (l) => {
+      t === void 0 && o(l), u == null || u(l);
+    },
+    [t, u]
+  ), n = f(() => {
+    s(!r);
+  }, [r, s]);
+  return {
+    isOpen: r,
+    toggle: n,
+    setOpen: s
+  };
+}
+export {
+  v as useCollapsible
+};
+//# sourceMappingURL=useCollapsible.js.map

package/dist/granular/ui/hooks/useCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapsible.js","sources":["../../../../src/ui/hooks/useCollapsible.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\n\nexport interface UseCollapsibleOptions {\n  defaultOpen?: boolean;\n  open?: boolean; // Controlled mode\n  onOpenChange?: (open: boolean) => void;\n  storageKey?: string; // For localStorage persistence\n}\n\nexport interface UseCollapsibleReturn {\n  isOpen: boolean;\n  toggle: () => void;\n  setOpen: (open: boolean) => void;\n}\n\n/**\n * useCollapsible Hook\n *\n * Reusable hook for collapsible component logic.\n * Supports both controlled and uncontrolled modes.\n * Optional localStorage persistence.\n *\n * @example\n * ```tsx\n * const { isOpen, toggle } = useCollapsible({\n *   defaultOpen: true,\n *   storageKey: 'my-collapsible-state'\n * });\n * ```\n */\nexport function useCollapsible({\n  defaultOpen = true,\n  open,\n  onOpenChange,\n  storageKey,\n}: UseCollapsibleOptions): UseCollapsibleReturn {\n  // Load initial state from localStorage if storageKey is provided\n  const getInitialState = useCallback((): boolean => {\n    if (storageKey && typeof window !== \"undefined\") {\n      const stored = localStorage.getItem(storageKey);\n      if (stored !== null) {\n        return stored === \"true\";\n      }\n    }\n    return defaultOpen;\n  }, [defaultOpen, storageKey]);\n\n  const [internalOpen, setInternalOpen] = useState<boolean>(getInitialState);\n\n  // Use controlled state if provided, otherwise use internal state\n  const isOpen = open !== undefined ? open : internalOpen;\n\n  // Persist to localStorage when state changes\n  useEffect(() => {\n    if (storageKey && typeof window !== \"undefined\" && open === undefined) {\n      localStorage.setItem(storageKey, String(internalOpen));\n    }\n  }, [internalOpen, storageKey, open]);\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      if (open === undefined) {\n        // Uncontrolled mode\n        setInternalOpen(newOpen);\n      }\n      // In controlled mode, parent handles state\n      onOpenChange?.(newOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!isOpen);\n  }, [isOpen, setOpen]);\n\n  return {\n    isOpen,\n    toggle,\n    setOpen,\n  };\n}\n"],"names":["useCollapsible","defaultOpen","open","onOpenChange","storageKey","getInitialState","useCallback","stored","internalOpen","setInternalOpen","useState","isOpen","useEffect","setOpen","newOpen","toggle"],"mappings":";;AAgCO,SAASA,EAAe;AAAA,EAC7B,aAAAC,IAAc;AAAA,EACd,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACF,GAAgD;AAE9C,QAAMC,IAAkBC,EAAY,MAAe;AACjD,QAAIF,KAAc,OAAO,UAAW,aAAa;AAC/C,YAAMG,IAAS,aAAa,QAAQH,CAAU;AAC9C,UAAIG,MAAW;AACb,eAAOA,MAAW;AAAA,IAEtB;AACA,WAAON;AAAA,EACT,GAAG,CAACA,GAAaG,CAAU,CAAC,GAEtB,CAACI,GAAcC,CAAe,IAAIC,EAAkBL,CAAe,GAGnEM,IAAST,MAAS,SAAYA,IAAOM;AAG3C,EAAAI,EAAU,MAAM;AACd,IAAIR,KAAc,OAAO,UAAW,eAAeF,MAAS,UAC1D,aAAa,QAAQE,GAAY,OAAOI,CAAY,CAAC;AAAA,EAEzD,GAAG,CAACA,GAAcJ,GAAYF,CAAI,CAAC;AAEnC,QAAMW,IAAUP;AAAA,IACd,CAACQ,MAAqB;AACpB,MAAIZ,MAAS,UAEXO,EAAgBK,CAAO,GAGzBX,KAAA,QAAAA,EAAeW;AAAA,IACjB;AAAA,IACA,CAACZ,GAAMC,CAAY;AAAA,EAAA,GAGfY,IAAST,EAAY,MAAM;AAC/B,IAAAO,EAAQ,CAACF,CAAM;AAAA,EACjB,GAAG,CAACA,GAAQE,CAAO,CAAC;AAEpB,SAAO;AAAA,IACL,QAAAF;AAAA,IACA,QAAAI;AAAA,IACA,SAAAF;AAAA,EAAA;AAEJ;"}