jfs-components 0.0.2 → 0.0.4

package/lib/module/components/Accordion/Accordion.js

@@ -0,0 +1,212 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+
+// Enable LayoutAnimation on Android
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ * This ensures that all child components in slots receive the modes prop from the parent.
+ */
+function cloneChildrenWithModes(children, modes) {
+  const result = React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    // Get existing children
+    const childChildren = child.props?.children;
+    const hasChildren = childChildren !== undefined && childChildren !== null;
+
+    // Merge modes: parent modes first, then child's explicit modes override them
+    const existingModes = child.props?.modes;
+    const mergedModes = existingModes ? {
+      ...modes,
+      ...existingModes
+    } : modes;
+
+    // Recursively process children if they exist
+    const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
+
+    // Clone element with modes and processed children
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
+      modes: mergedModes
+    }, processedChildren);
+  });
+  return result || [];
+}
+/**
+ * Accordion component that mirrors the Figma "Accordion" component.
+ *
+ * This component supports:
+ *  - **Expandable/collapsible content** with smooth animation
+ *  - **States**: Idle, Hover, Open, Disabled
+ *  - **Slot** for custom content
+ *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "content" → `children`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Accordion title'] - The accordion header title
+ * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
+ * @param {boolean} [props.expanded] - Controlled expanded state
+ * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
+ * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
+ * @param {React.ReactNode} [props.children] - Content to display when expanded
+ * @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 accordion. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Accordion({
+  title = 'Accordion title',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  disabled = false,
+  children,
+  modes = {},
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}) {
+  // Internal state for uncontrolled mode
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+
+  // Determine if controlled or uncontrolled
+  const isControlled = controlledExpanded !== undefined;
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+
+  // Hover state for web
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Handle toggle
+  const handleToggle = () => {
+    if (disabled) return;
+
+    // Animate the layout change
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (isControlled) {
+      onExpandedChange?.(!isExpanded);
+    } else {
+      setInternalExpanded(!isExpanded);
+      onExpandedChange?.(!isExpanded);
+    }
+  };
+
+  // Resolve design tokens
+  const titleColor = disabled ? '#999999' : getVariableByName('accordion/title/color', modes) || '#0d0d0d';
+  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18;
+  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20;
+  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System';
+  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414';
+  const iconSize = getVariableByName('accordion/icon/size', modes) || 24;
+  const headerGap = getVariableByName('accordion/header/gap', modes) || 12;
+  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24;
+  const headerBackground = isHovered && !disabled ? '#f2f2f2' : getVariableByName('accordion/header/background', modes) || 'transparent';
+  const contentGap = getVariableByName('accordion/content/gap', modes) || 12;
+  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8;
+  const contentPaddingBottom = isExpanded ? getVariableByName('accordion/content/padding/bottom', modes) ?? 24 : 8;
+  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6';
+
+  // Styles
+  const containerStyle = {
+    borderBottomWidth: 1,
+    borderBottomColor: borderColor
+  };
+  const headerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingVertical: headerPaddingVertical,
+    paddingHorizontal: 0,
+    backgroundColor: headerBackground,
+    overflow: 'hidden'
+  };
+  const titleStyle = {
+    flex: 1,
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: '700'
+  };
+  const contentStyle = {
+    backgroundColor: 'transparent',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: 0,
+    overflow: 'hidden'
+  };
+
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || title;
+
+  // Web platform support
+  const webProps = usePressableWebSupport({
+    restProps: {},
+    onPress: handleToggle,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+
+  // Process children to pass modes
+  const processedChildren = children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion'),
+      accessibilityState: {
+        expanded: isExpanded,
+        disabled,
+        ...accessibilityState
+      },
+      onPress: handleToggle,
+      disabled: disabled,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false),
+      style: ({
+        pressed
+      }) => [headerStyle, pressed && !disabled ? {
+        opacity: 0.9
+      } : null],
+      ...webProps,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        children: title
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: isExpanded ? 'ic_minus' : 'ic_add',
+        size: iconSize,
+        color: disabled ? '#999999' : iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), isExpanded && processedChildren && /*#__PURE__*/_jsx(View, {
+      style: contentStyle,
+      children: processedChildren
+    })]
+  });
+}
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Text","Pressable","LayoutAnimation","Platform","UIManager","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","OS","setLayoutAnimationEnabledExperimental","cloneChildrenWithModes","children","modes","result","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","Accordion","title","defaultExpanded","expanded","controlledExpanded","onExpandedChange","disabled","style","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","internalExpanded","setInternalExpanded","isControlled","isExpanded","isHovered","setIsHovered","handleToggle","configureNext","Presets","easeInEaseOut","titleColor","titleFontSize","titleLineHeight","titleFontFamily","iconColor","iconSize","headerGap","headerPaddingVertical","headerBackground","contentGap","contentPaddingTop","contentPaddingBottom","borderColor","containerStyle","borderBottomWidth","borderBottomColor","headerStyle","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","backgroundColor","overflow","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","contentStyle","paddingTop","paddingBottom","defaultAccessibilityLabel","webProps","restProps","onPress","accessibilityRole","onHoverIn","onHoverOut","pressed","opacity","numberOfLines","name","size","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/Accordion/Accordion.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Accordion/Accordion.mdx

@@ -0,0 +1,122 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AccordionStories from './Accordion.stories';
+import Accordion from './Accordion';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion component that mirrors the Figma "Accordion" component. It provides an expandable/collapsible container for content with smooth animation.
+
+## 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.
+
+### Accordion States
+- **Modes:** Idle | Hover | Open | Open Hover | Disabled
+- **Default:** Idle
+## Usage
+
+<Canvas>
+  <Story of={AccordionStories.Default} />
+</Canvas>
+
+## With ListItem Content
+
+<Canvas>
+  <Story of={AccordionStories.WithListItems} />
+</Canvas>
+
+## Accordion Group
+
+<Canvas>
+  <Story of={AccordionStories.AccordionGroup} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'The accordion header has `accessibilityRole="button"` for proper screen reader announcement.',
+    'The `accessibilityState.expanded` property indicates the current state to assistive technology.',
+    'When disabled, `accessibilityState.disabled` is set to true.',
+    'Custom `accessibilityLabel` and `accessibilityHint` can be provided for better context.',
+    'Content within the accordion should maintain its own accessibility attributes.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Header</strong> — Pressable area containing the title and expand/collapse icon (plus/minus).</li>
+    <li><strong>Content Slot</strong> — Expandable area that shows/hides with animation. Pass any React children.</li>
+    <li><strong>Border</strong> — Bottom border separating accordions when stacked.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use the `modes` prop to ensure consistent theming with surrounding components.',
+    'When nesting components in the content slot, they automatically receive the parent modes via cloning.',
+    'Avoid deeply nested interactive elements that may confuse keyboard navigation.',
+    'For controlled behavior, provide both `expanded` and `onExpandedChange` props.',
+    'Keep accordion titles concise; they are truncated to a single line.',
+  ]}
+/>
+
+## Props
+
+<ArgsTable of={Accordion} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`accordion/border/color`**
+- **`accordion/content/gap`**
+- **`accordion/content/padding/bottom`**
+- **`accordion/content/padding/top`**
+- **`accordion/header/background`**
+- **`accordion/header/gap`**
+- **`accordion/header/padding/vertical`**
+- **`accordion/icon/color`**
+- **`accordion/icon/size`**
+- **`accordion/title/color`**
+- **`accordion/title/fontFamily`**
+- **`accordion/title/fontSize`**
+- **`accordion/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Example Usage
+
+```tsx
+import { Accordion, ListItem, IconCapsule, MoneyValue } from '@jsf/components';
+
+function PaymentSection() {
+  return (
+    <Accordion 
+      title="Payment Methods"
+      defaultExpanded={true}
+      modes={{ 'Color Mode': 'Light' }}
+    >
+      <ListItem
+        layout="Horizontal"
+        title="Credit Card"
+        supportText="Ending in 4242"
+        leading={<IconCapsule iconName="ic_card" />}
+        endSlot={<MoneyValue value="500" currency="₹" />}
+        navArrow={true}
+      />
+      <ListItem
+        layout="Horizontal"
+        title="Savings Account"
+        supportText="HDFC Bank"
+        leading={<IconCapsule iconName="ic_bank_account" />}
+        endSlot={<MoneyValue value="25,000" currency="₹" />}
+        navArrow={true}
+      />
+    </Accordion>
+  );
+}
+```
+
+
+

package/lib/module/components/ActionTile/ActionTile.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActionTile component from Figma design.
+ * Displays an icon (defaulting to IconCapsule) and a label.
+ * 
+ * @component
+ */
+export default function ActionTile({
+  label = 'Cards',
+  icon,
+  modes = {},
+  style,
+  onPress
+}) {
+  // Resolve tokens
+  const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff';
+  const gap = Number(getVariableByName('actionTile/gap', modes)) || 8;
+  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12;
+  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16;
+  const radius = Number(getVariableByName('actionTile/radius', modes)) || 16;
+
+  // Text tokens
+  const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f';
+  const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14;
+  const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var';
+  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500';
+  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17;
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    width: 168,
+    // Fixed width from design
+    height: 90,
+    // Fixed height from design
+    alignItems: 'flex-start',
+    // ensure content stretches if needed, though design implies fixed size block
+    ...style
+  };
+  const textStyle = {
+    color: textColor,
+    fontSize,
+    fontFamily,
+    fontWeight: fontWeightStr,
+    // Cast to any or TextStyle fontWeight enum if needed
+    lineHeight
+  };
+
+  // Handle Icon Slot: Pass modes safely
+  const renderIcon = () => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      // Pass modes down to the slot child
+      return /*#__PURE__*/React.cloneElement(icon, {
+        modes
+      });
+    }
+    // Default fallback if no icon prop is provided, matching design default
+    if (!icon) {
+      return /*#__PURE__*/_jsx(IconCapsule, {
+        modes: modes
+      });
+    }
+    return icon;
+  };
+  const Content = /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [renderIcon(), /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: label
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onPress,
+      children: Content
+    });
+  }
+  return Content;
+}
+//# sourceMappingURL=ActionTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","TouchableOpacity","getVariableByName","IconCapsule","jsx","_jsx","jsxs","_jsxs","ActionTile","label","icon","modes","style","onPress","backgroundColor","gap","Number","paddingHorizontal","paddingVertical","radius","textColor","fontSize","fontFamily","fontWeightStr","lineHeight","containerStyle","borderRadius","width","height","alignItems","textStyle","color","fontWeight","renderIcon","isValidElement","cloneElement","Content","children"],"sourceRoot":"../../../../src","sources":["components/ActionTile/ActionTile.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAkCC,gBAAgB,QAAQ,cAAc;AAC3F,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,OAAOC,WAAW,MAAM,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmBpD;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,UAAUA,CAAC;EAC/BC,KAAK,GAAG,OAAO;EACfC,IAAI;EACJC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK;EACLC;AACa,CAAC,EAAE;EAChB;EACA,MAAMC,eAAe,GAAGZ,iBAAiB,CAAC,uBAAuB,EAAES,KAAK,CAAC,IAAI,SAAS;EACtF,MAAMI,GAAG,GAAGC,MAAM,CAACd,iBAAiB,CAAC,gBAAgB,EAAES,KAAK,CAAC,CAAC,IAAI,CAAC;EACnE,MAAMM,iBAAiB,GAAGD,MAAM,CAACd,iBAAiB,CAAC,+BAA+B,EAAES,KAAK,CAAC,CAAC,IAAI,EAAE;EACjG,MAAMO,eAAe,GAAGF,MAAM,CAACd,iBAAiB,CAAC,6BAA6B,EAAES,KAAK,CAAC,CAAC,IAAI,EAAE;EAC7F,MAAMQ,MAAM,GAAGH,MAAM,CAACd,iBAAiB,CAAC,mBAAmB,EAAES,KAAK,CAAC,CAAC,IAAI,EAAE;;EAE1E;EACA,MAAMS,SAAS,GAAGlB,iBAAiB,CAAC,uBAAuB,EAAES,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMU,QAAQ,GAAGL,MAAM,CAACd,iBAAiB,CAAC,qBAAqB,EAAES,KAAK,CAAC,CAAC,IAAI,EAAE;EAC9E,MAAMW,UAAU,GAAGpB,iBAAiB,CAAC,uBAAuB,EAAES,KAAK,CAAC,IAAI,aAAa;EACrF,MAAMY,aAAa,GAAGrB,iBAAiB,CAAC,uBAAuB,EAAES,KAAK,CAAC,IAAI,KAAK;EAChF,MAAMa,UAAU,GAAGR,MAAM,CAACd,iBAAiB,CAAC,uBAAuB,EAAES,KAAK,CAAC,CAAC,IAAI,EAAE;EAElF,MAAMc,cAAyB,GAAG;IAC9BX,eAAe;IACfY,YAAY,EAAEP,MAAM;IACpBF,iBAAiB;IACjBC,eAAe;IACfH,GAAG;IACHY,KAAK,EAAE,GAAG;IAAE;IACZC,MAAM,EAAE,EAAE;IAAE;IACZC,UAAU,EAAE,YAAY;IACxB;IACA,GAAGjB;EACP,CAAC;EAED,MAAMkB,SAAoB,GAAG;IACzBC,KAAK,EAAEX,SAAS;IAChBC,QAAQ;IACRC,UAAU;IACVU,UAAU,EAAET,aAAoB;IAAE;IAClCC;EACJ,CAAC;;EAED;EACA,MAAMS,UAAU,GAAGA,CAAA,KAAM;IACrB,iBAAInC,KAAK,CAACoC,cAAc,CAACxB,IAAI,CAAC,EAAE;MAC5B;MACA,oBAAOZ,KAAK,CAACqC,YAAY,CAACzB,IAAI,EAA6B;QAAEC;MAAM,CAAC,CAAC;IACzE;IACA;IACA,IAAI,CAACD,IAAI,EAAE;MACP,oBAAOL,IAAA,CAACF,WAAW;QAACQ,KAAK,EAAEA;MAAM,CAAE,CAAC;IACxC;IACA,OAAOD,IAAI;EACf,CAAC;EAED,MAAM0B,OAAO,gBACT7B,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,cAAe;IAAAY,QAAA,GACvBJ,UAAU,CAAC,CAAC,eACb5B,IAAA,CAACL,IAAI;MAACY,KAAK,EAAEkB,SAAU;MAAAO,QAAA,EAAE5B;IAAK,CAAO,CAAC;EAAA,CACpC,CACT;EAED,IAAII,OAAO,EAAE;IACT,oBACIR,IAAA,CAACJ,gBAAgB;MAACY,OAAO,EAAEA,OAAQ;MAAAwB,QAAA,EAC9BD;IAAO,CACM,CAAC;EAE3B;EAEA,OAAOA,OAAO;AAClB","ignoreList":[]}

package/lib/module/components/ActionTile/ActionTile.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
+import * as ActionTileStories from './ActionTile.stories';
+
+<Meta of={ActionTileStories} />
+
+# ActionTile
+
+A tile component used for dashboard actions, displaying an icon and a label.
+
+
+## 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
+
+```tsx
+import ActionTile from './ActionTile';
+import IconCapsule from '../IconCapsule/IconCapsule';
+
+// Default usage
+<ActionTile label="Cards" />
+
+// With custom icon
+<ActionTile 
+  label="Offers" 
+  icon={<IconCapsule iconName="ic_offers" />} 
+/>
+```
+
+<Canvas of={ActionTileStories.Default} />
+
+<Controls />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`actionTile/background`**
+- **`actionTile/fontFamily`**
+- **`actionTile/fontSize`**
+- **`actionTile/fontWeight`**
+- **`actionTile/foreground`**
+- **`actionTile/gap`**
+- **`actionTile/lineHeight`**
+- **`actionTile/padding/horizontal`**
+- **`actionTile/padding/vertical`**
+- **`actionTile/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/module/components/ActionTile/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default } from './ActionTile';
+//# sourceMappingURL=index.js.map

package/lib/module/components/ActionTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sourceRoot":"../../../../src","sources":["components/ActionTile/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,cAAc","ignoreList":[]}

package/lib/module/components/CtaCard/CtaCard.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import Button from '../Button/Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CtaCard component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ */
+function CtaCard({
+  title = "Lets create your UPI ID",
+  body = "Send and receive money securely.",
+  iconName = "ic_upi_number",
+  buttonLabel = "Get started",
+  onPressButton,
+  modes = {},
+  iconSlot,
+  titleSlot,
+  bodySlot,
+  buttonSlot,
+  style
+}) {
+  // --- Token Resolution ---
+  // Container
+  const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad';
+  const radius = getVariableByName('ctaCard/radius', modes) || 16;
+  const paddingHorizontal = getVariableByName('ctaCard/padding/horizontal', modes) || 20;
+  const paddingVertical = getVariableByName('ctaCard/padding/vertical', modes) || 23;
+  const gap = getVariableByName('ctaCard/gap', modes) || 16;
+
+  // Content Wrap
+  const contentGap = getVariableByName('ctaCard/content/gap', modes) || 8;
+
+  // Title Text
+  const titleColor = getVariableByName('ctaCard/title/color', modes) || '#ffffff';
+  const titleFontFamily = getVariableByName('ctaCard/title/fontFamily', modes) || 'JioType Var';
+  const titleFontSize = getVariableByName('ctaCard/title/fontSize', modes) || 23;
+  const titleLineHeight = getVariableByName('ctaCard/title/lineHeight', modes) || 23;
+
+  // Body Text
+  const bodyColor = getVariableByName('ctaCard/body/color', modes) || '#ffffff';
+  const bodyFontFamily = getVariableByName('ctaCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyFontSize = getVariableByName('ctaCard/body/fontSize', modes) || 14;
+  const bodyLineHeight = getVariableByName('ctaCard/body/lineHeight', modes) || 17;
+
+  // --- Styles ---
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    alignItems: 'flex-start',
+    width: '100%',
+    // Adjust based on layout needs, usually cards take full width available
+    overflow: 'hidden'
+  };
+  const contentWrapStyle = {
+    gap: contentGap,
+    alignItems: 'flex-start',
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: '900' // "Black" in Figma often maps to 900
+  };
+  const bodyStyle = {
+    color: bodyColor,
+    fontFamily: bodyFontFamily,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontWeight: '400' // Regular
+  };
+
+  // --- Slot Helper ---
+  // Helper to clone element with modes if no modes are already present on it (standard in this library)
+  const renderSlot = slot => {
+    if (/*#__PURE__*/React.isValidElement(slot)) {
+      return /*#__PURE__*/React.cloneElement(slot, {
+        modes: {
+          ...modes,
+          ...slot.props.modes
+        }
+      });
+    }
+    return slot;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: contentWrapStyle,
+      children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: iconName,
+        modes: modes
+      }), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/_jsx(Text, {
+        style: bodyStyle,
+        children: body
+      })]
+    }), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onPressButton,
+      modes: modes
+    })]
+  });
+}
+export default CtaCard;
+//# sourceMappingURL=CtaCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","getVariableByName","IconCapsule","Button","jsx","_jsx","jsxs","_jsxs","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","iconSlot","titleSlot","bodySlot","buttonSlot","style","backgroundColor","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","renderSlot","slot","isValidElement","cloneElement","props","children","label","onPress"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}