jfs-components 0.0.1

package/lib/module/components/Section/Section.js

@@ -0,0 +1,294 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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] = useState(false);
+  const [isHeaderHovered, setIsHeaderHovered] = useState(false);
+  const [isHeaderPressed, setIsHeaderPressed] = 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 = getVariableByName('section/background/color', modes) || '#ffffff';
+  const gap = getVariableByName('section/gap', modes) || 12;
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12;
+  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16;
+  const radius = getVariableByName('section/radius', modes) || 12;
+
+  // Resolve section header tokens
+  const headerGap = getVariableByName('section/header/gap', modes) || 8;
+  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes) || 0;
+  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes) || 0;
+
+  // Resolve section title tokens
+  const titleColor = getVariableByName('section/title/color', modes) || '#0f0d0a';
+  const titleFontSize = getVariableByName('section/title/fontSize', modes) || 18;
+  const titleLineHeight = getVariableByName('section/title/lineHeight', modes) || 20;
+  const titleFontFamily = getVariableByName('section/title/fontFamily', modes) || 'System';
+  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes) || 800;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Resolve section support text tokens
+  const supportTextColor = getVariableByName('section/supportText/color', modes) || '#1f1a14';
+  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes) || 14;
+  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes) || 18;
+  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes) || 'System';
+  const supportTextFontWeightRaw = 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 = usePressableWebSupport({
+    restProps: {},
+    onPress,
+    disabled: false,
+    accessibilityLabel: title,
+    webAccessibilityProps
+  });
+  const headerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: headerWrapStyle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: title
+      }), onPress && /*#__PURE__*/_jsx(Icon, {
+        name: "ic_chevron_right",
+        size: 24,
+        color: titleColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), showSupportText && /*#__PURE__*/_jsx(Text, {
+      style: supportTextStyle,
+      numberOfLines: 2,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: supportText
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: 'region',
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [onPress ? /*#__PURE__*/_jsx(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__*/_jsx(View, {
+      style: headerStyle,
+      children: headerContent
+    }), slot && /*#__PURE__*/_jsx(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 = getVariableByName('section/background/color', modes) || '#ffffff';
+  const gap = getVariableByName('section/gap', modes) || 12;
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12;
+  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16;
+  const radius = 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.Children.map(children, child => {
+      if (! /*#__PURE__*/React.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.Children.toArray(childChildren), modes) : undefined;
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...child.props,
+        modes: mergedModes
+      }, processedChildren);
+    });
+    return result || [];
+  };
+
+  // Process slots to pass modes to children
+  const processedNavSlot = navSlot ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes) : null;
+  const processedUpiSlot = upiSlot ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityRole: 'region',
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: [processedNavSlot && /*#__PURE__*/_jsx(View, {
+      children: processedNavSlot
+    }), processedUpiSlot && /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 8
+      },
+      children: processedUpiSlot
+    })]
+  });
+}
+
+// Attach Bento as a property of Section using namespace pattern
+Section.Bento = SectionBento;
+export default Section;
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Text","Pressable","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","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","restProps","disabled","headerContent","children","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","cloneChildrenWithModes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","processedNavSlot","processedUpiSlot","Bento"],"sourceRoot":"../../../../src","sources":["components/Section/Section.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/module/components/Stepper/Step.js

@@ -0,0 +1,186 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { StepLabel } from './StepLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Step({
+  children,
+  modes = {},
+  style,
+  index = 0,
+  connectorStyle,
+  title,
+  supportingText,
+  subtitle = true,
+  status = 'number'
+}) {
+  // Container styles
+  const minHeight = Number(getVariableByName('steperItem/minHeight', modes)) || 52;
+  const gap = Number(getVariableByName('steperItem/gap', modes)) || 8;
+
+  // Indicator dimensions and styles
+  const indicatorSize = Number(getVariableByName('stepIndicator/size', modes)) || 24;
+  const indicatorRadius = Number(getVariableByName('stepIndicator/radius', modes)) || 9999;
+  const indicatorBg = getVariableByName('stepIndicator/background', modes) || '#5c00b5';
+  const indicatorBorderColor = getVariableByName('stepIndicator/border/color', modes) || '#5c00b5';
+  const indicatorBorderSize = Number(getVariableByName('stepIndicator/border/size', modes)) || 1;
+  const iconColor = getVariableByName('stepIndicator/icon/color', modes) || '#ffffff';
+
+  // Label styles (for number)
+  const labelFontSize = Number(getVariableByName('stepIndicator/label/fontSize', modes)) || 12;
+  const labelFontFamily = getVariableByName('stepIndicator/label/fontFamily', modes) || undefined;
+  const labelLineHeight = Number(getVariableByName('stepIndicator/label/lineHeight', modes)) || 14;
+  const labelFontWeight = getVariableByName('stepIndicator/label/fontWeight', modes) || '500';
+
+  // Vertical line styles
+  const lineSize = Number(getVariableByName('steperItem/lineSize', modes)) || 2;
+  const lineColor = getVariableByName('steperItem/line', modes) || '#5c00b5';
+  const badgeWrapGap = Number(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__*/_jsx(Svg, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/_jsx(Path, {
+            d: "M20 6L9 17L4 12",
+            stroke: iconColor,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        });
+      case 'error':
+        // X mark
+        return /*#__PURE__*/_jsx(Svg, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/_jsx(Path, {
+            d: "M18 6L6 18M6 6l12 12",
+            stroke: iconColor,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        });
+      case 'warning':
+        // Exclamation / Triangle
+        return /*#__PURE__*/_jsx(Svg, {
+          width: 12,
+          height: 12,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+          style: labelStyle,
+          children: index + 1
+        });
+    }
+  };
+
+  // Clone children to pass modes if they are StepLabel
+  const childrenWithProps = React.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.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__*/_jsxs(View, {
+    style: containerStyle,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: indicatorWrapperStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: indicatorStyle,
+        children: renderIcon()
+      }), /*#__PURE__*/_jsx(View, {
+        style: lineStyle
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: gap
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        paddingBottom: contentPaddingBottom
+      },
+      children: title ? /*#__PURE__*/_jsx(StepLabel, {
+        title: title,
+        supportingText: subtitle ? supportingText || undefined : undefined,
+        modes: modes
+      }) : childrenWithProps
+    })]
+  });
+}
+//# sourceMappingURL=Step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Svg","Path","getVariableByName","StepLabel","jsx","_jsx","jsxs","_jsxs","Step","children","modes","style","index","connectorStyle","title","supportingText","subtitle","status","minHeight","Number","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","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","childrenWithProps","Children","map","child","isValidElement","cloneElement","isLineHidden","display","contentPaddingBottom","flex","paddingBottom"],"sourceRoot":"../../../../src","sources":["components/Stepper/Step.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Stepper/Step.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as StepStories from './Step.stories';
+import { Step } from './Step';
+
+<Meta of={StepStories} />
+
+# Step
+
+A component representing a single step within a Stepper process. It displays an indicator (number or icon), a title, and an optional subtitle.
+
+## 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.
+
+### Status
+- **Modes:** active | inactive | complete | error | warning
+- **Default:** active
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={StepStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Step} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`stepIndicator/background`**
+- **`stepIndicator/border/color`**
+- **`stepIndicator/border/size`**
+- **`stepIndicator/icon/color`**
+- **`stepIndicator/label/fontFamily`**
+- **`stepIndicator/label/fontSize`**
+- **`stepIndicator/label/fontWeight`**
+- **`stepIndicator/label/lineHeight`**
+- **`stepIndicator/radius`**
+- **`stepIndicator/size`**
+- **`steperItem/badgeWrap/gap`**
+- **`steperItem/gap`**
+- **`steperItem/line`**
+- **`steperItem/lineSize`**
+- **`steperItem/minHeight`**
+
+All tokens support mode-based theming through the `modes` prop.