@fabio.caffarello/react-design-system 3.13.0 → 4.0.0

package/dist/granular/ui/components/Dialog/AlertDialog.js

@@ -1,48 +1,81 @@
 "use client";
-import { jsx as i, jsxs as c, Fragment as j } from "react/jsx-runtime";
-import d from "./Dialog.js";
-import { DialogContent as y } from "./DialogContent.js";
-import { DialogHeader as F } from "./DialogHeader.js";
-import { DialogFooter as h } from "./DialogFooter.js";
-import { Button as m } from "../../primitives/Button/Button.js";
-function q({
-  open: e,
-  defaultOpen: f,
-  onOpenChange: r,
-  title: o,
-  description: s,
-  confirmLabel: a = "Confirm",
-  cancelLabel: u = "Cancel",
-  variant: D = "default",
-  onConfirm: l,
+import { jsx as r, jsxs as h, Fragment as p } from "react/jsx-runtime";
+import u from "./Dialog.js";
+import { DialogContent as g } from "./DialogContent.js";
+import { DialogHeader as D } from "./DialogHeader.js";
+import { DialogFooter as v } from "./DialogFooter.js";
+import { useDialogContext as x } from "../../providers/DialogContext.js";
+import { Button as f } from "../../primitives/Button/Button.js";
+function k({
+  title: l,
+  description: i,
+  confirmLabel: n = "Confirm",
+  cancelLabel: a = "Cancel",
+  variant: c = "default",
+  onConfirm: e,
   onCancel: t,
-  children: v
+  children: s
 }) {
-  const k = () => {
-    l == null || l(), r == null || r(!1);
-  }, x = () => {
-    t == null || t(), r == null || r(!1);
+  const { onClose: o } = x(), d = () => {
+    e == null || e(), o();
+  }, m = () => {
+    t == null || t(), o();
   };
-  return /* @__PURE__ */ i(d, { open: e, defaultOpen: f, onOpenChange: r, children: /* @__PURE__ */ i(y, { size: "sm", closeOnOverlayClick: !1, children: v || /* @__PURE__ */ c(j, { children: [
-    /* @__PURE__ */ c(F, { children: [
-      /* @__PURE__ */ i(d.Title, { children: o }),
-      s && /* @__PURE__ */ i(d.Description, { children: s })
-    ] }),
-    /* @__PURE__ */ c(h, { children: [
-      /* @__PURE__ */ i(m, { variant: "outline", onClick: x, children: u }),
-      /* @__PURE__ */ i(
-        m,
-        {
-          variant: D === "destructive" ? "error" : "primary",
-          onClick: k,
-          children: a
-        }
-      )
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ r(
+    g,
+    {
+      size: "sm",
+      closeOnOverlayClick: !1,
+      showCloseButton: !1,
+      children: s || /* @__PURE__ */ h(p, { children: [
+        /* @__PURE__ */ h(D, { children: [
+          /* @__PURE__ */ r(u.Title, { children: l }),
+          i && /* @__PURE__ */ r(u.Description, { children: i })
+        ] }),
+        /* @__PURE__ */ h(v, { children: [
+          /* @__PURE__ */ r(f, { variant: "outline", onClick: m, children: a }),
+          /* @__PURE__ */ r(
+            f,
+            {
+              variant: c === "destructive" ? "error" : "primary",
+              onClick: d,
+              children: n
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function w({
+  open: l,
+  defaultOpen: i,
+  onOpenChange: n,
+  title: a,
+  description: c,
+  confirmLabel: e,
+  cancelLabel: t,
+  variant: s,
+  onConfirm: o,
+  onCancel: d,
+  children: m
+}) {
+  return /* @__PURE__ */ r(u, { open: l, defaultOpen: i, onOpenChange: n, children: /* @__PURE__ */ r(
+    k,
+    {
+      title: a,
+      description: c,
+      confirmLabel: e,
+      cancelLabel: t,
+      variant: s,
+      onConfirm: o,
+      onCancel: d,
+      children: m
+    }
+  ) });
 }
 export {
-  q as AlertDialog,
-  q as default
+  w as AlertDialog,
+  w as default
 };
 //# sourceMappingURL=AlertDialog.js.map

package/dist/granular/ui/components/Dialog/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../../../src/ui/components/Dialog/AlertDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport Dialog from \"./Dialog\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"destructive\";\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  children?: ReactNode;\n}\n\n/**\n * AlertDialog Component\n *\n * A specialized dialog for confirmations and alerts.\n * Built on top of Dialog with pre-configured layout.\n *\n * @example\n * ```tsx\n * <AlertDialog\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Delete Item\"\n *   description=\"Are you sure? This action cannot be undone.\"\n *   variant=\"destructive\"\n *   onConfirm={handleDelete}\n * />\n * ```\n */\nexport function AlertDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  onConfirm,\n  onCancel,\n  children,\n}: AlertDialogProps) {\n  const handleConfirm = () => {\n    onConfirm?.();\n    onOpenChange?.(false);\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onOpenChange?.(false);\n  };\n\n  return (\n    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <DialogContent size=\"sm\" closeOnOverlayClick={false}>\n        {children || (\n          <>\n            <DialogHeader>\n              <Dialog.Title>{title}</Dialog.Title>\n              {description && (\n                <Dialog.Description>{description}</Dialog.Description>\n              )}\n            </DialogHeader>\n            <DialogFooter>\n              <Button variant=\"outline\" onClick={handleCancel}>\n                {cancelLabel}\n              </Button>\n              <Button\n                variant={variant === \"destructive\" ? \"error\" : \"primary\"}\n                onClick={handleConfirm}\n              >\n                {confirmLabel}\n              </Button>\n            </DialogFooter>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport default AlertDialog;\n"],"names":["AlertDialog","open","defaultOpen","onOpenChange","title","description","confirmLabel","cancelLabel","variant","onConfirm","onCancel","children","handleConfirm","handleCancel","jsx","Dialog","DialogContent","jsxs","Fragment","DialogHeader","DialogFooter","Button"],"mappings":";;;;;;;AAyCO,SAASA,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,QAAMC,IAAgB,MAAM;AAC1B,IAAAH,KAAA,QAAAA,KACAN,KAAA,QAAAA,EAAe;AAAA,EACjB,GAEMU,IAAe,MAAM;AACzB,IAAAH,KAAA,QAAAA,KACAP,KAAA,QAAAA,EAAe;AAAA,EACjB;AAEA,SACE,gBAAAW,EAACC,GAAA,EAAO,MAAAd,GAAY,aAAAC,GAA0B,cAAAC,GAC5C,UAAA,gBAAAW,EAACE,GAAA,EAAc,MAAK,MAAK,qBAAqB,IAC3C,UAAAL,KACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACC,EAAO,OAAP,EAAc,UAAAX,EAAA,CAAM;AAAA,MACpBC,KACC,gBAAAS,EAACC,EAAO,aAAP,EAAoB,UAAAV,EAAA,CAAY;AAAA,IAAA,GAErC;AAAA,sBACCe,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAO,SAAQ,WAAU,SAASR,GAChC,UAAAN,GACH;AAAA,MACA,gBAAAO;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAASb,MAAY,gBAAgB,UAAU;AAAA,UAC/C,SAASI;AAAA,UAER,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GAEJ,GACF;AAEJ;"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../../../src/ui/components/Dialog/AlertDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport Dialog from \"./Dialog\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogHeader } from \"./DialogHeader\";\nimport { DialogFooter } from \"./DialogFooter\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport Button from \"../../primitives/Button/Button\";\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"destructive\";\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  children?: ReactNode;\n}\n\ntype AlertDialogBodyProps = Pick<\n  AlertDialogProps,\n  | \"title\"\n  | \"description\"\n  | \"confirmLabel\"\n  | \"cancelLabel\"\n  | \"variant\"\n  | \"onConfirm\"\n  | \"onCancel\"\n  | \"children\"\n>;\n\n/**\n * Inner body rendered as a child of <Dialog> so it can read the dialog\n * context. Closing MUST go through context `onClose` (not the external\n * `onOpenChange` prop): in uncontrolled mode `onOpenChange` is undefined,\n * so the old `onOpenChange?.(false)` was a no-op and the alert could\n * never be dismissed by its own buttons. `onClose` closes in BOTH modes\n * (it calls the provider's setIsOpen, which drives uncontrolled state and\n * still notifies a controlled consumer's onOpenChange).\n */\nfunction AlertDialogBody({\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  onConfirm,\n  onCancel,\n  children,\n}: AlertDialogBodyProps) {\n  const { onClose } = useDialogContext();\n\n  const handleConfirm = () => {\n    onConfirm?.();\n    onClose();\n  };\n\n  const handleCancel = () => {\n    onCancel?.();\n    onClose();\n  };\n\n  // AlertDialog is a decision gate: the user must pick Confirm or\n  // Cancel, so it suppresses the auto ✕ (showCloseButton={false}) and\n  // overlay-click — consistent with its existing no-dismiss-affordance\n  // contract. DialogContent now renders the ✕ by default (issue #221).\n  return (\n    <DialogContent\n      size=\"sm\"\n      closeOnOverlayClick={false}\n      showCloseButton={false}\n    >\n      {children || (\n        <>\n          <DialogHeader>\n            <Dialog.Title>{title}</Dialog.Title>\n            {description && (\n              <Dialog.Description>{description}</Dialog.Description>\n            )}\n          </DialogHeader>\n          <DialogFooter>\n            <Button variant=\"outline\" onClick={handleCancel}>\n              {cancelLabel}\n            </Button>\n            <Button\n              variant={variant === \"destructive\" ? \"error\" : \"primary\"}\n              onClick={handleConfirm}\n            >\n              {confirmLabel}\n            </Button>\n          </DialogFooter>\n        </>\n      )}\n    </DialogContent>\n  );\n}\n\n/**\n * AlertDialog Component\n *\n * A specialized dialog for confirmations and alerts.\n * Built on top of Dialog with pre-configured layout.\n *\n * @example\n * ```tsx\n * <AlertDialog\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Delete Item\"\n *   description=\"Are you sure? This action cannot be undone.\"\n *   variant=\"destructive\"\n *   onConfirm={handleDelete}\n * />\n * ```\n */\nexport function AlertDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel,\n  cancelLabel,\n  variant,\n  onConfirm,\n  onCancel,\n  children,\n}: AlertDialogProps) {\n  return (\n    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <AlertDialogBody\n        title={title}\n        description={description}\n        confirmLabel={confirmLabel}\n        cancelLabel={cancelLabel}\n        variant={variant}\n        onConfirm={onConfirm}\n        onCancel={onCancel}\n      >\n        {children}\n      </AlertDialogBody>\n    </Dialog>\n  );\n}\n\nexport default AlertDialog;\n"],"names":["AlertDialogBody","title","description","confirmLabel","cancelLabel","variant","onConfirm","onCancel","children","onClose","useDialogContext","handleConfirm","handleCancel","jsx","DialogContent","jsxs","Fragment","DialogHeader","Dialog","DialogFooter","Button","AlertDialog","open","defaultOpen","onOpenChange"],"mappings":";;;;;;;;AA6CA,SAASA,EAAgB;AAAA,EACvB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAyB;AACvB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAAgB,MAAM;AAC1B,IAAAL,KAAA,QAAAA,KACAG,EAAA;AAAA,EACF,GAEMG,IAAe,MAAM;AACzB,IAAAL,KAAA,QAAAA,KACAE,EAAA;AAAA,EACF;AAMA,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,qBAAqB;AAAA,MACrB,iBAAiB;AAAA,MAEhB,eACC,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAJ,EAACK,EAAO,OAAP,EAAc,UAAAjB,EAAA,CAAM;AAAA,UACpBC,KACC,gBAAAW,EAACK,EAAO,aAAP,EAAoB,UAAAhB,EAAA,CAAY;AAAA,QAAA,GAErC;AAAA,0BACCiB,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAN,EAACO,GAAA,EAAO,SAAQ,WAAU,SAASR,GAChC,UAAAR,GACH;AAAA,UACA,gBAAAS;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,SAASf,MAAY,gBAAgB,UAAU;AAAA,cAC/C,SAASM;AAAA,cAER,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAoBO,SAASkB,EAAY;AAAA,EAC1B,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAvB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAqB;AACnB,SACE,gBAAAK,EAACK,GAAA,EAAO,MAAAI,GAAY,aAAAC,GAA0B,cAAAC,GAC5C,UAAA,gBAAAX;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,OAAAC;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MAEC,UAAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/granular/ui/components/Dialog/DialogContent.js

@@ -1,17 +1,17 @@
 "use client";
-var j = Object.defineProperty, D = Object.defineProperties;
-var F = Object.getOwnPropertyDescriptors;
+var S = Object.defineProperty, T = Object.defineProperties;
+var z = Object.getOwnPropertyDescriptors;
 var l = Object.getOwnPropertySymbols;
 var p = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
-var c = (e, t, o) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, g = (e, t) => {
+var u = (e, t, o) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, g = (e, t) => {
   for (var o in t || (t = {}))
-    p.call(t, o) && c(e, o, t[o]);
+    p.call(t, o) && u(e, o, t[o]);
   if (l)
     for (var o of l(t))
-      x.call(t, o) && c(e, o, t[o]);
+      x.call(t, o) && u(e, o, t[o]);
   return e;
-}, y = (e, t) => D(e, F(t));
-var v = (e, t) => {
+}, v = (e, t) => T(e, z(t));
+var y = (e, t) => {
   var o = {};
   for (var r in e)
     p.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
@@ -20,58 +20,61 @@ var v = (e, t) => {
       t.indexOf(r) < 0 && x.call(e, r) && (o[r] = e[r]);
   return o;
 };
-import { jsxs as L, jsx as m } from "react/jsx-runtime";
-import { useRef as w, useEffect as S } from "react";
-import { createPortal as z } from "react-dom";
-import { useDialogContext as A } from "../../providers/DialogContext.js";
-import { useFocusTrap as O } from "../../hooks/useFocusTrap.js";
-import { useAutoFocus as P } from "../../hooks/useAutoFocus.js";
-import { getSpacingClass as C } from "../../tokens/spacing.js";
+import { jsxs as w, jsx as m } from "react/jsx-runtime";
+import { useRef as C, useEffect as A } from "react";
+import { createPortal as O } from "react-dom";
+import { useDialogContext as P } from "../../providers/DialogContext.js";
+import { useFocusTrap as Z } from "../../hooks/useFocusTrap.js";
+import { useAutoFocus as q } from "../../hooks/useAutoFocus.js";
+import { getSpacingClass as h } from "../../tokens/spacing.js";
+import { DialogClose as B } from "./DialogClose.js";
 import { getRadiusClass as b } from "../../tokens/radius.js";
-import { getShadowClass as T } from "../../tokens/shadows.js";
-import { getZIndexClass as Z } from "../../tokens/z-index.js";
-function Y(q) {
-  var d = q, {
+import { getShadowClass as G } from "../../tokens/shadows.js";
+import { getZIndexClass as H } from "../../tokens/z-index.js";
+function re(J) {
+  var d = J, {
     children: e,
     size: t = "md",
     closeOnOverlayClick: o = !0,
     closeOnEscape: r = !0,
-    className: h = ""
-  } = d, $ = v(d, [
+    showCloseButton: $ = !0,
+    className: k = ""
+  } = d, D = y(d, [
     "children",
     "size",
     "closeOnOverlayClick",
     "closeOnEscape",
+    "showCloseButton",
     "className"
   ]);
-  const { isOpen: n, onClose: s, titleId: k, descriptionId: E } = A(), a = w(null), f = w(null);
-  if (O(a, n), P(a, n), S(() => {
-    if (!n || !r) return;
-    const i = (R) => {
-      R.key === "Escape" && s();
+  const { isOpen: i, onClose: s, titleId: E, descriptionId: I, hasTitle: N, hasDescription: R } = P(), a = C(null), c = C(null);
+  if (Z(a, i), q(a, i), A(() => {
+    if (!i || !r) return;
+    const n = (L) => {
+      L.key === "Escape" && s();
     };
-    return document.addEventListener("keydown", i), () => {
-      document.removeEventListener("keydown", i);
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
     };
-  }, [n, s, r]), !n) return null;
-  const I = {
+  }, [i, s, r]), !i) return null;
+  const j = {
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
     xl: "max-w-2xl",
-    fullscreen: `max-w-full h-full ${C("none", "m")} ${b("none")}`
-  }, N = (i) => {
-    o && i.target === f.current && s();
-  }, u = /* @__PURE__ */ L(
+    fullscreen: `max-w-full h-full ${h("none", "m")} ${b("none")}`
+  }, F = (n) => {
+    o && n.target === c.current && s();
+  }, f = /* @__PURE__ */ w(
     "div",
     {
-      className: `fixed inset-0 ${Z("modal")} overflow-y-auto`,
-      onClick: N,
+      className: `fixed inset-0 ${H("modal")} overflow-y-auto`,
+      onClick: F,
       children: [
         /* @__PURE__ */ m(
           "div",
           {
-            ref: f,
+            ref: c,
             className: "fixed inset-0 bg-scrim transition-opacity",
             "aria-hidden": "true"
           }
@@ -79,26 +82,29 @@ function Y(q) {
         /* @__PURE__ */ m(
           "div",
           {
-            className: `flex min-h-full items-center justify-center ${C("base", "p")}`,
-            children: /* @__PURE__ */ m(
+            className: `flex min-h-full items-center justify-center ${h("base", "p")}`,
+            children: /* @__PURE__ */ w(
               "div",
-              y(g({
+              v(g({
                 ref: a,
                 role: "dialog",
                 "aria-modal": "true",
-                "aria-labelledby": k,
-                "aria-describedby": E,
+                "aria-labelledby": N ? E : void 0,
+                "aria-describedby": R ? I : void 0,
                 className: `
             relative w-full
-            ${I[t]}
+            ${j[t]}
             bg-surface-overlay
             ${b("lg")}
-            ${T("xl")}
-            ${h}
+            ${G("xl")}
+            ${k}
           `,
                 tabIndex: -1
-              }, $), {
-                children: e
+              }, D), {
+                children: [
+                  e,
+                  $ && /* @__PURE__ */ m(B, {})
+                ]
               })
             )
           }
@@ -106,9 +112,9 @@ function Y(q) {
       ]
     }
   );
-  return typeof window != "undefined" ? z(u, document.body) : u;
+  return typeof window != "undefined" ? O(f, document.body) : f;
 }
 export {
-  Y as DialogContent
+  re as DialogContent
 };
 //# sourceMappingURL=DialogContent.js.map

package/dist/granular/ui/components/Dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../../../../../src/ui/components/Dialog/DialogContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { useFocusTrap } from \"../../hooks/useFocusTrap\";\nimport { useAutoFocus } from \"../../hooks/useAutoFocus\";\nimport { getRadiusClass, getShadowClass, getZIndexClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DialogContentProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"role\"\n> {\n  children: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n}\n\nexport function DialogContent({\n  children,\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  className = \"\",\n  ...props\n}: DialogContentProps) {\n  const { isOpen, onClose, titleId, descriptionId } = useDialogContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  // Modal focus contract — Tab cycling + auto-focus, consumed from the\n  // shared hooks introduced in Phase 3 PR 1. Replaces an inline\n  // implementation that duplicated the selector / disabled-and-hidden\n  // filter / boundary-check logic verbatim. The hook variant ALSO\n  // closes a focus-outside-container gap the inline trap silently had\n  // (it relied on auto-focus running first to mask it); the hook\n  // pulls focus back to the trap edge regardless. Focus restore on\n  // close is the separate concern of `useFocusRestore`, consumed in\n  // `DialogProvider`.\n  useFocusTrap(contentRef, isOpen);\n  useAutoFocus(contentRef, isOpen);\n\n  // ESC handling stays inline — gated by the per-Dialog `closeOnEscape`\n  // prop, which the shared hooks intentionally don't know about. Same\n  // shape as Drawer's parallel handler.\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose, closeOnEscape]);\n\n  if (!isOpen) return null;\n\n  const sizeClasses = {\n    sm: \"max-w-sm\",\n    md: \"max-w-md\",\n    lg: \"max-w-lg\",\n    xl: \"max-w-2xl\",\n    fullscreen: `max-w-full h-full ${getSpacingClass(\"none\", \"m\")} ${getRadiusClass(\"none\")}`,\n  };\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === overlayRef.current) {\n      onClose();\n    }\n  };\n\n  const dialogContent = (\n    <div\n      className={`fixed inset-0 ${getZIndexClass(\"modal\")} overflow-y-auto`}\n      onClick={handleOverlayClick}\n    >\n      {/* Overlay */}\n      <div\n        ref={overlayRef}\n        className=\"fixed inset-0 bg-scrim transition-opacity\"\n        aria-hidden=\"true\"\n      />\n\n      {/* Dialog */}\n      <div\n        className={`flex min-h-full items-center justify-center ${getSpacingClass(\"base\", \"p\")}`}\n      >\n        <div\n          ref={contentRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n          className={`\n            relative w-full\n            ${sizeClasses[size]}\n            bg-surface-overlay\n            ${getRadiusClass(\"lg\")}\n            ${getShadowClass(\"xl\")}\n            ${className}\n          `}\n          tabIndex={-1}\n          {...props}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n\n  // Portal rendering\n  if (typeof window !== \"undefined\") {\n    return createPortal(dialogContent, document.body);\n  }\n\n  return dialogContent;\n}\n"],"names":["DialogContent","_a","_b","children","size","closeOnOverlayClick","closeOnEscape","className","props","__objRest","isOpen","onClose","titleId","descriptionId","useDialogContext","contentRef","useRef","overlayRef","useFocusTrap","useAutoFocus","useEffect","handleEscape","e","sizeClasses","getSpacingClass","getRadiusClass","handleOverlayClick","dialogContent","jsxs","getZIndexClass","jsx","__spreadProps","__spreadValues","getShadowClass","createPortal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAASA,EAAcC,GAOP;AAPO,MAAAC,IAAAD,GAC5B;AAAA,cAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,qBAAAC,IAAsB;AAAA,IACtB,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,MALgBL,GAMzBM,IAAAC,EANyBP,GAMzB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,QAAAQ,GAAQ,SAAAC,GAAS,SAAAC,GAAS,eAAAC,EAAA,IAAkBC,EAAA,GAC9CC,IAAaC,EAAuB,IAAI,GACxCC,IAAaD,EAAuB,IAAI;AAgC9C,MArBAE,EAAaH,GAAYL,CAAM,GAC/BS,EAAaJ,GAAYL,CAAM,GAK/BU,EAAU,MAAM;AACd,QAAI,CAACV,KAAU,CAACJ,EAAe;AAE/B,UAAMe,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YACZX,EAAA;AAAA,IAEJ;AAEA,oBAAS,iBAAiB,WAAWU,CAAY,GAC1C,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAY;AAAA,IACtD;AAAA,EACF,GAAG,CAACX,GAAQC,GAASL,CAAa,CAAC,GAE/B,CAACI,EAAQ,QAAO;AAEpB,QAAMa,IAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,YAAY,qBAAqBC,EAAgB,QAAQ,GAAG,CAAC,IAAIC,EAAe,MAAM,CAAC;AAAA,EAAA,GAGnFC,IAAqB,CAACJ,MAAwC;AAClE,IAAIjB,KAAuBiB,EAAE,WAAWL,EAAW,WACjDN,EAAA;AAAA,EAEJ,GAEMgB,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBC,EAAe,OAAO,CAAC;AAAA,MACnD,SAASH;AAAA,MAGT,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,+CAA+CN,EAAgB,QAAQ,GAAG,CAAC;AAAA,YAEtF,UAAA,gBAAAM;AAAA,cAAC;AAAA,cAAAC,EAAAC,EAAA;AAAA,gBACC,KAAKjB;AAAA,gBACL,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,mBAAiBH;AAAA,gBACjB,oBAAkBC;AAAA,gBAClB,WAAW;AAAA;AAAA,cAEPU,EAAYnB,CAAI,CAAC;AAAA;AAAA,cAEjBqB,EAAe,IAAI,CAAC;AAAA,cACpBQ,EAAe,IAAI,CAAC;AAAA,cACpB1B,CAAS;AAAA;AAAA,gBAEb,UAAU;AAAA,iBACNC,IAfL;AAAA,gBAiBE,UAAAL;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAKJ,SAAI,OAAO,UAAW,cACb+B,EAAaP,GAAe,SAAS,IAAI,IAG3CA;AACT;"}
+{"version":3,"file":"DialogContent.js","sources":["../../../../../src/ui/components/Dialog/DialogContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { useFocusTrap } from \"../../hooks/useFocusTrap\";\nimport { useAutoFocus } from \"../../hooks/useAutoFocus\";\nimport { getRadiusClass, getShadowClass, getZIndexClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { DialogClose } from \"./DialogClose\";\n\nexport interface DialogContentProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"role\"\n> {\n  children: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n  /**\n   * Render the built-in close (✕) button in the top-right corner.\n   *\n   * Defaults to `true`, matching `Modal` and the house overlay\n   * convention (`Drawer` / `Popover` expose the same prop). Set `false`\n   * for **non-dismissable** dialogs where the consumer owns dismissal —\n   * LGPD consent gates, destructive confirmations with escalating\n   * friction, or guided wizards where a stray ✕ would abandon the flow.\n   *\n   * When `true`, do NOT also place an explicit `<Dialog.Close />` inside\n   * the content: that compound is for *custom placement* (e.g. a close\n   * affordance inside the footer) and would render a duplicate ✕. Use\n   * one or the other.\n   *\n   * Suppressing the ✕ only removes the button — ESC and overlay-click\n   * still close. For a fully non-dismissable dialog, pair this with\n   * `closeOnEscape={false}` and `closeOnOverlayClick={false}`.\n   */\n  showCloseButton?: boolean;\n}\n\nexport function DialogContent({\n  children,\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  showCloseButton = true,\n  className = \"\",\n  ...props\n}: DialogContentProps) {\n  const { isOpen, onClose, titleId, descriptionId, hasTitle, hasDescription } =\n    useDialogContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  // Modal focus contract — Tab cycling + auto-focus, consumed from the\n  // shared hooks introduced in Phase 3 PR 1. Replaces an inline\n  // implementation that duplicated the selector / disabled-and-hidden\n  // filter / boundary-check logic verbatim. The hook variant ALSO\n  // closes a focus-outside-container gap the inline trap silently had\n  // (it relied on auto-focus running first to mask it); the hook\n  // pulls focus back to the trap edge regardless. Focus restore on\n  // close is the separate concern of `useFocusRestore`, consumed in\n  // `DialogProvider`.\n  useFocusTrap(contentRef, isOpen);\n  useAutoFocus(contentRef, isOpen);\n\n  // ESC handling stays inline — gated by the per-Dialog `closeOnEscape`\n  // prop, which the shared hooks intentionally don't know about. Same\n  // shape as Drawer's parallel handler.\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose, closeOnEscape]);\n\n  if (!isOpen) return null;\n\n  const sizeClasses = {\n    sm: \"max-w-sm\",\n    md: \"max-w-md\",\n    lg: \"max-w-lg\",\n    xl: \"max-w-2xl\",\n    fullscreen: `max-w-full h-full ${getSpacingClass(\"none\", \"m\")} ${getRadiusClass(\"none\")}`,\n  };\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === overlayRef.current) {\n      onClose();\n    }\n  };\n\n  const dialogContent = (\n    <div\n      className={`fixed inset-0 ${getZIndexClass(\"modal\")} overflow-y-auto`}\n      onClick={handleOverlayClick}\n    >\n      {/* Overlay */}\n      <div\n        ref={overlayRef}\n        className=\"fixed inset-0 bg-scrim transition-opacity\"\n        aria-hidden=\"true\"\n      />\n\n      {/* Dialog */}\n      <div\n        className={`flex min-h-full items-center justify-center ${getSpacingClass(\"base\", \"p\")}`}\n      >\n        <div\n          ref={contentRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={hasTitle ? titleId : undefined}\n          aria-describedby={hasDescription ? descriptionId : undefined}\n          className={`\n            relative w-full\n            ${sizeClasses[size]}\n            bg-surface-overlay\n            ${getRadiusClass(\"lg\")}\n            ${getShadowClass(\"xl\")}\n            ${className}\n          `}\n          tabIndex={-1}\n          {...props}\n        >\n          {children}\n          {/*\n            The ✕ is rendered LAST in the DOM (after children) but\n            positioned absolute top-right by DialogClose, so it never\n            steals the \"first focusable\" auto-focus target from the\n            content/form — same ordering shadcn/Radix use. Reuses the\n            DialogClose compound so the close affordance has a single\n            implementation (icon button + aria-label + context onClose).\n          */}\n          {showCloseButton && <DialogClose />}\n        </div>\n      </div>\n    </div>\n  );\n\n  // Portal rendering\n  if (typeof window !== \"undefined\") {\n    return createPortal(dialogContent, document.body);\n  }\n\n  return dialogContent;\n}\n"],"names":["DialogContent","_a","_b","children","size","closeOnOverlayClick","closeOnEscape","showCloseButton","className","props","__objRest","isOpen","onClose","titleId","descriptionId","hasTitle","hasDescription","useDialogContext","contentRef","useRef","overlayRef","useFocusTrap","useAutoFocus","useEffect","handleEscape","e","sizeClasses","getSpacingClass","getRadiusClass","handleOverlayClick","dialogContent","jsxs","getZIndexClass","jsx","__spreadProps","__spreadValues","getShadowClass","DialogClose","createPortal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,SAASA,GAAcC,GAQP;AARO,MAAAC,IAAAD,GAC5B;AAAA,cAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,qBAAAC,IAAsB;AAAA,IACtB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,IAClB,WAAAC,IAAY;AAAA,MANgBN,GAOzBO,IAAAC,EAPyBR,GAOzB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,EAAE,QAAAS,GAAQ,SAAAC,GAAS,SAAAC,GAAS,eAAAC,GAAe,UAAAC,GAAU,gBAAAC,EAAA,IACzDC,EAAA,GACIC,IAAaC,EAAuB,IAAI,GACxCC,IAAaD,EAAuB,IAAI;AAgC9C,MArBAE,EAAaH,GAAYP,CAAM,GAC/BW,EAAaJ,GAAYP,CAAM,GAK/BY,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACL,EAAe;AAE/B,UAAMkB,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YACZb,EAAA;AAAA,IAEJ;AAEA,oBAAS,iBAAiB,WAAWY,CAAY,GAC1C,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAY;AAAA,IACtD;AAAA,EACF,GAAG,CAACb,GAAQC,GAASN,CAAa,CAAC,GAE/B,CAACK,EAAQ,QAAO;AAEpB,QAAMe,IAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,YAAY,qBAAqBC,EAAgB,QAAQ,GAAG,CAAC,IAAIC,EAAe,MAAM,CAAC;AAAA,EAAA,GAGnFC,IAAqB,CAACJ,MAAwC;AAClE,IAAIpB,KAAuBoB,EAAE,WAAWL,EAAW,WACjDR,EAAA;AAAA,EAEJ,GAEMkB,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBC,EAAe,OAAO,CAAC;AAAA,MACnD,SAASH;AAAA,MAGT,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKb;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,+CAA+CN,EAAgB,QAAQ,GAAG,CAAC;AAAA,YAEtF,UAAA,gBAAAI;AAAA,cAAC;AAAA,cAAAG,EAAAC,EAAA;AAAA,gBACC,KAAKjB;AAAA,gBACL,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,mBAAiBH,IAAWF,IAAU;AAAA,gBACtC,oBAAkBG,IAAiBF,IAAgB;AAAA,gBACnD,WAAW;AAAA;AAAA,cAEPY,EAAYtB,CAAI,CAAC;AAAA;AAAA,cAEjBwB,EAAe,IAAI,CAAC;AAAA,cACpBQ,EAAe,IAAI,CAAC;AAAA,cACpB5B,CAAS;AAAA;AAAA,gBAEb,UAAU;AAAA,iBACNC,IAfL;AAAA,gBAiBE,UAAA;AAAA,kBAAAN;AAAA,kBASAI,uBAAoB8B,GAAA,CAAA,CAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACnC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAKJ,SAAI,OAAO,UAAW,cACbC,EAAaR,GAAe,SAAS,IAAI,IAG3CA;AACT;"}

package/dist/granular/ui/components/Dialog/DialogDescription.js

@@ -1,51 +1,51 @@
 "use client";
-var u = Object.defineProperty, x = Object.defineProperties;
-var y = Object.getOwnPropertyDescriptors;
+var x = Object.defineProperty, y = Object.defineProperties;
+var D = Object.getOwnPropertyDescriptors;
 var s = Object.getOwnPropertySymbols;
-var a = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
-var n = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, m = (o, t) => {
-  for (var e in t || (t = {}))
-    a.call(t, e) && n(o, e, t[e]);
+var a = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var p = (t, o, e) => o in t ? x(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, d = (t, o) => {
+  for (var e in o || (o = {}))
+    a.call(o, e) && p(t, e, o[e]);
   if (s)
-    for (var e of s(t))
-      c.call(t, e) && n(o, e, t[e]);
-  return o;
-}, p = (o, t) => x(o, y(t));
-var d = (o, t) => {
+    for (var e of s(o))
+      m.call(o, e) && p(t, e, o[e]);
+  return t;
+}, f = (t, o) => y(t, D(o));
+var l = (t, o) => {
   var e = {};
-  for (var r in o)
-    a.call(o, r) && t.indexOf(r) < 0 && (e[r] = o[r]);
-  if (o != null && s)
-    for (var r of s(o))
-      t.indexOf(r) < 0 && c.call(o, r) && (e[r] = o[r]);
+  for (var r in t)
+    a.call(t, r) && o.indexOf(r) < 0 && (e[r] = t[r]);
+  if (t != null && s)
+    for (var r of s(t))
+      o.indexOf(r) < 0 && m.call(t, r) && (e[r] = t[r]);
   return e;
 };
 import { jsx as I } from "react/jsx-runtime";
-import { useId as D } from "react";
-import { useDialogContext as C } from "../../providers/DialogContext.js";
-import { getTypographyClasses as $ } from "../../tokens/typography.js";
-function k(b) {
-  var i = b, {
-    children: o,
-    className: t = "",
+import { useId as C, useEffect as $ } from "react";
+import { useDialogContext as b } from "../../providers/DialogContext.js";
+import { getTypographyClasses as h } from "../../tokens/typography.js";
+function q(j) {
+  var i = j, {
+    children: t,
+    className: o = "",
     id: e
-  } = i, r = d(i, [
+  } = i, r = l(i, [
     "children",
     "className",
     "id"
   ]);
-  const l = C(), f = D(), g = e || l.descriptionId || f;
-  return /* @__PURE__ */ I(
+  const n = b(), g = C(), u = e || n.descriptionId || g, { registerDescription: c } = n;
+  return $(() => c(), [c]), /* @__PURE__ */ I(
     "p",
-    p(m({
-      id: g,
-      className: `${$("bodySmall")} text-fg-secondary ${t}`
+    f(d({
+      id: u,
+      className: `${h("bodySmall")} text-fg-secondary ${o}`
     }, r), {
-      children: o
+      children: t
     })
   );
 }
 export {
-  k as DialogDescription
+  q as DialogDescription
 };
 //# sourceMappingURL=DialogDescription.js.map

package/dist/granular/ui/components/Dialog/DialogDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogDescription.js","sources":["../../../../../src/ui/components/Dialog/DialogDescription.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport type DialogDescriptionProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport function DialogDescription({\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogDescriptionProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.descriptionId || generatedId;\n\n  return (\n    <p\n      id={finalId}\n      className={`${getTypographyClasses(\"bodySmall\")} text-fg-secondary ${className}`}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n"],"names":["DialogDescription","_a","_b","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAASA,EAAkBC,GAKP;AALO,MAAAC,IAAAD,GAChC;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAHgCH,GAI7BI,IAAAC,EAJ6BL,GAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,iBAAiBE;AAE/C,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,IAAIH;AAAA,MACJ,WAAW,GAAGI,EAAqB,WAAW,CAAC,sBAAsBZ,CAAS;AAAA,OAC1EE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"DialogDescription.js","sources":["../../../../../src/ui/components/Dialog/DialogDescription.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useEffect, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport type DialogDescriptionProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport function DialogDescription({\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogDescriptionProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.descriptionId || generatedId;\n\n  // Tell the dialog a Description is present so it emits aria-describedby.\n  const { registerDescription } = context;\n  useEffect(() => registerDescription(), [registerDescription]);\n\n  return (\n    <p\n      id={finalId}\n      className={`${getTypographyClasses(\"bodySmall\")} text-fg-secondary ${className}`}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n"],"names":["DialogDescription","_a","_b","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","registerDescription","useEffect","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAASA,EAAkBC,GAKP;AALO,MAAAC,IAAAD,GAChC;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAHgCH,GAI7BI,IAAAC,EAJ6BL,GAI7B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,iBAAiBE,GAGzC,EAAE,qBAAAG,MAAwBL;AAChC,SAAAM,EAAU,MAAMD,KAAuB,CAACA,CAAmB,CAAC,GAG1D,gBAAAE;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,IAAIL;AAAA,MACJ,WAAW,GAAGM,EAAqB,WAAW,CAAC,sBAAsBd,CAAS;AAAA,OAC1EE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Dialog/DialogTitle.js

@@ -1,53 +1,53 @@
 "use client";
-var h = Object.defineProperty, x = Object.defineProperties;
-var I = Object.getOwnPropertyDescriptors;
+var x = Object.defineProperty, I = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
 var n = Object.getOwnPropertySymbols;
-var a = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
-var s = (t, o, e) => o in t ? h(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, m = (t, o) => {
-  for (var e in o || (o = {}))
-    a.call(o, e) && s(t, e, o[e]);
+var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var l = (t, e, o) => e in t ? x(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, f = (t, e) => {
+  for (var o in e || (e = {}))
+    c.call(e, o) && l(t, o, e[o]);
   if (n)
-    for (var e of n(o))
-      l.call(o, e) && s(t, e, o[e]);
+    for (var o of n(e))
+      m.call(e, o) && l(t, o, e[o]);
   return t;
-}, c = (t, o) => x(t, I(o));
-var d = (t, o) => {
-  var e = {};
+}, g = (t, e) => I(t, T(e));
+var d = (t, e) => {
+  var o = {};
   for (var i in t)
-    a.call(t, i) && o.indexOf(i) < 0 && (e[i] = t[i]);
+    c.call(t, i) && e.indexOf(i) < 0 && (o[i] = t[i]);
   if (t != null && n)
     for (var i of n(t))
-      o.indexOf(i) < 0 && l.call(t, i) && (e[i] = t[i]);
-  return e;
+      e.indexOf(i) < 0 && m.call(t, i) && (o[i] = t[i]);
+  return o;
 };
 import { jsx as y } from "react/jsx-runtime";
-import { useId as C } from "react";
-import { useDialogContext as D } from "../../providers/DialogContext.js";
-import { getTypographyClasses as T } from "../../tokens/typography.js";
-function v($) {
-  var r = $, {
+import { useId as C, useEffect as D } from "react";
+import { useDialogContext as $ } from "../../providers/DialogContext.js";
+import { getTypographyClasses as b } from "../../tokens/typography.js";
+function w(j) {
+  var s = j, {
     as: t = "h2",
-    children: o,
-    className: e = "",
+    children: e,
+    className: o = "",
     id: i
-  } = r, g = d(r, [
+  } = s, p = d(s, [
     "as",
     "children",
     "className",
     "id"
   ]);
-  const f = D(), p = C(), u = i || f.titleId || p;
-  return /* @__PURE__ */ y(
+  const r = $(), u = C(), h = i || r.titleId || u, { registerTitle: a } = r;
+  return D(() => a(), [a]), /* @__PURE__ */ y(
     t,
-    c(m({
-      id: u,
-      className: `${T("h3")} font-semibold leading-none tracking-tight ${e}`
-    }, g), {
-      children: o
+    g(f({
+      id: h,
+      className: `${b("h3")} font-semibold leading-none tracking-tight ${o}`
+    }, p), {
+      children: e
     })
   );
 }
 export {
-  v as DialogTitle
+  w as DialogTitle
 };
 //# sourceMappingURL=DialogTitle.js.map

package/dist/granular/ui/components/Dialog/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.js","sources":["../../../../../src/ui/components/Dialog/DialogTitle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport function DialogTitle({\n  as: Component = \"h2\",\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogTitleProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.titleId || generatedId;\n\n  return (\n    <Component\n      id={finalId}\n      className={`${getTypographyClasses(\"h3\")} font-semibold leading-none tracking-tight ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["DialogTitle","_a","_b","Component","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAYC,GAMP;AANO,MAAAC,IAAAD,GAC1B;AAAA,QAAIE,IAAY;AAAA,IAChB,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAJ0BJ,GAKvBK,IAAAC,EALuBN,GAKvB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,WAAWE;AAEzC,SACE,gBAAAG;AAAA,IAACX;AAAA,IAAAY,EAAAC,EAAA;AAAA,MACC,IAAIH;AAAA,MACJ,WAAW,GAAGI,EAAqB,IAAI,CAAC,8CAA8CZ,CAAS;AAAA,OAC3FE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"DialogTitle.js","sources":["../../../../../src/ui/components/Dialog/DialogTitle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useEffect, type HTMLAttributes } from \"react\";\nimport { useDialogContext } from \"../../providers/DialogContext\";\nimport { getTypographyClasses } from \"../../tokens\";\n\nexport interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport function DialogTitle({\n  as: Component = \"h2\",\n  children,\n  className = \"\",\n  id,\n  ...props\n}: DialogTitleProps) {\n  const context = useDialogContext();\n  const generatedId = useId();\n  const finalId = id || context.titleId || generatedId;\n\n  // Tell the dialog a Title is present so it emits aria-labelledby.\n  const { registerTitle } = context;\n  useEffect(() => registerTitle(), [registerTitle]);\n\n  return (\n    <Component\n      id={finalId}\n      className={`${getTypographyClasses(\"h3\")} font-semibold leading-none tracking-tight ${className}`}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":["DialogTitle","_a","_b","Component","children","className","id","props","__objRest","context","useDialogContext","generatedId","useId","finalId","registerTitle","useEffect","jsx","__spreadProps","__spreadValues","getTypographyClasses"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAYC,GAMP;AANO,MAAAC,IAAAD,GAC1B;AAAA,QAAIE,IAAY;AAAA,IAChB,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,IAAAC;AAAA,MAJ0BJ,GAKvBK,IAAAC,EALuBN,GAKvB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAAUC,EAAA,GACVC,IAAcC,EAAA,GACdC,IAAUP,KAAMG,EAAQ,WAAWE,GAGnC,EAAE,eAAAG,MAAkBL;AAC1B,SAAAM,EAAU,MAAMD,KAAiB,CAACA,CAAa,CAAC,GAG9C,gBAAAE;AAAA,IAACb;AAAA,IAAAc,EAAAC,EAAA;AAAA,MACC,IAAIL;AAAA,MACJ,WAAW,GAAGM,EAAqB,IAAI,CAAC,8CAA8Cd,CAAS;AAAA,OAC3FE,IAHL;AAAA,MAKE,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/ui/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport DrawerContent from \"./DrawerContent\";\nimport DrawerHeader from \"./DrawerHeader\";\nimport DrawerFooter from \"./DrawerFooter\";\nimport { DrawerProvider } from \"./DrawerContext\";\n\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  position?: DrawerPosition;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n}\n\n/**\n * Drawer Component\n *\n * A side drawer component that slides in from different positions.\n * Follows Atomic Design principles as an Atom component.\n * Uses Compound Component pattern.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <h2>Title</h2>\n *     </DrawerHeader>\n *     <p>Content goes here</p>\n *     <DrawerFooter>\n *       <Button>Close</Button>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport default function Drawer({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  position = \"right\",\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n}: DrawerProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setIsOpen = (newOpen: boolean) => {\n    if (!isControlled) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  const closeDrawer = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <DrawerProvider\n      value={{\n        isOpen,\n        closeDrawer,\n        position,\n        size,\n        closeOnOverlayClick,\n        closeOnEscape,\n      }}\n    >\n      {children}\n    </DrawerProvider>\n  );\n}\n\n// Export sub-components for compound pattern\nDrawer.Content = DrawerContent;\nDrawer.Header = DrawerHeader;\nDrawer.Footer = DrawerFooter;\n\n// Also export as named exports for easier imports\nexport { DrawerContent, DrawerHeader, DrawerFooter };\n"],"names":["Drawer","children","controlledOpen","defaultOpen","onOpenChange","position","size","closeOnOverlayClick","closeOnEscape","internalOpen","setInternalOpen","useState","isControlled","isOpen","setIsOpen","newOpen","jsx","DrawerProvider","DrawerContent","DrawerHeader","DrawerFooter"],"mappings":";;;;;;;AA2CA,SAAwBA,EAAO;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,qBAAAC,IAAsB;AAAA,EACtB,eAAAC,IAAgB;AAClB,GAAgB;AACd,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASR,CAAW,GAEtDS,IAAeV,MAAmB,QAClCW,IAASD,IAAeV,IAAiBO,GAEzCK,IAAY,CAACC,MAAqB;AACtC,IAAKH,KACHF,EAAgBK,CAAO,GAEzBX,KAAA,QAAAA,EAAeW;AAAA,EACjB;AAMA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAAJ;AAAA,QACA,aARc,MAAM;AACxB,UAAAC,EAAU,EAAK;AAAA,QACjB;AAAA,QAOM,UAAAT;AAAA,QACA,MAAAC;AAAA,QACA,qBAAAC;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,MAGD,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAGAD,EAAO,UAAUkB;AACjBlB,EAAO,SAASmB;AAChBnB,EAAO,SAASoB;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/ui/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport DrawerContent from \"./DrawerContent\";\nimport DrawerHeader from \"./DrawerHeader\";\nimport DrawerFooter from \"./DrawerFooter\";\nimport { DrawerProvider } from \"./DrawerContext\";\n\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  position?: DrawerPosition;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n}\n\n/**\n * Drawer Component\n *\n * A side drawer component that slides in from different positions.\n * Uses Compound Component pattern.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <h2>Title</h2>\n *     </DrawerHeader>\n *     <p>Content goes here</p>\n *     <DrawerFooter>\n *       <Button>Close</Button>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport default function Drawer({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  position = \"right\",\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n}: DrawerProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setIsOpen = (newOpen: boolean) => {\n    if (!isControlled) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  const closeDrawer = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <DrawerProvider\n      value={{\n        isOpen,\n        closeDrawer,\n        position,\n        size,\n        closeOnOverlayClick,\n        closeOnEscape,\n      }}\n    >\n      {children}\n    </DrawerProvider>\n  );\n}\n\n// Export sub-components for compound pattern\nDrawer.Content = DrawerContent;\nDrawer.Header = DrawerHeader;\nDrawer.Footer = DrawerFooter;\n\n// Also export as named exports for easier imports\nexport { DrawerContent, DrawerHeader, DrawerFooter };\n"],"names":["Drawer","children","controlledOpen","defaultOpen","onOpenChange","position","size","closeOnOverlayClick","closeOnEscape","internalOpen","setInternalOpen","useState","isControlled","isOpen","setIsOpen","newOpen","jsx","DrawerProvider","DrawerContent","DrawerHeader","DrawerFooter"],"mappings":";;;;;;;AA0CA,SAAwBA,EAAO;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,qBAAAC,IAAsB;AAAA,EACtB,eAAAC,IAAgB;AAClB,GAAgB;AACd,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASR,CAAW,GAEtDS,IAAeV,MAAmB,QAClCW,IAASD,IAAeV,IAAiBO,GAEzCK,IAAY,CAACC,MAAqB;AACtC,IAAKH,KACHF,EAAgBK,CAAO,GAEzBX,KAAA,QAAAA,EAAeW;AAAA,EACjB;AAMA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAAJ;AAAA,QACA,aARc,MAAM;AACxB,UAAAC,EAAU,EAAK;AAAA,QACjB;AAAA,QAOM,UAAAT;AAAA,QACA,MAAAC;AAAA,QACA,qBAAAC;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,MAGD,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAGAD,EAAO,UAAUkB;AACjBlB,EAAO,SAASmB;AAChBnB,EAAO,SAASoB;"}