jfs-components 0.0.1 → 0.0.2

package/lib/typescript/components/ActionFooter/ActionFooter.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type ActionFooterProps = {
+    /**
+     * Content to render inside the action footer slot.
+     * Typically includes IconButton and Button components.
+     */
+    children?: React.ReactNode;
+    /**
+     * Mode configuration passed to the token resolver.
+     * Pass the same modes to children components for consistent theming.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Accessibility label for the footer region
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function ActionFooter({ children, modes, style, accessibilityLabel, }: ActionFooterProps): import("react/jsx-runtime").JSX.Element;
+export default ActionFooter;
+//# sourceMappingURL=ActionFooter.d.ts.map

package/lib/typescript/components/ActionFooter/ActionFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionFooter/ActionFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAA;AAGrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,KAAU,EACV,KAAK,EACL,kBAAoC,GACrC,EAAE,iBAAiB,2CAsEnB;AAED,eAAe,YAAY,CAAA"}

package/lib/typescript/components/CardFeedback/CardFeedback.d.ts

@@ -19,7 +19,7 @@ export interface CardFeedbackProps {
  *
  * Used for status updates, warnings, or feedback.
  */
-export declare function CardFeedback({ children, modes, style, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardFeedback({ children, modes: propModes, style, }: CardFeedbackProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CardFeedback {
     var Icon: typeof import("./CardFeedback").Icon;
     var Content: typeof import("./CardFeedback").Content;
@@ -29,12 +29,13 @@ export declare namespace CardFeedback {
 }
 /**
  * Icon Wrapper
- * Tokens: cardFeedback/icon/size, cardFeedback/icon/color
+ * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
-export declare function Icon({ children, style, modes: propModes }: {
+export declare function Icon({ children, style, modes: propModes, icon }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
     modes?: Record<string, any>;
+    icon?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Content Wrapper (Text Wrap)

package/lib/typescript/components/CardFeedback/CardFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardFeedback.d.ts","sourceRoot":"","sources":["../../../../src/components/CardFeedback/CardFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAS,MAAM,cAAc,CAAC;AAQ7G,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,KAAU,EACV,KAAK,GACR,EAAE,iBAAiB,2CA2BnB;yBA/Be,YAAY;;;;;;;AAqC5B;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAuBpJ;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAWvJ;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBrJ;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBpJ;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBtJ;AASD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CardFeedback.d.ts","sourceRoot":"","sources":["../../../../src/components/CardFeedback/CardFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAS,MAAM,cAAc,CAAC;AAS7G,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,KAAK,GACR,EAAE,iBAAiB,2CAiCnB;yBArCe,YAAY;;;;;;;AA2C5B;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAiCzK;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBvJ;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBrJ;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBpJ;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,2CAmBtJ;AASD,eAAe,YAAY,CAAC"}

package/lib/typescript/components/Divider/Divider.d.ts

@@ -0,0 +1,50 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type DividerDirection = 'horizontal' | 'vertical';
+export type DividerProps = {
+    /**
+     * Direction of the divider line.
+     * - 'horizontal': renders a horizontal line (default)
+     * - 'vertical': renders a vertical line
+     */
+    direction?: DividerDirection;
+    /**
+     * Mode configuration passed to the token resolver.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the divider
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Accessibility label for the divider
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * 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' }} />
+ * ```
+ */
+declare function Divider({ direction, modes, style, accessibilityLabel, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/lib/typescript/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAGrB,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAA;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,OAAO,CAAC,EACf,SAAwB,EACxB,KAAU,EACV,KAAK,EACL,kBAA8B,GAC/B,EAAE,YAAY,2CA0Bd;AAED,eAAe,OAAO,CAAA"}

package/lib/typescript/components/ListItem/ListItem.d.ts

@@ -9,7 +9,8 @@ type ListItemProps = {
     leading?: React.ReactNode;
     supportSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
-    showTrailing?: boolean;
+    /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
+    navArrow?: boolean;
     modes?: Record<string, any>;
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
@@ -45,7 +46,7 @@ type ListItemProps = {
  * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
  * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
- * @param {boolean} [props.showTrailing=true] - When `true`, renders the default trailing Button in Horizontal layout if `endSlot` is not provided.
+ * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
  * @param {Object} [props.style] - Optional container style overrides.
@@ -54,6 +55,6 @@ type ListItemProps = {
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
  */
-declare function ListItem({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, showTrailing, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItem({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

package/lib/typescript/components/ListItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAkB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAI7H,OAAO,EAA0B,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AA8CnG,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,QAAQ,CAAC,EAChB,MAAmB,EACnB,KAAe,EACf,WAA4B,EAC5B,eAAsB,EACtB,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAmB,EACnB,KAAU,EACV,OAAO,EACP,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,2CA8Qf;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAkB,KAAK,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAI7H,OAAO,EAA0B,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAwDnG,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,QAAQ,CAAC,EAChB,MAAmB,EACnB,KAAe,EACf,WAA4B,EAC5B,eAAsB,EACtB,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAe,EACf,KAAU,EACV,OAAO,EACP,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,2CA8Qf;AAED,eAAe,QAAQ,CAAA"}

package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts

@@ -0,0 +1,68 @@
+import { type ViewStyle, type StyleProp } from 'react-native';
+import { type AvatarProps } from '../Avatar/Avatar';
+export type MerchantProfileProps = {
+    /**
+     * The merchant's display name or title
+     */
+    title?: string;
+    /**
+     * Subtitle text, typically the UPI ID or additional merchant info
+     */
+    subtitle?: string;
+    /**
+     * Mode configuration passed to the token resolver.
+     * Also passed to the Avatar child component for consistent theming.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Props to pass to the Avatar component
+     */
+    avatarProps?: Partial<AvatarProps>;
+    /**
+     * Accessibility label for the merchant profile region
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * MerchantProfile component that displays a merchant's identity.
+ *
+ * This component shows a centered profile layout with:
+ * - A circular avatar image
+ * - A title (merchant name)
+ * - A subtitle (typically UPI ID)
+ *
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.title="Uber India Systems Private Limited"] - The merchant's display name
+ * @param {string} [props.subtitle="UPI ID: uberindia@ybl"] - Subtitle text, typically the UPI ID
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens
+ * @param {Object} [props.style] - Optional style overrides for the container
+ * @param {Object} [props.avatarProps] - Props to pass to the Avatar component
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the region
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MerchantProfile
+ *   title="Uber India Systems Private Limited"
+ *   subtitle="UPI ID: uberindia@ybl"
+ *   modes={{}}
+ * />
+ *
+ * // With custom avatar
+ * <MerchantProfile
+ *   title="Amazon Pay"
+ *   subtitle="UPI ID: amazonpay@apl"
+ *   avatarProps={{ imageSource: 'https://example.com/logo.png' }}
+ * />
+ * ```
+ */
+declare function MerchantProfile({ title, subtitle, modes, style, avatarProps, accessibilityLabel, }: MerchantProfileProps): import("react/jsx-runtime").JSX.Element;
+export default MerchantProfile;
+//# sourceMappingURL=MerchantProfile.d.ts.map

package/lib/typescript/components/MerchantProfile/MerchantProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MerchantProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/MerchantProfile/MerchantProfile.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAErB,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,eAAe,CAAC,EACvB,KAA4C,EAC5C,QAAkC,EAClC,KAAU,EACV,KAAK,EACL,WAAW,EACX,kBAAkB,GACnB,EAAE,oBAAoB,2CAwFtB;AAED,eAAe,eAAe,CAAA"}

package/lib/typescript/components/NavArrow/NavArrow.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+type NavArrowDirection = 'Back' | 'Forward';
+type NavArrowProps = {
+    /** Direction of the arrow: 'Back' (left chevron) or 'Forward' (right chevron) */
+    direction?: NavArrowDirection;
+    /** Modes used to resolve design tokens */
+    modes?: Record<string, any>;
+    /** Optional additional container style */
+    style?: ViewStyle;
+    /** Accessibility label for the arrow */
+    accessibilityLabel?: string;
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>;
+/**
+ * NavArrow component that displays a small chevron arrow for navigation.
+ *
+ * This component uses design tokens for all visual properties:
+ * - navArrow/icon/color - chevron stroke color
+ * - navArrow/icon/width - icon width
+ * - navArrow/icon/height - icon height
+ * - navArrow/icon/strokeWeight - stroke width
+ * - navArrow/width - container width
+ * - navArrow/height - container height
+ * - navArrow/radius - border radius
+ * - navArrow/background - background color
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {Object} [props.modes={}] - Modes for design token resolution
+ * @param {Object} [props.style] - Additional container styles
+ */
+declare function NavArrow({ direction, modes, style, accessibilityLabel, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
+export default NavArrow;
+//# sourceMappingURL=NavArrow.d.ts.map

package/lib/typescript/components/NavArrow/NavArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/NavArrow/NavArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAInD,KAAK,iBAAiB,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3C,KAAK,aAAa,GAAG;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC,CAAA;AAE3E;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAkB,EAClB,KAAU,EACV,KAAK,EACL,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,aAAa,2CA6Df;AAED,eAAe,QAAQ,CAAA"}

package/lib/typescript/components/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -8,6 +9,7 @@ export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
+export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
@@ -16,7 +18,9 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-01-13T18:37:08.057Z
+ * Generated: 2026-01-17T17:17:24.583Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -133,4 +133,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

package/src/components/.token-metadata.json

@@ -1,4 +1,15 @@
 {
+  "ActionFooter": {
+    "tokens": [
+      "actionFooter/background",
+      "actionFooter/gap",
+      "actionFooter/padding/bottom",
+      "actionFooter/padding/horizontal",
+      "actionFooter/padding/top"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/ActionFooter/ActionFooter.tsx"
+  },
   "AppBar": {
     "tokens": [
       "appBarActions/actions/gap",
@@ -145,7 +156,7 @@
       "button/fontFamily",
       "button/fontSize",
       "button/fontWeight",
-      "button/forground",
+      "button/foreground",
       "button/gap",
       "button/lineHeight",
       "button/padding/horizontal",
@@ -199,7 +210,9 @@
       "Context": {
         "modes": [
           "Default",
-          "Nudge&Alert"
+          "Nudge&Alert",
+          "CTACard",
+          "ListItem"
         ],
         "defaultMode": "Default",
         "hasMultipleModes": true
@@ -254,6 +267,7 @@
   },
   "CardFeedback": {
     "tokens": [
+      "appearanceFeedback/cardFeedback/icon/color",
       "cardFeedback/actionSlot/gap",
       "cardFeedback/background",
       "cardFeedback/body/color",
@@ -323,6 +337,23 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Disclaimer/Disclaimer.tsx"
   },
+  "Divider": {
+    "tokens": [
+      "divider/color",
+      "divider/size"
+    ],
+    "collections": {
+      "Color Mode": {
+        "modes": [
+          "Light",
+          "Dark"
+        ],
+        "defaultMode": "Light",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Divider/Divider.tsx"
+  },
   "Drawer": {
     "tokens": [
       "drawer/background",
@@ -568,6 +599,24 @@
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/MediaCard/MediaCard.tsx"
   },
+  "MerchantProfile": {
+    "tokens": [
+      "merchantProfile/gap",
+      "merchantProfile/padding/horizontal",
+      "merchantProfile/subtitle/color",
+      "merchantProfile/subtitle/fontFamily",
+      "merchantProfile/subtitle/fontSize",
+      "merchantProfile/subtitle/fontWeight",
+      "merchantProfile/subtitle/lineHeight",
+      "merchantProfile/title/color",
+      "merchantProfile/title/fontFamily",
+      "merchantProfile/title/fontSize",
+      "merchantProfile/title/fontWeight",
+      "merchantProfile/title/lineHeight"
+    ],
+    "collections": {},
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/MerchantProfile/MerchantProfile.tsx"
+  },
   "MoneyValue": {
     "tokens": [
       "moneyValue/gap",
@@ -585,10 +634,49 @@
         ],
         "defaultMode": "Light",
         "hasMultipleModes": true
+      },
+      "Context3": {
+        "modes": [
+          "Default",
+          "Transaction Bubble"
+        ],
+        "defaultMode": "Default",
+        "hasMultipleModes": true
       }
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/MoneyValue/MoneyValue.tsx"
   },
+  "NavArrow": {
+    "tokens": [
+      "navArrow/background",
+      "navArrow/height",
+      "navArrow/icon/color",
+      "navArrow/icon/height",
+      "navArrow/icon/strokeWeight",
+      "navArrow/icon/width",
+      "navArrow/radius",
+      "navArrow/width"
+    ],
+    "collections": {
+      "Color Mode": {
+        "modes": [
+          "Light",
+          "Dark"
+        ],
+        "defaultMode": "Light",
+        "hasMultipleModes": true
+      },
+      "Context2": {
+        "modes": [
+          "Default",
+          "AppBar"
+        ],
+        "defaultMode": "Default",
+        "hasMultipleModes": true
+      }
+    },
+    "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/NavArrow/NavArrow.tsx"
+  },
   "PageTitle": {
     "tokens": [
       "pageTitle/fontFamily",
@@ -633,6 +721,14 @@
       "section/title/lineHeight"
     ],
     "collections": {
+      "Color Mode": {
+        "modes": [
+          "Light",
+          "Dark"
+        ],
+        "defaultMode": "Light",
+        "hasMultipleModes": true
+      },
       "Padding": {
         "modes": [
           "Default",
@@ -649,14 +745,6 @@
         ],
         "defaultMode": "Primary",
         "hasMultipleModes": true
-      },
-      "Color Mode": {
-        "modes": [
-          "Light",
-          "Dark"
-        ],
-        "defaultMode": "Light",
-        "hasMultipleModes": true
       }
     },
     "filePath": "/Users/sunshuaiqi/jfs/react-native-storybook-boilerplate-master/src/components/Section/Section.tsx"
@@ -680,7 +768,7 @@
       "steperItem/minHeight"
     ],
     "collections": {
-      "Status": {
+      "Step Status": {
         "modes": [
           "active",
           "inactive",

package/src/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.
+