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

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

package/dist/granular/ui/primitives/Avatar/Avatar.js

@@ -0,0 +1,122 @@
+"use client";
+var U = Object.defineProperty, k = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var f = (t, e, a) => e in t ? U(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, x = (t, e) => {
+  for (var a in e || (e = {}))
+    u.call(e, a) && f(t, a, e[a]);
+  if (s)
+    for (var a of s(e))
+      p.call(e, a) && f(t, a, e[a]);
+  return t;
+}, h = (t, e) => k(t, q(e));
+var g = (t, e) => {
+  var a = {};
+  for (var r in t)
+    u.call(t, r) && e.indexOf(r) < 0 && (a[r] = t[r]);
+  if (t != null && s)
+    for (var r of s(t))
+      e.indexOf(r) < 0 && p.call(t, r) && (a[r] = t[r]);
+  return a;
+};
+import { jsxs as z, jsx as w } from "react/jsx-runtime";
+import { forwardRef as S, useState as y } from "react";
+import { getRadiusClass as o } from "../../tokens/radius.js";
+import { cn as n } from "../../utils/cn.js";
+const B = S(function(D, C) {
+  var c = D, {
+    src: e,
+    alt: a,
+    fallback: r,
+    size: v = "md",
+    variant: i = "circle",
+    "aria-label": b,
+    className: j = ""
+  } = c, A = g(c, [
+    "src",
+    "alt",
+    "fallback",
+    "size",
+    "variant",
+    "aria-label",
+    "className"
+  ]);
+  const [L, N] = y(!1), [E, m] = y(!1), F = {
+    xs: "h-6 w-6 text-xs",
+    sm: "h-8 w-8 text-sm",
+    md: "h-10 w-10 text-base",
+    lg: "h-12 w-12 text-lg",
+    xl: "h-16 w-16 text-xl"
+  }, l = {
+    circle: o("full"),
+    square: o("none"),
+    rounded: o("md")
+  }, d = !e || L, I = typeof r == "string" ? r.toUpperCase().slice(0, 2) : r, R = b || a || "User avatar";
+  return /* @__PURE__ */ z(
+    "div",
+    h(x({
+      ref: C,
+      className: n(
+        "relative",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "shrink-0",
+        "font-medium",
+        "overflow-hidden",
+        F[v],
+        l[i],
+        "bg-surface-muted",
+        "text-fg-primary",
+        j
+      ),
+      role: "img",
+      "aria-label": R
+    }, A), {
+      children: [
+        !d && e && /* @__PURE__ */ w(
+          "img",
+          {
+            src: e,
+            alt: a || "",
+            className: n(
+              "w-full",
+              "h-full",
+              "object-cover",
+              l[i],
+              E ? "opacity-100" : "opacity-0",
+              "transition-opacity",
+              "duration-200"
+            ),
+            onLoad: () => m(!0),
+            onError: () => {
+              N(!0), m(!1);
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        d && /* @__PURE__ */ w(
+          "span",
+          {
+            className: n(
+              "flex",
+              "items-center",
+              "justify-center",
+              "w-full",
+              "h-full",
+              l[i]
+            ),
+            "aria-hidden": "true",
+            children: I || "?"
+          }
+        )
+      ]
+    })
+  );
+});
+B.displayName = "Avatar";
+export {
+  B as default
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/granular/ui/primitives/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../src/ui/primitives/Avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useState,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { cn } from \"../../utils\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface AvatarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> {\n  src?: string;\n  alt?: string;\n  fallback?: string | ReactNode;\n  size?: AvatarSize;\n  variant?: \"circle\" | \"square\" | \"rounded\";\n  \"aria-label\"?: string;\n}\n\n/**\n * Avatar Component\n *\n * A versatile avatar component for displaying user profile images or initials.\n * Supports fallback display when image fails to load or is not provided.\n * Fully accessible with ARIA attributes.\n *\n * @example\n * ```tsx\n * // With image\n * <Avatar src=\"/user.jpg\" alt=\"John Doe\" />\n *\n * // With fallback initials\n * <Avatar fallback=\"JD\" alt=\"John Doe\" />\n *\n * // Custom size\n * <Avatar src=\"/user.jpg\" size=\"lg\" />\n * ```\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = \"md\",\n    variant = \"circle\",\n    \"aria-label\": ariaLabel,\n    className = \"\",\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoaded, setImageLoaded] = useState(false);\n\n  // Size and variant classes (not using cva to avoid type issues with dynamic classes)\n  const sizeClasses: Record<AvatarSize, string> = {\n    xs: \"h-6 w-6 text-xs\",\n    sm: \"h-8 w-8 text-sm\",\n    md: \"h-10 w-10 text-base\",\n    lg: \"h-12 w-12 text-lg\",\n    xl: \"h-16 w-16 text-xl\",\n  };\n\n  const variantClasses = {\n    circle: getRadiusClass(\"full\"),\n    square: getRadiusClass(\"none\"),\n    rounded: getRadiusClass(\"md\"),\n  };\n\n  const showFallback = !src || imageError;\n  const displayFallback =\n    typeof fallback === \"string\"\n      ? fallback.toUpperCase().slice(0, 2)\n      : fallback;\n\n  const defaultAriaLabel = ariaLabel || alt || \"User avatar\";\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative\",\n        \"inline-flex\",\n        \"items-center\",\n        \"justify-center\",\n        \"shrink-0\",\n        \"font-medium\",\n        \"overflow-hidden\",\n        sizeClasses[size],\n        variantClasses[variant],\n        \"bg-surface-muted\",\n        \"text-fg-primary\",\n        className,\n      )}\n      role=\"img\"\n      aria-label={defaultAriaLabel}\n      {...props}\n    >\n      {!showFallback && src && (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          className={cn(\n            \"w-full\",\n            \"h-full\",\n            \"object-cover\",\n            variantClasses[variant],\n            !imageLoaded ? \"opacity-0\" : \"opacity-100\",\n            \"transition-opacity\",\n            \"duration-200\",\n          )}\n          onLoad={() => setImageLoaded(true)}\n          onError={() => {\n            setImageError(true);\n            setImageLoaded(false);\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n      {showFallback && (\n        <span\n          className={cn(\n            \"flex\",\n            \"items-center\",\n            \"justify-center\",\n            \"w-full\",\n            \"h-full\",\n            variantClasses[variant],\n          )}\n          aria-hidden=\"true\"\n        >\n          {displayFallback || \"?\"}\n        </span>\n      )}\n    </div>\n  );\n});\n\nAvatar.displayName = \"Avatar\";\n\nexport default Avatar;\n"],"names":["Avatar","forwardRef","_a","ref","_b","src","alt","fallback","size","variant","ariaLabel","className","props","__objRest","imageError","setImageError","useState","imageLoaded","setImageLoaded","sizeClasses","variantClasses","getRadiusClass","showFallback","displayFallback","defaultAriaLabel","jsxs","__spreadProps","__spreadValues","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,IAASC,EAAwC,SACrDC,GAUAC,GACA;AAXA,MAAAC,IAAAF,GACE;AAAA,SAAAG;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,cAAcC;AAAA,IACd,WAAAC,IAAY;AAAA,MAPdP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAG9CG,IAA0C;AAAA,IAC9C,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAC,IAAiB;AAAA,IACrB,QAAQC,EAAe,MAAM;AAAA,IAC7B,QAAQA,EAAe,MAAM;AAAA,IAC7B,SAASA,EAAe,IAAI;AAAA,EAAA,GAGxBC,IAAe,CAACjB,KAAOS,GACvBS,IACJ,OAAOhB,KAAa,WAChBA,EAAS,cAAc,MAAM,GAAG,CAAC,IACjCA,GAEAiB,IAAmBd,KAAaJ,KAAO;AAE7C,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,KAAAxB;AAAA,MACA,WAAWyB;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAT,EAAYX,CAAI;AAAA,QAChBY,EAAeX,CAAO;AAAA,QACtB;AAAA,QACA;AAAA,QACAE;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,cAAYa;AAAA,OACRZ,IAlBL;AAAA,MAoBE,UAAA;AAAA,QAAA,CAACU,KAAgBjB,KAChB,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAxB;AAAA,YACA,KAAKC,KAAO;AAAA,YACZ,WAAWsB;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAR,EAAeX,CAAO;AAAA,cACrBQ,IAA4B,gBAAd;AAAA,cACf;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,QAAQ,MAAMC,EAAe,EAAI;AAAA,YACjC,SAAS,MAAM;AACb,cAAAH,EAAc,EAAI,GAClBG,EAAe,EAAK;AAAA,YACtB;AAAA,YACA,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGfI,KACC,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAR,EAAeX,CAAO;AAAA,YAAA;AAAA,YAExB,eAAY;AAAA,YAEX,UAAAc,KAAmB;AAAA,UAAA;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDvB,EAAO,cAAc;"}

package/dist/granular/ui/primitives/Avatar/AvatarGroup.js

@@ -0,0 +1,97 @@
+"use client";
+var N = Object.defineProperty, $ = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var f = (e, r, s) => r in e ? N(e, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[r] = s, u = (e, r) => {
+  for (var s in r || (r = {}))
+    g.call(r, s) && f(e, s, r[s]);
+  if (l)
+    for (var s of l(r))
+      d.call(r, s) && f(e, s, r[s]);
+  return e;
+}, v = (e, r) => $(e, j(r));
+var x = (e, r) => {
+  var s = {};
+  for (var a in e)
+    g.call(e, a) && r.indexOf(a) < 0 && (s[a] = e[a]);
+  if (e != null && l)
+    for (var a of l(e))
+      r.indexOf(a) < 0 && d.call(e, a) && (s[a] = e[a]);
+  return s;
+};
+import { jsxs as I, jsx as b } from "react/jsx-runtime";
+import { Children as k, isValidElement as B, cloneElement as G } from "react";
+import h from "./Avatar.js";
+import { cn as P } from "../../utils/cn.js";
+function J(V) {
+  var o = V, {
+    children: e,
+    max: r = 3,
+    size: s = "md",
+    variant: a = "circle",
+    spacing: y = "md",
+    className: A = ""
+  } = o, z = x(o, [
+    "children",
+    "max",
+    "size",
+    "variant",
+    "spacing",
+    "className"
+  ]);
+  const C = {
+    none: "",
+    sm: "-space-x-1",
+    md: "-space-x-2",
+    lg: "-space-x-3"
+  }, t = k.toArray(e).filter(Boolean), E = t.slice(0, r), i = t.length - r;
+  return /* @__PURE__ */ I(
+    "div",
+    v(u({
+      className: P("flex", "items-center", C[y], A),
+      role: "group",
+      "aria-label": `${t.length} avatars`
+    }, z), {
+      children: [
+        E.map((n, c) => {
+          let m = n;
+          if (B(n) && n.type === h) {
+            const p = n.props;
+            m = G(
+              n,
+              {
+                size: p.size || s,
+                variant: p.variant || a
+              }
+            );
+          }
+          return /* @__PURE__ */ b(
+            "div",
+            {
+              className: "ring-2 ring-surface-base",
+              style: { zIndex: t.length - c },
+              children: m
+            },
+            c
+          );
+        }),
+        i > 0 && /* @__PURE__ */ b(
+          h,
+          {
+            size: s,
+            variant: a,
+            fallback: `+${i}`,
+            "aria-label": `${i} more avatars`,
+            className: "ring-2 ring-surface-base",
+            style: { zIndex: 0 }
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  J as AvatarGroup
+};
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/granular/ui/primitives/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../../src/ui/primitives/Avatar/AvatarGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  isValidElement,\n  cloneElement,\n} from \"react\";\nimport { cn } from \"../../utils\";\nimport Avatar, { type AvatarProps } from \"./Avatar\";\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  max?: number; // Maximum number of avatars to show before collapsing\n  size?: AvatarProps[\"size\"];\n  variant?: AvatarProps[\"variant\"];\n  spacing?: \"none\" | \"sm\" | \"md\" | \"lg\"; // Negative margin between avatares\n}\n\n/**\n * AvatarGroup Component\n *\n * Container for displaying multiple avatars in a group.\n * Supports collapsing when there are too many avatars.\n *\n * @example\n * ```tsx\n * <AvatarGroup max={3}>\n *   <Avatar src=\"/user1.jpg\" alt=\"User 1\" />\n *   <Avatar src=\"/user2.jpg\" alt=\"User 2\" />\n *   <Avatar src=\"/user3.jpg\" alt=\"User 3\" />\n *   <Avatar src=\"/user4.jpg\" alt=\"User 4\" />\n * </AvatarGroup>\n * ```\n */\nexport function AvatarGroup({\n  children,\n  max = 3,\n  size = \"md\",\n  variant = \"circle\",\n  spacing = \"md\",\n  className = \"\",\n  ...props\n}: AvatarGroupProps) {\n  const spacingClasses = {\n    none: \"\",\n    sm: \"-space-x-1\",\n    md: \"-space-x-2\",\n    lg: \"-space-x-3\",\n  };\n\n  // Convert children to array and filter out null/undefined\n  const avatars = Children.toArray(children).filter(Boolean);\n  const visibleAvatars = avatars.slice(0, max);\n  const remainingCount = avatars.length - max;\n\n  return (\n    <div\n      className={cn(\"flex\", \"items-center\", spacingClasses[spacing], className)}\n      role=\"group\"\n      aria-label={`${avatars.length} avatars`}\n      {...props}\n    >\n      {visibleAvatars.map((avatar, index) => {\n        // Clone avatar with consistent size and variant if needed\n        let avatarElement = avatar;\n        if (isValidElement(avatar) && avatar.type === Avatar) {\n          const avatarProps = avatar.props as AvatarProps;\n          avatarElement = cloneElement(\n            avatar as React.ReactElement<AvatarProps>,\n            {\n              size: avatarProps.size || size,\n              variant: avatarProps.variant || variant,\n            },\n          );\n        }\n\n        return (\n          <div\n            key={index}\n            className=\"ring-2 ring-surface-base\"\n            // micro-z: avatar stacking computed by position in group\n            style={{ zIndex: avatars.length - index }}\n          >\n            {avatarElement}\n          </div>\n        );\n      })}\n      {remainingCount > 0 && (\n        <Avatar\n          size={size}\n          variant={variant}\n          fallback={`+${remainingCount}`}\n          aria-label={`${remainingCount} more avatars`}\n          className=\"ring-2 ring-surface-base\"\n          // micro-z: avatar group fallback base layer\n          style={{ zIndex: 0 }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["AvatarGroup","_a","_b","children","max","size","variant","spacing","className","props","__objRest","spacingClasses","avatars","Children","visibleAvatars","remainingCount","jsxs","__spreadProps","__spreadValues","cn","avatar","index","avatarElement","isValidElement","Avatar","avatarProps","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,SAASA,EAAYC,GAQP;AARO,MAAAC,IAAAD,GAC1B;AAAA,cAAAE;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,MANcN,GAOvBO,IAAAC,EAPuBR,GAOvB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IAAiB;AAAA,IACrB,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAIAC,IAAUC,EAAS,QAAQV,CAAQ,EAAE,OAAO,OAAO,GACnDW,IAAiBF,EAAQ,MAAM,GAAGR,CAAG,GACrCW,IAAiBH,EAAQ,SAASR;AAExC,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC,EAAG,QAAQ,gBAAgBR,EAAeJ,CAAO,GAAGC,CAAS;AAAA,MACxE,MAAK;AAAA,MACL,cAAY,GAAGI,EAAQ,MAAM;AAAA,OACzBH,IAJL;AAAA,MAME,UAAA;AAAA,QAAAK,EAAe,IAAI,CAACM,GAAQC,MAAU;AAErC,cAAIC,IAAgBF;AACpB,cAAIG,EAAeH,CAAM,KAAKA,EAAO,SAASI,GAAQ;AACpD,kBAAMC,IAAcL,EAAO;AAC3B,YAAAE,IAAgBI;AAAA,cACdN;AAAA,cACA;AAAA,gBACE,MAAMK,EAAY,QAAQpB;AAAA,gBAC1B,SAASoB,EAAY,WAAWnB;AAAA,cAAA;AAAA,YAClC;AAAA,UAEJ;AAEA,iBACE,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAEV,OAAO,EAAE,QAAQf,EAAQ,SAASS,EAAA;AAAA,cAEjC,UAAAC;AAAA,YAAA;AAAA,YALID;AAAA,UAAA;AAAA,QAQX,CAAC;AAAA,QACAN,IAAiB,KAChB,gBAAAY;AAAA,UAACH;AAAA,UAAA;AAAA,YACC,MAAAnB;AAAA,YACA,SAAAC;AAAA,YACA,UAAU,IAAIS,CAAc;AAAA,YAC5B,cAAY,GAAGA,CAAc;AAAA,YAC7B,WAAU;AAAA,YAEV,OAAO,EAAE,QAAQ,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EAAA;AAIR;"}