jfs-components 0.1.23 → 0.1.28

package/lib/commonjs/components/MetricData/MetricData.js

@@ -0,0 +1,132 @@
+"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 _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LINE_HEIGHT_RATIO = 1.2;
+const ICON_SIZE = 18;
+// Figma renders the value-row icon with no surrounding padding; the shared Icon
+// component pulls padding from `icon/padding/*` tokens, so we zero it here.
+const ICON_PADDING_RESET = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0
+};
+/**
+ * MetricData — a compact, centered metric block.
+ *
+ * Stacks a small `title`, a prominent `value` (with an optional leading
+ * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
+ * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
+ * are optional; only `value` is shown by default.
+ *
+ * @example
+ * ```tsx
+ * <MetricData title="Balance" value="₹1,20,000" caption="as of today" />
+ * <MetricData title="Cards" value="12" icon="ic_card" caption="active" />
+ * ```
+ */
+function MetricData({
+  title,
+  value,
+  caption,
+  icon,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontsize', modes) ?? 12;
+  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes) ?? 400);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontfamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontsize', modes) ?? 20;
+  const valueFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontweight', modes) ?? 700);
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontfamily', modes) ?? 'JioType Var';
+  const captionFontSize = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontsize', modes) ?? 12;
+  const captionFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes) ?? 500);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes) ?? 4;
+  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes) ?? 10;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes) ?? 10;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const captionTextStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    iconName: icon,
+    size: ICON_SIZE,
+    color: valueColor,
+    modes: modes,
+    style: ICON_PADDING_RESET
+  }) : icon;
+  const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption].filter(Boolean).join(', ') || undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessible: true,
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    children: [title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [titleTextStyle, titleStyle],
+      children: title
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: valueWrapGap
+      },
+      children: [iconNode, typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [valueTextStyle, valueStyle],
+        children: value
+      }) : value]
+    }), caption !== undefined && caption !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [captionTextStyle, captionStyle],
+      children: caption
+    }) : null]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(MetricData);

package/lib/commonjs/components/NumberPagination/NumberPagination.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NumberPagination;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
+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); }
+function resolveNumberPaginationTokens(modes) {
+  const horizontalPadding = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/padding/horizontal', modes) ?? 4;
+  const verticalPadding = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/padding/vertical', modes) ?? 4;
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/radius', modes) ?? 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/background/color', modes) ?? 'rgba(141, 141, 141, 0.4)';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/border/color', modes) ?? 'rgba(255, 255, 255, 0.15)';
+
+  // control number variables
+  const itemWidth = (0, _figmaVariablesResolver.getVariableByName)('controlNumber/width', modes) ?? 32;
+  const itemHeight = (0, _figmaVariablesResolver.getVariableByName)('controlNumber/height', modes) ?? 32;
+  const itemRadiusRaw = (0, _figmaVariablesResolver.getVariableByName)('controlNumber/radius', modes) ?? 9999;
+  const activeBgColor = (0, _figmaVariablesResolver.getVariableByName)('control/active/background/color', modes) ?? '#ffffff';
+  const activeTextColor = (0, _figmaVariablesResolver.getVariableByName)('control/active/text/color', modes) ?? '#000000';
+  const inactiveTextColor = (0, _figmaVariablesResolver.getVariableByName)('control/text/default', modes) ?? '#ffffff';
+
+  // typography variables
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/fontFamily', modes) ?? 'JioType';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/fontSize', modes) ?? 16;
+  const fontWeight = String((0, _figmaVariablesResolver.getVariableByName)('numberPagination/fontWeight', modes) ?? '500');
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('numberPagination/lineHeight', modes) ?? 18;
+  const blurMinimal = (0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes) ?? 29;
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(blurMinimal))));
+  const borderRadius = radiusRaw === 9999 ? 39 / 2 : radiusRaw;
+  const itemRadius = itemRadiusRaw === 9999 ? itemWidth / 2 : itemRadiusRaw;
+  return {
+    containerStyle: {
+      height: 39,
+      borderRadius,
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: horizontalPadding,
+      paddingVertical: verticalPadding
+    },
+    activeItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: activeBgColor,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    inactiveItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    activeTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: activeTextColor,
+      textAlign: 'center'
+    },
+    inactiveTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: inactiveTextColor,
+      textAlign: 'center'
+    },
+    blurIntensity,
+    backgroundColor
+  };
+}
+
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+function NumberPagination({
+  activePage = 1,
+  totalPages = 1,
+  onPageChange,
+  children,
+  modes,
+  style
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveNumberPaginationTokens(modes ?? {}), [modes]);
+  const renderPages = () => {
+    if (children) {
+      return children;
+    }
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) {
+      const active = i === activePage;
+      pages.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => onPageChange?.(i),
+        style: ({
+          pressed
+        }) => [active ? tokens.activeItemStyle : tokens.inactiveItemStyle, pressed && {
+          opacity: 0.7
+        }],
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: `Page ${i}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: active ? tokens.activeTextStyle : tokens.inactiveTextStyle,
+          children: i
+        })
+      }, i));
+    }
+    return pages;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [tokens.containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: tokens.backgroundColor,
+      androidTintWash: false
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: '100%'
+      },
+      children: renderPages()
+    })]
+  });
+}

package/lib/commonjs/components/ProfileCard/ProfileCard.js

@@ -0,0 +1,208 @@
+"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 _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _Attached = _interopRequireDefault(require("../Attached/Attached"));
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
+var _UpiHandle = _interopRequireDefault(require("../UpiHandle/UpiHandle"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+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); }
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+
+// Forced modes for everything rendered inside the card — the profile card is
+// an on-dark (jioPlus) surface, so child components (Avatar, UpiHandle,
+// ListItem, Divider, Text, Button, …) must resolve their tokens through the
+// `context 10: jioPlus` mode. Consumer modes are spread first so appearance
+// modes (e.g. `Profile Card Appearance: Premium`) still cascade through.
+const CARD_CONTEXT = Object.freeze({
+  'context 10': 'jioPlus'
+});
+const DEFAULT_UPI_HANDLES = [{
+  label: 'username@jio',
+  iconName: 'ic_copy'
+}, {
+  label: '9999999999',
+  iconName: 'ic_confirm'
+}];
+function resolveProfileCardTokens(modes) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('profileCard/bg', modes) ?? '#00065a';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('profileCard/gap', modes) ?? 12;
+  const borderRadius = (0, _figmaVariablesResolver.getVariableByName)('profileCard/radius', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('profileCard/padding/horizontal', modes) ?? 20;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('profileCard/padding/vertical', modes) ?? 20;
+  const childModes = {
+    ...modes,
+    ...CARD_CONTEXT
+  };
+
+  // The UPI handle pills sit in the header ListItem's support slot, whose row
+  // gap is the `slot/gap` token in the ListItem context.
+  const handlesGap = (0, _figmaVariablesResolver.getVariableByName)('slot/gap', {
+    ...childModes,
+    Context: 'ListItem'
+  }) ?? 2;
+
+  // The avatar badge is a white circle: the fill comes from the Attached
+  // slot's background token (the IconCapsule itself resolves transparent).
+  const badgeBackground = (0, _figmaVariablesResolver.getVariableByName)('attached/slot/background', childModes) ?? '#ffffff';
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderRadius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    },
+    handlesRowStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: handlesGap
+    },
+    badgeBackground,
+    childModes,
+    // XS capsule per the Figma spec; consumers can still override the size
+    // through their own modes.
+    badgeModes: {
+      'Icon Capsule Size': 'XS',
+      ...modes,
+      ...CARD_CONTEXT
+    }
+  };
+}
+
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+function ProfileCard({
+  name = 'Name',
+  monogram = 'MS',
+  avatarSource,
+  badgeIcon = 'ic_qr_code',
+  upiHandles = DEFAULT_UPI_HANDLES,
+  header,
+  children,
+  showDivider = true,
+  width = 344,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  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 tokens = (0, _react.useMemo)(() => resolveProfileCardTokens(modes), [modes]);
+
+  // ---- Header -------------------------------------------------------------
+  const headerNode = (0, _react.useMemo)(() => {
+    if (header) return (0, _reactUtils.cloneChildrenWithModes)(header, tokens.childModes);
+    const avatar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Attached.default, {
+      position: "bottom-right",
+      modes: tokens.childModes,
+      badge: badgeIcon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: badgeIcon,
+        modes: tokens.badgeModes,
+        style: {
+          backgroundColor: tokens.badgeBackground
+        }
+      }) : null,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        monogram: monogram,
+        style: avatarSource ? 'Image' : 'Monogram',
+        ...(avatarSource != null ? {
+          imageSource: avatarSource
+        } : {}),
+        modes: tokens.childModes
+      })
+    });
+    const handles = upiHandles.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.handlesRowStyle,
+      children: upiHandles.map((handle, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_UpiHandle.default, {
+        label: handle.label,
+        ...(handle.iconName != null ? {
+          iconName: handle.iconName
+        } : {}),
+        showIcon: handle.showIcon ?? true,
+        ...(handle.onPress != null ? {
+          onPress: handle.onPress
+        } : {}),
+        modes: tokens.childModes
+      }, `${handle.label}-${index}`))
+    }) : null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
+      layout: "Horizontal",
+      title: name,
+      navArrow: false,
+      showSupportText: handles != null,
+      supportSlot: handles,
+      leading: avatar,
+      modes: tokens.childModes
+    });
+  }, [header, name, monogram, avatarSource, badgeIcon, upiHandles, tokens]);
+
+  // ---- Body slot ----------------------------------------------------------
+  const bodyChildren = (0, _react.useMemo)(() => children != null ? (0, _reactUtils.cloneChildrenWithModes)(children, tokens.childModes) : null, [children, tokens.childModes]);
+  const hasBody = bodyChildren != null && bodyChildren.length > 0;
+  const containerStyle = (0, _react.useMemo)(() => ({
+    ...tokens.containerStyle,
+    width
+  }), [tokens.containerStyle, width]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: [headerNode, hasBody && showDivider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      direction: "horizontal",
+      modes: tokens.childModes
+    }) : null, bodyChildren]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ProfileCard);

package/lib/commonjs/components/Rating/Rating.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * Star glyph taken directly from the Figma `Rating` component. Filled and empty
+ * stars share this shape and differ only by fill color, so a single path keeps
+ * the row perfectly aligned.
+ */
+const STAR_PATH = 'M40.7187 15.3334C40.4728 14.6159 40.0426 13.9805 39.4688 13.4885C38.8951 12.9965 38.1985 12.689 37.4403 12.566L28.3018 11.1721L24.2038 2.35741C23.8759 1.66044 23.3432 1.06596 22.6875 0.635476C22.0318 0.225491 21.2737 0 20.4951 0C19.7165 0 18.9583 0.225491 18.3027 0.635476C17.647 1.04546 17.1142 1.63994 16.7864 2.35741L12.6884 11.1721L3.4679 12.566C2.73026 12.689 2.01311 12.9965 1.43939 13.4885C0.865675 13.9805 0.435385 14.6159 0.189505 15.3334C-0.0358854 16.0304 -0.0563753 16.7889 0.107545 17.5063C0.271465 18.2238 0.640285 18.9003 1.15254 19.4333L7.89374 26.362L6.29552 36.1811C6.17258 36.9396 6.27503 37.7186 6.56189 38.4156C6.84875 39.1125 7.34051 39.7275 7.9757 40.1785C8.65187 40.691 9.49196 40.978 10.3525 40.9985C11.0697 40.9985 11.7664 40.8345 12.4015 40.486L20.5771 35.9761L28.7526 40.486C29.3673 40.8345 30.0844 41.019 30.8016 40.9985C31.6621 40.9985 32.4817 40.732 33.1784 40.24C33.7931 39.789 34.2849 39.1945 34.5922 38.4771C34.8791 37.7801 34.9815 37.0011 34.8586 36.2426L33.2604 26.4235L40.0016 19.4948C40.4933 18.9413 40.8007 18.2443 40.9441 17.5063C41.0671 16.7684 40.9851 16.0099 40.7187 15.3334Z';
+const STAR_VIEWBOX = '0 0 41 41';
+
+// Fallbacks mirror the Figma `Rating Star / Output` + `Rating Star State` tokens.
+const DEFAULT_STAR_SIZE = 41;
+const DEFAULT_GAP = 12;
+const SELECTED_FALLBACK = '#5D00B5';
+const IDLE_FALLBACK = '#F6F3FF';
+
+/**
+ * `ratingStar/background` is state-driven: the same token resolves to the filled
+ * color when `Rating Star State = selected` and to the empty color when `idle`.
+ */
+const RATING_STATE_COLLECTION = 'Rating Star State';
+const toNumber = (value, fallback) => {
+  const n = typeof value === 'string' ? Number(value) : value;
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback;
+};
+function Star({
+  width,
+  height,
+  color
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+    width: width,
+    height: height,
+    viewBox: STAR_VIEWBOX,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: STAR_PATH,
+      fill: color
+    })
+  });
+}
+function Rating({
+  value = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  starSize,
+  gap,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  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 {
+    selectedColor,
+    idleColor,
+    starWidth,
+    starHeight,
+    resolvedGap
+  } = (0, _react.useMemo)(() => {
+    const selected = (0, _figmaVariablesResolver.getVariableByName)('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'selected'
+    });
+    const idle = (0, _figmaVariablesResolver.getVariableByName)('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'idle'
+    });
+    return {
+      selectedColor: selected ?? SELECTED_FALLBACK,
+      idleColor: idle ?? IDLE_FALLBACK,
+      starWidth: starSize ?? toNumber((0, _figmaVariablesResolver.getVariableByName)('ratingStar/width', modes), DEFAULT_STAR_SIZE),
+      starHeight: starSize ?? toNumber((0, _figmaVariablesResolver.getVariableByName)('ratingStar/height', modes), DEFAULT_STAR_SIZE),
+      resolvedGap: gap ?? toNumber((0, _figmaVariablesResolver.getVariableByName)('rating/gap', modes), DEFAULT_GAP)
+    };
+  }, [modes, starSize, gap]);
+  const total = Math.max(0, Math.round(max));
+  const filledCount = Math.max(0, Math.min(total, Math.round(value)));
+  const interactive = !readOnly && typeof onChange === 'function';
+  const label = accessibilityLabel ?? `${filledCount} of ${total} stars`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...rest,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: resolvedGap
+    }, style],
+    accessibilityRole: interactive ? 'adjustable' : 'image',
+    accessibilityLabel: label,
+    accessibilityValue: interactive ? {
+      min: 0,
+      max: total,
+      now: filledCount
+    } : undefined,
+    children: Array.from({
+      length: total
+    }, (_, index) => {
+      const color = index < filledCount ? selectedColor : idleColor;
+      const star = /*#__PURE__*/(0, _jsxRuntime.jsx)(Star, {
+        width: starWidth,
+        height: starHeight,
+        color: color
+      });
+      if (!interactive) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+          children: star
+        }, index);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => onChange?.(index + 1),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rate ${index + 1} of ${total} stars`,
+        hitSlop: 8,
+        children: star
+      }, index);
+    })
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Rating);