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

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;"}

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

@@ -0,0 +1,20 @@
+"use client";
+import { useRef as o, useEffect as r } from "react";
+function l(t) {
+  const u = o(null);
+  r(() => {
+    var c;
+    if (t)
+      u.current = (c = document.activeElement) != null ? c : null;
+    else {
+      const e = u.current, n = setTimeout(() => {
+        e == null || e.focus();
+      }, 0);
+      return () => clearTimeout(n);
+    }
+  }, [t]);
+}
+export {
+  l as useFocusRestore
+};
+//# sourceMappingURL=useFocusRestore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusRestore.js","sources":["../../../../src/ui/hooks/useFocusRestore.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/**\n * Snapshot focus when an overlay opens; restore on close.\n *\n * When `isOpen` flips from false to true, snapshots\n * `document.activeElement` at that moment. When `isOpen` flips back to\n * false, restores focus to the snapshotted element in a `setTimeout(0)`\n * — matching the timing the existing DialogProvider proved out\n * (Dialog.test.tsx:221 depends on this exact shape).\n *\n * Trigger-ref-free by design: the snapshot mechanism captures whatever\n * had focus at open time, so overlays can be opened by any composition\n * (button click, programmatic call from a notification, etc.) without\n * carrying a ref to a single triggering element.\n *\n * Scope is restore only. Focus trapping (Tab cycling within an open\n * modal container) is the separate concern of `useFocusTrap`. The two\n * hooks compose: modal surfaces (Dialog, Drawer) use both; non-modal\n * surfaces (Popover) use only restore.\n *\n * @example\n * ```tsx\n * function MyOverlay({ isOpen }: { isOpen: boolean }) {\n *   useFocusRestore(isOpen);\n *   // ...\n * }\n * ```\n */\nexport function useFocusRestore(isOpen: boolean): void {\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      previousActiveElement.current =\n        (document.activeElement as HTMLElement | null) ?? null;\n    } else {\n      const previous = previousActiveElement.current;\n      // setTimeout(0) defers the restore until after React has committed\n      // the close transition and removed the overlay's DOM (so the\n      // restore target isn't a now-disposed element inside the overlay\n      // — it's whatever had focus *before* the overlay opened).\n      const timer = setTimeout(() => {\n        previous?.focus();\n      }, 0);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]);\n}\n"],"names":["useFocusRestore","isOpen","previousActiveElement","useRef","useEffect","_a","previous","timer"],"mappings":";;AA+BO,SAASA,EAAgBC,GAAuB;AACrD,QAAMC,IAAwBC,EAA2B,IAAI;AAE7D,EAAAC,EAAU,MAAM;;AACd,QAAIH;AACF,MAAAC,EAAsB,WACnBG,IAAA,SAAS,kBAAT,OAAAA,IAAiD;AAAA,SAC/C;AACL,YAAMC,IAAWJ,EAAsB,SAKjCK,IAAQ,WAAW,MAAM;AAC7B,QAAAD,KAAA,QAAAA,EAAU;AAAA,MACZ,GAAG,CAAC;AACJ,aAAO,MAAM,aAAaC,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAACN,CAAM,CAAC;AACb;"}

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

@@ -0,0 +1,31 @@
+"use client";
+import { useEffect as i } from "react";
+import { getFocusableElements as a } from "./focusable.js";
+function d(f, s) {
+  i(() => {
+    if (!s) return;
+    function c(e) {
+      if (e.key !== "Tab") return;
+      const n = f.current;
+      if (!n) return;
+      const t = a(n);
+      if (t.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const r = t[0], o = t[t.length - 1], u = document.activeElement;
+      if (!n.contains(u)) {
+        e.preventDefault(), (e.shiftKey ? o : r).focus();
+        return;
+      }
+      e.shiftKey ? u === r && (e.preventDefault(), o.focus()) : u === o && (e.preventDefault(), r.focus());
+    }
+    return document.addEventListener("keydown", c), () => {
+      document.removeEventListener("keydown", c);
+    };
+  }, [s, f]);
+}
+export {
+  d as useFocusTrap
+};
+//# sourceMappingURL=useFocusTrap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../src/ui/hooks/useFocusTrap.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, type RefObject } from \"react\";\nimport { getFocusableElements } from \"./focusable\";\n\n/**\n * Trap Tab / Shift+Tab cycling within `containerRef` while `isActive`.\n *\n * Boundary-only intervention: the handler intercepts Tab on the LAST\n * focusable element (cycles back to first) and Shift+Tab on the FIRST\n * focusable element (cycles back to last). Tab/Shift+Tab on any\n * intermediate element falls through to the browser's default\n * sequential focus navigation. This is the exact shape the existing\n * `DialogContent` proved out — extracting it here means there's only\n * one place to fix when the subtle parts (disabled filtering,\n * `offsetParent !== null`, zero-focusable edge case) need to evolve.\n *\n * Zero-focusable edge case: if the container has no tabbable elements,\n * Tab and Shift+Tab are both preventDefault'd, so focus can't escape\n * the trap onto the underlying page. The container can still be closed\n * via Escape (a concern of the consumer, not this hook).\n *\n * Trap is restore-only on the focus side: it does NOT auto-focus the\n * first element when activated (the consumer typically handles that\n * separately) and it does NOT snapshot/restore focus on toggle (that's\n * `useFocusRestore`'s job — the two hooks compose).\n *\n * @example\n * ```tsx\n * function MyModal({ isOpen, ... }) {\n *   const contentRef = useRef<HTMLDivElement>(null);\n *   useFocusTrap(contentRef, isOpen);\n *   // ...\n * }\n * ```\n */\nexport function useFocusTrap(\n  containerRef: RefObject<HTMLElement | null>,\n  isActive: boolean,\n): void {\n  useEffect(() => {\n    if (!isActive) return;\n\n    function handleTab(e: KeyboardEvent) {\n      if (e.key !== \"Tab\") return;\n      const container = containerRef.current;\n      if (!container) return;\n\n      const focusables = getFocusableElements(container);\n\n      if (focusables.length === 0) {\n        // No tabbable target inside the trap — block both directions so\n        // focus can't escape onto the underlying page.\n        e.preventDefault();\n        return;\n      }\n\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n\n      // Focus is currently OUTSIDE the trap container — either it\n      // hasn't entered yet (consumer hasn't auto-focused, or doesn't\n      // auto-focus by design) or it escaped earlier. The boundary\n      // checks below (`active === first` / `=== last`) would both miss\n      // this case and let the browser advance Tab to whatever is next\n      // in document order, which is an element BEHIND the overlay.\n      // Pull focus back to the appropriate edge first. This was a real\n      // gap in DialogContent's inline trap — DialogContent only got\n      // away with it because it always auto-focused the first element\n      // on open, masking the outside-focus case. Consumers of this\n      // hook may decouple the auto-focus from the trap (Drawer is\n      // expected to), so we close the gap here.\n      if (!container.contains(active)) {\n        e.preventDefault();\n        (e.shiftKey ? last : first).focus();\n        return;\n      }\n\n      if (e.shiftKey) {\n        if (active === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (active === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleTab);\n    return () => {\n      document.removeEventListener(\"keydown\", handleTab);\n    };\n  }, [isActive, containerRef]);\n}\n"],"names":["useFocusTrap","containerRef","isActive","useEffect","handleTab","container","focusables","getFocusableElements","first","last","active"],"mappings":";;;AAoCO,SAASA,EACdC,GACAC,GACM;AACN,EAAAC,EAAU,MAAM;AACd,QAAI,CAACD,EAAU;AAEf,aAASE,EAAU,GAAkB;AACnC,UAAI,EAAE,QAAQ,MAAO;AACrB,YAAMC,IAAYJ,EAAa;AAC/B,UAAI,CAACI,EAAW;AAEhB,YAAMC,IAAaC,EAAqBF,CAAS;AAEjD,UAAIC,EAAW,WAAW,GAAG;AAG3B,UAAE,eAAA;AACF;AAAA,MACF;AAEA,YAAME,IAAQF,EAAW,CAAC,GACpBG,IAAOH,EAAWA,EAAW,SAAS,CAAC,GACvCI,IAAS,SAAS;AAcxB,UAAI,CAACL,EAAU,SAASK,CAAM,GAAG;AAC/B,UAAE,eAAA,IACD,EAAE,WAAWD,IAAOD,GAAO,MAAA;AAC5B;AAAA,MACF;AAEA,MAAI,EAAE,WACAE,MAAWF,MACb,EAAE,eAAA,GACFC,EAAK,MAAA,KAGHC,MAAWD,MACb,EAAE,eAAA,GACFD,EAAM,MAAA;AAAA,IAGZ;AAEA,oBAAS,iBAAiB,WAAWJ,CAAS,GACvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAACF,GAAUD,CAAY,CAAC;AAC7B;"}

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

@@ -0,0 +1,23 @@
+"use client";
+import { useState as g, useEffect as a } from "react";
+function v(n, l = {}) {
+  const { rootMargin: r = "0px 0px -50% 0px", threshold: o = 0 } = l, [u, d] = g(null), f = n.join("|");
+  return a(() => {
+    if (typeof window == "undefined" || typeof IntersectionObserver == "undefined")
+      return;
+    const i = n.map((e) => document.getElementById(e)).filter((e) => e !== null);
+    if (i.length === 0) return;
+    const s = new IntersectionObserver(
+      (e) => {
+        const c = e.filter((t) => t.isIntersecting).sort((t, p) => t.boundingClientRect.top - p.boundingClientRect.top);
+        c.length > 0 && d(c[0].target.id);
+      },
+      { rootMargin: r, threshold: o }
+    );
+    return i.forEach((e) => s.observe(e)), () => s.disconnect();
+  }, [f, r, o]), u;
+}
+export {
+  v as useScrollSpy
+};
+//# sourceMappingURL=useScrollSpy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollSpy.js","sources":["../../../../src/ui/hooks/useScrollSpy.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Options for `useScrollSpy`.\n */\nexport interface UseScrollSpyOptions {\n  /**\n   * `IntersectionObserver` `rootMargin`. Shrinks the effective viewport\n   * the observer reports on. The default `\"0px 0px -50% 0px\"` shrinks\n   * the bottom edge by half — a section is considered \"in view\" only\n   * when part of it sits in the upper half of the viewport, which is\n   * the canonical \"table-of-contents follows the scroll\" behaviour. To\n   * compensate for a sticky header, prefix the top with a negative\n   * pixel value, e.g. `\"-56px 0px -50% 0px\"`.\n   *\n   * @default \"0px 0px -50% 0px\"\n   */\n  rootMargin?: string;\n  /**\n   * `IntersectionObserver` `threshold`. With the default `0`, the\n   * observer fires when any part of the target enters the (margin-\n   * shrunken) viewport.\n   *\n   * @default 0\n   */\n  threshold?: number | number[];\n}\n\n/**\n * Track which section of a long scroll surface is currently in view,\n * suitable for a table-of-contents nav that highlights the active section\n * (the classic \"scroll spy\" pattern).\n *\n * The hook resolves each `id` to a DOM element via\n * `document.getElementById`, observes those elements with a single\n * `IntersectionObserver`, and returns the **id of the topmost visible\n * section**. Returns `null` when nothing has reported as visible yet —\n * including on the server, during the first render before the effect\n * runs, and any frame where no observed section intersects the\n * (margin-shrunken) viewport.\n *\n * ### Behavioural contract\n *\n * - **Return value.** `string | null`. `null` until at least one section\n *   has been reported intersecting; never falls back to a \"first id\"\n *   heuristic. Consumers that want a default highlight should fall back\n *   themselves: `active ?? ids[0]`.\n * - **Tie-breaking.** When multiple sections intersect simultaneously,\n *   the hook picks the one **closest to the top of the viewport**\n *   (smallest `boundingClientRect.top`). This matches the user's\n *   expectation that scrolling DOWN advances the highlight forward, not\n *   backward.\n * - **Missing ids.** An id that resolves to no element is skipped\n *   silently. The observer is created only when at least one element\n *   resolves; an empty `ids` array (or one with all-missing ids) leaves\n *   `activeId` as `null` and creates no observer.\n * - **Cleanup.** The observer is disconnected on unmount and when the\n *   `ids` set changes, before a new observer is created. No leaks.\n * - **Re-observation on `ids` change.** The hook detects changes via a\n *   string sentinel `ids.join(\"|\")`. Pass `ids` as a stable reference\n *   (constant module-scope array, or `useMemo`) to avoid recreating the\n *   observer on every render. The hook does not memoise `ids` for you\n *   because the consumer typically already knows whether the array is\n *   stable.\n * - **SSR safety.** `IntersectionObserver` and `document` are accessed\n *   only inside `useEffect`, which never runs on the server. The hook\n *   returns `null` during server rendering and the first client render\n *   pre-commit. A `typeof window` guard inside the effect protects\n *   older runtimes that evaluate `useEffect` outside a browser.\n * - **`useState` initial value.** Always `null`. Returning the first id\n *   would highlight a section that the user has not yet seen and\n *   contradict the SSR/hydration contract.\n *\n * ### Why this lives in the design system as a hook, not as a component\n *\n * The visual surface (a sticky nav with highlighted active item) is\n * already covered by `Navigation` + `NavLink` with the `active` prop. A\n * `<ScrollSpy>` component would fuse behaviour and visual, restrict\n * layout choice, and couple to a sibling component (`SectionCard`) via\n * an opaque id-string convention. As a hook the consumer keeps the\n * `ids` constant in one place and composes the nav however they want:\n * vertical, horizontal, sticky, in a drawer, etc.\n *\n * @example\n * ```tsx\n * \"use client\";\n * import { useScrollSpy, Navigation, NavLink } from \"@fabio.caffarello/react-design-system\";\n *\n * const SECTIONS = [\"intro\", \"votos\", \"gastos\"];\n *\n * function ProfileToc() {\n *   const active = useScrollSpy(SECTIONS, { rootMargin: \"-56px 0px -50% 0px\" });\n *   return (\n *     <nav className=\"sticky top-14\">\n *       <Navigation orientation=\"vertical\">\n *         {SECTIONS.map((id) => (\n *           <NavLink\n *             key={id}\n *             href={`#${id}`}\n *             active={id === active}\n *             aria-current={id === active ? \"location\" : undefined}\n *           >\n *             {id}\n *           </NavLink>\n *         ))}\n *       </Navigation>\n *     </nav>\n *   );\n * }\n * ```\n *\n * @param ids - Element ids to observe, in document order. Stable\n *   reference recommended (constant or `useMemo`).\n * @param options - Optional `IntersectionObserver` overrides — see\n *   {@link UseScrollSpyOptions}.\n * @returns The id of the topmost visible section, or `null` when\n *   nothing is reported visible yet.\n */\nexport function useScrollSpy(\n  ids: string[],\n  options: UseScrollSpyOptions = {},\n): string | null {\n  const { rootMargin = \"0px 0px -50% 0px\", threshold = 0 } = options;\n  const [activeId, setActiveId] = useState<string | null>(null);\n\n  // The dependency sentinel: `ids.join(\"|\")` collapses a stable array\n  // content to a stable string, so passing `[\"a\",\"b\",\"c\"]` literally on\n  // every render does not recreate the observer. The pipe is safe as a\n  // separator because HTML id syntax does not allow it (per the HTML\n  // spec, an id may not contain whitespace; pipes are not whitespace\n  // but are also not produced by any conventional id-generation\n  // strategy in this codebase). If a consumer ever generates ids with\n  // pipes, `ids` should be memoised by the consumer and the sentinel\n  // would still detect the array-identity change via render-trigger.\n  const idsKey = ids.join(\"|\");\n\n  useEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const targets = ids\n      .map((id) => document.getElementById(id))\n      .filter((el): el is HTMLElement => el !== null);\n\n    if (targets.length === 0) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const visible = entries\n          .filter((entry) => entry.isIntersecting)\n          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);\n        if (visible.length > 0) {\n          setActiveId(visible[0].target.id);\n        }\n      },\n      { rootMargin, threshold },\n    );\n\n    targets.forEach((el) => observer.observe(el));\n    return () => observer.disconnect();\n    // The dependency list intentionally watches the string sentinel\n    // (idsKey), not the array itself, so a fresh array with identical\n    // content does NOT recreate the observer. rootMargin/threshold are\n    // primitive comparisons.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [idsKey, rootMargin, threshold]);\n\n  return activeId;\n}\n"],"names":["useScrollSpy","ids","options","rootMargin","threshold","activeId","setActiveId","useState","idsKey","useEffect","targets","id","el","observer","entries","visible","entry","a","b"],"mappings":";;AAwHO,SAASA,EACdC,GACAC,IAA+B,IAChB;AACf,QAAM,EAAE,YAAAC,IAAa,oBAAoB,WAAAC,IAAY,MAAMF,GACrD,CAACG,GAAUC,CAAW,IAAIC,EAAwB,IAAI,GAWtDC,IAASP,EAAI,KAAK,GAAG;AAE3B,SAAAQ,EAAU,MAAM;AACd,QACE,OAAO,UAAW,eAClB,OAAO,wBAAyB;AAEhC;AAGF,UAAMC,IAAUT,EACb,IAAI,CAACU,MAAO,SAAS,eAAeA,CAAE,CAAC,EACvC,OAAO,CAACC,MAA0BA,MAAO,IAAI;AAEhD,QAAIF,EAAQ,WAAW,EAAG;AAE1B,UAAMG,IAAW,IAAI;AAAA,MACnB,CAACC,MAAY;AACX,cAAMC,IAAUD,EACb,OAAO,CAACE,MAAUA,EAAM,cAAc,EACtC,KAAK,CAACC,GAAGC,MAAMD,EAAE,mBAAmB,MAAMC,EAAE,mBAAmB,GAAG;AACrE,QAAIH,EAAQ,SAAS,KACnBT,EAAYS,EAAQ,CAAC,EAAE,OAAO,EAAE;AAAA,MAEpC;AAAA,MACA,EAAE,YAAAZ,GAAY,WAAAC,EAAA;AAAA,IAAU;AAG1B,WAAAM,EAAQ,QAAQ,CAACE,MAAOC,EAAS,QAAQD,CAAE,CAAC,GACrC,MAAMC,EAAS,WAAA;AAAA,EAMxB,GAAG,CAACL,GAAQL,GAAYC,CAAS,CAAC,GAE3BC;AACT;"}

package/dist/granular/ui/layouts/Container/Container.js

@@ -0,0 +1,73 @@
+"use client";
+var g = Object.defineProperty, C = Object.defineProperties;
+var b = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, o = Object.prototype.propertyIsEnumerable;
+var t = (e, m, a) => m in e ? g(e, m, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[m] = a, x = (e, m) => {
+  for (var a in m || (m = {}))
+    n.call(m, a) && t(e, a, m[a]);
+  if (s)
+    for (var a of s(m))
+      o.call(m, a) && t(e, a, m[a]);
+  return e;
+}, c = (e, m) => C(e, b(m));
+var i = (e, m) => {
+  var a = {};
+  for (var r in e)
+    n.call(e, r) && m.indexOf(r) < 0 && (a[r] = e[r]);
+  if (e != null && s)
+    for (var r of s(e))
+      m.indexOf(r) < 0 && o.call(e, r) && (a[r] = e[r]);
+  return a;
+};
+import { jsx as y } from "react/jsx-runtime";
+import N from "react";
+import { getSpacingClass as f } from "../../tokens/spacing.js";
+import { cn as R } from "../../utils/cn.js";
+const h = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+}, j = N.forwardRef(
+  (v, d) => {
+    var l = v, {
+      className: e,
+      maxWidth: m = "lg",
+      paddingX: a = "base",
+      paddingY: r = "base",
+      center: p = !0,
+      children: w
+    } = l, u = i(l, [
+      "className",
+      "maxWidth",
+      "paddingX",
+      "paddingY",
+      "center",
+      "children"
+    ]);
+    return /* @__PURE__ */ y(
+      "div",
+      c(x({
+        ref: d,
+        className: R(
+          "w-full",
+          h[m],
+          f(a, "px"),
+          f(r, "py"),
+          p && "mx-auto",
+          e
+        )
+      }, u), {
+        children: w
+      })
+    );
+  }
+);
+j.displayName = "Container";
+export {
+  j as Container
+};
+//# sourceMappingURL=Container.js.map

package/dist/granular/ui/layouts/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../../../src/ui/layouts/Container/Container.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum width of the container\n   * @default 'lg'\n   */\n  maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n  /**\n   * Horizontal padding\n   * @default 'base'\n   */\n  paddingX?: \"xs\" | \"sm\" | \"md\" | \"base\" | \"lg\" | \"xl\";\n  /**\n   * Vertical padding\n   * @default 'base'\n   */\n  paddingY?: \"xs\" | \"sm\" | \"md\" | \"base\" | \"lg\" | \"xl\";\n  /**\n   * Center the container content\n   * @default true\n   */\n  center?: boolean;\n}\n\nconst maxWidthClasses = {\n  sm: \"max-w-screen-sm\",\n  md: \"max-w-screen-md\",\n  lg: \"max-w-screen-lg\",\n  xl: \"max-w-screen-xl\",\n  \"2xl\": \"max-w-screen-2xl\",\n  full: \"max-w-full\",\n};\n\n/**\n * Container component for constraining content width and providing consistent padding\n *\n * @example\n * ```tsx\n * <Container maxWidth=\"lg\" paddingX=\"base\">\n *   <h1>Content</h1>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      className,\n      maxWidth = \"lg\",\n      paddingX = \"base\",\n      paddingY = \"base\",\n      center = true,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"w-full\",\n          maxWidthClasses[maxWidth],\n          getSpacingClass(paddingX, \"px\"),\n          getSpacingClass(paddingY, \"py\"),\n          center && \"mx-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nContainer.displayName = \"Container\";\n"],"names":["maxWidthClasses","Container","React","_a","ref","_b","className","maxWidth","paddingX","paddingY","center","children","props","__objRest","jsx","__spreadProps","__spreadValues","cn","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,IAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR,GAYaC,IAAYC,EAAM;AAAA,EAC7B,CACEC,GASAC,MACG;AAVH,QAAAC,IAAAF,GACE;AAAA,iBAAAG;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,UAAAC,IAAW;AAAA,MACX,UAAAC,IAAW;AAAA,MACX,QAAAC,IAAS;AAAA,MACT,UAAAC;AAAA,QANFN,GAOKO,IAAAC,EAPLR,GAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWa;AAAA,UACT;AAAA,UACAjB,EAAgBO,CAAQ;AAAA,UACxBW,EAAgBV,GAAU,IAAI;AAAA,UAC9BU,EAAgBT,GAAU,IAAI;AAAA,UAC9BC,KAAU;AAAA,UACVJ;AAAA,QAAA;AAAA,SAEEM,IAVL;AAAA,QAYE,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAV,EAAU,cAAc;"}

package/dist/granular/ui/layouts/Stack/Stack.js

@@ -0,0 +1,79 @@
+"use client";
+var C = Object.defineProperty, b = Object.defineProperties;
+var h = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var o = (t, e, s) => e in t ? C(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, m = (t, e) => {
+  for (var s in e || (e = {}))
+    i.call(e, s) && o(t, s, e[s]);
+  if (n)
+    for (var s of n(e))
+      l.call(e, s) && o(t, s, e[s]);
+  return t;
+}, f = (t, e) => b(t, h(e));
+var u = (t, e) => {
+  var s = {};
+  for (var r in t)
+    i.call(t, r) && e.indexOf(r) < 0 && (s[r] = t[r]);
+  if (t != null && n)
+    for (var r of n(t))
+      e.indexOf(r) < 0 && l.call(t, r) && (s[r] = t[r]);
+  return s;
+};
+import { jsx as v } from "react/jsx-runtime";
+import S from "react";
+import { getSpacingClass as y } from "../../tokens/spacing.js";
+import { cn as k } from "../../utils/cn.js";
+const N = S.forwardRef(
+  (R, j) => {
+    var c = R, {
+      className: t,
+      spacing: e = "base",
+      align: s = "stretch",
+      justify: r = "start",
+      direction: a = "column",
+      children: p
+    } = c, d = u(c, [
+      "className",
+      "spacing",
+      "align",
+      "justify",
+      "direction",
+      "children"
+    ]);
+    const x = a === "column" ? y(e, "gap-y") : y(e, "gap-x"), g = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    }, w = {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    };
+    return /* @__PURE__ */ v(
+      "div",
+      f(m({
+        ref: j,
+        className: k(
+          "flex",
+          a === "column" ? "flex-col" : "flex-row",
+          x,
+          g[s],
+          w[r],
+          t
+        )
+      }, d), {
+        children: p
+      })
+    );
+  }
+);
+N.displayName = "Stack";
+export {
+  N as Stack
+};
+//# sourceMappingURL=Stack.js.map

package/dist/granular/ui/layouts/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../../../src/ui/layouts/Stack/Stack.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Spacing between children\n   * @default 'base'\n   */\n  spacing?: \"xs\" | \"sm\" | \"md\" | \"base\" | \"lg\" | \"xl\" | \"2xl\";\n  /**\n   * Alignment of children\n   * @default 'stretch'\n   */\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\";\n  /**\n   * Justification of children\n   * @default 'start'\n   */\n  justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n  /**\n   * Direction of stack\n   * @default 'column'\n   */\n  direction?: \"row\" | \"column\";\n}\n\n/**\n * Stack component for vertical or horizontal layout with consistent spacing\n *\n * @example\n * ```tsx\n * <Stack spacing=\"md\" align=\"center\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </Stack>\n * ```\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  (\n    {\n      className,\n      spacing = \"base\",\n      align = \"stretch\",\n      justify = \"start\",\n      direction = \"column\",\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const spacingClass =\n      direction === \"column\"\n        ? getSpacingClass(spacing, \"gap-y\")\n        : getSpacingClass(spacing, \"gap-x\");\n\n    const alignClasses = {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      stretch: \"items-stretch\",\n    };\n\n    const justifyClasses = {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n      evenly: \"justify-evenly\",\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          direction === \"column\" ? \"flex-col\" : \"flex-row\",\n          spacingClass,\n          alignClasses[align],\n          justifyClasses[justify],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nStack.displayName = \"Stack\";\n"],"names":["Stack","React","_a","ref","_b","className","spacing","align","justify","direction","children","props","__objRest","spacingClass","getSpacingClass","alignClasses","justifyClasses","jsx","__spreadProps","__spreadValues","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CACEC,GASAC,MACG;AAVH,QAAAC,IAAAF,GACE;AAAA,iBAAAG;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC,IAAU;AAAA,MACV,WAAAC,IAAY;AAAA,MACZ,UAAAC;AAAA,QANFN,GAOKO,IAAAC,EAPLR,GAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAMS,IACJJ,MAAc,WACVK,EAAgBR,GAAS,OAAO,IAChCQ,EAAgBR,GAAS,OAAO,GAEhCS,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,SAAS;AAAA,IAAA,GAGLC,IAAiB;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAGV,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACT;AAAA,UACAX,MAAc,WAAW,aAAa;AAAA,UACtCI;AAAA,UACAE,EAAaR,CAAK;AAAA,UAClBS,EAAeR,CAAO;AAAA,UACtBH;AAAA,QAAA;AAAA,SAEEM,IAVL;AAAA,QAYE,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAV,EAAM,cAAc;"}