jfs-components 0.0.1

package/lib/commonjs/components/Section/Section.js

@@ -0,0 +1,300 @@
+"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 _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _webPlatformUtils = require("../../utils/web-platform-utils");
+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); }
+/**
+ * Section component that mirrors the Figma "Section" component.
+ *
+ * This component supports:
+ *  - **header** with title, support text, and optional chevron icon
+ *  - **slot** for custom content (typically ListItem components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "slot" → `slot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Section title'] - Section title text
+ * @param {string} [props.supportText='Section support text'] - Section support text
+ * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text
+ * @param {React.ReactNode} [props.slot] - Optional custom slot for content area (Figma Slot "slot")
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Function} [props.onPress] - Callback function called when the header is pressed
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the section. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Section({
+  title = 'Section title',
+  supportText = 'Section support text',
+  showSupportText = true,
+  slot,
+  modes = {},
+  onPress,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}) {
+  const [isHeaderFocused, setIsHeaderFocused] = (0, _react.useState)(false);
+  const [isHeaderHovered, setIsHeaderHovered] = (0, _react.useState)(false);
+  const [isHeaderPressed, setIsHeaderPressed] = (0, _react.useState)(false);
+  const headerFocusStyle = isHeaderFocused ? {
+    borderColor: '#222',
+    borderWidth: 1
+  } : {};
+  const headerHoverStyle = isHeaderHovered ? {
+    opacity: 0.95
+  } : {};
+  const headerPressedStyle = isHeaderPressed ? {
+    opacity: 0.85
+  } : {};
+  // Resolve section container tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
+
+  // Resolve section header tokens
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('section/header/gap', modes) || 8;
+  const headerPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/horizontal', modes) || 0;
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/header/padding/vertical', modes) || 0;
+
+  // Resolve section title tokens
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('section/title/color', modes) || '#0f0d0a';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontSize', modes) || 18;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/title/lineHeight', modes) || 20;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontFamily', modes) || 'System';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/title/fontWeight', modes) || 800;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Resolve section support text tokens
+  const supportTextColor = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/color', modes) || '#1f1a14';
+  const supportTextFontSize = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontSize', modes) || 14;
+  const supportTextLineHeight = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/lineHeight', modes) || 18;
+  const supportTextFontFamily = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontFamily', modes) || 'System';
+  const supportTextFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('section/supportText/fontWeight', modes) || 500;
+  const supportTextFontWeight = typeof supportTextFontWeightRaw === 'number' ? supportTextFontWeightRaw.toString() : supportTextFontWeightRaw;
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    gap
+  };
+  const headerStyle = {
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical,
+    gap: headerGap
+  };
+  const headerWrapStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  };
+  const titleStyle = {
+    flex: 1,
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight
+  };
+  const supportTextStyle = {
+    color: supportTextColor,
+    fontSize: supportTextFontSize,
+    lineHeight: supportTextLineHeight,
+    fontFamily: supportTextFontFamily,
+    fontWeight: supportTextFontWeight
+  };
+
+  // Generate default accessibility label from title and supportText
+  const defaultAccessibilityLabel = accessibilityLabel || (showSupportText ? `${title}. ${supportText}` : title);
+
+  // Get web platform support props (only used when onPress is defined)
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: {},
+    onPress,
+    disabled: false,
+    accessibilityLabel: title,
+    webAccessibilityProps
+  });
+  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: headerWrapStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: title
+      }), onPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "ic_chevron_right",
+        size: 24,
+        color: titleColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: supportTextStyle,
+      numberOfLines: 2,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: supportText
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: 'region',
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: title,
+      accessibilityHint: accessibilityHint || "Opens section details",
+      onPress: onPress,
+      onPressIn: e => {
+        setIsHeaderPressed(true);
+        rest?.onPressIn?.(e);
+      },
+      onPressOut: e => {
+        setIsHeaderPressed(false);
+        rest?.onPressOut?.(e);
+      },
+      onFocus: e => {
+        setIsHeaderFocused(true);
+        rest?.onFocus?.(e);
+      },
+      onBlur: e => {
+        setIsHeaderFocused(false);
+        rest?.onBlur?.(e);
+      },
+      onHoverIn: e => {
+        setIsHeaderHovered(true);
+        rest?.onHoverIn?.(e);
+      },
+      onHoverOut: e => {
+        setIsHeaderHovered(false);
+        rest?.onHoverOut?.(e);
+      },
+      style: ({
+        pressed
+      }) => [headerStyle, pressed ? headerPressedStyle : null, headerHoverStyle, headerFocusStyle],
+      ...webProps,
+      children: headerContent
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: headerStyle,
+      children: headerContent
+    }), slot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: slot
+    })]
+  });
+}
+/**
+ * Section.Bento component that mirrors the Figma "Section.Bento" component.
+ *
+ * This component supports:
+ *  - **navSlot** for navigation items (typically ListItem components in vertical layout)
+ *  - **upiSlot** for UPI handles (typically UpiHandle components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "Nav wrap" → `navSlot`
+ *  - Slot "UPI wrap" → `upiSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
+ * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the section
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function SectionBento({
+  navSlot,
+  upiSlot,
+  modes = {},
+  style,
+  accessibilityLabel = "Bento section",
+  accessibilityHint,
+  ...rest
+}) {
+  // Resolve section container tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('section/background/color', modes) || '#ffffff';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('section/gap', modes) || 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('section/padding/horizontal', modes) || 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('section/padding/vertical', modes) || 16;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('section/radius', modes) || 12;
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    gap
+  };
+
+  // Helper function to clone children with modes (same as in Section component)
+  const cloneChildrenWithModes = (children, modes) => {
+    const result = _react.default.Children.map(children, child => {
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        return child;
+      }
+      const childChildren = child.props?.children;
+      const hasChildren = childChildren !== undefined && childChildren !== null;
+      const existingModes = child.props?.modes;
+      // Merge order: parent modes first, then child's explicit modes override them
+      const mergedModes = existingModes ? {
+        ...modes,
+        ...existingModes
+      } : modes;
+      const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        ...child.props,
+        modes: mergedModes
+      }, processedChildren);
+    });
+    return result || [];
+  };
+
+  // Process slots to pass modes to children
+  const processedNavSlot = navSlot ? cloneChildrenWithModes(_react.default.Children.toArray(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(_react.default.Children.toArray(upiSlot), modes) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: 'region',
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [processedNavSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: processedNavSlot
+    }), processedUpiSlot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        gap: 8
+      },
+      children: processedUpiSlot
+    })]
+  });
+}
+
+// Attach Bento as a property of Section using namespace pattern
+Section.Bento = SectionBento;
+var _default = exports.default = Section;
+//# sourceMappingURL=Section.js.map

package/lib/commonjs/components/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","useState","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","getVariableByName","gap","paddingHorizontal","paddingVertical","radius","headerGap","headerPaddingHorizontal","headerPaddingVertical","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportTextColor","supportTextFontSize","supportTextLineHeight","supportTextFontFamily","supportTextFontWeightRaw","supportTextFontWeight","containerStyle","borderRadius","headerStyle","headerWrapStyle","flexDirection","alignItems","justifyContent","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","disabled","headerContent","jsxs","Fragment","children","View","jsx","Text","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","Pressable","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","cloneChildrenWithModes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","processedNavSlot","processedUpiSlot","Bento","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Section/Section.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Section/Section.mdx

@@ -0,0 +1,83 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as SectionStories from './Section.stories';
+import Section from './Section';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={SectionStories} />
+
+# Section
+
+Section component that mirrors the Figma "Section" component.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Padding
+- **Modes:** Default | None
+- **Default:** Default
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={SectionStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel`/`accessibilityHint` to describe the section; defaults to title + support text.',
+    'If the header is pressable, keep `accessibilityRole="button"` and describe the action in the hint.',
+    'Ensure slot content exposes listitem/button roles as appropriate.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Header</strong> — title and optional support text with chevron when pressable.</li>
+    <li><strong>Body slot</strong> — arbitrary children, typically ListItems.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to keep typography and padding consistent with surrounding lists.',
+    'Keep support text brief; truncate to two lines to avoid overflow.',
+    'Avoid placing additional Pressables inside a pressable header; use the body slot for actions.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Section} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`section/background/color`**
+- **`section/gap`**
+- **`section/header/gap`**
+- **`section/header/padding/horizontal`**
+- **`section/header/padding/vertical`**
+- **`section/padding/horizontal`**
+- **`section/padding/vertical`**
+- **`section/radius`**
+- **`section/supportText/color`**
+- **`section/supportText/fontFamily`**
+- **`section/supportText/fontSize`**
+- **`section/supportText/fontWeight`**
+- **`section/supportText/lineHeight`**
+- **`section/title/color`**
+- **`section/title/fontFamily`**
+- **`section/title/fontSize`**
+- **`section/title/fontWeight`**
+- **`section/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Stepper/Step.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = Step;
+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 _StepLabel = require("./StepLabel");
+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 }; }
+function Step({
+  children,
+  modes = {},
+  style,
+  index = 0,
+  connectorStyle,
+  title,
+  supportingText,
+  subtitle = true,
+  status = 'number'
+}) {
+  // Container styles
+  const minHeight = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/minHeight', modes)) || 52;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/gap', modes)) || 8;
+
+  // Indicator dimensions and styles
+  const indicatorSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/size', modes)) || 24;
+  const indicatorRadius = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/radius', modes)) || 9999;
+  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/background', modes) || '#5c00b5';
+  const indicatorBorderColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/color', modes) || '#5c00b5';
+  const indicatorBorderSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/border/size', modes)) || 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/icon/color', modes) || '#ffffff';
+
+  // Label styles (for number)
+  const labelFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontSize', modes)) || 12;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontFamily', modes) || undefined;
+  const labelLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/lineHeight', modes)) || 14;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('stepIndicator/label/fontWeight', modes) || '500';
+
+  // Vertical line styles
+  const lineSize = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/lineSize', modes)) || 2;
+  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('steperItem/line', modes) || '#5c00b5';
+  const badgeWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('steperItem/badgeWrap/gap', modes)) || 2;
+  const containerStyle = {
+    flexDirection: 'row',
+    minHeight,
+    ...style
+  };
+
+  // FIX: This wrapper should NOT expand. It should be exact width of the indicator.
+  const indicatorWrapperStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: indicatorSize,
+    flexGrow: 0,
+    // Do NOT grow
+    flexShrink: 0,
+    gap: badgeWrapGap
+  };
+  const indicatorStyle = {
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: indicatorRadius,
+    backgroundColor: indicatorBg,
+    borderColor: indicatorBorderColor,
+    borderWidth: indicatorBorderSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  };
+  const labelStyle = {
+    color: iconColor,
+    fontSize: labelFontSize,
+    fontFamily: labelFontFamily,
+    fontWeight: labelFontWeight,
+    lineHeight: labelLineHeight,
+    textAlign: 'center'
+  };
+
+  // Combine base line style with injected connectorStyle
+  const lineStyle = {
+    width: lineSize,
+    backgroundColor: lineColor,
+    flexGrow: 1,
+    // Line should take up remaining vertical space in this column
+    ...connectorStyle // Allow overriding display, color, etc.
+  };
+
+  // Helper for icons
+  const renderIcon = () => {
+    switch (status) {
+      case 'complete':
+        // Checkmark
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+            d: "M20 6L9 17L4 12",
+            stroke: iconColor,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        });
+      case 'error':
+        // X mark
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+            d: "M18 6L6 18M6 6l12 12",
+            stroke: iconColor,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        });
+      case 'warning':
+        // Exclamation / Triangle
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+            stroke: iconColor,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        });
+      case 'number':
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: labelStyle,
+          children: index + 1
+        });
+    }
+  };
+
+  // Clone children to pass modes if they are StepLabel
+  const childrenWithProps = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes
+      });
+    }
+    return child;
+  });
+
+  // Determine if we have content to pad
+  // Default padding bottom to 16 if line is shown, but also respect connectorStyle display
+  // If display is none, we probably don't want the padding bottom either.
+  const isLineHidden = connectorStyle?.display === 'none';
+  const contentPaddingBottom = isLineHidden ? 0 : 16;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: indicatorWrapperStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: indicatorStyle,
+        children: renderIcon()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: lineStyle
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: gap
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        paddingBottom: contentPaddingBottom
+      },
+      children: title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.StepLabel, {
+        title: title,
+        supportingText: subtitle ? supportingText || undefined : undefined,
+        modes: modes
+      }) : childrenWithProps
+    })]
+  });
+}
+//# sourceMappingURL=Step.js.map

package/lib/commonjs/components/Stepper/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_figmaVariablesResolver","_StepLabel","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Step","children","modes","style","index","connectorStyle","title","supportingText","subtitle","status","minHeight","Number","getVariableByName","gap","indicatorSize","indicatorRadius","indicatorBg","indicatorBorderColor","indicatorBorderSize","iconColor","labelFontSize","labelFontFamily","undefined","labelLineHeight","labelFontWeight","lineSize","lineColor","badgeWrapGap","containerStyle","flexDirection","indicatorWrapperStyle","alignItems","width","flexGrow","flexShrink","indicatorStyle","height","borderRadius","backgroundColor","borderColor","borderWidth","justifyContent","overflow","labelStyle","color","fontSize","fontFamily","fontWeight","lineHeight","textAlign","lineStyle","renderIcon","jsx","viewBox","fill","Path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","Text","childrenWithProps","React","Children","map","child","isValidElement","cloneElement","isLineHidden","display","contentPaddingBottom","jsxs","View","flex","paddingBottom","StepLabel"],"sourceRoot":"../../../../src","sources":["components/Stepper/Step.tsx"],"mappings":"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","ignoreList":[]}