@fairmint/ui 0.3.14 → 0.3.16

package/dist/components/generic/StatCard/StatCard.cjs

@@ -3,42 +3,124 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const index = require("../../../theme/index.cjs");
 const colors = require("../../../theme/colors.cjs");
+const ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
+const Avatar = require("../../primitives/Avatar/Avatar.cjs");
 const Card = require("../../primitives/Card/Card.cjs");
 const layout = require("../../primitives/layout.cjs");
+const Tooltip = require("../../primitives/Tooltip/Tooltip.cjs");
 const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
 const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+function DefaultInfoIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
 function StatCard({
   label,
   value,
   icon,
-  color = colors.colors.primary,
+  color = "neutral",
   trend,
+  change,
+  infoTooltip,
+  infoIcon,
+  onValueClick,
+  iconVariant = "plain",
   ...rest
 }) {
   const isNeutral = color === "neutral";
+  const accent = isNeutral ? colors.colors.primary : color;
+  const valueInteractive = Boolean(onValueClick);
+  const handleValueKeyDown = (event) => {
+    if (!onValueClick) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onValueClick();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card.Card,
     {
       bg: isNeutral ? index.fairmintVars.colorBgSurface : `${color}.0`,
       bd: isNeutral ? `1px solid ${index.fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`,
+      shadow: "none",
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Text.Text,
-            {
-              size: "xs",
-              fw: 600,
-              tt: "uppercase",
-              c: isNeutral ? index.fairmintVars.colorTextTertiary : `${color}.6`,
-              style: { letterSpacing: "0.05em" },
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { fw: 700, size: "xl", lh: 1, children: value }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                size: "xs",
+                fw: 600,
+                tt: "uppercase",
+                c: isNeutral ? index.fairmintVars.colorTextTertiary : `${color}.6`,
+                style: { letterSpacing: "0.05em" },
+                truncate: true,
+                children: label
+              }
+            ),
+            infoTooltip != null && infoTooltip !== "" && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: infoTooltip, withArrow: true, position: "top", multiline: true, maw: 280, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ActionIcon.ActionIcon,
+              {
+                size: "sm",
+                variant: "transparent",
+                color: colors.colors.neutral,
+                "aria-label": `${label} information`,
+                children: infoIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultInfoIcon, {})
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                component: "span",
+                fw: 700,
+                size: "xl",
+                lh: 1,
+                truncate: true,
+                role: valueInteractive ? "button" : void 0,
+                tabIndex: valueInteractive ? 0 : void 0,
+                onClick: onValueClick,
+                onKeyDown: handleValueKeyDown,
+                style: {
+                  cursor: valueInteractive ? "pointer" : void 0,
+                  outlineOffset: 2
+                },
+                children: value
+              }
+            ),
+            change
+          ] }),
           trend && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: index.fairmintVars.colorTextSecondary, children: trend })
         ] }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
+        icon && iconVariant === "filled" && /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { color: accent, radius: "md", size: 48, style: { flexShrink: 0 }, children: icon }),
+        icon && iconVariant === "plain" && /* @__PURE__ */ jsxRuntime.jsx(
+          layout.Box,
+          {
+            c: isNeutral ? index.fairmintVars.colorTextSecondary : `${color}.5`,
+            fz: "1.5rem",
+            style: { flexShrink: 0 },
+            children: icon
+          }
+        )
       ] })
     }
   );

package/dist/components/generic/StatCard/StatCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.cjs","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n  /** Card label (e.g., \"Total Value\"). */\n  label: string;\n  /** Formatted value string (e.g., \"$125,000\"). */\n  value: string;\n  /** Optional icon element. */\n  icon?: ReactNode;\n  /**\n   * Mantine color name for the gradient background.\n   * @default colors.primary\n   */\n  color?: string;\n  /** Optional trend or supporting text below the value. */\n  trend?: string;\n}\n\nexport function StatCard({\n  label,\n  value,\n  icon,\n  color = colors.primary,\n  trend,\n  ...rest\n}: StatCardProps) {\n  const isNeutral = color === \"neutral\";\n\n  return (\n    <Card\n      bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n      bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n      {...rest}\n    >\n      <Group justify=\"space-between\" align=\"flex-start\">\n        <Stack gap={4}>\n          <Text\n            size=\"xs\"\n            fw={600}\n            tt=\"uppercase\"\n            c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n            style={{ letterSpacing: \"0.05em\" }}\n          >\n            {label}\n          </Text>\n          <Text fw={700} size=\"xl\" lh={1}>\n            {value}\n          </Text>\n          {trend && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {trend}\n            </Text>\n          )}\n        </Stack>\n        {icon && (\n          <Box c={`${color}.5`} fz=\"1.5rem\">\n            {icon}\n          </Box>\n        )}\n      </Group>\n    </Card>\n  );\n}\n"],"names":["colors","jsx","Card","fairmintVars","jsxs","Group","Stack","Text","Box"],"mappings":";;;;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQA,OAAAA,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,UAAU;AAE5B,SACEC,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,IAAI,YAAYC,MAAAA,aAAa,iBAAiB,GAAG,KAAK;AAAA,MACtD,IAAI,YAAY,aAAaA,MAAAA,aAAa,kBAAkB,KAAK,aAAa,KAAK;AAAA,MAClF,GAAG;AAAA,MAEJ,UAAAC,2BAAAA,KAACC,MAAAA,OAAA,EAAM,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,QAAAD,2BAAAA,KAACE,OAAAA,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,UAAAL,2BAAAA;AAAAA,YAACM,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAG,YAAYJ,MAAAA,aAAa,oBAAoB,GAAG,KAAK;AAAA,cACxD,OAAO,EAAE,eAAe,SAAA;AAAA,cAEvB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEHF,2BAAAA,IAACM,KAAAA,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,UACC,wCACEA,WAAA,EAAK,MAAK,MAAK,GAAGJ,mBAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,uCACEK,YAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"StatCard.cjs","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\n/** Default info glyph — inline SVG so consumers need not import an icon library. */\nfunction DefaultInfoIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n  /** Card label (e.g., \"Amount Raised\"). */\n  label: string;\n  /** Formatted value string (e.g., \"$125,000\"). */\n  value: string;\n  /** Optional icon element. */\n  icon?: ReactNode;\n  /**\n   * Surface accent. Use `\"neutral\"` for the canonical bordered KPI tile\n   * (Studio / Investor metric rows). Pass a Mantine color name for a tinted tile.\n   * @default \"neutral\"\n   */\n  color?: string;\n  /** Optional trend or supporting text below the value. */\n  trend?: string;\n  /** Optional change indicator rendered beside the value (e.g. a Badge). */\n  change?: ReactNode;\n  /** Tooltip content for the info control next to the label. */\n  infoTooltip?: ReactNode;\n  /** Override the info control icon. Defaults to a built-in info glyph. */\n  infoIcon?: ReactNode;\n  /** Called when the value is activated. */\n  onValueClick?: () => void;\n  /**\n   * How the optional icon is rendered.\n   * - `\"plain\"` — icon tint only\n   * - `\"filled\"` — primary Avatar chip (Studio metric tiles)\n   * @default \"plain\"\n   */\n  iconVariant?: \"plain\" | \"filled\";\n}\n\n/**\n * Shared KPI / metric tile for Studio and Investor dashboards.\n *\n * Default surface is a white card with a light border (no elevation). Apps own\n * value formatting, icon choice, and change-badge content; StatCard owns the\n * layout and visual contract.\n */\nexport function StatCard({\n  label,\n  value,\n  icon,\n  color = \"neutral\",\n  trend,\n  change,\n  infoTooltip,\n  infoIcon,\n  onValueClick,\n  iconVariant = \"plain\",\n  ...rest\n}: StatCardProps) {\n  const isNeutral = color === \"neutral\";\n  const accent = isNeutral ? colors.primary : color;\n  const valueInteractive = Boolean(onValueClick);\n\n  const handleValueKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (!onValueClick) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onValueClick();\n    }\n  };\n\n  return (\n    <Card\n      bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n      bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n      shadow=\"none\"\n      {...rest}\n    >\n      <Group justify=\"space-between\" align=\"center\" wrap=\"nowrap\" gap=\"md\">\n        <Stack gap={4} style={{ minWidth: 0, flex: 1 }}>\n          <Group gap={4} align=\"center\" wrap=\"nowrap\">\n            <Text\n              size=\"xs\"\n              fw={600}\n              tt=\"uppercase\"\n              c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n              style={{ letterSpacing: \"0.05em\" }}\n              truncate\n            >\n              {label}\n            </Text>\n            {infoTooltip != null && infoTooltip !== \"\" && (\n              <Tooltip label={infoTooltip} withArrow position=\"top\" multiline maw={280}>\n                <ActionIcon\n                  size=\"sm\"\n                  variant=\"transparent\"\n                  color={colors.neutral}\n                  aria-label={`${label} information`}\n                >\n                  {infoIcon ?? <DefaultInfoIcon />}\n                </ActionIcon>\n              </Tooltip>\n            )}\n          </Group>\n          <Group gap=\"xs\" align=\"center\" wrap=\"nowrap\">\n            <Text\n              component=\"span\"\n              fw={700}\n              size=\"xl\"\n              lh={1}\n              truncate\n              role={valueInteractive ? \"button\" : undefined}\n              tabIndex={valueInteractive ? 0 : undefined}\n              onClick={onValueClick}\n              onKeyDown={handleValueKeyDown}\n              style={{\n                cursor: valueInteractive ? \"pointer\" : undefined,\n                outlineOffset: 2,\n              }}\n            >\n              {value}\n            </Text>\n            {change}\n          </Group>\n          {trend && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {trend}\n            </Text>\n          )}\n        </Stack>\n        {icon && iconVariant === \"filled\" && (\n          <Avatar color={accent} radius=\"md\" size={48} style={{ flexShrink: 0 }}>\n            {icon}\n          </Avatar>\n        )}\n        {icon && iconVariant === \"plain\" && (\n          <Box\n            c={isNeutral ? fairmintVars.colorTextSecondary : `${color}.5`}\n            fz=\"1.5rem\"\n            style={{ flexShrink: 0 }}\n          >\n            {icon}\n          </Box>\n        )}\n      </Group>\n    </Card>\n  );\n}\n"],"names":["jsxs","jsx","colors","Card","fairmintVars","Group","Stack","Text","Tooltip","ActionIcon","Avatar","Box"],"mappings":"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"}

package/dist/components/generic/StatCard/StatCard.d.ts

@@ -1,19 +1,42 @@
 import { ReactNode } from 'react';
 import { CardProps } from '../../primitives/Card/Card';
 export interface StatCardProps extends Omit<CardProps, "children"> {
-    /** Card label (e.g., "Total Value"). */
+    /** Card label (e.g., "Amount Raised"). */
     label: string;
     /** Formatted value string (e.g., "$125,000"). */
     value: string;
     /** Optional icon element. */
     icon?: ReactNode;
     /**
-     * Mantine color name for the gradient background.
-     * @default colors.primary
+     * Surface accent. Use `"neutral"` for the canonical bordered KPI tile
+     * (Studio / Investor metric rows). Pass a Mantine color name for a tinted tile.
+     * @default "neutral"
      */
     color?: string;
     /** Optional trend or supporting text below the value. */
     trend?: string;
+    /** Optional change indicator rendered beside the value (e.g. a Badge). */
+    change?: ReactNode;
+    /** Tooltip content for the info control next to the label. */
+    infoTooltip?: ReactNode;
+    /** Override the info control icon. Defaults to a built-in info glyph. */
+    infoIcon?: ReactNode;
+    /** Called when the value is activated. */
+    onValueClick?: () => void;
+    /**
+     * How the optional icon is rendered.
+     * - `"plain"` — icon tint only
+     * - `"filled"` — primary Avatar chip (Studio metric tiles)
+     * @default "plain"
+     */
+    iconVariant?: "plain" | "filled";
 }
-export declare function StatCard({ label, value, icon, color, trend, ...rest }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shared KPI / metric tile for Studio and Investor dashboards.
+ *
+ * Default surface is a white card with a light border (no elevation). Apps own
+ * value formatting, icon choice, and change-badge content; StatCard owns the
+ * layout and visual contract.
+ */
+export declare function StatCard({ label, value, icon, color, trend, change, infoTooltip, infoIcon, onValueClick, iconVariant, ...rest }: StatCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StatCard.d.ts.map

package/dist/components/generic/StatCard/StatCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAGlE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAsB,EACtB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAqCf"}
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAyBlE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAClC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,WAAqB,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,2CAyFf"}

package/dist/components/generic/StatCard/StatCard.js

@@ -1,42 +1,124 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { fairmintVars } from "../../../theme/index.js";
 import { colors } from "../../../theme/colors.js";
+import { ActionIcon } from "../../primitives/ActionIcon/ActionIcon.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
 import { Card } from "../../primitives/Card/Card.js";
 import { Stack, Box } from "../../primitives/layout.js";
+import { Tooltip } from "../../primitives/Tooltip/Tooltip.js";
 import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
 import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+function DefaultInfoIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
 function StatCard({
   label,
   value,
   icon,
-  color = colors.primary,
+  color = "neutral",
   trend,
+  change,
+  infoTooltip,
+  infoIcon,
+  onValueClick,
+  iconVariant = "plain",
   ...rest
 }) {
   const isNeutral = color === "neutral";
+  const accent = isNeutral ? colors.primary : color;
+  const valueInteractive = Boolean(onValueClick);
+  const handleValueKeyDown = (event) => {
+    if (!onValueClick) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onValueClick();
+    }
+  };
   return /* @__PURE__ */ jsx(
     Card,
     {
       bg: isNeutral ? fairmintVars.colorBgSurface : `${color}.0`,
       bd: isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`,
+      shadow: "none",
       ...rest,
-      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "xs",
-              fw: 600,
-              tt: "uppercase",
-              c: isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`,
-              style: { letterSpacing: "0.05em" },
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { fw: 700, size: "xl", lh: 1, children: value }),
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsxs(Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "xs",
+                fw: 600,
+                tt: "uppercase",
+                c: isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`,
+                style: { letterSpacing: "0.05em" },
+                truncate: true,
+                children: label
+              }
+            ),
+            infoTooltip != null && infoTooltip !== "" && /* @__PURE__ */ jsx(Tooltip, { label: infoTooltip, withArrow: true, position: "top", multiline: true, maw: 280, children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "sm",
+                variant: "transparent",
+                color: colors.neutral,
+                "aria-label": `${label} information`,
+                children: infoIcon ?? /* @__PURE__ */ jsx(DefaultInfoIcon, {})
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                component: "span",
+                fw: 700,
+                size: "xl",
+                lh: 1,
+                truncate: true,
+                role: valueInteractive ? "button" : void 0,
+                tabIndex: valueInteractive ? 0 : void 0,
+                onClick: onValueClick,
+                onKeyDown: handleValueKeyDown,
+                style: {
+                  cursor: valueInteractive ? "pointer" : void 0,
+                  outlineOffset: 2
+                },
+                children: value
+              }
+            ),
+            change
+          ] }),
           trend && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: trend })
         ] }),
-        icon && /* @__PURE__ */ jsx(Box, { c: `${color}.5`, fz: "1.5rem", children: icon })
+        icon && iconVariant === "filled" && /* @__PURE__ */ jsx(Avatar, { color: accent, radius: "md", size: 48, style: { flexShrink: 0 }, children: icon }),
+        icon && iconVariant === "plain" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            c: isNeutral ? fairmintVars.colorTextSecondary : `${color}.5`,
+            fz: "1.5rem",
+            style: { flexShrink: 0 },
+            children: icon
+          }
+        )
       ] })
     }
   );

package/dist/components/generic/StatCard/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n  /** Card label (e.g., \"Total Value\"). */\n  label: string;\n  /** Formatted value string (e.g., \"$125,000\"). */\n  value: string;\n  /** Optional icon element. */\n  icon?: ReactNode;\n  /**\n   * Mantine color name for the gradient background.\n   * @default colors.primary\n   */\n  color?: string;\n  /** Optional trend or supporting text below the value. */\n  trend?: string;\n}\n\nexport function StatCard({\n  label,\n  value,\n  icon,\n  color = colors.primary,\n  trend,\n  ...rest\n}: StatCardProps) {\n  const isNeutral = color === \"neutral\";\n\n  return (\n    <Card\n      bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n      bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n      {...rest}\n    >\n      <Group justify=\"space-between\" align=\"flex-start\">\n        <Stack gap={4}>\n          <Text\n            size=\"xs\"\n            fw={600}\n            tt=\"uppercase\"\n            c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n            style={{ letterSpacing: \"0.05em\" }}\n          >\n            {label}\n          </Text>\n          <Text fw={700} size=\"xl\" lh={1}>\n            {value}\n          </Text>\n          {trend && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {trend}\n            </Text>\n          )}\n        </Stack>\n        {icon && (\n          <Box c={`${color}.5`} fz=\"1.5rem\">\n            {icon}\n          </Box>\n        )}\n      </Group>\n    </Card>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,OAAO;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,UAAU;AAE5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,YAAY,aAAa,iBAAiB,GAAG,KAAK;AAAA,MACtD,IAAI,YAAY,aAAa,aAAa,kBAAkB,KAAK,aAAa,KAAK;AAAA,MAClF,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAM,SAAQ,iBAAgB,OAAM,cACnC,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAM,KAAK,GACV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAG,YAAY,aAAa,oBAAoB,GAAG,KAAK;AAAA,cACxD,OAAO,EAAE,eAAe,SAAA;AAAA,cAEvB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,QAAK,IAAI,KAAK,MAAK,MAAK,IAAI,GAC1B,UAAA,MAAA,CACH;AAAA,UACC,6BACE,MAAA,EAAK,MAAK,MAAK,GAAG,aAAa,oBAC7B,UAAA,MAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,4BACE,KAAA,EAAI,GAAG,GAAG,KAAK,MAAM,IAAG,UACtB,UAAA,KAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"StatCard.js","sources":["../../../../src/components/generic/StatCard/StatCard.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Avatar } from \"../../primitives/Avatar/Avatar\";\nimport { Card, type CardProps } from \"../../primitives/Card/Card\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { Tooltip } from \"../../primitives/Tooltip/Tooltip\";\n\n/** Default info glyph — inline SVG so consumers need not import an icon library. */\nfunction DefaultInfoIcon() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n}\n\nexport interface StatCardProps extends Omit<CardProps, \"children\"> {\n  /** Card label (e.g., \"Amount Raised\"). */\n  label: string;\n  /** Formatted value string (e.g., \"$125,000\"). */\n  value: string;\n  /** Optional icon element. */\n  icon?: ReactNode;\n  /**\n   * Surface accent. Use `\"neutral\"` for the canonical bordered KPI tile\n   * (Studio / Investor metric rows). Pass a Mantine color name for a tinted tile.\n   * @default \"neutral\"\n   */\n  color?: string;\n  /** Optional trend or supporting text below the value. */\n  trend?: string;\n  /** Optional change indicator rendered beside the value (e.g. a Badge). */\n  change?: ReactNode;\n  /** Tooltip content for the info control next to the label. */\n  infoTooltip?: ReactNode;\n  /** Override the info control icon. Defaults to a built-in info glyph. */\n  infoIcon?: ReactNode;\n  /** Called when the value is activated. */\n  onValueClick?: () => void;\n  /**\n   * How the optional icon is rendered.\n   * - `\"plain\"` — icon tint only\n   * - `\"filled\"` — primary Avatar chip (Studio metric tiles)\n   * @default \"plain\"\n   */\n  iconVariant?: \"plain\" | \"filled\";\n}\n\n/**\n * Shared KPI / metric tile for Studio and Investor dashboards.\n *\n * Default surface is a white card with a light border (no elevation). Apps own\n * value formatting, icon choice, and change-badge content; StatCard owns the\n * layout and visual contract.\n */\nexport function StatCard({\n  label,\n  value,\n  icon,\n  color = \"neutral\",\n  trend,\n  change,\n  infoTooltip,\n  infoIcon,\n  onValueClick,\n  iconVariant = \"plain\",\n  ...rest\n}: StatCardProps) {\n  const isNeutral = color === \"neutral\";\n  const accent = isNeutral ? colors.primary : color;\n  const valueInteractive = Boolean(onValueClick);\n\n  const handleValueKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n    if (!onValueClick) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onValueClick();\n    }\n  };\n\n  return (\n    <Card\n      bg={isNeutral ? fairmintVars.colorBgSurface : `${color}.0`}\n      bd={isNeutral ? `1px solid ${fairmintVars.colorBorderDefault}` : `1px solid ${color}.2`}\n      shadow=\"none\"\n      {...rest}\n    >\n      <Group justify=\"space-between\" align=\"center\" wrap=\"nowrap\" gap=\"md\">\n        <Stack gap={4} style={{ minWidth: 0, flex: 1 }}>\n          <Group gap={4} align=\"center\" wrap=\"nowrap\">\n            <Text\n              size=\"xs\"\n              fw={600}\n              tt=\"uppercase\"\n              c={isNeutral ? fairmintVars.colorTextTertiary : `${color}.6`}\n              style={{ letterSpacing: \"0.05em\" }}\n              truncate\n            >\n              {label}\n            </Text>\n            {infoTooltip != null && infoTooltip !== \"\" && (\n              <Tooltip label={infoTooltip} withArrow position=\"top\" multiline maw={280}>\n                <ActionIcon\n                  size=\"sm\"\n                  variant=\"transparent\"\n                  color={colors.neutral}\n                  aria-label={`${label} information`}\n                >\n                  {infoIcon ?? <DefaultInfoIcon />}\n                </ActionIcon>\n              </Tooltip>\n            )}\n          </Group>\n          <Group gap=\"xs\" align=\"center\" wrap=\"nowrap\">\n            <Text\n              component=\"span\"\n              fw={700}\n              size=\"xl\"\n              lh={1}\n              truncate\n              role={valueInteractive ? \"button\" : undefined}\n              tabIndex={valueInteractive ? 0 : undefined}\n              onClick={onValueClick}\n              onKeyDown={handleValueKeyDown}\n              style={{\n                cursor: valueInteractive ? \"pointer\" : undefined,\n                outlineOffset: 2,\n              }}\n            >\n              {value}\n            </Text>\n            {change}\n          </Group>\n          {trend && (\n            <Text size=\"xs\" c={fairmintVars.colorTextSecondary}>\n              {trend}\n            </Text>\n          )}\n        </Stack>\n        {icon && iconVariant === \"filled\" && (\n          <Avatar color={accent} radius=\"md\" size={48} style={{ flexShrink: 0 }}>\n            {icon}\n          </Avatar>\n        )}\n        {icon && iconVariant === \"plain\" && (\n          <Box\n            c={isNeutral ? fairmintVars.colorTextSecondary : `${color}.5`}\n            fz=\"1.5rem\"\n            style={{ flexShrink: 0 }}\n          >\n            {icon}\n          </Box>\n        )}\n      </Group>\n    </Card>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/layout/SideNav/SideNav.cjs

@@ -1,19 +1,38 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const index = require("../../../theme/index.cjs");
 const Stack = require("../../../node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
 const NavLink = require("../../../node_modules/@mantine/core/esm/components/NavLink/NavLink.cjs");
-function SideNav({ items, onItemClick, color = "indigo" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { component: "nav", gap: 4, p: "md", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+function hasActiveDescendant(item) {
+  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;
+}
+function SideNavNode({ color, item, onItemClick }) {
+  const containsActiveItem = hasActiveDescendant(item);
+  const [opened, setOpened] = React.useState(item.open ?? containsActiveItem);
+  React.useEffect(() => {
+    if (item.open !== void 0) {
+      setOpened(item.open);
+    } else if (containsActiveItem) {
+      setOpened(true);
+    }
+  }, [containsActiveItem, item.open]);
+  const hasChildren = Boolean(item.children?.length);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     NavLink.NavLink,
     {
       label: item.label,
       leftSection: item.icon,
+      rightSection: item.rightSection,
       active: item.active,
-      onClick: () => onItemClick(item.id),
+      disabled: item.disabled,
       color,
       variant: "light",
+      childrenOffset: 16,
+      opened: hasChildren ? opened : void 0,
+      onClick: hasChildren ? () => setOpened((currentOpened) => !currentOpened) : () => onItemClick(item.id),
       style: { borderRadius: index.radii.md },
       styles: {
         root: {
@@ -23,10 +42,39 @@ function SideNav({ items, onItemClick, color = "indigo" }) {
         section: {
           color: item.active ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorIconTertiary
         }
-      }
-    },
-    item.id
-  )) });
+      },
+      children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item: child, color, onItemClick }, child.id))
+    }
+  );
+}
+function SideNav({
+  items = [],
+  sections,
+  onItemClick,
+  color = "indigo",
+  ariaLabel = "Main navigation",
+  withBorder = false
+}) {
+  const resolvedSections = sections ?? [{ id: "main", items }];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Stack.Stack,
+    {
+      component: "nav",
+      gap: "md",
+      h: "100%",
+      p: "md",
+      "aria-label": ariaLabel,
+      style: {
+        borderRight: withBorder ? "1px solid" : void 0,
+        borderRightColor: withBorder ? index.fairmintVars.colorBorderDefault : void 0,
+        boxShadow: "none"
+      },
+      children: resolvedSections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { gap: 4, children: [
+        section.label && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", fw: 700, tt: "uppercase", c: index.fairmintVars.colorTextTertiary, px: "sm", children: section.label }),
+        section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SideNavNode, { item, color, onItemClick }, item.id))
+      ] }, section.id))
+    }
+  );
 }
 exports.SideNav = SideNav;
 //# sourceMappingURL=SideNav.cjs.map

package/dist/components/layout/SideNav/SideNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack } from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: string;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render. */\n  items: SideNavItem[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default \"indigo\" */\n  color?: string;\n}\n\nexport function SideNav({ items, onItemClick, color = \"indigo\" }: SideNavProps) {\n  return (\n    <Stack component=\"nav\" gap={4} p=\"md\" aria-label=\"Main navigation\">\n      {items.map((item) => (\n        <NavLink\n          key={item.id}\n          label={item.label}\n          leftSection={item.icon}\n          active={item.active}\n          onClick={() => onItemClick(item.id)}\n          color={color}\n          variant=\"light\"\n          style={{ borderRadius: radii.md }}\n          styles={{\n            root: {\n              color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n              fontWeight: item.active ? 500 : 400,\n            },\n            section: {\n              color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n            },\n          }}\n        />\n      ))}\n    </Stack>\n  );\n}\n"],"names":["jsx","Stack","NavLink","radii","fairmintVars"],"mappings":";;;;;;AAwBO,SAAS,QAAQ,EAAE,OAAO,aAAa,QAAQ,YAA0B;AAC9E,SACEA,2BAAAA,IAACC,MAAAA,OAAA,EAAM,WAAU,OAAM,KAAK,GAAG,GAAE,MAAK,cAAW,mBAC9C,UAAA,MAAM,IAAI,CAAC,SACVD,2BAAAA;AAAAA,IAACE,QAAAA;AAAAA,IAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK;AAAA,MACb,SAAS,MAAM,YAAY,KAAK,EAAE;AAAA,MAClC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO,EAAE,cAAcC,MAAAA,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAASC,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAASA,MAAAA,aAAa,oBAAoBA,MAAAA,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,IACF;AAAA,IAhBK,KAAK;AAAA,EAAA,CAkBb,GACH;AAEJ;;"}
+{"version":3,"file":"SideNav.cjs","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"sourcesContent":["import { NavLink, Stack, Text } from \"@mantine/core\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { fairmintVars, radii } from \"../../../theme\";\n\nexport interface SideNavItem {\n  /** Unique identifier for this nav item (e.g., route path or slug). */\n  id: string;\n  /** Display label. */\n  label: ReactNode;\n  /** Icon element. */\n  icon?: ReactNode;\n  /** Optional content rendered at the end of the item, such as a badge. */\n  rightSection?: ReactNode;\n  /** Whether this item is currently active. */\n  active?: boolean;\n  /** Whether the item is unavailable. */\n  disabled?: boolean;\n  /** Nested navigation items. */\n  children?: SideNavItem[];\n  /** Controlled expanded state for items with children. */\n  open?: boolean;\n}\n\nexport interface SideNavSection {\n  /** Unique identifier for the section. */\n  id: string;\n  /** Optional visible section heading. */\n  label?: ReactNode;\n  /** Navigation items in this section. */\n  items: SideNavItem[];\n}\n\nexport interface SideNavProps {\n  /** Navigation items to render when section headings are not needed. */\n  items?: SideNavItem[];\n  /** Grouped navigation items with optional section headings. */\n  sections?: SideNavSection[];\n  /** Callback when a nav item is clicked. Receives the item's `id`. */\n  onItemClick: (id: string) => void;\n  /** Active color. @default colors.primary */\n  color?: string;\n  /** Accessible label for the navigation landmark. @default \"Main navigation\" */\n  ariaLabel?: string;\n  /** Render a light right border when the parent shell does not already own the divider. @default false */\n  withBorder?: boolean;\n}\n\nfunction hasActiveDescendant(item: SideNavItem): boolean {\n  return item.children?.some((child) => child.active || hasActiveDescendant(child)) ?? false;\n}\n\ninterface SideNavNodeProps {\n  color: string;\n  item: SideNavItem;\n  onItemClick: (id: string) => void;\n}\n\nfunction SideNavNode({ color, item, onItemClick }: SideNavNodeProps) {\n  const containsActiveItem = hasActiveDescendant(item);\n  const [opened, setOpened] = useState(item.open ?? containsActiveItem);\n\n  useEffect(() => {\n    if (item.open !== undefined) {\n      setOpened(item.open);\n    } else if (containsActiveItem) {\n      setOpened(true);\n    }\n  }, [containsActiveItem, item.open]);\n\n  const hasChildren = Boolean(item.children?.length);\n\n  return (\n    <NavLink\n      label={item.label}\n      leftSection={item.icon}\n      rightSection={item.rightSection}\n      active={item.active}\n      disabled={item.disabled}\n      color={color}\n      variant=\"light\"\n      childrenOffset={16}\n      opened={hasChildren ? opened : undefined}\n      onClick={\n        hasChildren\n          ? () => setOpened((currentOpened) => !currentOpened)\n          : () => onItemClick(item.id)\n      }\n      style={{ borderRadius: radii.md }}\n      styles={{\n        root: {\n          color: item.active ? fairmintVars.colorTextPrimary : fairmintVars.colorTextSecondary,\n          fontWeight: item.active ? 500 : 400,\n        },\n        section: {\n          color: item.active ? fairmintVars.colorBrandPrimary : fairmintVars.colorIconTertiary,\n        },\n      }}\n    >\n      {item.children?.map((child) => (\n        <SideNavNode key={child.id} item={child} color={color} onItemClick={onItemClick} />\n      ))}\n    </NavLink>\n  );\n}\n\nexport function SideNav({\n  items = [],\n  sections,\n  onItemClick,\n  color = \"indigo\",\n  ariaLabel = \"Main navigation\",\n  withBorder = false,\n}: SideNavProps) {\n  const resolvedSections = sections ?? [{ id: \"main\", items }];\n\n  return (\n    <Stack\n      component=\"nav\"\n      gap=\"md\"\n      h=\"100%\"\n      p=\"md\"\n      aria-label={ariaLabel}\n      style={{\n        borderRight: withBorder ? \"1px solid\" : undefined,\n        borderRightColor: withBorder ? fairmintVars.colorBorderDefault : undefined,\n        boxShadow: \"none\",\n      }}\n    >\n      {resolvedSections.map((section) => (\n        <Stack key={section.id} gap={4}>\n          {section.label && (\n            <Text size=\"xs\" fw={700} tt=\"uppercase\" c={fairmintVars.colorTextTertiary} px=\"sm\">\n              {section.label}\n            </Text>\n          )}\n          {section.items.map((item) => (\n            <SideNavNode key={item.id} item={item} color={color} onItemClick={onItemClick} />\n          ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n"],"names":["useState","useEffect","jsx","NavLink","radii","fairmintVars","Stack","jsxs","Text"],"mappings":";;;;;;;;AA+CA,SAAS,oBAAoB,MAA4B;AACvD,SAAO,KAAK,UAAU,KAAK,CAAC,UAAU,MAAM,UAAU,oBAAoB,KAAK,CAAC,KAAK;AACvF;AAQA,SAAS,YAAY,EAAE,OAAO,MAAM,eAAiC;AACnE,QAAM,qBAAqB,oBAAoB,IAAI;AACnD,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,KAAK,QAAQ,kBAAkB;AAEpEC,QAAAA,UAAU,MAAM;AACd,QAAI,KAAK,SAAS,QAAW;AAC3B,gBAAU,KAAK,IAAI;AAAA,IACrB,WAAW,oBAAoB;AAC7B,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,oBAAoB,KAAK,IAAI,CAAC;AAElC,QAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;AAEjD,SACEC,2BAAAA;AAAAA,IAACC,QAAAA;AAAAA,IAAA;AAAA,MACC,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,cAAc,KAAK;AAAA,MACnB,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf;AAAA,MACA,SAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,QAAQ,cAAc,SAAS;AAAA,MAC/B,SACE,cACI,MAAM,UAAU,CAAC,kBAAkB,CAAC,aAAa,IACjD,MAAM,YAAY,KAAK,EAAE;AAAA,MAE/B,OAAO,EAAE,cAAcC,MAAAA,MAAM,GAAA;AAAA,MAC7B,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,OAAO,KAAK,SAASC,MAAAA,aAAa,mBAAmBA,MAAAA,aAAa;AAAA,UAClE,YAAY,KAAK,SAAS,MAAM;AAAA,QAAA;AAAA,QAElC,SAAS;AAAA,UACP,OAAO,KAAK,SAASA,MAAAA,aAAa,oBAAoBA,MAAAA,aAAa;AAAA,QAAA;AAAA,MACrE;AAAA,MAGD,UAAA,KAAK,UAAU,IAAI,CAAC,UACnBH,2BAAAA,IAAC,aAAA,EAA2B,MAAM,OAAO,OAAc,YAAA,GAArC,MAAM,EAAyD,CAClF;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,QAAQ;AAAA,EACtB,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AACf,GAAiB;AACf,QAAM,mBAAmB,YAAY,CAAC,EAAE,IAAI,QAAQ,OAAO;AAE3D,SACEA,2BAAAA;AAAAA,IAACI,MAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,GAAE;AAAA,MACF,GAAE;AAAA,MACF,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,aAAa,aAAa,cAAc;AAAA,QACxC,kBAAkB,aAAaD,mBAAa,qBAAqB;AAAA,QACjE,WAAW;AAAA,MAAA;AAAA,MAGZ,2BAAiB,IAAI,CAAC,YACrBE,gCAACD,MAAAA,OAAA,EAAuB,KAAK,GAC1B,UAAA;AAAA,QAAA,QAAQ,SACPJ,2BAAAA,IAACM,KAAAA,MAAA,EAAK,MAAK,MAAK,IAAI,KAAK,IAAG,aAAY,GAAGH,MAAAA,aAAa,mBAAmB,IAAG,MAC3E,kBAAQ,OACX;AAAA,QAED,QAAQ,MAAM,IAAI,CAAC,SAClBH,2BAAAA,IAAC,aAAA,EAA0B,MAAY,OAAc,eAAnC,KAAK,EAAwD,CAChF;AAAA,MAAA,EAAA,GARS,QAAQ,EASpB,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/layout/SideNav/SideNav.d.ts

@@ -3,19 +3,41 @@ export interface SideNavItem {
     /** Unique identifier for this nav item (e.g., route path or slug). */
     id: string;
     /** Display label. */
-    label: string;
+    label: ReactNode;
     /** Icon element. */
     icon?: ReactNode;
+    /** Optional content rendered at the end of the item, such as a badge. */
+    rightSection?: ReactNode;
     /** Whether this item is currently active. */
     active?: boolean;
+    /** Whether the item is unavailable. */
+    disabled?: boolean;
+    /** Nested navigation items. */
+    children?: SideNavItem[];
+    /** Controlled expanded state for items with children. */
+    open?: boolean;
 }
-export interface SideNavProps {
-    /** Navigation items to render. */
+export interface SideNavSection {
+    /** Unique identifier for the section. */
+    id: string;
+    /** Optional visible section heading. */
+    label?: ReactNode;
+    /** Navigation items in this section. */
     items: SideNavItem[];
+}
+export interface SideNavProps {
+    /** Navigation items to render when section headings are not needed. */
+    items?: SideNavItem[];
+    /** Grouped navigation items with optional section headings. */
+    sections?: SideNavSection[];
     /** Callback when a nav item is clicked. Receives the item's `id`. */
     onItemClick: (id: string) => void;
-    /** Active color. @default "indigo" */
+    /** Active color. @default colors.primary */
     color?: string;
+    /** Accessible label for the navigation landmark. @default "Main navigation" */
+    ariaLabel?: string;
+    /** Render a light right border when the parent shell does not already own the divider. @default false */
+    withBorder?: boolean;
 }
-export declare function SideNav({ items, onItemClick, color }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function SideNav({ items, sections, onItemClick, color, ariaLabel, withBorder, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SideNav.d.ts.map

package/dist/components/layout/SideNav/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAgB,EAAE,EAAE,YAAY,2CA0B7E"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/SideNav/SideNav.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qEAAqE;IACrE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4DD,wBAAgB,OAAO,CAAC,EACtB,KAAU,EACV,QAAQ,EACR,WAAW,EACX,KAAgB,EAChB,SAA6B,EAC7B,UAAkB,GACnB,EAAE,YAAY,2CA8Bd"}