jfs-components 0.0.1 → 0.0.2

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -0,0 +1,124 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ActionFooter component that provides a fixed footer container for action buttons.
+ * 
+ * This component is designed to hold action items like IconButton and Button components
+ * at the bottom of a screen. It includes a shadow for visual separation from content above.
+ * 
+ * The `modes` prop is automatically passed to all slot children. If a child has its own
+ * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
+ * @param {Object} [props.style] - Optional style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage - modes are automatically passed to all children
+ * <ActionFooter modes={modes}>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" style={{ flex: 1 }} />
+ *   <Button label="Pay" style={{ flex: 1 }} />
+ * </ActionFooter>
+ * 
+ * // Children can override with their own modes (merged with parent)
+ * <ActionFooter modes={modes}>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" modes={{ Appearance: 'secondary' }} style={{ flex: 1 }} />
+ *   <Button label="Pay" modes={{ Appearance: 'primary' }} style={{ flex: 1 }} />
+ * </ActionFooter>
+ * ```
+ */
+function ActionFooter({
+  children,
+  modes = {},
+  style,
+  accessibilityLabel = 'Action footer'
+}) {
+  // Resolve design tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/background', modes) ?? '#ffffff';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/horizontal', modes) ?? 16;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/top', modes) ?? 10;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes) ?? 41;
+
+  // Shadow styles - cross-platform
+  const shadowStyle = _reactNative.Platform.select({
+    ios: {
+      shadowColor: 'rgba(12, 13, 16, 1)',
+      shadowOffset: {
+        width: 0,
+        height: -12
+      },
+      shadowOpacity: 0.16,
+      shadowRadius: 24
+    },
+    android: {
+      elevation: 16
+    },
+    default: {
+      // Web shadow using boxShadow (RNW supports this)
+    }
+  });
+  const containerStyle = {
+    backgroundColor,
+    paddingLeft: paddingHorizontal,
+    paddingRight: paddingHorizontal,
+    paddingTop,
+    paddingBottom,
+    ...shadowStyle
+  };
+
+  // Slot container style for horizontal layout of action items
+  const slotStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap,
+    flex: 1
+  };
+
+  // Web-specific box-shadow
+  const webShadow = _reactNative.Platform.OS === 'web' ? {
+    boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
+  } : {};
+
+  // Pass modes prop to all slot children
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      // Merge modes: child's modes take precedence over parent's modes
+      const childModes = child.props.modes;
+      const mergedModes = childModes ? {
+        ...modes,
+        ...childModes
+      } : modes;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        modes: mergedModes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, webShadow, style],
+    accessibilityRole: "toolbar",
+    accessibilityLabel: accessibilityLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: slotStyle,
+      children: childrenWithModes
+    })
+  });
+}
+var _default = exports.default = ActionFooter;
+//# sourceMappingURL=ActionFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","ActionFooter","children","modes","style","accessibilityLabel","backgroundColor","getVariableByName","gap","paddingHorizontal","paddingTop","paddingBottom","shadowStyle","Platform","select","ios","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","android","elevation","containerStyle","paddingLeft","paddingRight","slotStyle","flexDirection","alignItems","flex","webShadow","OS","boxShadow","childrenWithModes","React","Children","map","child","isValidElement","childModes","props","mergedModes","cloneElement","jsx","View","accessibilityRole","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ActionFooter/ActionFooter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ActionFooter/ActionFooter.mdx

@@ -0,0 +1,101 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ActionFooterStories from './ActionFooter.stories';
+import ActionFooter from './ActionFooter';
+
+<Meta of={ActionFooterStories} />
+
+# ActionFooter
+
+A fixed footer container for action buttons. Typically used at the bottom of screens to hold primary actions like `IconButton` and `Button` components.
+
+The ActionFooter provides consistent spacing, padding, and shadow styling for action areas at the bottom of your UI.
+
+## Props
+
+<ArgsTable of={ActionFooter} />
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+The default configuration shows the typical use case with an IconButton and two Button components:
+
+<Canvas>
+  <Story of={ActionFooterStories.Default} />
+</Canvas>
+
+## Examples
+
+### Single Button
+
+For simple confirmation flows, use a single full-width button:
+
+<Canvas>
+  <Story of={ActionFooterStories.SingleButton} />
+</Canvas>
+
+### Two Buttons
+
+Common pattern for cancel/confirm actions:
+
+<Canvas>
+  <Story of={ActionFooterStories.TwoButtons} />
+</Canvas>
+
+### With Multiple Icon Buttons
+
+For screens requiring multiple secondary actions alongside a primary button:
+
+<Canvas>
+  <Story of={ActionFooterStories.WithMultipleIconButtons} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { ActionFooter, IconButton, Button } from 'jsf-components';
+
+function PaymentScreen() {
+  const modes = {};
+  const secondaryModes = { Appearance: 'secondary' };
+  const primaryModes = { Appearance: 'primary' };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Screen content */}
+      
+      <ActionFooter modes={modes}>
+        <IconButton iconName="ic_split" modes={modes} />
+        <Button 
+          label="Request" 
+          modes={secondaryModes} 
+          style={{ flex: 1 }} 
+        />
+        <Button 
+          label="Pay" 
+          modes={primaryModes} 
+          style={{ flex: 1 }} 
+        />
+      </ActionFooter>
+    </View>
+  );
+}
+```
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`actionFooter/background`**
+- **`actionFooter/gap`**
+- **`actionFooter/padding/bottom`**
+- **`actionFooter/padding/horizontal`**
+- **`actionFooter/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Accessibility
+
+The ActionFooter uses `accessibilityRole="toolbar"` to indicate it contains a group of action controls. Provide a meaningful `accessibilityLabel` to describe the footer's purpose to screen reader users.
+

package/lib/commonjs/components/Button/Button.js

@@ -59,7 +59,7 @@ function Button({
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/forground', modes) || '#0f0d0a';
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('button/foreground', modes) || '#0f0d0a';
   const baseLabelTextStyle = {
     color: textColor,
     fontFamily,

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_webPlatformUtils","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","label","children","renderContent","leading","trailing","modes","onPress","disabled","style","labelStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","backgroundColor","getVariableByName","borderColor","borderWidth","radius","paddingHorizontal","paddingVertical","gap","fontFamily","fontWeightValue","fontWeight","toString","lineHeight","fontSize","textColor","baseLabelTextStyle","color","mergedLabelTextStyle","content","undefined","jsx","Text","numberOfLines","containerBaseStyle","flexDirection","alignItems","justifyContent","borderRadius","opacity","accessoryOffset","leadingAccessoryStyle","useMemo","marginRight","trailingAccessoryStyle","marginLeft","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","isFocused","setIsFocused","useState","isHovered","setIsHovered","pressedStyle","transform","scale","focusStyle","hoverStyle","__DEV__","console","warn","jsxs","Pressable","accessibilityRole","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_webPlatformUtils","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","label","children","renderContent","leading","trailing","modes","onPress","disabled","style","labelStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","backgroundColor","getVariableByName","borderColor","borderWidth","radius","paddingHorizontal","paddingVertical","gap","fontFamily","fontWeightValue","fontWeight","toString","lineHeight","fontSize","textColor","baseLabelTextStyle","color","mergedLabelTextStyle","content","undefined","jsx","Text","numberOfLines","containerBaseStyle","flexDirection","alignItems","justifyContent","borderRadius","opacity","accessoryOffset","leadingAccessoryStyle","useMemo","marginRight","trailingAccessoryStyle","marginLeft","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","isFocused","setIsFocused","useState","isHovered","setIsHovered","pressedStyle","transform","scale","focusStyle","hoverStyle","__DEV__","console","warn","jsxs","Pressable","accessibilityRole","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","View","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Button/Button.mdx

@@ -34,7 +34,7 @@ This component uses the following design token collections. Each collection supp
 - **Default:** positive
 
 ### Context
-- **Modes:** Default | Nudge&Alert
+- **Modes:** Default | Nudge&Alert | CTACard | ListItem
 - **Default:** Default
 
 ### Button / Size
@@ -90,7 +90,7 @@ This component uses the following design tokens, resolved through `getVariableBy
 - **`button/fontFamily`**
 - **`button/fontSize`**
 - **`button/fontWeight`**
-- **`button/forground`**
+- **`button/foreground`**
 - **`button/gap`**
 - **`button/lineHeight`**
 - **`button/padding/horizontal`**

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -13,7 +13,9 @@ 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 _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); }
 /**
  * Context to share 'modes' with child components.
@@ -25,9 +27,15 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 function CardFeedback({
   children,
-  modes = {},
+  modes: propModes,
   style
 }) {
+  const modes = {
+    'Appearance.System': 'positive',
+    'Context': 'Nudge&Alert',
+    'Semantic Intent': 'System',
+    ...propModes
+  };
   // Container Tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('cardFeedback/background', modes) || '#dbf0d9';
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/radius', modes) || '12');
@@ -62,19 +70,20 @@ function CardFeedback({
 
 /**
  * Icon Wrapper
- * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
 function Icon({
   children,
   style,
-  modes: propModes
+  modes: propModes,
+  icon
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
   const size = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/icon/size', modes) || '20');
-  // Color is usually applied to the SVG/Icon itself, but we can access it here if needed
-  // const color = getVariableByName('cardFeedback/icon/color', modes); 
-
+  // Color for the icon itself
+  const color = (0, _figmaVariablesResolver.getVariableByName)('appearanceFeedback/cardFeedback/icon/color', modes);
+  console.log(color);
   const containerStyle = {
     width: size,
     height: size,
@@ -83,11 +92,25 @@ function Icon({
     overflow: 'hidden'
   };
 
-  // If children is an SVG or Icon component, we might need to clone it to pass color?
-  // For now, just render children in the sized box.
+  // Pass modes to children (e.g., icon components that accept modes)
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+        modes: {
+          ...child.props.modes,
+          ...modes
+        }
+      });
+    }
+    return child;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [containerStyle, style],
-    children: children
+    children: icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: icon,
+      size: size,
+      color: color
+    }) : childrenWithModes
   });
 }
 
@@ -104,12 +127,25 @@ function Content({
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
   const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/text/gap', modes) || '8');
+
+  // Pass modes to children (Title, Body, etc.)
+  const childrenWithModes = _react.default.Children.map(children, child => {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+        modes: {
+          ...child.props.modes,
+          ...modes
+        }
+      });
+    }
+    return child;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [{
       gap,
       width: '100%'
     }, style],
-    children: children
+    children: childrenWithModes
   });
 }
 
@@ -182,7 +218,7 @@ function Action({
 }) {
   const context = (0, _react.useContext)(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes) || '4');
+  const gap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardFeedback/actionSlot/gap', modes) || '0');
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = _react.default.Children.map(children, child => {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CardFeedbackContext","createContext","CardFeedback","children","modes","style","backgroundColor","getVariableByName","radius","parseFloat","gap","paddingHorizontal","paddingVertical","containerStyle","borderRadius","minHeight","alignItems","flexDirection","jsx","Provider","value","View","Icon","propModes","context","useContext","size","width","height","justifyContent","overflow","Content","Title","color","fontSize","fontFamily","lineHeight","fontWeight","textStyle","Text","Body","Action","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","props","flexWrap","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CardFeedback/CardFeedback.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CardFeedbackContext","createContext","CardFeedback","children","modes","propModes","style","backgroundColor","getVariableByName","radius","parseFloat","gap","paddingHorizontal","paddingVertical","containerStyle","borderRadius","minHeight","alignItems","flexDirection","jsx","Provider","value","View","Icon","icon","context","useContext","size","color","console","log","width","height","justifyContent","overflow","childrenWithModes","React","Children","map","child","isValidElement","cloneElement","props","name","Content","Title","fontSize","fontFamily","lineHeight","fontWeight","textStyle","Text","Body","Action","flexWrap","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CardFeedback/CardFeedback.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/CardFeedback/CardFeedback.mdx

@@ -62,6 +62,7 @@ This component uses the following design token collections. Each collection supp
 
 This component uses the following design tokens, resolved through `getVariableByName`:
 
+- **`appearanceFeedback/cardFeedback/icon/color`**
 - **`cardFeedback/actionSlot/gap`**
 - **`cardFeedback/background`**
 - **`cardFeedback/body/color`**

package/lib/commonjs/components/Divider/Divider.js

@@ -0,0 +1,63 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Divider component that renders a horizontal or vertical separator line.
+ * 
+ * This component is used to visually separate content sections. It supports
+ * both horizontal and vertical orientations based on the `direction` prop.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {'horizontal' | 'vertical'} [props.direction='horizontal'] - Direction of the divider
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens
+ * @param {Object} [props.style] - Optional style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the divider
+ * 
+ * @example
+ * ```tsx
+ * // Horizontal divider (default)
+ * <Divider />
+ * 
+ * // Vertical divider
+ * <Divider direction="vertical" />
+ * 
+ * // With custom modes
+ * <Divider modes={{ Appearance: 'dark' }} />
+ * ```
+ */
+function Divider({
+  direction = 'horizontal',
+  modes = {},
+  style,
+  accessibilityLabel = 'Divider'
+}) {
+  // Resolve design tokens
+  const size = (0, _figmaVariablesResolver.getVariableByName)('divider/size', modes) ?? 1;
+  const color = (0, _figmaVariablesResolver.getVariableByName)('divider/color', modes) ?? '#1a1c1f';
+  const isVertical = direction === 'vertical';
+  const dividerStyle = isVertical ? {
+    width: size,
+    backgroundColor: color,
+    alignSelf: 'stretch'
+  } : {
+    height: size,
+    backgroundColor: color,
+    alignSelf: 'stretch'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [dividerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: accessibilityLabel
+  });
+}
+var _default = exports.default = Divider;
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","Divider","direction","modes","style","accessibilityLabel","size","getVariableByName","color","isVertical","dividerStyle","width","backgroundColor","alignSelf","height","jsx","View","accessibilityRole","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Divider/Divider.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,uBAAA,GAAAF,OAAA;AAAgF,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyBhF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,OAAOA,CAAC;EACfC,SAAS,GAAG,YAAY;EACxBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,kBAAkB,GAAG;AACT,CAAC,EAAE;EACf;EACA,MAAMC,IAAI,GAAG,IAAAC,yCAAiB,EAAC,cAAc,EAAEJ,KAAK,CAAC,IAAI,CAAC;EAC1D,MAAMK,KAAK,GAAG,IAAAD,yCAAiB,EAAC,eAAe,EAAEJ,KAAK,CAAC,IAAI,SAAS;EAEpE,MAAMM,UAAU,GAAGP,SAAS,KAAK,UAAU;EAE3C,MAAMQ,YAAuB,GAAGD,UAAU,GACtC;IACEE,KAAK,EAAEL,IAAI;IACXM,eAAe,EAAEJ,KAAK;IACtBK,SAAS,EAAE;EACb,CAAC,GACD;IACEC,MAAM,EAAER,IAAI;IACZM,eAAe,EAAEJ,KAAK;IACtBK,SAAS,EAAE;EACb,CAAC;EAEL,oBACE,IAAAhB,WAAA,CAAAkB,GAAA,EAACpB,YAAA,CAAAqB,IAAI;IACHZ,KAAK,EAAE,CAACM,YAAY,EAAEN,KAAK,CAAE;IAC7Ba,iBAAiB,EAAC,MAAM;IACxBZ,kBAAkB,EAAEA;EAAmB,CACxC,CAAC;AAEN;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAnB,OAAA,GAEcC,OAAO","ignoreList":[]}

package/lib/commonjs/components/Divider/Divider.mdx

@@ -0,0 +1,91 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as DividerStories from './Divider.stories';
+import Divider from './Divider';
+
+<Meta of={DividerStories} />
+
+# Divider
+
+A simple divider component that renders a horizontal or vertical separator line. Uses design tokens for consistent sizing and color.
+
+## Props
+
+<ArgsTable of={Divider} />
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+### Horizontal Divider
+
+The default horizontal divider stretches to fill its container width:
+
+<Canvas>
+  <Story of={DividerStories.Horizontal} />
+</Canvas>
+
+### Vertical Divider
+
+Vertical dividers stretch to fill their container height:
+
+<Canvas>
+  <Story of={DividerStories.Vertical} />
+</Canvas>
+
+### In Content Layout
+
+Use horizontal dividers to separate content sections:
+
+<Canvas>
+  <Story of={DividerStories.InContentLayout} />
+</Canvas>
+
+### In Row Layout
+
+Use vertical dividers to separate items in a horizontal row:
+
+<Canvas>
+  <Story of={DividerStories.InRowLayout} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { Divider } from 'jsf-components';
+
+// Horizontal divider (default)
+<Divider />
+
+// Vertical divider
+<Divider direction="vertical" />
+
+// In a vertical layout
+<View>
+  <Text>Section 1</Text>
+  <Divider />
+  <Text>Section 2</Text>
+</View>
+
+// In a horizontal layout
+<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <Text>Item 1</Text>
+  <View style={{ marginHorizontal: 8 }}>
+    <Divider direction="vertical" />
+  </View>
+  <Text>Item 2</Text>
+</View>
+```
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`divider/color`**
+- **`divider/size`**
+
+All tokens support mode-based theming through the `modes` prop.