jfs-components 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","Text","View","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BottomNavItem","iconName","label","modes","onPress","disabled","style","labelStyle","iconColor","iconColorOverride","iconSize","iconSizeOverride","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","isFocused","setIsFocused","isHovered","setIsHovered","pressedStyle","opacity","focusStyle","borderBottomWidth","borderBottomColor","hoverStyle","gap","fontFamily","fontWeightRaw","fontWeight","toString","fontSize","lineHeight","labelColor","resolvedIconColor","resolvedIconSize","baseContainerStyle","alignItems","textStyle","color","textAlign","marginTop","defaultAccessibilityLabel","webProps","restProps","undefined","renderContent","children","name","size","accessibilityElementsHidden","importantForAccessibility","accessibilityRole","selected","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed"],"sourceRoot":"../../../../src","sources":["components/BottomNavItem/BottomNavItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/BottomNavItem/BottomNavItem.mdx

@@ -0,0 +1,70 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BottomNavItemStories from './BottomNavItem.stories';
+import BottomNavItem from './BottomNavItem';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={BottomNavItemStories} />
+
+# BottomNavItem
+
+Bottom navigation item with icon and label stacked vertically.
+
+## 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.
+
+### BottomNavItem / State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={BottomNavItemStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Use `accessibilityLabel` when the visible label is abbreviated; defaults to the label text.',
+    'Expose selection with `accessibilityState.selected` on the active destination.',
+    'Keep disabled items in the tree and pass `disabled` so assistive tech announces state.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Pressable</strong> — tab role container applying opacity on press.</li>
+    <li><strong>Icon</strong> — registry icon hidden from the accessibility tree.</li>
+    <li><strong>Label</strong> — token typography beneath the icon.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use short labels to avoid wrapping; adjust typography through tokens rather than inline styles.',
+    'Only supply `onPress` when actionable; otherwise render as static tab context.',
+    'Let the parent manage selection; do not store selection locally.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={BottomNavItem} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`bottomNavItem/fontFamily`**
+- **`bottomNavItem/fontSize`**
+- **`bottomNavItem/fontWeight`**
+- **`bottomNavItem/gap`**
+- **`bottomNavItem/icon/color`**
+- **`bottomNavItem/icon/size`**
+- **`bottomNavItem/label/color`**
+- **`bottomNavItem/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

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

@@ -0,0 +1,190 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Button component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.label="Button"] - Label text to display when no children are provided
+ * @param {React.ReactNode} [props.children] - Optional custom content to render inside the button. When provided, this is treated as a full-content override and `label`/`labelStyle` are ignored.
+ * @param {Function} [props.renderContent] - Optional render prop that receives the merged label text styles and returns custom content. Preferred when you want custom content but still reuse the token-driven typography.
+ * @param {React.ReactNode} [props.leading] - Optional leading accessory (e.g., icon)
+ * @param {React.ReactNode} [props.trailing] - Optional trailing accessory (e.g., icon)
+ * @param {Object} [props.modes={}] - Mode configuration passed to the token resolver (e.g., {"Button / Size": "M"})
+ * @param {Function} [props.onPress] - Callback triggered when the button is pressed
+ * @param {boolean} [props.disabled=false] - When true, the button cannot be pressed
+ * @param {Object} [props.style] - Optional style overrides for the button container
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+function Button({
+  label = 'Button',
+  children,
+  renderContent,
+  leading,
+  trailing,
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}) {
+  // Resolve design tokens with the provided modes
+  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159';
+  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderWidth = getVariableByName('button/border/size', modes);
+  const radius = getVariableByName('button/radius', modes) || 9999;
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20;
+  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12;
+  const gap = getVariableByName('button/gap', modes) || 8;
+  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System';
+  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700;
+  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 baseLabelTextStyle = {
+    color: textColor,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight
+  };
+  const mergedLabelTextStyle = [baseLabelTextStyle, labelStyle];
+  let content;
+  if (renderContent) {
+    // Preferred extension point: caller fully controls the inner node but we
+    // still provide the token-derived text styles.
+    content = renderContent(mergedLabelTextStyle);
+  } else if (children !== undefined && children !== null) {
+    // Full-content override: label and labelStyle are intentionally ignored.
+    content = children;
+  } else {
+    content = /*#__PURE__*/_jsx(Text, {
+      style: mergedLabelTextStyle,
+      numberOfLines: 1,
+      children: label
+    });
+  }
+  const containerBaseStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    borderWidth: borderWidth ?? 1,
+    borderColor,
+    backgroundColor,
+    gap,
+    opacity: disabled ? 0.5 : 1
+  };
+  const accessoryOffset = gap / 2;
+  const leadingAccessoryStyle = useMemo(() => ({
+    marginRight: accessoryOffset
+  }), [accessoryOffset]);
+  const trailingAccessoryStyle = useMemo(() => ({
+    marginLeft: accessoryOffset
+  }), [accessoryOffset]);
+
+  // Use provided accessibilityLabel, or fall back to label text
+  const defaultAccessibilityLabel = accessibilityLabel || (typeof label === 'string' ? label : undefined);
+
+  // Get web platform support props
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+
+  // Interaction states (placeholders for visuals; tweak later)
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const pressedStyle = {
+    transform: [{
+      scale: 0.995
+    }],
+    backgroundColor: '#b88940'
+  };
+  const focusStyle = {
+    borderWidth: 1,
+    borderColor: '#222'
+  };
+  const hoverStyle = {
+    opacity: 0.95
+  };
+  if (__DEV__) {
+    if (children && labelStyle) {
+      console.warn('[Button] `children` was provided; `labelStyle` will be ignored. ' + 'Use `renderContent` if you need custom content that still reuses the label styles.');
+    }
+    if ((children || renderContent) && !accessibilityLabel && (typeof label !== 'string' || !label)) {
+      console.warn('[Button] Custom content is used without an explicit `accessibilityLabel` or string `label`. ' + 'Screen readers may not announce this button correctly.');
+    }
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    accessibilityState: {
+      disabled,
+      ...(accessibilityState || {})
+    },
+    disabled: disabled,
+    ...(onPress !== undefined ? {
+      onPress
+    } : {}),
+    onPressIn: e => {
+      ;
+      rest?.onPressIn?.(e);
+    },
+    onPressOut: e => {
+      ;
+      rest?.onPressOut?.(e);
+    },
+    onFocus: e => {
+      setIsFocused(true);
+      rest?.onFocus?.(e);
+    },
+    onBlur: e => {
+      setIsFocused(false);
+      rest?.onBlur?.(e);
+    },
+    onHoverIn: e => {
+      setIsHovered(true);
+      rest?.onHoverIn?.(e);
+    },
+    onHoverOut: e => {
+      setIsHovered(false);
+      rest?.onHoverOut?.(e);
+    },
+    style: ({
+      pressed
+    }) => [containerBaseStyle, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null, style],
+    ...webProps,
+    children: [leading ? /*#__PURE__*/_jsx(View, {
+      style: leadingAccessoryStyle,
+      children: leading
+    }) : null, content, trailing ? /*#__PURE__*/_jsx(View, {
+      style: trailingAccessoryStyle,
+      children: trailing
+    }) : null]
+  });
+}
+export default Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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":[]}

package/lib/module/components/Button/Button.mdx

@@ -0,0 +1,105 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+import Button from './Button';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button component that maps directly to the Figma design using design tokens.
+
+## 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.
+
+### Semantic Intent
+- **Modes:** Brand | System
+- **Default:** Brand
+
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Appearance.System
+- **Modes:** positive | warning | negative
+- **Default:** positive
+
+### Context
+- **Modes:** Default | Nudge&Alert
+- **Default:** Default
+
+### Button / Size
+- **Modes:** M | S
+- **Default:** M
+## Usage
+
+<Canvas>
+  <Story of={ButtonStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel` when the visual label is an icon or custom child; otherwise the visible `label` is announced.',
+    'Pair tap actions with `accessibilityHint` when navigation or destructive behavior is not obvious.',
+    'Respect disabled states so screen readers announce `disabled`; avoid removing the control from the tree when disabled.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-driven padding, radius, border.</li>
+    <li><strong>Leading</strong> — optional icon or element before the label.</li>
+    <li>
+      <strong>Label/Content</strong> — by default, a token-styled Text node driven by <code>label</code> and <code>labelStyle</code>;
+      can be replaced via <code>renderContent(styles)</code> (reusing the styles) or fully overridden with <code>children</code>.
+    </li>
+    <li><strong>Trailing</strong> — optional icon or status after the label.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align size/emphasis with adjacent IconButtons and form controls.',
+    'Keep labels short (1–3 words) to avoid truncation; long labels should be handled with `numberOfLines` in a custom child or in `renderContent`.',
+    'Avoid nesting other Pressables inside the button; use leading/trailing slots for icons only.',
+    'When providing `children`, treat it as a full-content override: `label` and `labelStyle` are ignored and you are responsible for typography and accessibility.',
+    'Prefer `renderContent(styles)` when you need custom content but still want to inherit the design-token typography.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Button} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`button/background`**
+- **`button/border/color`**
+- **`button/border/size`**
+- **`button/fontFamily`**
+- **`button/fontSize`**
+- **`button/fontWeight`**
+- **`button/forground`**
+- **`button/gap`**
+- **`button/lineHeight`**
+- **`button/padding/horizontal`**
+- **`button/padding/vertical`**
+- **`button/radius`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Custom content patterns
+
+- Use <code>label</code> (and optional <code>labelStyle</code>) for the standard, token-driven text label.
+- Use <code>renderContent(styles)</code> to take over the inner content while still reusing the merged label text styles passed via <code>styles</code>.
+- Use <code>children</code> only when you want to fully replace the inner content; in this mode <code>label</code> and <code>labelStyle</code> are ignored, and you must supply an appropriate <code>accessibilityLabel</code> when the visual content is non-text or ambiguous.

package/lib/module/components/Card/Card.js

@@ -0,0 +1,167 @@
+"use strict";
+
+import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+/**
+ * Context to share 'modes' with child components like Card.Title and Card.SupportText.
+ * This ensures that nested components can resolve their tokens correctly without 
+ * needing explicit mode prop passing for every child.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CardContext = /*#__PURE__*/createContext({});
+/**
+ * Card component implementation from Figma node 765:6186.
+ * 
+ * Supports a `media` slot (with aspect ratio) and a content area.
+ * Usage:
+ * ```tsx
+ * <Card media={<Image source={...} />} modes={modes}>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ *   <Card.Title>Title</Card.Title>
+ *   <Card.SupportText>Support text</Card.SupportText>
+ * </Card>
+ * ```
+ */
+export function Card({
+  media,
+  children,
+  modes = {},
+  mediaAspectRatio = 154 / 116,
+  style
+}) {
+  // Resolve Card Container Tokens
+  const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
+  const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
+  const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
+  const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
+  const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
+  const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
+  const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+
+  // Resolve Content Wrapper Tokens
+  const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
+  const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
+  const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+
+  // Clone media to pass modes if it's a valid element, facilitating nested style resolution
+  const mediaWithModes = /*#__PURE__*/isValidElement(media) ? /*#__PURE__*/cloneElement(media, {
+    modes: {
+      ...media.props.modes,
+      ...modes
+    }
+  }) : media;
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: radius,
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    overflow: 'hidden' // Ensure border radius clips content
+  };
+  const mediaWrapperStyle = {
+    width: '100%',
+    aspectRatio: mediaAspectRatio,
+    overflow: 'hidden'
+    // Figma has 'bg-[#3a46f7]' on the Ratio definition, but that's a placeholder.
+    // We assume the media content handles its own fill, or we can add a placeholder bg if needed.
+    // For now, we leave it transparent or rely on media.
+  };
+  const contentWrapperStyle = {
+    width: '100%',
+    gap: contentGap,
+    paddingHorizontal: contentPaddingHorizontal,
+    paddingVertical: contentPaddingVertical
+  };
+  return /*#__PURE__*/_jsx(CardContext.Provider, {
+    value: {
+      modes
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [containerStyle, style],
+      children: [media && /*#__PURE__*/_jsx(View, {
+        style: mediaWrapperStyle,
+        children: mediaWithModes
+      }), /*#__PURE__*/_jsx(View, {
+        style: contentWrapperStyle,
+        children: children
+      })]
+    })
+  });
+}
+
+// ----------------------------------------------------------------------------
+// Sub-components
+// ----------------------------------------------------------------------------
+
+/**
+ * Title component for Card content.
+ * Uses tokens: card/title/*
+ */
+function Title({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = useContext(CardContext);
+  const modes = propModes || context.modes || {};
+  const color = getVariableByName('card/title/color', modes) || '#081007';
+  const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
+  const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+
+  // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
+  // We check both keys to be safe.
+  const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
+  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/_jsx(Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+/**
+ * SupportiveText component for Card content.
+ * Uses tokens: card/supportive-text/*
+ */
+function SupportText({
+  children,
+  style,
+  modes: propModes
+}) {
+  const context = useContext(CardContext);
+  const modes = propModes || context.modes || {};
+  const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
+  const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
+  const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
+  const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
+  const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
+  const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
+  const textStyle = {
+    color,
+    fontSize,
+    fontFamily,
+    lineHeight,
+    fontWeight: fontWeight
+  };
+  return /*#__PURE__*/_jsx(Text, {
+    style: [textStyle, style],
+    children: children
+  });
+}
+
+// Attach sub-components to Card
+Card.Title = Title;
+Card.SupportText = SupportText;
+export default Card;
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","isValidElement","cloneElement","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","CardContext","Card","media","children","modes","mediaAspectRatio","style","backgroundColor","borderColor","borderWidth","parseFloat","radius","gap","paddingHorizontal","paddingVertical","contentGap","contentPaddingHorizontal","contentPaddingVertical","mediaWithModes","props","containerStyle","borderRadius","overflow","mediaWrapperStyle","width","aspectRatio","contentWrapperStyle","Provider","value","Title","propModes","context","color","fontSize","fontFamily","lineHeight","rawFontWeight","fontWeight","toString","textStyle","SupportText"],"sourceRoot":"../../../../src","sources":["components/Card/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/Card.mdx

@@ -0,0 +1,88 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CardStories from './Card.stories';
+import Card from './Card';
+import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+import { View, Image, Text } from 'react-native';
+
+<Meta of={CardStories} />
+## 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.
+
+### Gap
+- **Modes:** S | M | L
+- **Default:** S
+## Usage
+
+<Canvas>
+  <Story of={CardStories.Default} />
+</Canvas>
+
+### Example Usage
+
+```tsx
+import { Image } from 'react-native';
+import Card from './components/Card/Card';
+
+function MyCard() {
+  return (
+    <Card 
+      media={
+        <Image 
+          source={{ uri: 'https://picsum.photos/300/200' }} 
+          style={{ width: '100%', height: '100%' }} 
+        />
+      }
+      mediaAspectRatio={1.33} // Optional: defaults to ~1.328
+      style={{ width: 148 }}
+    >
+      <Card.SupportText>Featured</Card.SupportText>
+      <Card.Title>Amazing Card</Card.Title>
+      <Card.SupportText>Subtitle here</Card.SupportText>
+    </Card>
+  );
+}
+```
+
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — Wrapper with token-driven background, border, radius, and padding.</li>
+    <li><strong>Media Slot</strong> — Dedicated area for images or other visual content, controlled by <code>mediaAspectRatio</code>.</li>
+    <li><strong>Content Wrapper</strong> — Layout container for the card's text content with token-driven spacing.</li>
+    <li><strong>Card.Title</strong> — Sub-component for the card's main title, automatically consuming <code>card/title/\*</code> tokens.</li>
+    <li><strong>Card.SupportText</strong> — Sub-component for secondary text, automatically consuming <code>card/supportive-text/\*</code> tokens.</li>
+  </ul>
+</AnatomySection>
+
+## Props
+
+<ArgsTable of={Card} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`card/background/color`**
+- **`card/border/color`**
+- **`card/content/gap`**
+- **`card/content/padding/horizontal`**
+- **`card/content/padding/vertical`**
+- **`card/gap`**
+- **`card/padding-horizontal`**
+- **`card/padding-vertical`**
+- **`card/radius`**
+- **`card/strokeWidth`**
+- **`card/supportive-text/color`**
+- **`card/supportive-text/fontFamily`**
+- **`card/supportive-text/fontSize`**
+- **`card/supportive-text/fontWeight`**
+- **`card/supportive-text/lineHeight`**
+- **`card/title/color`**
+- **`card/title/fontFamily`**
+- **`card/title/fontSize`**
+- **`card/title/fontWeight`**
+- **`card/title/fonwWeight`**
+- **`card/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.