jfs-components 0.0.71 → 0.0.73

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MediaSource = _interopRequireDefault(require("../../utils/MediaSource"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Default avatar asset (shared with the Avatar component) so that
+// InstitutionBadge has a sensible visual fallback when no `source` is
+// provided in stories or playgrounds.
+const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveInstitutionBadgeTokens(modes) {
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/gap', modes), 8);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/foreground', modes) || '#080d1a';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontSize', modes), 14);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/lineHeight', modes), 18);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('institutionBadge/fontWeight', modes), '500');
+
+  // Avatar wrapper styled from shared `avatar/*` tokens so the badge stays
+  // visually consistent with other Avatar-bearing components.
+  const avatarSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes), 36);
+  const avatarRadiusRaw = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes), 9999);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
+  const avatarBorderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes), 1);
+  return {
+    containerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      borderWidth: avatarBorderSize,
+      borderColor: avatarBorderColor,
+      overflow: 'hidden'
+    },
+    avatarSize,
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// Default Avatar Size = M (36px in tokens) — matches the Figma badge. Callers
+// can override via `modes` if needed.
+const DEFAULT_AVATAR_MODE = 'M';
+function InstitutionBadge({
+  label = 'State Bank of India',
+  source,
+  avatarSlot,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = (0, _react.useMemo)(() => ({
+    'Avatar Size': DEFAULT_AVATAR_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = (0, _react.useMemo)(() => resolveInstitutionBadgeTokens(avatarModes), [avatarModes]);
+  const processedAvatarSlot = (0, _react.useMemo)(() => {
+    if (!avatarSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(avatarSlot), avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const resolvedSource = source ?? DEFAULT_AVATAR_IMAGE;
+  const defaultAccessibilityLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [processedAvatarSlot || /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.avatarStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaSource.default, {
+        source: resolvedSource,
+        size: tokens.avatarSize,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(InstitutionBadge);

package/lib/commonjs/components/LinearMeter/LinearMeter.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _LinearProgress = _interopRequireDefault(require("../LinearProgress/LinearProgress"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LinearMeterLabel = ({
@@ -46,14 +47,6 @@ const LinearMeter = ({
   ...rest
 }) => {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/gap', modes);
-  // Track tokens
-  const trackBg = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/background', modes);
-  const trackHeight = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/height', modes);
-  const trackRadius = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/radius', modes);
-
-  // Indicator tokens
-  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/indicator/background', modes);
-  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/indicator/radius', modes);
 
   // Wrap tokens
   const wrapGap = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/wrap/gap', modes);
@@ -91,10 +84,6 @@ const LinearMeter = ({
     })]
   });
   const content = children ? childrenWithModes : defaultContent;
-
-  // Calculate width percentage
-  const clampedValue = Math.min(Math.max(value, 0), 1);
-  const widthPercent = `${clampedValue * 100}%`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
       flexDirection: 'row',
@@ -102,22 +91,14 @@ const LinearMeter = ({
       gap
     }, style],
     ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        flex: 1,
-        height: trackHeight,
-        backgroundColor: trackBg,
-        borderRadius: trackRadius,
-        overflow: 'hidden' // Ensure indicator stays inside
-      }, trackStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [{
-          width: widthPercent,
-          height: '100%',
-          backgroundColor: indicatorBg,
-          borderRadius: indicatorRadius
-        }, indicatorStyle]
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
+      value: value,
+      modes: modes,
+      style: {
+        flex: 1
+      },
+      trackStyle: trackStyle,
+      indicatorStyle: indicatorStyle
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',

package/lib/commonjs/components/LinearProgress/LinearProgress.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LinearProgress = ({
+  value = 0,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  trackStyle,
+  indicatorStyle,
+  ...rest
+}) => {
+  // The track and the progress indicator are intentionally rendered at
+  // different emphasis levels by default: the track sits in the
+  // background as a low-emphasis surface, while the progress indicator
+  // is the high-emphasis foreground. Defaults are placed *before* the
+  // user-provided modes spread, so callers can still override
+  // `Emphasis / DataViz` (or any other mode) via the `modes` prop.
+  const trackModes = {
+    'Emphasis': 'Low',
+    ...modes
+  };
+  const progressModes = {
+    'Emphasis': 'High',
+    ...modes
+  };
+  const trackHeight = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/track/height', trackModes) ?? 8;
+  const trackRadius = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/track/radius', trackModes) ?? 999;
+  const trackBg = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/track/background', trackModes) ?? '#ede7ff';
+  const indicatorHeight = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/indicator/height', progressModes) ?? 8;
+  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/indicator/radius', progressModes) ?? 999;
+  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('linearProgress/indicator/background', progressModes) ?? '#5d00b5';
+  const clampedValue = Math.min(Math.max(value, 0), 1);
+  const widthPercent = `${clampedValue * 100}%`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      height: trackHeight,
+      backgroundColor: trackBg,
+      borderRadius: trackRadius,
+      overflow: 'hidden',
+      width: '100%'
+    }, style, trackStyle],
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: 1,
+      now: clampedValue
+    },
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        width: widthPercent,
+        height: indicatorHeight,
+        backgroundColor: indicatorBg,
+        borderRadius: indicatorRadius
+      }, indicatorStyle]
+    })
+  });
+};
+var _default = exports.default = LinearProgress;

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * MetricLegendItem renders a horizontal row consisting of a small colored
+ * indicator dot, a label and an optional value. It is used in chart legends
+ * and similar metric callouts.
+ *
+ * @component
+ * @param {MetricLegendItemProps} props
+ */
+function MetricLegendItem({
+  label = 'Current (4 months)',
+  value,
+  indicatorColor,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  indicatorStyle,
+  labelStyle,
+  valueStyle
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/gap', modes) ?? 4;
+  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/textWrap/gap', modes) ?? 4;
+  const indicatorSize = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/indicator/size', modes) ?? 8;
+  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/indicator/radius', modes) ?? 999;
+  const indicatorBg = indicatorColor ?? (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/indicator/bg', modes) ?? '#f7ab21';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/label/color', modes) ?? '#000000';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/label/fontSize', modes) ?? 12;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/label/lineHeight', modes) ?? 16;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/value/color', modes) ?? '#000000';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/value/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/value/fontSize', modes) ?? 12;
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/value/lineHeight', modes) ?? 16;
+  const valueFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/value/fontWeight', modes) ?? 500;
+  const valueFontWeight = String(valueFontWeightRaw);
+  const showValue = value !== undefined && value !== null && value !== false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap
+    }, style],
+    accessibilityRole: "text",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: indicatorRadius,
+        backgroundColor: indicatorBg
+      }, indicatorStyle]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: textWrapGap,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          flex: 1,
+          color: labelColor,
+          fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
+          lineHeight: labelLineHeight,
+          fontWeight: labelFontWeight
+        }, labelStyle],
+        children: label
+      }), showValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: valueColor,
+          fontFamily: valueFontFamily,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          fontWeight: valueFontWeight
+        }, valueStyle],
+        numberOfLines: 1,
+        children: value
+      })]
+    })]
+  });
+}
+var _default = exports.default = MetricLegendItem;

package/lib/commonjs/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarGlyph = CalendarGlyph;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * The three semantic states a calendar glyph can be in. Maps 1:1 to the
+ * Figma `Calendar Glyph State` collection modes (`Idle`, `notSaved`,
+ * `saved`) and drives both the glyph fill/foreground tokens and the
+ * matching legend dot.
+ */
+
+/** One month entry in the grid. */
+
+const DEFAULT_MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const DEFAULT_LEGEND_LABELS = Object.freeze({
+  Idle: 'No data',
+  notSaved: 'Not saved',
+  saved: 'Saved'
+});
+const DEFAULT_LEGEND_STATUSES = ['Idle', 'notSaved', 'saved'];
+const DEFAULT_MONTHS = DEFAULT_MONTH_LABELS.map(label => ({
+  label,
+  status: 'Idle'
+}));
+
+/**
+ * Default tokens used as the safe fallbacks when token resolution returns
+ * `null` (e.g. modes are missing or the resolver hasn't been initialized).
+ * They mirror the Figma source values for the `Calendar Glyph State` modes.
+ */
+const FALLBACK_BG = {
+  Idle: '#e0e0e3',
+  notSaved: '#b84fbd',
+  saved: '#5d00b5'
+};
+const FALLBACK_FG = {
+  Idle: '#000000',
+  notSaved: '#ffffff',
+  saved: '#ffffff'
+};
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+/**
+ * Single calendar-month glyph: a small pill with a status-driven background
+ * and foreground, and a centered month label. Exposed for callers who want
+ * to compose glyphs themselves; most consumers should use
+ * {@link MonthlyStatusGrid} instead, which keeps the count, layout and
+ * legend in sync automatically.
+ */
+function CalendarGlyph({
+  label = 'Jan',
+  status = 'Idle',
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = _react.default.useMemo(() => ({
+    ...globalModes,
+    ...propModes,
+    'Calendar Glyph State': status
+  }), [globalModes, propModes, status]);
+  const width = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/width', modes), 46);
+  const height = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/height', modes), 46);
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/radius', modes), 29);
+  const paddingTop = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/padding/top', modes), 16);
+  const paddingBottom = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/padding/bottom', modes), 16);
+  const paddingLeft = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/padding/left', modes), 13);
+  const paddingRight = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/padding/right', modes), 12);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/gap', modes), 0);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/background', modes) ?? FALLBACK_BG[status];
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/foreground', modes) ?? FALLBACK_FG[status];
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/fontSize', modes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/lineHeight', modes), 14);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/fontWeight', modes), '500');
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${typeof label === 'string' ? label : 'Month'}, ${DEFAULT_LEGEND_LABELS[status].toLowerCase()}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [{
+      // Use min* so the pill is always at least the Figma size, but
+      // grows naturally when the label is wider (e.g. localized
+      // months). Avoids the ellipsis-truncation that happens when a
+      // 3-letter label barely overflows the strict inner width.
+      minWidth: width,
+      minHeight: height,
+      borderRadius: radius,
+      backgroundColor: background,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: [{
+        color: foreground,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        textAlign: 'center'
+      }, labelStyle],
+      children: label
+    })
+  });
+}
+
+/**
+ * Resolve the canonical color pair for a status. Used by both the glyph and
+ * the matching legend item so they can never visually drift apart.
+ */
+function resolveStatusColors(status, modes) {
+  const statusModes = {
+    ...modes,
+    'Calendar Glyph State': status
+  };
+  const bg = (0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/background', statusModes) ?? FALLBACK_BG[status];
+  const fg = (0, _figmaVariablesResolver.getVariableByName)('calendarGlyph/foreground', statusModes) ?? FALLBACK_FG[status];
+  return {
+    bg,
+    fg,
+    statusModes
+  };
+}
+
+/**
+ * `MonthlyStatusGrid` shows a year (or any contiguous range of months) as a
+ * grid of small pill-shaped calendar glyphs, each colored by its semantic
+ * status (`Idle` = "No data", `notSaved` = "Not saved", `saved` = "Saved").
+ * A legend below the grid explains the colors.
+ *
+ * Cohesiveness guarantees:
+ * - The number of glyphs is **always** `months.length`. There is no way to
+ *   render a glyph that has no underlying status.
+ * - The legend dot color for a status is resolved through the **same**
+ *   `calendarGlyph/background` token + `Calendar Glyph State` mode as the
+ *   glyph itself, so the visual mapping cannot drift.
+ *
+ * The chart is rendered with plain RN primitives (`View` + `Text`); SVG is
+ * unnecessary here because the glyph shape is a simple rounded rectangle.
+ *
+ * @component
+ */
+function MonthlyStatusGrid({
+  months = DEFAULT_MONTHS,
+  columns = 4,
+  legend,
+  legendStatuses = DEFAULT_LEGEND_STATUSES,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  monthsStyle,
+  rowStyle,
+  glyphStyle,
+  labelStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = _react.default.useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gridGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('monthlyStatusGrid/gap', modes), 16);
+  const rowGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('monthlyStatusGrid/months/gap', modes), 12);
+  const safeColumns = Math.max(1, Math.floor(columns));
+
+  // Group months into rows of `safeColumns`. Render-time only; cheap.
+  const rows = _react.default.useMemo(() => {
+    const out = [];
+    for (let i = 0; i < months.length; i += safeColumns) {
+      out.push(months.slice(i, i + safeColumns));
+    }
+    return out;
+  }, [months, safeColumns]);
+  const showLegend = legend !== false;
+  const legendOverrides = legend && typeof legend === 'object' ? legend : {};
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Monthly status grid: ${months.length} month${months.length === 1 ? '' : 's'}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [{
+      width: '100%',
+      gap: gridGap,
+      alignItems: 'stretch',
+      justifyContent: 'center'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        width: '100%',
+        gap: rowGap,
+        alignItems: 'stretch'
+      }, monthsStyle],
+      children: rows.map((row, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          width: '100%'
+        }, rowStyle],
+        children: row.map((month, colIndex) => {
+          const absoluteIndex = rowIndex * safeColumns + colIndex;
+          const fallbackLabel = DEFAULT_MONTH_LABELS[absoluteIndex % DEFAULT_MONTH_LABELS.length];
+          const label = month.label ?? fallbackLabel;
+          const glyphModes = month.modes ? {
+            ...modes,
+            ...month.modes
+          } : modes;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarGlyph, {
+            label: label,
+            status: month.status,
+            modes: glyphModes,
+            ...(glyphStyle !== undefined ? {
+              style: glyphStyle
+            } : {}),
+            ...(labelStyle !== undefined ? {
+              labelStyle
+            } : {}),
+            ...(month.accessibilityLabel !== undefined ? {
+              accessibilityLabel: month.accessibilityLabel
+            } : {})
+          }, month.key ?? `glyph-${absoluteIndex}`);
+        })
+      }, `row-${rowIndex}`))
+    }), showLegend ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      }, legendStyle],
+      children: legendStatuses.map(status => {
+        const {
+          bg,
+          statusModes
+        } = resolveStatusColors(status, modes);
+        const label = legendOverrides[status] ?? DEFAULT_LEGEND_LABELS[status];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+          label: label,
+          indicatorColor: bg,
+          modes: statusModes,
+          style: {
+            flex: 1,
+            minWidth: 0
+          }
+        }, `legend-${status}`);
+      })
+    }) : null]
+  });
+}
+var _default = exports.default = MonthlyStatusGrid;