jfs-components 0.0.3 → 0.0.5

package/lib/commonjs/Containers.js

@@ -4,12 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.storyContainer = void 0;
-var _native = _interopRequireDefault(require("styled-components/native"));
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const storyContainer = exports.storyContainer = _native.default.View`
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-`;
+const storyContainer = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.container,
+  ...props
+});
+exports.storyContainer = storyContainer;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 //# sourceMappingURL=Containers.js.map

package/lib/commonjs/Containers.js.map

@@ -1 +1 @@
-{"version":3,"names":["_native","_interopRequireDefault","require","e","__esModule","default","storyContainer","exports","styled","View"],"sourceRoot":"../../src","sources":["Containers.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6C,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,eAAM,CAACC,IAAI;AACzC;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_jsxRuntime","e","__esModule","default","storyContainer","props","jsx","View","style","styles","container","exports","StyleSheet","create","height","width","alignItems","justifyContent"],"sourceRoot":"../../src","sources":["Containers.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAgE,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEzD,MAAMG,cAAc,GAAIC,KAAgB,iBAC7C,IAAAL,WAAA,CAAAM,GAAA,EAACP,YAAA,CAAAQ,IAAI;EAACC,KAAK,EAAIC,MAAM,CAACC,SAAW;EAAA,GAAML;AAAK,CAAI,CACjD;AAACM,OAAA,CAAAP,cAAA,GAAAA,cAAA;AAEF,MAAMK,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/Accordion/Accordion.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _webPlatformUtils = require("../../utils/web-platform-utils");
+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); }
+// Enable LayoutAnimation on Android
+if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  _reactNative.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.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.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.default.Children.toArray(childChildren), modes) : undefined;
+
+    // Clone element with modes and processed children
+    return /*#__PURE__*/_react.default.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] = (0, _react.useState)(defaultExpanded);
+
+  // Determine if controlled or uncontrolled
+  const isControlled = controlledExpanded !== undefined;
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+
+  // Hover state for web
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+
+  // Handle toggle
+  const handleToggle = () => {
+    if (disabled) return;
+
+    // Animate the layout change
+    _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+    if (isControlled) {
+      onExpandedChange?.(!isExpanded);
+    } else {
+      setInternalExpanded(!isExpanded);
+      onExpandedChange?.(!isExpanded);
+    }
+  };
+
+  // Resolve design tokens
+  const titleColor = disabled ? '#999999' : (0, _figmaVariablesResolver.getVariableByName)('accordion/title/color', modes) || '#0d0d0d';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontSize', modes) || 18;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/lineHeight', modes) || 20;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontFamily', modes) || 'System';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/color', modes) || '#141414';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/size', modes) || 24;
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/gap', modes) || 12;
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/padding/vertical', modes) || 24;
+  const headerBackground = isHovered && !disabled ? '#f2f2f2' : (0, _figmaVariablesResolver.getVariableByName)('accordion/header/background', modes) || 'transparent';
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/gap', modes) || 12;
+  const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/top', modes) || 8;
+  const contentPaddingBottom = isExpanded ? (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/bottom', modes) ?? 24 : 8;
+  const borderColor = (0, _figmaVariablesResolver.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 = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: {},
+    onPress: handleToggle,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+
+  // Process children to pass modes
+  const processedChildren = children ? cloneChildrenWithModes(_react.default.Children.toArray(children), modes) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: isExpanded ? 'ic_minus' : 'ic_add',
+        size: iconSize,
+        color: disabled ? '#999999' : iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), isExpanded && processedChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: contentStyle,
+      children: processedChildren
+    })]
+  });
+}
+var _default = exports.default = Accordion;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","cloneChildrenWithModes","children","modes","result","React","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","useState","isControlled","isExpanded","isHovered","setIsHovered","handleToggle","LayoutAnimation","configureNext","Presets","easeInEaseOut","titleColor","getVariableByName","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","usePressableWebSupport","restProps","onPress","jsxs","View","Pressable","accessibilityRole","onHoverIn","onHoverOut","pressed","opacity","jsx","Text","numberOfLines","name","size","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Accordion/Accordion.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Accordion/Accordion.mdx

@@ -0,0 +1,123 @@
+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/commonjs/components/ActionFooter/ActionFooter.mdx

@@ -99,3 +99,4 @@ All tokens support mode-based theming through the `modes` prop.
 
 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/ActionTile/ActionTile.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ActionTile;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * ActionTile component from Figma design.
+ * Displays an icon (defaulting to IconCapsule) and a label.
+ * 
+ * @component
+ */
+function ActionTile({
+  label = 'Cards',
+  icon,
+  modes = {},
+  style,
+  onPress
+}) {
+  // Resolve tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/background', modes) || '#ffffff';
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/gap', modes)) || 8;
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/horizontal', modes)) || 12;
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/vertical', modes)) || 16;
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/radius', modes)) || 16;
+
+  // Text tokens
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/foreground', modes) || '#0d0d0f';
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/fontSize', modes)) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontFamily', modes) || 'JioType Var';
+  const fontWeightStr = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontWeight', modes) || '500';
+  const lineHeight = Number((0, _figmaVariablesResolver.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.default.isValidElement(icon)) {
+      // Pass modes down to the slot child
+      return /*#__PURE__*/_react.default.cloneElement(icon, {
+        modes
+      });
+    }
+    // Default fallback if no icon prop is provided, matching design default
+    if (!icon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        modes: modes
+      });
+    }
+    return icon;
+  };
+  const Content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: containerStyle,
+    children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      children: label
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onPress,
+      children: Content
+    });
+  }
+  return Content;
+}
+//# sourceMappingURL=ActionTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_jsxRuntime","e","__esModule","default","ActionTile","label","icon","modes","style","onPress","backgroundColor","getVariableByName","gap","Number","paddingHorizontal","paddingVertical","radius","textColor","fontSize","fontFamily","fontWeightStr","lineHeight","containerStyle","borderRadius","width","height","alignItems","textStyle","color","fontWeight","renderIcon","React","isValidElement","cloneElement","jsx","Content","jsxs","View","children","Text","TouchableOpacity"],"sourceRoot":"../../../../src","sources":["components/ActionTile/ActionTile.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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/commonjs/components/ActionTile/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ActionTile.default;
+  }
+});
+var _ActionTile = _interopRequireDefault(require("./ActionTile"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ActionTile","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/ActionTile/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}