jfs-components 0.0.1 → 0.0.3

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import React from 'react';
+import { View, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = getVariableByName('actionFooter/background', modes) ?? '#ffffff';
+  const gap = getVariableByName('actionFooter/gap', modes) ?? 8;
+  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16;
+  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10;
+  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41;
+
+  // Shadow styles - cross-platform
+  const shadowStyle = 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 = 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.Children.map(children, child => {
+    if (/*#__PURE__*/React.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.cloneElement(child, {
+        modes: mergedModes
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, webShadow, style],
+    accessibilityRole: "toolbar",
+    accessibilityLabel: accessibilityLabel,
+    children: /*#__PURE__*/_jsx(View, {
+      style: slotStyle,
+      children: childrenWithModes
+    })
+  });
+}
+export default ActionFooter;
+//# sourceMappingURL=ActionFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Platform","getVariableByName","jsx","_jsx","ActionFooter","children","modes","style","accessibilityLabel","backgroundColor","gap","paddingHorizontal","paddingTop","paddingBottom","shadowStyle","select","ios","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","android","elevation","default","containerStyle","paddingLeft","paddingRight","slotStyle","flexDirection","alignItems","flex","webShadow","OS","boxShadow","childrenWithModes","Children","map","child","isValidElement","childModes","props","mergedModes","cloneElement","accessibilityRole"],"sourceRoot":"../../../../src","sources":["components/ActionFooter/ActionFooter.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,EAGJC,QAAQ,QACH,cAAc;AACrB,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAuBhF;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,YAAYA,CAAC;EACpBC,QAAQ;EACRC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,kBAAkB,GAAG;AACJ,CAAC,EAAE;EACpB;EACA,MAAMC,eAAe,GAAGR,iBAAiB,CAAC,yBAAyB,EAAEK,KAAK,CAAC,IAAI,SAAS;EACxF,MAAMI,GAAG,GAAGT,iBAAiB,CAAC,kBAAkB,EAAEK,KAAK,CAAC,IAAI,CAAC;EAC7D,MAAMK,iBAAiB,GAAGV,iBAAiB,CAAC,iCAAiC,EAAEK,KAAK,CAAC,IAAI,EAAE;EAC3F,MAAMM,UAAU,GAAGX,iBAAiB,CAAC,0BAA0B,EAAEK,KAAK,CAAC,IAAI,EAAE;EAC7E,MAAMO,aAAa,GAAGZ,iBAAiB,CAAC,6BAA6B,EAAEK,KAAK,CAAC,IAAI,EAAE;;EAEnF;EACA,MAAMQ,WAAsB,GAAGd,QAAQ,CAACe,MAAM,CAAC;IAC7CC,GAAG,EAAE;MACHC,WAAW,EAAE,qBAAqB;MAClCC,YAAY,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;MAAG,CAAC;MACvCC,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE;IAChB,CAAC;IACDC,OAAO,EAAE;MACPC,SAAS,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACP;IAAA;EAEJ,CAAC,CAAc;EAEf,MAAMC,cAAyB,GAAG;IAChCjB,eAAe;IACfkB,WAAW,EAAEhB,iBAAiB;IAC9BiB,YAAY,EAAEjB,iBAAiB;IAC/BC,UAAU;IACVC,aAAa;IACb,GAAGC;EACL,CAAC;;EAED;EACA,MAAMe,SAAoB,GAAG;IAC3BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,YAAY;IACxBrB,GAAG;IACHsB,IAAI,EAAE;EACR,CAAC;;EAED;EACA,MAAMC,SAAS,GAAGjC,QAAQ,CAACkC,EAAE,KAAK,KAAK,GACnC;IAAEC,SAAS,EAAE;EAAuF,CAAC,GACrG,CAAC,CAAC;;EAEN;EACA,MAAMC,iBAAiB,GAAGtC,KAAK,CAACuC,QAAQ,CAACC,GAAG,CAACjC,QAAQ,EAAGkC,KAAK,IAAK;IAChE,iBAAIzC,KAAK,CAAC0C,cAAc,CAACD,KAAK,CAAC,EAAE;MAC/B;MACA,MAAME,UAAU,GAAIF,KAAK,CAACG,KAAK,CAASpC,KAAK;MAC7C,MAAMqC,WAAW,GAAGF,UAAU,GAAG;QAAE,GAAGnC,KAAK;QAAE,GAAGmC;MAAW,CAAC,GAAGnC,KAAK;MACpE,oBAAOR,KAAK,CAAC8C,YAAY,CAACL,KAAK,EAA6B;QAC1DjC,KAAK,EAAEqC;MACT,CAAC,CAAC;IACJ;IACA,OAAOJ,KAAK;EACd,CAAC,CAAC;EAEF,oBACEpC,IAAA,CAACJ,IAAI;IACHQ,KAAK,EAAE,CAACmB,cAAc,EAAEO,SAAS,EAAE1B,KAAK,CAAE;IAC1CsC,iBAAiB,EAAC,SAAS;IAC3BrC,kBAAkB,EAAEA,kBAAmB;IAAAH,QAAA,eAEvCF,IAAA,CAACJ,IAAI;MAACQ,KAAK,EAAEsB,SAAU;MAAAxB,QAAA,EACpB+B;IAAiB,CACd;EAAC,CACH,CAAC;AAEX;AAEA,eAAehC,YAAY","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","Pressable","Text","View","getVariableByName","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","Button","label","children","renderContent","leading","trailing","modes","onPress","disabled","style","labelStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","backgroundColor","borderColor","borderWidth","radius","paddingHorizontal","paddingVertical","gap","fontFamily","fontWeightValue","fontWeight","toString","lineHeight","fontSize","textColor","baseLabelTextStyle","color","mergedLabelTextStyle","content","undefined","numberOfLines","containerBaseStyle","flexDirection","alignItems","justifyContent","borderRadius","opacity","accessoryOffset","leadingAccessoryStyle","marginRight","trailingAccessoryStyle","marginLeft","defaultAccessibilityLabel","webProps","restProps","isFocused","setIsFocused","isHovered","setIsHovered","pressedStyle","transform","scale","focusStyle","hoverStyle","__DEV__","console","warn","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","Pressable","Text","View","getVariableByName","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","Button","label","children","renderContent","leading","trailing","modes","onPress","disabled","style","labelStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","backgroundColor","borderColor","borderWidth","radius","paddingHorizontal","paddingVertical","gap","fontFamily","fontWeightValue","fontWeight","toString","lineHeight","fontSize","textColor","baseLabelTextStyle","color","mergedLabelTextStyle","content","undefined","numberOfLines","containerBaseStyle","flexDirection","alignItems","justifyContent","borderRadius","opacity","accessoryOffset","leadingAccessoryStyle","marginRight","trailingAccessoryStyle","marginLeft","defaultAccessibilityLabel","webProps","restProps","isFocused","setIsFocused","isHovered","setIsHovered","pressedStyle","transform","scale","focusStyle","hoverStyle","__DEV__","console","warn","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed"],"sourceRoot":"../../../../src","sources":["components/Button/Button.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -3,6 +3,7 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import IconComponent from '../../icons/Icon';
 
 /**
  * Context to share 'modes' with child components.
@@ -16,9 +17,15 @@ const CardFeedbackContext = /*#__PURE__*/createContext({});
  */
 export function CardFeedback({
   children,
-  modes = {},
+  modes: propModes,
   style
 }) {
+  const modes = {
+    'Appearance.System': 'positive',
+    'Context': 'Nudge&Alert',
+    'Semantic Intent': 'System',
+    ...propModes
+  };
   // Container Tokens
   const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
   const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
@@ -53,19 +60,20 @@ export function CardFeedback({
 
 /**
  * Icon Wrapper
- * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
 export function Icon({
   children,
   style,
-  modes: propModes
+  modes: propModes,
+  icon
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
   const size = parseFloat(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 = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
+  console.log(color);
   const containerStyle = {
     width: size,
     height: size,
@@ -74,11 +82,25 @@ export 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.Children.map(children, child => {
+    if (/*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/cloneElement(child, {
+        modes: {
+          ...child.props.modes,
+          ...modes
+        }
+      });
+    }
+    return child;
+  });
   return /*#__PURE__*/_jsx(View, {
     style: [containerStyle, style],
-    children: children
+    children: icon ? /*#__PURE__*/_jsx(IconComponent, {
+      name: icon,
+      size: size,
+      color: color
+    }) : childrenWithModes
   });
 }
 
@@ -95,12 +117,25 @@ export function Content({
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
   const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+
+  // Pass modes to children (Title, Body, etc.)
+  const childrenWithModes = React.Children.map(children, child => {
+    if (/*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/cloneElement(child, {
+        modes: {
+          ...child.props.modes,
+          ...modes
+        }
+      });
+    }
+    return child;
+  });
   return /*#__PURE__*/_jsx(View, {
     style: [{
       gap,
       width: '100%'
     }, style],
-    children: children
+    children: childrenWithModes
   });
 }
 
@@ -173,7 +208,7 @@ export function Action({
 }) {
   const context = useContext(CardFeedbackContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '4');
+  const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
 
   // "Maximise existing component usage" -> Pass modes to children (Buttons)
   const childrenWithModes = React.Children.map(children, child => {

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

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","isValidElement","cloneElement","View","Text","getVariableByName","jsx","_jsx","CardFeedbackContext","CardFeedback","children","modes","style","backgroundColor","radius","parseFloat","gap","paddingHorizontal","paddingVertical","containerStyle","borderRadius","minHeight","alignItems","flexDirection","Provider","value","Icon","propModes","context","size","width","height","justifyContent","overflow","Content","Title","color","fontSize","fontFamily","lineHeight","fontWeight","textStyle","Body","Action","childrenWithModes","Children","map","child","props","flexWrap"],"sourceRoot":"../../../../src","sources":["components/CardFeedback/CardFeedback.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","isValidElement","cloneElement","View","Text","getVariableByName","IconComponent","jsx","_jsx","CardFeedbackContext","CardFeedback","children","modes","propModes","style","backgroundColor","radius","parseFloat","gap","paddingHorizontal","paddingVertical","containerStyle","borderRadius","minHeight","alignItems","flexDirection","Provider","value","Icon","icon","context","size","color","console","log","width","height","justifyContent","overflow","childrenWithModes","Children","map","child","props","name","Content","Title","fontSize","fontFamily","lineHeight","fontWeight","textStyle","Body","Action","flexWrap"],"sourceRoot":"../../../../src","sources":["components/CardFeedback/CardFeedback.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = getVariableByName('divider/size', modes) ?? 1;
+  const color = 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__*/_jsx(View, {
+    style: [dividerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: accessibilityLabel
+  });
+}
+export default Divider;
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","getVariableByName","jsx","_jsx","Divider","direction","modes","style","accessibilityLabel","size","color","isVertical","dividerStyle","width","backgroundColor","alignSelf","height","accessibilityRole"],"sourceRoot":"../../../../src","sources":["components/Divider/Divider.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,QAGC,cAAc;AACrB,SAASC,iBAAiB,QAAQ,8CAA8C;AAAA,SAAAC,GAAA,IAAAC,IAAA;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,SAASC,OAAOA,CAAC;EACfC,SAAS,GAAG,YAAY;EACxBC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC,kBAAkB,GAAG;AACT,CAAC,EAAE;EACf;EACA,MAAMC,IAAI,GAAGR,iBAAiB,CAAC,cAAc,EAAEK,KAAK,CAAC,IAAI,CAAC;EAC1D,MAAMI,KAAK,GAAGT,iBAAiB,CAAC,eAAe,EAAEK,KAAK,CAAC,IAAI,SAAS;EAEpE,MAAMK,UAAU,GAAGN,SAAS,KAAK,UAAU;EAE3C,MAAMO,YAAuB,GAAGD,UAAU,GACtC;IACEE,KAAK,EAAEJ,IAAI;IACXK,eAAe,EAAEJ,KAAK;IACtBK,SAAS,EAAE;EACb,CAAC,GACD;IACEC,MAAM,EAAEP,IAAI;IACZK,eAAe,EAAEJ,KAAK;IACtBK,SAAS,EAAE;EACb,CAAC;EAEL,oBACEZ,IAAA,CAACH,IAAI;IACHO,KAAK,EAAE,CAACK,YAAY,EAAEL,KAAK,CAAE;IAC7BU,iBAAiB,EAAC,MAAM;IACxBT,kBAAkB,EAAEA;EAAmB,CACxC,CAAC;AAEN;AAEA,eAAeJ,OAAO","ignoreList":[]}

package/lib/module/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.