jfs-components 0.0.72 → 0.0.74

package/lib/commonjs/components/DonutChart/DonutChart.js

@@ -0,0 +1,309 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonutChartSegment = DonutChartSegment;
+exports.default = void 0;
+var _react = _interopRequireDefault(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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Each segment renders one arc on the donut ring. `value` controls the
+ * arc's angular share (its weight relative to the sum of all values).
+ * Use `modes` per segment to override the default `Appearance / DataViz`
+ * mode (the parent injects per-index defaults of `Senary`, `Primary`,
+ * `Secondary`, `Tertiary`, `Quaternary`, `Quinary`, then cycles).
+ */
+
+const DEFAULT_APPEARANCE_CYCLE = ['Senary', 'Primary', 'Secondary', 'Tertiary', 'Quaternary', 'Quinary'];
+const DEFAULT_SEGMENTS = [{
+  value: 1
+}, {
+  value: 1
+}, {
+  value: 1
+}, {
+  value: 1
+}, {
+  value: 1
+}, {
+  value: 1
+}];
+const STROKE_WIDTH_RATIO = 18 / 194;
+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;
+};
+
+/**
+ * Compute the default `Appearance / DataViz` mode for a segment at `index`.
+ * Cycles through {@link DEFAULT_APPEARANCE_CYCLE} so any number of segments
+ * gets a sensible default (Senary, Primary, Secondary, Tertiary,
+ * Quaternary, Quinary, then repeats).
+ */
+function defaultAppearanceFor(index) {
+  return DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length];
+}
+
+/**
+ * Resolve a single segment's stroke color through the design tokens. Honors
+ * any explicit `color` override, then falls back to `dataViz/bg` for the
+ * supplied `modes`, then to the Figma reference purple.
+ */
+function resolveSegmentColor(color, modes) {
+  if (color) return color;
+  return (0, _figmaVariablesResolver.getVariableByName)('dataViz/bg', modes) ?? '#5d00b5';
+}
+
+/**
+ * Coerce a slot child into a `DonutChartSegmentData` so the rendering path
+ * is uniform. Reads `value`, `color`, `modes` and `accessibilityLabel`
+ * from the child's props and ignores anything else.
+ */
+function segmentDataFromChild(child, fallbackKey) {
+  const props = child.props ?? {};
+  return {
+    key: child.key ?? fallbackKey,
+    value: toNumber(props.value, 1),
+    color: typeof props.color === 'string' ? props.color : undefined,
+    modes: props.modes,
+    accessibilityLabel: props.accessibilityLabel
+  };
+}
+/**
+ * Inert helper used purely to author donut segments declaratively as
+ * `DonutChart.Segment` slot children. The parent reads its props and
+ * renders the actual SVG arcs — this component never renders anything by
+ * itself.
+ */
+function DonutChartSegment(_) {
+  return null;
+}
+
+/**
+ * `DonutChart` renders a circular ring split into categorical segments.
+ * It is the segmented counterpart of `CircularProgressBar`: there is **no
+ * track background** behind the segments — the colored ring *is* the
+ * data, and each slice is a sibling category rather than a directional or
+ * temporal value.
+ *
+ * The default 6-segment layout receives per-index `Appearance / DataViz`
+ * defaults (segment 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, 5 → `Quaternary`, 6 → `Quinary`) so the wheel reads as one
+ * concept split into six color-coded categories. Override `modes` per
+ * segment to remix appearances, or set `Emphasis / DataViz` on the
+ * parent `modes` to dim or brighten the whole wheel at once.
+ *
+ * @component
+ * @param {DonutChartProps} props
+ */
+function DonutChart({
+  segments,
+  value,
+  label,
+  children,
+  size = 194,
+  strokeWidth: strokeWidthProp,
+  gap = 0,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  valueStyle,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const strokeWidth = Math.max(1, toNumber(strokeWidthProp, Math.max(1, size * STROKE_WIDTH_RATIO)));
+  const radius = Math.max(0, (size - strokeWidth) / 2);
+  const center = size / 2;
+  const circumference = 2 * Math.PI * radius;
+  const gapLength = Math.max(0, gap) / 360 * circumference;
+  const slotChildren = (0, _reactUtils.flattenChildren)(children).filter(child => /*#__PURE__*/_react.default.isValidElement(child));
+  const slotSegmentChildren = slotChildren.filter(child => child.type === DonutChartSegment);
+  let resolvedSegments;
+  if (slotSegmentChildren.length > 0) {
+    resolvedSegments = slotSegmentChildren.map((child, index) => segmentDataFromChild(child, `segment-${index}`));
+  } else if (segments && segments.length > 0) {
+    resolvedSegments = segments;
+  } else {
+    resolvedSegments = DEFAULT_SEGMENTS;
+  }
+  const totalValue = resolvedSegments.reduce((sum, segment) => sum + Math.max(0, toNumber(segment.value, 0)), 0);
+  const hasData = totalValue > 0 && resolvedSegments.length > 0;
+  const arcs = hasData ? buildArcs({
+    segments: resolvedSegments,
+    totalValue,
+    circumference,
+    gapLength,
+    modes
+  }) : [];
+  const customCenterChildren = slotChildren.filter(child => child.type !== DonutChartSegment);
+  const hasChildrenSlot = customCenterChildren.length > 0;
+  const showValueLabel = !hasChildrenSlot && shouldRenderText(value);
+  const showLabel = !hasChildrenSlot && shouldRenderText(label);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('donutChart/value/color', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fg', modes) ?? '#000000';
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontFamily', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontSize', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontSize', modes), 29);
+  const valueLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/lineHeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/lineHeight', modes), 29);
+  const valueFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('donutChart/value/fontWeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('value/fontWeight', modes), '900');
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('donutChart/label/color', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fg', modes) ?? '#000000';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontFamily', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontSize', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontSize', modes), 12);
+  const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/lineHeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('donutChart/label/fontWeight', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('label/fontWeight', modes), '400');
+  const textWrapGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('donutChart/textWrap/gap', modes) ?? (0, _figmaVariablesResolver.getVariableByName)('textWrap/gap', modes), 7);
+  const containerStyle = {
+    alignItems: 'center',
+    height: size,
+    justifyContent: 'center',
+    position: 'relative',
+    width: size
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      children: arcs.map(arc => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: center,
+        cy: center,
+        r: radius,
+        stroke: arc.color,
+        strokeWidth: strokeWidth,
+        fill: "none",
+        strokeDasharray: arc.dashArray,
+        strokeDashoffset: arc.dashOffset,
+        strokeLinecap: "butt",
+        rotation: "-90",
+        originX: center,
+        originY: center
+      }, arc.key))
+    }), hasChildrenSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: _reactNative.StyleSheet.absoluteFill,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.centerSlot,
+        children: customCenterChildren
+      })
+    }) : showValueLabel || showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      pointerEvents: "none",
+      style: [styles.centerSlot, {
+        gap: textWrapGap
+      }],
+      children: [showValueLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: valueColor,
+          fontFamily: valueFontFamily,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          fontWeight: valueFontWeight,
+          textAlign: 'center'
+        }, valueStyle],
+        numberOfLines: 1,
+        children: value
+      }) : null, showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: labelColor,
+          fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
+          lineHeight: labelLineHeight,
+          fontWeight: labelFontWeight,
+          textAlign: 'center'
+        }, labelStyle],
+        numberOfLines: 1,
+        children: label
+      }) : null]
+    }) : null]
+  });
+}
+function shouldRenderText(node) {
+  return node !== undefined && node !== null && node !== false && node !== '';
+}
+/**
+ * Convert the resolved segment list into a list of stroke-dasharray /
+ * stroke-dashoffset descriptors that can be drawn as SVG `Circle`s. Each
+ * arc's length is its share of `circumference`, and its rotational offset
+ * is the cumulative offset of all preceding segments. Visual gaps are
+ * applied symmetrically — half a gap is shaved from each end of the arc
+ * so the visible separation between two segments equals one full `gap`.
+ */
+function buildArcs({
+  segments,
+  totalValue,
+  circumference,
+  gapLength,
+  modes
+}) {
+  const arcs = [];
+  const halfGap = gapLength / 2;
+  let cumulativeOffset = 0;
+  segments.forEach((segment, index) => {
+    const safeValue = Math.max(0, toNumber(segment.value, 0));
+    if (safeValue <= 0) {
+      return;
+    }
+    const arcLength = safeValue / totalValue * circumference;
+    const drawnLength = Math.max(0, arcLength - gapLength);
+    const segmentModes = {
+      ...modes,
+      'Appearance / DataViz': defaultAppearanceFor(index),
+      ...(segment.modes || {})
+    };
+    const color = resolveSegmentColor(segment.color, segmentModes);
+    const dashArray = `${drawnLength} ${circumference - drawnLength}`;
+    const dashOffset = -cumulativeOffset - halfGap;
+    arcs.push({
+      key: segment.key ?? `segment-${index}`,
+      color,
+      dashArray,
+      dashOffset
+    });
+    cumulativeOffset += arcLength;
+  });
+  return arcs;
+}
+const styles = _reactNative.StyleSheet.create({
+  centerSlot: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  }
+});
+DonutChart.Segment = DonutChartSegment;
+var _default = exports.default = DonutChart;

package/lib/commonjs/components/DonutChartSummary/DonutChartSummary.js

@@ -0,0 +1,155 @@
+"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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _DonutChart = _interopRequireDefault(require("../DonutChart/DonutChart"));
+var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * One row of the `DonutChartSummary`. Each item drives BOTH a donut
+ * segment and the matching legend row, so the segment and indicator
+ * always share the same color by construction.
+ */
+
+const DEFAULT_APPEARANCE_CYCLE = ['Senary', 'Primary', 'Secondary', 'Tertiary', 'Quaternary', 'Quinary'];
+const DEFAULT_ITEMS = [{
+  label: 'Equity',
+  value: 40,
+  displayValue: '40%'
+}, {
+  label: 'Recommended coverage',
+  value: 25,
+  displayValue: '25%'
+}, {
+  label: 'Additional benefits',
+  value: 20,
+  displayValue: '20%'
+}, {
+  label: 'Cost analysis',
+  value: 15,
+  displayValue: '15%'
+}];
+const defaultAppearanceFor = index => DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length];
+
+/**
+ * Resolve the shared color for an item. Honors any explicit `color`
+ * override, then falls back to `dataViz/bg` for the merged mode set,
+ * then to the Figma reference purple.
+ */
+function resolveItemColor(parentModes, item, index) {
+  if (item.color) return item.color;
+  const itemModes = {
+    ...parentModes,
+    'Appearance / DataViz': defaultAppearanceFor(index),
+    ...(item.modes || {})
+  };
+  return (0, _figmaVariablesResolver.getVariableByName)('dataViz/bg', itemModes) ?? '#5d00b5';
+}
+
+/**
+ * `DonutChartSummary` pairs a `DonutChart` with a vertical list of
+ * `MetricLegendItem` rows. The component takes a single `items` array,
+ * so the number of legend rows is locked in step with the number of
+ * donut segments by construction — every segment has exactly one
+ * legend row, and they share the same color through the same
+ * `Appearance / DataViz` cascade as the standalone `DonutChart`.
+ *
+ * The default 4-item layout receives per-index `Appearance / DataViz`
+ * defaults (item 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, then cycles). Override `modes` per item to remix, or set
+ * `Emphasis / DataViz` on the parent `modes` to dim or brighten the
+ * whole component at once.
+ *
+ * @component
+ * @param {DonutChartSummaryProps} props
+ */
+function DonutChartSummary({
+  items,
+  formatValue,
+  centerValue = '₹51,230',
+  centerLabel = 'Total invested',
+  donutCenter,
+  donutSize = 194,
+  donutStrokeWidth,
+  donutGap = 0,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('donutChartSummary/gap', modes) ?? 16;
+  const legendGap = (0, _figmaVariablesResolver.getVariableByName)('donutChartSummary/legend/gap', modes) ?? 8;
+  const resolvedItems = items && items.length > 0 ? items : DEFAULT_ITEMS;
+  const segments = resolvedItems.map((item, index) => ({
+    key: item.key ?? `segment-${index}`,
+    value: item.value,
+    color: resolveItemColor(modes, item, index),
+    accessibilityLabel: item.accessibilityLabel
+  }));
+  const showCustomCenter = donutCenter !== undefined && donutCenter !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width: '100%',
+      alignItems: 'center',
+      gap
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DonutChart.default, {
+      size: donutSize,
+      ...(donutStrokeWidth !== undefined && {
+        strokeWidth: donutStrokeWidth
+      }),
+      gap: donutGap,
+      segments: segments,
+      modes: modes,
+      ...(!showCustomCenter && {
+        value: centerValue,
+        label: centerLabel
+      }),
+      children: showCustomCenter ? donutCenter : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        width: '100%',
+        gap: legendGap
+      }, legendStyle],
+      children: resolvedItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+        label: item.label,
+        value: resolveLegendValue(item, formatValue),
+        indicatorColor: resolveItemColor(modes, item, index),
+        modes: modes
+      }, item.key ?? `legend-${index}`))
+    })]
+  });
+}
+
+/**
+ * Resolve what to render in the legend row's right-side slot. The
+ * order of precedence is:
+ *   1. `item.displayValue` if explicitly provided (including `null` /
+ *      `false`, which the underlying `MetricLegendItem` treats as
+ *      "hide the value slot").
+ *   2. `formatValue(item.value)` when a parent-level formatter exists.
+ *   3. `undefined` — the value slot is hidden.
+ */
+function resolveLegendValue(item, formatValue) {
+  if (item.displayValue !== undefined) return item.displayValue;
+  if (formatValue) return formatValue(item.value);
+  return undefined;
+}
+var _default = exports.default = DonutChartSummary;

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+function useDropdownItemTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    // The `dropdownItem/background` token aliases through the
+    // `Dropdown Item State` collection (Idle | Selected), so we resolve
+    // both possibilities up-front and pick at render time.
+    const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Idle'
+    }) || '#ffffff';
+    const selectedBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Selected'
+    }) || '#f5f5f5';
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10) || 16;
+    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes) || '400';
+    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10) || 19;
+    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10) || 8;
+    const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/horizontal', modes), 10) || 12;
+    const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/vertical', modes), 10) || 12;
+    return {
+      idleBackground,
+      selectedBackground,
+      foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      gap,
+      paddingHorizontal,
+      paddingVertical
+    };
+  }, [modes]);
+}
+function DropdownItem({
+  label,
+  value = null,
+  selected = false,
+  disabled = false,
+  leading,
+  trailing,
+  onPress,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const tokens = useDropdownItemTokens(modes);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    onPress?.(value);
+  }, [disabled, onPress, value]);
+  const containerStyle = (0, _react.useCallback)(({
+    pressed
+  }) => {
+    const showSelected = pressed || isHovered && IS_WEB || selected;
+    const base = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.gap,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
+      backgroundColor: showSelected ? tokens.selectedBackground : tokens.idleBackground,
+      opacity: disabled ? 0.4 : 1,
+      width: '100%'
+    };
+    return [base, style];
+  }, [tokens.gap, tokens.paddingHorizontal, tokens.paddingVertical, tokens.idleBackground, tokens.selectedBackground, isHovered, selected, disabled, style]);
+  const textStyle = {
+    color: tokens.foreground,
+    fontFamily: tokens.fontFamily,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    lineHeight: tokens.lineHeight,
+    flexShrink: 1
+  };
+  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), modes) : null;
+  const customTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailing), modes) : null;
+  const showDefaultCheck = !trailing && selected;
+  const fallbackA11yLabel = accessibilityLabel || (typeof label === 'string' ? label : 'Dropdown item');
+  const a11yProps = {
+    accessibilityRole: 'menuitem',
+    accessibilityLabel: fallbackA11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    }
+  };
+  if (accessibilityHint) {
+    a11yProps.accessibilityHint = accessibilityHint;
+  }
+  const handleHoverIn = (0, _react.useCallback)(() => {
+    if (IS_WEB && !disabled) setIsHovered(true);
+  }, [disabled]);
+  const handleHoverOut = (0, _react.useCallback)(() => {
+    if (IS_WEB) setIsHovered(false);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    style: containerStyle,
+    ...a11yProps,
+    children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_confirm",
+      size: 16,
+      color: tokens.foreground
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+function Dropdown({
+  children,
+  maxHeight,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10) || 8;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes) || '#ffffff';
+  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
+  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
+  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
+  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    overflow: 'hidden',
+    shadowColor,
+    shadowOffset: {
+      width: shadowOffsetX,
+      height: shadowOffsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlur / 2,
+    elevation: 4
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flexDirection: 'column'
+    },
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "menu",
+    accessibilityLabel: accessibilityLabel || 'Dropdown menu',
+    children: maxHeight != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      showsVerticalScrollIndicator: true,
+      keyboardShouldPersistTaps: "handled",
+      children: content
+    }) : content
+  });
+}
+var _default = exports.default = Dropdown;