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

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js

@@ -0,0 +1,165 @@
+"use client";
+var J = Object.defineProperty, L = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var j = Object.getOwnPropertySymbols;
+var Q = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
+var q = (i, s, r) => s in i ? J(i, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : i[s] = r, K = (i, s) => {
+  for (var r in s || (s = {}))
+    Q.call(s, r) && q(i, r, s[r]);
+  if (j)
+    for (var r of j(s))
+      U.call(s, r) && q(i, r, s[r]);
+  return i;
+}, W = (i, s) => L(i, M(s));
+import { jsx as X } from "react/jsx-runtime";
+import { useRef as Y, useState as B, useCallback as f, useEffect as F, useMemo as Z } from "react";
+import { SideNavbarStateContext as _ } from "../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as C } from "../contexts/SideNavbarThemeContext.js";
+import { useSideNavbarConfigRequired as tt } from "../contexts/SideNavbarConfigContext.js";
+import { useResize as et } from "../hooks/useResize.js";
+import { useResponsiveSidebar as rt } from "../hooks/useResponsiveSidebar.js";
+import { useFocusManagement as st } from "../hooks/useFocusManagement.js";
+import { useKeyboardShortcut as it } from "../hooks/useKeyboardShortcut.js";
+import { parseKeyboardShortcut as ot } from "../utils/parseKeyboardShortcut.js";
+import { parseWidthToPixels as at } from "../utils/parseWidth.js";
+function ht({
+  children: i,
+  defaultCollapsed: s = !1,
+  collapsed: r,
+  onCollapseChange: d,
+  onWidthChange: S,
+  onMobileChange: y,
+  exclusiveGroups: R = !1
+}) {
+  const O = C(), t = tt(), v = Y(null), a = r !== void 0, V = () => {
+    if (a) return r;
+    if (t.storageKey && t.persistState && typeof window != "undefined") {
+      const e = localStorage.getItem(`${t.storageKey}-collapsed`);
+      if (e !== null)
+        return e === "true";
+    }
+    return s;
+  }, A = () => {
+    if (t.storageKey && t.persistWidth && typeof window != "undefined") {
+      const e = localStorage.getItem(`${t.storageKey}-width`);
+      if (e !== null) {
+        const o = parseInt(e, 10);
+        if (!isNaN(o)) return o;
+      }
+    }
+    return at(O.contentWidth);
+  }, [n, b] = B(
+    V
+  ), [k, g] = B({}), { isMobile: u } = rt({
+    mobileBreakpoint: t.mobileBreakpoint,
+    onMobileChange: (e) => {
+      y == null || y(e), e && t.mobileVariant === "collapse" && !a && b(!0);
+    },
+    enabled: t.responsive
+  }), {
+    width: z,
+    isResizing: N,
+    startResize: x,
+    setWidth: I
+  } = et({
+    initialWidth: A(),
+    minWidth: t.minWidth,
+    maxWidth: t.maxWidth,
+    snapPoints: t.snapPoints,
+    onWidthChange: (e) => {
+      S == null || S(e), t.storageKey && t.persistWidth && typeof window != "undefined" && localStorage.setItem(`${t.storageKey}-width`, String(e));
+    },
+    enabled: t.resizable && !u
+  });
+  st({
+    isActive: u && t.mobileVariant === "overlay" && !n,
+    containerRef: v,
+    restoreFocus: !0
+  });
+  const m = a ? r : n, l = f(
+    (e) => {
+      a || b(e), d == null || d(e);
+    },
+    [a, d]
+  ), h = f(() => {
+    l(!m);
+  }, [m, l]), c = ot(t.keyboardShortcut);
+  it({
+    key: c.key,
+    ctrl: c.ctrl,
+    shift: c.shift,
+    alt: c.alt,
+    meta: c.meta,
+    onTrigger: h,
+    enabled: t.enableKeyboardShortcut
+  });
+  const P = f(
+    (e) => {
+      I(e);
+    },
+    [I]
+  ), $ = f(
+    (e) => {
+      g(R ? (o) => {
+        const H = o[e] === !1, w = {}, T = /* @__PURE__ */ new Set([...Object.keys(o), e]);
+        return H ? T.forEach((p) => {
+          w[p] = !0;
+        }) : T.forEach((p) => {
+          w[p] = p !== e;
+        }), w;
+      } : (o) => W(K({}, o), {
+        [e]: !o[e]
+      }));
+    },
+    [R]
+  ), E = f(
+    (e, o) => {
+      g((G) => W(K({}, G), {
+        [e]: o
+      }));
+    },
+    []
+  );
+  F(() => {
+    a && r !== n && b(r);
+  }, [a, r, n]), F(() => {
+    t.storageKey && t.persistState && typeof window != "undefined" && !a && localStorage.setItem(
+      `${t.storageKey}-collapsed`,
+      String(n)
+    );
+  }, [t.storageKey, t.persistState, n, a]);
+  const D = Z(
+    () => ({
+      collapsed: m,
+      toggle: h,
+      setCollapsed: l,
+      currentWidth: z,
+      setWidth: P,
+      isMobile: u,
+      isResizing: N,
+      startResize: x,
+      groupStates: k,
+      toggleGroup: $,
+      setGroupCollapsed: E,
+      sidebarRef: v
+    }),
+    [
+      m,
+      h,
+      l,
+      z,
+      P,
+      u,
+      N,
+      x,
+      k,
+      $,
+      E
+    ]
+  );
+  return /* @__PURE__ */ X(_.Provider, { value: D, children: i });
+}
+export {
+  ht as SideNavbarStateProvider
+};
+//# sourceMappingURL=SideNavbarStateProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarStateProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarStateProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, useEffect, useRef, useMemo } from \"react\";\nimport { SideNavbarStateContext } from \"../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../contexts/SideNavbarThemeContext\";\nimport { useSideNavbarConfigRequired } from \"../contexts/SideNavbarConfigContext\";\nimport { useResize } from \"../hooks/useResize\";\nimport { useResponsiveSidebar } from \"../hooks/useResponsiveSidebar\";\nimport { useFocusManagement } from \"../hooks/useFocusManagement\";\nimport { useKeyboardShortcut } from \"../hooks/useKeyboardShortcut\";\nimport { parseWidthToPixels, parseKeyboardShortcut } from \"../utils\";\nimport type {\n  SideNavbarStateProviderProps,\n  SideNavbarStateContextValue,\n} from \"../types\";\n\n/**\n * State Provider for SideNavbar\n *\n * Provides runtime state management for the sidebar.\n * Manages collapse state, resize, responsive behavior, and group states.\n *\n * Must be nested inside SideNavbarThemeProvider and SideNavbarConfigProvider.\n *\n * @example\n * ```tsx\n * <SideNavbarThemeProvider>\n *   <SideNavbarConfigProvider>\n *     <SideNavbarStateProvider defaultCollapsed onCollapseChange={handleChange}>\n *       <SideNavbarRoot>...</SideNavbarRoot>\n *     </SideNavbarStateProvider>\n *   </SideNavbarConfigProvider>\n * </SideNavbarThemeProvider>\n * ```\n */\nexport function SideNavbarStateProvider({\n  children,\n  defaultCollapsed = false,\n  collapsed: controlledCollapsed,\n  onCollapseChange,\n  onWidthChange,\n  onMobileChange,\n  exclusiveGroups = false,\n}: SideNavbarStateProviderProps) {\n  const theme = useSideNavbarThemeRequired();\n  const config = useSideNavbarConfigRequired();\n  const sidebarRef = useRef<HTMLElement | null>(null);\n\n  // Determine if component is controlled\n  const isControlled = controlledCollapsed !== undefined;\n\n  // Initialize collapsed state from storage or default\n  const getInitialCollapsedState = (): boolean => {\n    if (isControlled) return controlledCollapsed;\n    if (\n      config.storageKey &&\n      config.persistState &&\n      typeof window !== \"undefined\"\n    ) {\n      const stored = localStorage.getItem(`${config.storageKey}-collapsed`);\n      if (stored !== null) {\n        return stored === \"true\";\n      }\n    }\n    return defaultCollapsed;\n  };\n\n  // Initialize width state from storage or default\n  const getInitialWidth = (): number => {\n    if (\n      config.storageKey &&\n      config.persistWidth &&\n      typeof window !== \"undefined\"\n    ) {\n      const stored = localStorage.getItem(`${config.storageKey}-width`);\n      if (stored !== null) {\n        const parsedWidth = parseInt(stored, 10);\n        if (!isNaN(parsedWidth)) return parsedWidth;\n      }\n    }\n    return parseWidthToPixels(theme.contentWidth);\n  };\n\n  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(\n    getInitialCollapsedState,\n  );\n  const [groupStates, setGroupStates] = useState<Record<string, boolean>>({});\n\n  // Responsive sidebar\n  const { isMobile } = useResponsiveSidebar({\n    mobileBreakpoint: config.mobileBreakpoint,\n    onMobileChange: (mobile) => {\n      onMobileChange?.(mobile);\n      // Auto-collapse on mobile if using collapse variant\n      if (mobile && config.mobileVariant === \"collapse\" && !isControlled) {\n        setInternalCollapsed(true);\n      }\n    },\n    enabled: config.responsive,\n  });\n\n  // Resize functionality\n  const {\n    width: resizeWidth,\n    isResizing,\n    startResize,\n    setWidth: setResizeWidth,\n  } = useResize({\n    initialWidth: getInitialWidth(),\n    minWidth: config.minWidth,\n    maxWidth: config.maxWidth,\n    snapPoints: config.snapPoints,\n    onWidthChange: (newWidth) => {\n      onWidthChange?.(newWidth);\n      // Persist width if enabled\n      if (\n        config.storageKey &&\n        config.persistWidth &&\n        typeof window !== \"undefined\"\n      ) {\n        localStorage.setItem(`${config.storageKey}-width`, String(newWidth));\n      }\n    },\n    enabled: config.resizable && !isMobile,\n  });\n\n  // Focus management for mobile overlay\n  useFocusManagement({\n    isActive:\n      isMobile && config.mobileVariant === \"overlay\" && !internalCollapsed,\n    containerRef: sidebarRef,\n    restoreFocus: true,\n  });\n\n  // Derived collapsed state\n  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;\n\n  // Set collapsed handler\n  const setCollapsed = useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setInternalCollapsed(value);\n      }\n      onCollapseChange?.(value);\n    },\n    [isControlled, onCollapseChange],\n  );\n\n  // Toggle handler\n  const toggle = useCallback(() => {\n    setCollapsed(!collapsed);\n  }, [collapsed, setCollapsed]);\n\n  // Keyboard shortcut\n  const shortcut = parseKeyboardShortcut(config.keyboardShortcut);\n  useKeyboardShortcut({\n    key: shortcut.key,\n    ctrl: shortcut.ctrl,\n    shift: shortcut.shift,\n    alt: shortcut.alt,\n    meta: shortcut.meta,\n    onTrigger: toggle,\n    enabled: config.enableKeyboardShortcut,\n  });\n\n  // Set width handler\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      setResizeWidth(newWidth);\n    },\n    [setResizeWidth],\n  );\n\n  // Group state handlers\n  const toggleGroup = useCallback(\n    (groupId: string) => {\n      if (exclusiveGroups) {\n        // Exclusive behavior: only one group open at a time (like ButtonGroup)\n        // When clicking a group:\n        // - If it's open (false = expanded), close it (all groups closed)\n        // - If it's closed (true = collapsed or undefined), open it and close all others\n        // - After closing, user can click any group (including the same one) to open it again\n        setGroupStates((prev) => {\n          const currentState = prev[groupId];\n          const isCurrentlyOpen = currentState === false; // false means expanded (not collapsed)\n          const newStates: Record<string, boolean> = {};\n\n          // Get all group IDs (from current state and the one being toggled)\n          const allGroupIds = new Set([...Object.keys(prev), groupId]);\n\n          if (isCurrentlyOpen) {\n            // Group is currently open, close it (and all others remain closed)\n            allGroupIds.forEach((id) => {\n              newStates[id] = true; // true = collapsed\n            });\n          } else {\n            // Group is currently closed, open it and close all others\n            allGroupIds.forEach((id) => {\n              newStates[id] = id !== groupId; // true = collapsed, false = expanded\n            });\n          }\n\n          return newStates;\n        });\n      } else {\n        // Default behavior: toggle individual group state\n        setGroupStates((prev) => ({\n          ...prev,\n          [groupId]: !prev[groupId],\n        }));\n      }\n    },\n    [exclusiveGroups],\n  );\n\n  const setGroupCollapsed = useCallback(\n    (groupId: string, isCollapsed: boolean) => {\n      setGroupStates((prev) => ({\n        ...prev,\n        [groupId]: isCollapsed,\n      }));\n    },\n    [],\n  );\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (isControlled && controlledCollapsed !== internalCollapsed) {\n      setInternalCollapsed(controlledCollapsed);\n    }\n  }, [isControlled, controlledCollapsed, internalCollapsed]);\n\n  // Persist collapsed state to storage\n  useEffect(() => {\n    if (\n      config.storageKey &&\n      config.persistState &&\n      typeof window !== \"undefined\" &&\n      !isControlled\n    ) {\n      localStorage.setItem(\n        `${config.storageKey}-collapsed`,\n        String(internalCollapsed),\n      );\n    }\n  }, [config.storageKey, config.persistState, internalCollapsed, isControlled]);\n\n  const value: SideNavbarStateContextValue = useMemo(\n    () => ({\n      collapsed,\n      toggle,\n      setCollapsed,\n      currentWidth: resizeWidth,\n      setWidth,\n      isMobile,\n      isResizing,\n      startResize,\n      groupStates,\n      toggleGroup,\n      setGroupCollapsed,\n      sidebarRef,\n    }),\n    [\n      collapsed,\n      toggle,\n      setCollapsed,\n      resizeWidth,\n      setWidth,\n      isMobile,\n      isResizing,\n      startResize,\n      groupStates,\n      toggleGroup,\n      setGroupCollapsed,\n    ],\n  );\n\n  return (\n    <SideNavbarStateContext.Provider value={value}>\n      {children}\n    </SideNavbarStateContext.Provider>\n  );\n}\n\nexport default SideNavbarStateProvider;\n"],"names":["SideNavbarStateProvider","children","defaultCollapsed","controlledCollapsed","onCollapseChange","onWidthChange","onMobileChange","exclusiveGroups","theme","useSideNavbarThemeRequired","config","useSideNavbarConfigRequired","sidebarRef","useRef","isControlled","getInitialCollapsedState","stored","getInitialWidth","parsedWidth","parseWidthToPixels","internalCollapsed","setInternalCollapsed","useState","groupStates","setGroupStates","isMobile","useResponsiveSidebar","mobile","resizeWidth","isResizing","startResize","setResizeWidth","useResize","newWidth","useFocusManagement","collapsed","setCollapsed","useCallback","value","toggle","shortcut","parseKeyboardShortcut","useKeyboardShortcut","setWidth","toggleGroup","groupId","prev","isCurrentlyOpen","newStates","allGroupIds","id","__spreadProps","__spreadValues","setGroupCollapsed","isCollapsed","useEffect","useMemo","jsx","SideNavbarStateContext"],"mappings":"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"}

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { defaultThemeValues as e, SideNavbarThemeContext as f } from "../contexts/SideNavbarThemeContext.js";
+function p({
+  children: a,
+  variant: r = e.variant,
+  navigationWidth: o = e.navigationWidth,
+  contentWidth: t = e.contentWidth,
+  animationDuration: m = e.animationDuration,
+  animationEasing: i = e.animationEasing
+}) {
+  const u = d(
+    () => ({
+      variant: r,
+      navigationWidth: o,
+      contentWidth: t,
+      animationDuration: m,
+      animationEasing: i
+    }),
+    [
+      r,
+      o,
+      t,
+      m,
+      i
+    ]
+  );
+  return /* @__PURE__ */ n(f.Provider, { value: u, children: a });
+}
+export {
+  p as SideNavbarThemeProvider
+};
+//# sourceMappingURL=SideNavbarThemeProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbarThemeProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SideNavbarThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  SideNavbarThemeContext,\n  defaultThemeValues,\n} from \"../contexts/SideNavbarThemeContext\";\nimport type { SideNavbarThemeProviderProps } from \"../types\";\n\n/**\n * Theme Provider for SideNavbar\n *\n * Provides visual customization context for the sidebar.\n * Theme values are typically set once and don't change during runtime.\n *\n * @example\n * ```tsx\n * <SideNavbarThemeProvider variant=\"elevated\" animationDuration={200}>\n *   <SideNavbarConfigProvider>\n *     <SideNavbarStateProvider>\n *       <SideNavbarRoot>...</SideNavbarRoot>\n *     </SideNavbarStateProvider>\n *   </SideNavbarConfigProvider>\n * </SideNavbarThemeProvider>\n * ```\n */\nexport function SideNavbarThemeProvider({\n  children,\n  variant = defaultThemeValues.variant,\n  navigationWidth = defaultThemeValues.navigationWidth,\n  contentWidth = defaultThemeValues.contentWidth,\n  animationDuration = defaultThemeValues.animationDuration,\n  animationEasing = defaultThemeValues.animationEasing,\n}: SideNavbarThemeProviderProps) {\n  const value = useMemo(\n    () => ({\n      variant,\n      navigationWidth,\n      contentWidth,\n      animationDuration,\n      animationEasing,\n    }),\n    [\n      variant,\n      navigationWidth,\n      contentWidth,\n      animationDuration,\n      animationEasing,\n    ],\n  );\n\n  return (\n    <SideNavbarThemeContext.Provider value={value}>\n      {children}\n    </SideNavbarThemeContext.Provider>\n  );\n}\n\nexport default SideNavbarThemeProvider;\n"],"names":["SideNavbarThemeProvider","children","variant","defaultThemeValues","navigationWidth","contentWidth","animationDuration","animationEasing","value","useMemo","jsx","SideNavbarThemeContext"],"mappings":";;;;AA0BO,SAASA,EAAwB;AAAA,EACtC,UAAAC;AAAA,EACA,SAAAC,IAAUC,EAAmB;AAAA,EAC7B,iBAAAC,IAAkBD,EAAmB;AAAA,EACrC,cAAAE,IAAeF,EAAmB;AAAA,EAClC,mBAAAG,IAAoBH,EAAmB;AAAA,EACvC,iBAAAI,IAAkBJ,EAAmB;AACvC,GAAiC;AAC/B,QAAMK,IAAQC;AAAA,IACZ,OAAO;AAAA,MACL,SAAAP;AAAA,MACA,iBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEL;AAAA,MACAE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAG,EAACC,EAAuB,UAAvB,EAAgC,OAAAH,GAC9B,UAAAP,EAAA,CACH;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as S } from "react/jsx-runtime";
+import { useState as m, useRef as f, useCallback as n, useMemo as d } from "react";
+import { SidebarSlotContext as p } from "../contexts/SidebarSlotContext.js";
+function g({
+  children: l,
+  defaultSlot: c = null
+}) {
+  const [o, u] = m(c), t = f(/* @__PURE__ */ new Map()), r = n((e, a) => {
+    t.current.set(e, a);
+  }, []), s = n((e) => {
+    t.current.delete(e);
+  }, []), i = d(
+    () => ({
+      activeSlot: o,
+      setActiveSlot: u,
+      slots: t.current,
+      registerSlot: r,
+      unregisterSlot: s
+    }),
+    [o, r, s]
+  );
+  return /* @__PURE__ */ S(p.Provider, { value: i, children: l });
+}
+export {
+  g as SidebarSlotProvider
+};
+//# sourceMappingURL=SidebarSlotProvider.js.map

package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSlotProvider.js","sources":["../../../../../../src/ui/components/SideNavbar/providers/SidebarSlotProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useCallback, useMemo, type ReactNode } from \"react\";\nimport { SidebarSlotContext } from \"../contexts/SidebarSlotContext\";\nimport type {\n  SidebarSlotContextValue,\n  SidebarSlotProviderProps,\n} from \"../types\";\n\n/**\n * Sidebar Slot Provider\n *\n * **Important: Slots are exclusive to the Sidebar component, not the Navbar.**\n *\n * Manages slot registration and active slot state for dynamic content switching\n * within the Sidebar. This provider should wrap the Sidebar content where slots\n * will be used.\n *\n * @example\n * ```tsx\n * <SideNavbar>\n *   <SideNavbar.Navbar>\n *     <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *   </SideNavbar.Navbar>\n *\n *   <SidebarSlotProvider defaultSlot=\"dashboard\">\n *     <SideNavbar.Sidebar>\n *       <SideNavbar.Sidebar.Content>\n *         <SidebarSlot id=\"dashboard\">\n *           <DashboardContent />\n *         </SidebarSlot>\n *         <SidebarSlot id=\"settings\">\n *           <SettingsContent />\n *         </SidebarSlot>\n *         <SidebarSlotContent />\n *       </SideNavbar.Sidebar.Content>\n *     </SideNavbar.Sidebar>\n *   </SidebarSlotProvider>\n * </SideNavbar>\n * ```\n */\nexport function SidebarSlotProvider({\n  children,\n  defaultSlot = null,\n}: SidebarSlotProviderProps) {\n  const [activeSlot, setActiveSlot] = useState<string | null>(defaultSlot);\n  const slotsRef = useRef(new Map<string, ReactNode>());\n\n  const registerSlot = useCallback((id: string, content: ReactNode) => {\n    slotsRef.current.set(id, content);\n  }, []);\n\n  const unregisterSlot = useCallback((id: string) => {\n    slotsRef.current.delete(id);\n  }, []);\n\n  const contextValue: SidebarSlotContextValue = useMemo(\n    () => ({\n      activeSlot,\n      setActiveSlot,\n      slots: slotsRef.current,\n      registerSlot,\n      unregisterSlot,\n    }),\n    [activeSlot, registerSlot, unregisterSlot],\n  );\n\n  return (\n    <SidebarSlotContext.Provider value={contextValue}>\n      {children}\n    </SidebarSlotContext.Provider>\n  );\n}\n"],"names":["SidebarSlotProvider","children","defaultSlot","activeSlot","setActiveSlot","useState","slotsRef","useRef","registerSlot","useCallback","id","content","unregisterSlot","contextValue","useMemo","SidebarSlotContext"],"mappings":";;;;AAyCO,SAASA,EAAoB;AAAA,EAClC,UAAAC;AAAA,EACA,aAAAC,IAAc;AAChB,GAA6B;AAC3B,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAwBH,CAAW,GACjEI,IAAWC,EAAO,oBAAI,KAAwB,GAE9CC,IAAeC,EAAY,CAACC,GAAYC,MAAuB;AACnE,IAAAL,EAAS,QAAQ,IAAII,GAAIC,CAAO;AAAA,EAClC,GAAG,CAAA,CAAE,GAECC,IAAiBH,EAAY,CAACC,MAAe;AACjD,IAAAJ,EAAS,QAAQ,OAAOI,CAAE;AAAA,EAC5B,GAAG,CAAA,CAAE,GAECG,IAAwCC;AAAA,IAC5C,OAAO;AAAA,MACL,YAAAX;AAAA,MACA,eAAAC;AAAA,MACA,OAAOE,EAAS;AAAA,MAChB,cAAAE;AAAA,MACA,gBAAAI;AAAA,IAAA;AAAA,IAEF,CAACT,GAAYK,GAAcI,CAAc;AAAA,EAAA;AAG3C,2BACGG,EAAmB,UAAnB,EAA4B,OAAOF,GACjC,UAAAZ,GACH;AAEJ;"}

package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js

@@ -0,0 +1,60 @@
+"use client";
+const p = [
+  "ctrl",
+  "cmd",
+  "control",
+  "shift",
+  "alt",
+  "meta",
+  "option"
+];
+function h(t) {
+  const s = {
+    key: "",
+    ctrl: !1,
+    shift: !1,
+    alt: !1,
+    meta: !1,
+    isValid: !1
+  };
+  if (!t || typeof t != "string")
+    return s;
+  const e = t.trim();
+  if (!e)
+    return s;
+  const l = e.split("+").map((a) => a.trim().toLowerCase()).filter((a) => a.length > 0);
+  if (l.length === 0)
+    return s;
+  const i = /* @__PURE__ */ new Set();
+  let n = "";
+  for (let a = 0; a < l.length; a++) {
+    const r = l[a];
+    if (p.includes(r))
+      i.add(r);
+    else if (a === l.length - 1)
+      n = r;
+    else
+      return s;
+  }
+  if (!n)
+    return s;
+  const f = i.has("ctrl") || i.has("cmd") || i.has("control"), o = i.has("alt") || i.has("option");
+  return {
+    key: n,
+    ctrl: f,
+    shift: i.has("shift"),
+    alt: o,
+    meta: i.has("meta"),
+    isValid: !0
+  };
+}
+function m(t, s = "windows") {
+  if (!t.isValid) return "";
+  const e = [];
+  return s === "mac" ? (t.ctrl && e.push("⌘"), t.shift && e.push("⇧"), t.alt && e.push("⌥"), t.meta && e.push("⌃"), e.push(t.key.toUpperCase()), e.join("")) : (t.ctrl && e.push("Ctrl"), t.shift && e.push("Shift"), t.alt && e.push("Alt"), t.meta && e.push("Meta"), e.push(t.key.toUpperCase()), e.join("+"));
+}
+export {
+  m as formatKeyboardShortcut,
+  h as parseKeyboardShortcut
+};
+//# sourceMappingURL=parseKeyboardShortcut.js.map

package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseKeyboardShortcut.js","sources":["../../../../../../src/ui/components/SideNavbar/utils/parseKeyboardShortcut.ts"],"sourcesContent":["/**\n * Parsed keyboard shortcut result\n */\nexport interface ParsedKeyboardShortcut {\n  /** The main key (lowercase) */\n  key: string;\n  /** Whether Ctrl/Cmd is required */\n  ctrl: boolean;\n  /** Whether Shift is required */\n  shift: boolean;\n  /** Whether Alt is required */\n  alt: boolean;\n  /** Whether Meta (Windows/Cmd) is required */\n  meta: boolean;\n  /** Whether the shortcut is valid */\n  isValid: boolean;\n}\n\n/**\n * Known modifier keys\n */\nconst MODIFIER_KEYS = [\n  \"ctrl\",\n  \"cmd\",\n  \"control\",\n  \"shift\",\n  \"alt\",\n  \"meta\",\n  \"option\",\n] as const;\n\n/**\n * Parse a keyboard shortcut string into its components\n *\n * Supports various formats:\n * - \"Ctrl+B\" -> { key: 'b', ctrl: true, ... }\n * - \"Cmd+Shift+K\" -> { key: 'k', ctrl: true, shift: true, ... }\n * - \"Alt+Enter\" -> { key: 'enter', alt: true, ... }\n * - \"Ctrl+Shift+Alt+S\" -> { key: 's', ctrl: true, shift: true, alt: true, ... }\n *\n * Modifier aliases:\n * - \"cmd\" and \"control\" are aliases for \"ctrl\"\n * - \"option\" is an alias for \"alt\"\n *\n * @param shortcut - The keyboard shortcut string to parse\n * @returns Parsed shortcut object with key and modifiers\n *\n * @example\n * ```ts\n * parseKeyboardShortcut('Ctrl+B')\n * // { key: 'b', ctrl: true, shift: false, alt: false, meta: false, isValid: true }\n *\n * parseKeyboardShortcut('Cmd+Shift+K')\n * // { key: 'k', ctrl: true, shift: true, alt: false, meta: false, isValid: true }\n *\n * parseKeyboardShortcut('')\n * // { key: '', ctrl: false, shift: false, alt: false, meta: false, isValid: false }\n * ```\n */\nexport function parseKeyboardShortcut(\n  shortcut: string,\n): ParsedKeyboardShortcut {\n  // Default invalid result\n  const invalidResult: ParsedKeyboardShortcut = {\n    key: \"\",\n    ctrl: false,\n    shift: false,\n    alt: false,\n    meta: false,\n    isValid: false,\n  };\n\n  // Handle empty or invalid input\n  if (!shortcut || typeof shortcut !== \"string\") {\n    return invalidResult;\n  }\n\n  // Trim and normalize\n  const normalized = shortcut.trim();\n  if (!normalized) {\n    return invalidResult;\n  }\n\n  // Split by '+' and filter empty parts\n  const parts = normalized\n    .split(\"+\")\n    .map((part) => part.trim().toLowerCase())\n    .filter((part) => part.length > 0);\n\n  if (parts.length === 0) {\n    return invalidResult;\n  }\n\n  // The last non-modifier part is the main key\n  const modifiers = new Set<string>();\n  let mainKey = \"\";\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n\n    if (MODIFIER_KEYS.includes(part as (typeof MODIFIER_KEYS)[number])) {\n      modifiers.add(part);\n    } else if (i === parts.length - 1) {\n      // Last part should be the main key\n      mainKey = part;\n    } else {\n      // Non-modifier key in the middle is invalid\n      return invalidResult;\n    }\n  }\n\n  // Must have a main key\n  if (!mainKey) {\n    return invalidResult;\n  }\n\n  // Check for ctrl aliases (cmd, control)\n  const hasCtrl =\n    modifiers.has(\"ctrl\") || modifiers.has(\"cmd\") || modifiers.has(\"control\");\n\n  // Check for alt aliases (option)\n  const hasAlt = modifiers.has(\"alt\") || modifiers.has(\"option\");\n\n  return {\n    key: mainKey,\n    ctrl: hasCtrl,\n    shift: modifiers.has(\"shift\"),\n    alt: hasAlt,\n    meta: modifiers.has(\"meta\"),\n    isValid: true,\n  };\n}\n\n/**\n * Format a parsed shortcut back to a string (for display)\n *\n * @param shortcut - The parsed shortcut object\n * @param platform - The platform (mac uses symbols, others use text)\n * @returns Formatted shortcut string\n *\n * @example\n * ```ts\n * formatKeyboardShortcut({ key: 'b', ctrl: true, ... }, 'mac')\n * // '⌘B'\n *\n * formatKeyboardShortcut({ key: 'b', ctrl: true, ... }, 'windows')\n * // 'Ctrl+B'\n * ```\n */\nexport function formatKeyboardShortcut(\n  shortcut: ParsedKeyboardShortcut,\n  platform: \"mac\" | \"windows\" | \"linux\" = \"windows\",\n): string {\n  if (!shortcut.isValid) return \"\";\n\n  const parts: string[] = [];\n\n  if (platform === \"mac\") {\n    // macOS uses symbols\n    if (shortcut.ctrl) parts.push(\"⌘\");\n    if (shortcut.shift) parts.push(\"⇧\");\n    if (shortcut.alt) parts.push(\"⌥\");\n    if (shortcut.meta) parts.push(\"⌃\");\n    parts.push(shortcut.key.toUpperCase());\n    return parts.join(\"\");\n  }\n\n  // Windows/Linux use text\n  if (shortcut.ctrl) parts.push(\"Ctrl\");\n  if (shortcut.shift) parts.push(\"Shift\");\n  if (shortcut.alt) parts.push(\"Alt\");\n  if (shortcut.meta) parts.push(\"Meta\");\n  parts.push(shortcut.key.toUpperCase());\n  return parts.join(\"+\");\n}\n"],"names":["MODIFIER_KEYS","parseKeyboardShortcut","shortcut","invalidResult","normalized","parts","part","modifiers","mainKey","i","hasCtrl","hasAlt","formatKeyboardShortcut","platform"],"mappings":";AAqBA,MAAMA,IAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA8BO,SAASC,EACdC,GACwB;AAExB,QAAMC,IAAwC;AAAA,IAC5C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAIX,MAAI,CAACD,KAAY,OAAOA,KAAa;AACnC,WAAOC;AAIT,QAAMC,IAAaF,EAAS,KAAA;AAC5B,MAAI,CAACE;AACH,WAAOD;AAIT,QAAME,IAAQD,EACX,MAAM,GAAG,EACT,IAAI,CAACE,MAASA,EAAK,OAAO,YAAA,CAAa,EACvC,OAAO,CAACA,MAASA,EAAK,SAAS,CAAC;AAEnC,MAAID,EAAM,WAAW;AACnB,WAAOF;AAIT,QAAMI,wBAAgB,IAAA;AACtB,MAAIC,IAAU;AAEd,WAASC,IAAI,GAAGA,IAAIJ,EAAM,QAAQI,KAAK;AACrC,UAAMH,IAAOD,EAAMI,CAAC;AAEpB,QAAIT,EAAc,SAASM,CAAsC;AAC/D,MAAAC,EAAU,IAAID,CAAI;AAAA,aACTG,MAAMJ,EAAM,SAAS;AAE9B,MAAAG,IAAUF;AAAA;AAGV,aAAOH;AAAA,EAEX;AAGA,MAAI,CAACK;AACH,WAAOL;AAIT,QAAMO,IACJH,EAAU,IAAI,MAAM,KAAKA,EAAU,IAAI,KAAK,KAAKA,EAAU,IAAI,SAAS,GAGpEI,IAASJ,EAAU,IAAI,KAAK,KAAKA,EAAU,IAAI,QAAQ;AAE7D,SAAO;AAAA,IACL,KAAKC;AAAA,IACL,MAAME;AAAA,IACN,OAAOH,EAAU,IAAI,OAAO;AAAA,IAC5B,KAAKI;AAAA,IACL,MAAMJ,EAAU,IAAI,MAAM;AAAA,IAC1B,SAAS;AAAA,EAAA;AAEb;AAkBO,SAASK,EACdV,GACAW,IAAwC,WAChC;AACR,MAAI,CAACX,EAAS,QAAS,QAAO;AAE9B,QAAMG,IAAkB,CAAA;AAExB,SAAIQ,MAAa,SAEXX,EAAS,QAAMG,EAAM,KAAK,GAAG,GAC7BH,EAAS,SAAOG,EAAM,KAAK,GAAG,GAC9BH,EAAS,OAAKG,EAAM,KAAK,GAAG,GAC5BH,EAAS,QAAMG,EAAM,KAAK,GAAG,GACjCA,EAAM,KAAKH,EAAS,IAAI,YAAA,CAAa,GAC9BG,EAAM,KAAK,EAAE,MAIlBH,EAAS,QAAMG,EAAM,KAAK,MAAM,GAChCH,EAAS,SAAOG,EAAM,KAAK,OAAO,GAClCH,EAAS,OAAKG,EAAM,KAAK,KAAK,GAC9BH,EAAS,QAAMG,EAAM,KAAK,MAAM,GACpCA,EAAM,KAAKH,EAAS,IAAI,YAAA,CAAa,GAC9BG,EAAM,KAAK,GAAG;AACvB;"}

package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js

@@ -0,0 +1,19 @@
+"use client";
+function u(e) {
+  if (typeof e == "number") return e;
+  const r = parseFloat(e);
+  return isNaN(r) ? 0 : e.endsWith("rem") || e.endsWith("em") ? r * 16 : (e.endsWith("px"), r);
+}
+function i(e, r) {
+  return e === void 0 || r === void 0 ? !0 : e < r;
+}
+function o(e, r, t) {
+  let n = e;
+  return r !== void 0 && (n = Math.max(n, r)), t !== void 0 && (n = Math.min(n, t)), n;
+}
+export {
+  o as clampWidth,
+  u as parseWidthToPixels,
+  i as validateWidthBounds
+};
+//# sourceMappingURL=parseWidth.js.map

package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseWidth.js","sources":["../../../../../../src/ui/components/SideNavbar/utils/parseWidth.ts"],"sourcesContent":["/**\n * Parse a width value (number or string) to pixels\n *\n * Supports:\n * - Numbers: returned as-is\n * - Pixel strings: \"320px\" -> 320\n * - Rem strings: \"20rem\" -> 320 (assuming 16px base)\n * - Em strings: \"20em\" -> 320 (assuming 16px base)\n * - Plain numbers as strings: \"320\" -> 320\n *\n * @param width - The width value to parse\n * @returns The width in pixels\n */\nexport function parseWidthToPixels(width: number | string): number {\n  if (typeof width === \"number\") return width;\n\n  const numericValue = parseFloat(width);\n  if (isNaN(numericValue)) return 0;\n\n  if (width.endsWith(\"rem\")) return numericValue * 16;\n  if (width.endsWith(\"em\")) return numericValue * 16;\n  if (width.endsWith(\"px\")) return numericValue;\n\n  return numericValue;\n}\n\n/**\n * Validate that minWidth is less than maxWidth\n *\n * @param minWidth - Minimum width in pixels\n * @param maxWidth - Maximum width in pixels\n * @returns True if valid, false otherwise\n */\nexport function validateWidthBounds(\n  minWidth?: number,\n  maxWidth?: number,\n): boolean {\n  if (minWidth === undefined || maxWidth === undefined) return true;\n  return minWidth < maxWidth;\n}\n\n/**\n * Clamp a width value between min and max bounds\n *\n * @param width - The width to clamp\n * @param minWidth - Minimum allowed width\n * @param maxWidth - Maximum allowed width\n * @returns The clamped width value\n */\nexport function clampWidth(\n  width: number,\n  minWidth?: number,\n  maxWidth?: number,\n): number {\n  let result = width;\n  if (minWidth !== undefined) result = Math.max(result, minWidth);\n  if (maxWidth !== undefined) result = Math.min(result, maxWidth);\n  return result;\n}\n"],"names":["parseWidthToPixels","width","numericValue","validateWidthBounds","minWidth","maxWidth","clampWidth","result"],"mappings":";AAaO,SAASA,EAAmBC,GAAgC;AACjE,MAAI,OAAOA,KAAU,SAAU,QAAOA;AAEtC,QAAMC,IAAe,WAAWD,CAAK;AACrC,SAAI,MAAMC,CAAY,IAAU,IAE5BD,EAAM,SAAS,KAAK,KACpBA,EAAM,SAAS,IAAI,IAAUC,IAAe,MAC5CD,EAAM,SAAS,IAAI,GAAUC;AAGnC;AASO,SAASC,EACdC,GACAC,GACS;AACT,SAAID,MAAa,UAAaC,MAAa,SAAkB,KACtDD,IAAWC;AACpB;AAUO,SAASC,EACdL,GACAG,GACAC,GACQ;AACR,MAAIE,IAASN;AACb,SAAIG,MAAa,WAAWG,IAAS,KAAK,IAAIA,GAAQH,CAAQ,IAC1DC,MAAa,WAAWE,IAAS,KAAK,IAAIA,GAAQF,CAAQ,IACvDE;AACT;"}

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

@@ -0,0 +1,84 @@
+"use client";
+var y = Object.defineProperty, C = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var r = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var i = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, o = (t, e) => {
+  for (var s in e || (e = {}))
+    c.call(e, s) && i(t, s, e[s]);
+  if (r)
+    for (var s of r(e))
+      x.call(e, s) && i(t, s, e[s]);
+  return t;
+}, f = (t, e) => C(t, j(e));
+var m = (t, e) => {
+  var s = {};
+  for (var a in t)
+    c.call(t, a) && e.indexOf(a) < 0 && (s[a] = t[a]);
+  if (t != null && r)
+    for (var a of r(t))
+      e.indexOf(a) < 0 && x.call(t, a) && (s[a] = t[a]);
+  return s;
+};
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import { cn as d } from "../../utils/cn.js";
+const S = {
+  start: "items-start text-left",
+  center: "items-center text-center"
+}, E = {
+  neutral: "text-fg-tertiary",
+  success: "text-fg-success",
+  warning: "text-fg-warning",
+  error: "text-fg-error"
+};
+function A(H) {
+  var l = H, {
+    value: t,
+    label: e,
+    hint: s,
+    icon: a,
+    align: p = "start",
+    tone: u = "neutral",
+    className: h
+  } = l, N = m(l, [
+    "value",
+    "label",
+    "hint",
+    "icon",
+    "align",
+    "tone",
+    "className"
+  ]);
+  const b = t == null;
+  return /* @__PURE__ */ w(
+    "div",
+    f(o({
+      className: d(
+        "bg-surface-base flex-1 flex flex-col",
+        g("base", "p"),
+        g("xs", "gap-y"),
+        S[p],
+        h
+      )
+    }, N), {
+      children: [
+        a ? /* @__PURE__ */ n("span", { className: "text-icon-default inline-flex", children: a }) : null,
+        b ? /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-label": "No data",
+            className: "text-fg-tertiary text-2xl font-semibold leading-tight",
+            children: "—"
+          }
+        ) : /* @__PURE__ */ n("span", { className: "text-fg-primary text-2xl font-semibold leading-tight", children: t }),
+        /* @__PURE__ */ n("span", { className: "text-fg-secondary text-sm", children: e }),
+        s ? /* @__PURE__ */ n("span", { className: d("text-xs", E[u]), children: s }) : null
+      ]
+    })
+  );
+}
+export {
+  A as Stat
+};
+//# sourceMappingURL=Stat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","sources":["../../../../../src/ui/components/Stat/Stat.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type StatTone = \"neutral\" | \"success\" | \"warning\" | \"error\";\nexport type StatAlign = \"start\" | \"center\";\n\nexport interface StatProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The metric value to display. Strings are rendered verbatim — formatting\n   * (number locale, currency, units, relative time, etc.) is the consumer's\n   * responsibility, not the design system's. Pass `null` or `undefined` to\n   * render the empty-state placeholder (see \"Empty state\" below).\n   */\n  value: ReactNode;\n  /**\n   * Short metric label (e.g. \"Votos\", \"Alinhamento\"). Required for screen\n   * reader context — the label describes what the value means.\n   */\n  label: string;\n  /**\n   * Optional third line of context below the value (e.g. \"no banco\",\n   * \"últimos 12 m\", \"+3% no mês\"). The `tone` prop styles THIS line — see\n   * `tone` for the contract.\n   */\n  hint?: ReactNode;\n  /**\n   * Optional icon rendered above the value (home-style stats use icons;\n   * detail-page stats typically don't).\n   */\n  icon?: ReactNode;\n  /**\n   * Block alignment. `start` left-aligns label/value/hint (detail-page\n   * style); `center` centers them (home-hero style).\n   * @default 'start'\n   */\n  align?: StatAlign;\n  /**\n   * Semantic tone for the metric — `neutral` for plain stats, the others\n   * for classified states (good/warning/bad).\n   *\n   * **Scope (contract).** Tone affects ONLY the `hint`, not the `value`,\n   * `label`, or `icon`. The `value` always renders in `text-fg-primary`\n   * regardless of tone; the `label` in `text-fg-secondary`; the `icon` in\n   * `text-icon-default`. This is deliberate — a colored value would\n   * compete with the label for attention and bias the reader's\n   * interpretation of the metric. If a future requirement needs the\n   * `value` (or icon) to inherit tone, that becomes a new prop or a\n   * semver-bound default change, not a surprise expansion of `tone`.\n   *\n   * Tone maps directly to the semantic foreground tokens (no new\n   * vocabulary): `neutral` → `text-fg-tertiary`, `success` →\n   * `text-fg-success`, `warning` → `text-fg-warning`, `error` →\n   * `text-fg-error`. See `.claude/rules/colors.md`.\n   *\n   * @default 'neutral'\n   */\n  tone?: StatTone;\n}\n\nconst alignClasses: Record<StatAlign, string> = {\n  start: \"items-start text-left\",\n  center: \"items-center text-center\",\n};\n\nconst toneHintClasses: Record<StatTone, string> = {\n  neutral: \"text-fg-tertiary\",\n  success: \"text-fg-success\",\n  warning: \"text-fg-warning\",\n  error: \"text-fg-error\",\n};\n\n/**\n * `Stat` — a single statistic block (icon? + value + label + hint?).\n *\n * Composes with `StatGroup` (1-px-divider strip or grid) but is also\n * valid standalone — a single `Stat` outside a group is a legitimate use\n * case for a hero metric.\n *\n * ### Empty state contract\n *\n * When `value` is `null` OR `undefined`, the component renders the\n * em-dash placeholder `—` (U+2014) with `aria-label=\"No data\"` on its\n * wrapper. The label is intentionally hard-coded in English in this\n * version; a screen reader announcing \"No data\" in an otherwise\n * Portuguese app is a known inconsistency accepted for now — if i18n\n * becomes a requirement, an `emptyLabel?: string` prop will be added in\n * a follow-up PR (semver-safe addition).\n *\n * Other falsy values — `0`, `\"\"`, `false`, an empty fragment — are\n * **legitimate values** and render as-is. The empty trigger is only\n * `null`/`undefined`, because `0` (count = zero) is meaningful data that\n * the consumer would not want masked.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * the `./server` entry alongside `StatGroup`. Consumer-supplied `icon`\n * may itself be a client component; React's RSC boundary handles that\n * normally.\n *\n * @example\n * ```tsx\n * // Home-style (centered, with icon)\n * <Stat\n *   icon={<Users size={20} aria-hidden=\"true\" />}\n *   value=\"9,4 mil\"\n *   label=\"Parlamentares\"\n *   align=\"center\"\n * />\n *\n * // Detail-page-style (start-aligned, with hint)\n * <Stat\n *   value=\"87%\"\n *   label=\"Alinhamento\"\n *   hint=\"últimos 12 meses\"\n *   tone=\"success\"\n * />\n * ```\n */\nexport function Stat({\n  value,\n  label,\n  hint,\n  icon,\n  align = \"start\",\n  tone = \"neutral\",\n  className,\n  ...props\n}: StatProps) {\n  const isEmpty = value === null || value === undefined;\n\n  return (\n    <div\n      className={cn(\n        \"bg-surface-base flex-1 flex flex-col\",\n        getSpacingClass(\"base\", \"p\"),\n        getSpacingClass(\"xs\", \"gap-y\"),\n        alignClasses[align],\n        className,\n      )}\n      {...props}\n    >\n      {icon ? (\n        <span className=\"text-icon-default inline-flex\">{icon}</span>\n      ) : null}\n      {isEmpty ? (\n        <span\n          aria-label=\"No data\"\n          className=\"text-fg-tertiary text-2xl font-semibold leading-tight\"\n        >\n          —\n        </span>\n      ) : (\n        <span className=\"text-fg-primary text-2xl font-semibold leading-tight\">\n          {value}\n        </span>\n      )}\n      <span className=\"text-fg-secondary text-sm\">{label}</span>\n      {hint ? (\n        <span className={cn(\"text-xs\", toneHintClasses[tone])}>{hint}</span>\n      ) : null}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"names":["alignClasses","toneHintClasses","Stat","_a","_b","value","label","hint","icon","align","tone","className","props","__objRest","isEmpty","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAMA,IAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,QAAQ;AACV,GAEMC,IAA4C;AAAA,EAChD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAkDO,SAASC,EAAKC,GASP;AATO,MAAAC,IAAAD,GACnB;AAAA,WAAAE;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,MAPmBP,GAQhBQ,IAAAC,EARgBT,GAQhB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMU,IAAUT,KAAU;AAE1B,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,QAAQ,GAAG;AAAA,QAC3BA,EAAgB,MAAM,OAAO;AAAA,QAC7BnB,EAAaS,CAAK;AAAA,QAClBE;AAAA,MAAA;AAAA,OAEEC,IARL;AAAA,MAUE,UAAA;AAAA,QAAAJ,IACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,iCAAiC,aAAK,IACpD;AAAA,QACHN,IACC,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA,IAID,gBAAAA,EAAC,QAAA,EAAK,WAAU,wDACb,UAAAf,GACH;AAAA,QAEF,gBAAAe,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAd,GAAM;AAAA,QAClDC,IACC,gBAAAa,EAAC,QAAA,EAAK,WAAWF,EAAG,WAAWjB,EAAgBS,CAAI,CAAC,GAAI,UAAAH,EAAA,CAAK,IAC3D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/granular/ui/components/Stat/StatGroup.js

@@ -0,0 +1,61 @@
+"use client";
+var p = Object.defineProperty, u = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var e = Object.getOwnPropertySymbols;
+var t = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var s = (r, d, i) => d in r ? p(r, d, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[d] = i, c = (r, d) => {
+  for (var i in d || (d = {}))
+    t.call(d, i) && s(r, i, d[i]);
+  if (e)
+    for (var i of e(d))
+      g.call(d, i) && s(r, i, d[i]);
+  return r;
+}, m = (r, d) => u(r, x(d));
+var n = (r, d) => {
+  var i = {};
+  for (var o in r)
+    t.call(r, o) && d.indexOf(o) < 0 && (i[o] = r[o]);
+  if (r != null && e)
+    for (var o of e(r))
+      d.indexOf(o) < 0 && g.call(r, o) && (i[o] = r[o]);
+  return i;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { getRadiusClass as v } from "../../tokens/radius.js";
+import { cn as C } from "../../utils/cn.js";
+const G = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function R(h) {
+  var l = h, {
+    layout: r = "grid",
+    cols: d = 4,
+    className: i,
+    children: o
+  } = l, a = n(l, [
+    "layout",
+    "cols",
+    "className",
+    "children"
+  ]);
+  const f = r === "grid";
+  return /* @__PURE__ */ b(
+    "div",
+    m(c({
+      className: C(
+        "bg-line-default border border-line-default overflow-hidden gap-px",
+        v("lg"),
+        f ? `grid grid-cols-2 ${G[d]}` : "flex",
+        i
+      )
+    }, a), {
+      children: o
+    })
+  );
+}
+export {
+  R as StatGroup
+};
+//# sourceMappingURL=StatGroup.js.map

package/dist/granular/ui/components/Stat/StatGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatGroup.js","sources":["../../../../../src/ui/components/Stat/StatGroup.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\nexport type StatGroupLayout = \"strip\" | \"grid\";\nexport type StatGroupCols = 2 | 3 | 4;\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `strip` — single horizontal row, no wrap. Each `Stat` shares the row\n   * width via `flex-1`. Use when you guarantee the horizontal space\n   * (hero areas, wide dashboards). On narrow viewports the row does NOT\n   * reflow — choose `grid` if you need responsive collapse.\n   *\n   * `grid` — multi-column grid that reflows. Always 2-up on mobile,\n   * expands to `cols` columns at the `md` breakpoint (768 px) and up.\n   * Five or more children spill to a second row with the divider lines\n   * preserved.\n   *\n   * @default 'grid'\n   */\n  layout?: StatGroupLayout;\n  /**\n   * Desktop column count (≥ 768 px). Only effective in `layout=\"grid\"`;\n   * ignored in `layout=\"strip\"`. Mobile is always 2 columns regardless.\n   *\n   * @default 4\n   */\n  cols?: StatGroupCols;\n  children: ReactNode;\n}\n\n// Tailwind v4 generates `md:grid-cols-N` for N ∈ {2,3,4} statically from\n// the literal class string. The map below ensures the strings exist\n// verbatim in the source so JIT picks them up.\nconst gridColsMd: Record<StatGroupCols, string> = {\n  2: \"md:grid-cols-2\",\n  3: \"md:grid-cols-3\",\n  4: \"md:grid-cols-4\",\n};\n\n/**\n * `StatGroup` — container for one or more `Stat` blocks with 1-px\n * dividers between them.\n *\n * ### Divider technique\n *\n * The container has `bg-line-default` and `gap-px` (1 px); each child\n * `Stat` carries its own `bg-surface-base`. The 1 px of gap exposes the\n * container's background as the divider line, while each cell masks its\n * own area with `bg-surface-base`. Works identically for the strip\n * layout (vertical dividers) and the grid layout (vertical AND\n * horizontal dividers, automatically, as the grid reflows). No separate\n * `Divider` component, no per-cell border logic.\n *\n * The outer ring is `border border-line-default` matching the gap color,\n * with `rounded-lg` and `overflow-hidden` clipping the inner cells to\n * the radius.\n *\n * ### Server-safe\n *\n * Pure presentation — no hooks, no event handlers on the DOM. Ships in\n * `./server` alongside `Stat`.\n *\n * @example\n * ```tsx\n * <StatGroup layout=\"strip\">\n *   <Stat icon={<Users />} value=\"9,4 mil\" label=\"Parlamentares\" align=\"center\" />\n *   <Stat icon={<FileText />} value=\"3,2 mil\" label=\"Proposições\" align=\"center\" />\n *   <Stat icon={<Vote />} value=\"1,1 mil\" label=\"Votações\" align=\"center\" />\n *   <Stat icon={<Clock />} value=\"há 18 dias\" label=\"Última atualização\" align=\"center\" />\n * </StatGroup>\n *\n * <StatGroup layout=\"grid\" cols={4}>\n *   <Stat value=\"87%\" label=\"Alinhamento\" hint=\"últimos 12 m\" tone=\"success\" />\n *   <Stat value={null} label=\"Sem orientação\" hint=\"no período\" />\n *   <Stat value=\"R$ 187.472,95\" label=\"Gastos\" hint=\"no mandato\" />\n *   <Stat value=\"42\" label=\"Votações\" hint=\"no banco\" />\n * </StatGroup>\n * ```\n */\nexport function StatGroup({\n  layout = \"grid\",\n  cols = 4,\n  className,\n  children,\n  ...props\n}: StatGroupProps) {\n  const isGrid = layout === \"grid\";\n\n  return (\n    <div\n      className={cn(\n        \"bg-line-default border border-line-default overflow-hidden gap-px\",\n        getRadiusClass(\"lg\"),\n        isGrid ? `grid grid-cols-2 ${gridColsMd[cols]}` : \"flex\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport default StatGroup;\n"],"names":["gridColsMd","StatGroup","_a","_b","layout","cols","className","children","props","__objRest","isGrid","jsx","__spreadProps","__spreadValues","cn","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,IAA4C;AAAA,EAChD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AA0CO,SAASC,EAAUC,GAMP;AANO,MAAAC,IAAAD,GACxB;AAAA,YAAAE,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,UAAAC;AAAA,MAJwBJ,GAKrBK,IAAAC,EALqBN,GAKrB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMO,IAASN,MAAW;AAE1B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAe,IAAI;AAAA,QACnBL,IAAS,oBAAoBV,EAAWK,CAAI,CAAC,KAAK;AAAA,QAClDC;AAAA,MAAA;AAAA,OAEEE,IAPL;AAAA,MASE,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}