jfs-components 0.0.1

package/lib/commonjs/components/FilterBar/FilterBar.js

@@ -0,0 +1,158 @@
+"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 _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+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); }
+/**
+ * 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;
+
+    // Clone the child with modes prop if it doesn't already have one
+    // or merge with existing modes if it does
+    // Merge order: 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 || [];
+}
+/**
+ * FilterBar component that mirrors the Figma "filterBar" component.
+ *
+ * This component supports:
+ *  - **TextInput** integration with search functionality
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.placeholder='Search'] - Placeholder text for the search input
+ * @param {string} [props.value=''] - Current value of the search input
+ * @param {Function} [props.onChangeText] - Callback function called when text changes
+ * @param {React.ReactNode} [props.children] - Optional custom content to replace the default TextInput. When provided (and `renderInput` is not set), this is treated as a full override and FilterBar will not wire up value or onChangeText.
+ * @param {Function} [props.renderInput] - Optional render prop that receives the input props (placeholder, value, onChangeText, modes, accessibilityLabel/accessibilityHint) and returns a custom input. This takes precedence over `children`.
+ * @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 filter bar
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function FilterBar({
+  placeholder = 'Search',
+  value = '',
+  onChangeText,
+  children,
+  renderInput,
+  modes = {},
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const focusStyle = {
+    borderWidth: isFocused ? 1 : 0,
+    borderColor: isFocused ? '#222' : 'transparent'
+  };
+  // Resolve container tokens
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('filterBar/padding/horizontal', modes) || 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('filterBar/padding/vertical', modes) || 10;
+  const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter';
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    paddingHorizontal,
+    paddingVertical
+  };
+  const fullWidthStyle = {
+    width: '100%'
+  };
+  const defaultInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+    placeholder: placeholder,
+    value: value,
+    ...(onChangeText !== undefined && {
+      onChangeText
+    }),
+    modes: modes,
+    style: fullWidthStyle,
+    accessibilityLabel: resolvedAccessibilityLabel,
+    ...(accessibilityHint !== undefined && {
+      accessibilityHint
+    }),
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  });
+  let processedChildren;
+
+  // Provide focus handlers to renderInput or children so the container can show a focus state.
+  if (renderInput) {
+    processedChildren = renderInput({
+      placeholder,
+      value,
+      onChangeText,
+      modes,
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityHint,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false)
+    });
+  } else if (children) {
+    // Clone custom children and inject onFocus/onBlur where possible.
+    const cloned = cloneChildrenWithModes(_react.default.Children.toArray(children), modes);
+    processedChildren = _react.default.Children.map(cloned, child => {
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+      const existingOnFocus = child.props?.onFocus;
+      const existingOnBlur = child.props?.onBlur;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        ...child.props,
+        onFocus: e => {
+          setIsFocused(true);
+          existingOnFocus?.(e);
+        },
+        onBlur: e => {
+          setIsFocused(false);
+          existingOnBlur?.(e);
+        }
+      });
+    });
+  } else {
+    processedChildren = defaultInput;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, focusStyle, style],
+    accessibilityRole: "search",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    ...rest,
+    children: processedChildren
+  });
+}
+var _default = exports.default = FilterBar;
+//# sourceMappingURL=FilterBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_TextInput","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","cloneChildrenWithModes","children","modes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","FilterBar","placeholder","value","onChangeText","renderInput","style","accessibilityLabel","accessibilityHint","rest","isFocused","setIsFocused","useState","focusStyle","borderWidth","borderColor","paddingHorizontal","getVariableByName","paddingVertical","resolvedAccessibilityLabel","containerStyle","flexDirection","alignItems","width","fullWidthStyle","defaultInput","jsx","onFocus","onBlur","cloned","existingOnFocus","existingOnBlur","View","accessibilityRole","_default","exports"],"sourceRoot":"../../../../src","sources":["components/FilterBar/FilterBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/FilterBar/FilterBar.mdx

@@ -0,0 +1,61 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as FilterBarStories from './FilterBar.stories';
+import FilterBar from './FilterBar';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={FilterBarStories} />
+
+# FilterBar
+
+FilterBar component that hosts a token-styled search input and exposes controlled override hooks.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={FilterBarStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Use `accessibilityLabel` to describe what the search filters (e.g., “Filter transactions”).',
+    'If you supply custom children, they fully replace the default TextInput; ensure they expose textbox or chip roles appropriately and wire `value`/`onChangeText` yourself.',
+    'Prefer the `renderInput` prop when you want to customize the inner input while still receiving placeholder, value, modes, and accessibility props from FilterBar.',
+    'Keep placeholders meaningful; avoid empty placeholder strings.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — padded column wrapper.</li>
+    <li><strong>Input slot</strong> — default TextInput.Search or custom filter controls.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Forward `modes` so nested TextInput inherits the same token set.',
+    'Keep the bar full width; avoid horizontal scrolling for filters.',
+    'When replacing the default input, preserve search semantics (textbox role and hint).',
+  ]}
+/>
+## Props
+
+<ArgsTable of={FilterBar} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`filterBar/padding/horizontal`**
+- **`filterBar/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Custom input patterns
+
+- Use the default configuration (no `children` or `renderInput`) for a token-driven TextInput.Search instance.
+- Use `renderInput` to override just the inner input while still receiving `placeholder`, `value`, `onChangeText`, `modes`, `accessibilityLabel`, and `accessibilityHint` from FilterBar.
+- Use `children` for a full-content replacement of the input area; in this mode FilterBar does not connect `value` or `onChangeText` to your controls, so you must implement those behaviors and accessibility semantics yourself.

package/lib/commonjs/components/IconButton/IconButton.js

@@ -0,0 +1,168 @@
+"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); }
+/**
+ * IconButton component that displays an icon within a pressable button container.
+ * 
+ * This component displays an icon within a styled button container that can be pressed.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+ * @param {Function} [props.onPress] - Callback function called when the button is pressed
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled
+ * @param {Object} [props.style] - Additional styles for the container
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ * 
+ * @example
+ * ```jsx
+ * // Default icon button
+ * <IconButton modes={{}} />
+ * 
+ * // Custom icon with size mode
+ * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
+ * 
+ * // With appearance mode
+ * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
+ * 
+ * // With accessibility label
+ * <IconButton iconName="ic_search" accessibilityLabel="Search" accessibilityHint="Opens the search screen" />
+ * ```
+ */
+function IconButton({
+  iconName = "ic_card",
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [isPressed, setIsPressed] = (0, _react.useState)(false);
+
+  // Resolve design tokens using only the Figma-defined base tokens for Icon Button (node 72:14)
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('iconButton/radius', modes) ?? 9999;
+  const padding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', modes) ?? 12;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/background', modes) ?? '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/color', modes) ?? '#ffffff00';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', modes) ?? 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', modes) ?? '#0f0d0a';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', modes) ?? 18;
+
+  // Convert radius to React Native format (if 9999, use padding*2 for perfect circle)
+  // For a button, the size is determined by padding, so radius should be padding*2 for a circle
+  const buttonSize = padding * 2 + iconSize;
+  const borderRadius = radius === 9999 ? buttonSize / 2 : radius;
+
+  // Container base style
+  const baseContainerStyle = {
+    width: buttonSize,
+    height: buttonSize,
+    borderRadius: borderRadius,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: padding,
+    opacity: disabled ? 0.5 : 1
+  };
+
+  // Generate default accessibility label from icon name if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+
+  // Get web platform support props
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    onPressIn: e => {
+      setIsPressed(true);
+      rest?.onPressIn?.(e);
+    },
+    onPressOut: e => {
+      setIsPressed(false);
+      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
+    }) => {
+      const pressedStyle = pressed && !disabled ? {
+        opacity: 0.7
+      } : null;
+      const hoverStyle = isHovered && !disabled ? {
+        opacity: 0.85
+      } : null;
+      const focusStyle = isFocused && !disabled ? {
+        borderWidth: 1,
+        borderColor: '#222'
+      } : null;
+      const manualPressStyle = isPressed && !disabled ? {
+        transform: [{
+          scale: 0.98
+        }]
+      } : null;
+      return [baseContainerStyle, style, pressedStyle, hoverStyle, focusStyle, manualPressStyle];
+    },
+    ...webProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+var _default = exports.default = IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/commonjs/components/IconButton/IconButton.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","IconButton","iconName","modes","onPress","disabled","style","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","isFocused","setIsFocused","useState","isHovered","setIsHovered","isPressed","setIsPressed","radius","getVariableByName","padding","backgroundColor","borderColor","borderSize","iconColor","iconSize","buttonSize","borderRadius","baseContainerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","opacity","defaultAccessibilityLabel","replace","l","toUpperCase","webProps","usePressableWebSupport","restProps","undefined","jsx","Pressable","accessibilityRole","onPressIn","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","pressedStyle","hoverStyle","focusStyle","manualPressStyle","transform","scale","children","name","size","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconButton/IconButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/IconButton/IconButton.mdx

@@ -0,0 +1,76 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as IconButtonStories from './IconButton.stories';
+import IconButton from './IconButton';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={IconButtonStories} />
+
+# IconButton
+
+IconButton component that displays an icon within a pressable button container.
+
+## 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.
+
+### Button / Size
+- **Modes:** M | S
+- **Default:** M
+
+### Emphasis
+- **Modes:** High | Medium | Low
+- **Default:** High
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={IconButtonStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` to describe the action; icon names are not announced.',
+    'Use `accessibilityState.disabled` for disabled buttons instead of removing them.',
+    'Add `accessibilityHint` for destructive or navigational actions.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — circular pressable with padding, border, and background tokens.</li>
+    <li><strong>Icon</strong> — centered vector icon hidden from the accessibility tree.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align size/appearance with Buttons and AppBars.',
+    'Keep content to a single icon; avoid nesting text or additional pressables.',
+    'Pair with nearby labels or tooltips in dense layouts to reduce ambiguity.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={IconButton} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`iconButton/background`**
+- **`iconButton/border/color`**
+- **`iconButton/border/size`**
+- **`iconButton/icon/color`**
+- **`iconButton/icon/size`**
+- **`iconButton/padding`**
+- **`iconButton/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * IconCapsule component that displays an icon within a circular or rounded container.
+ * 
+ * This component displays an icon (default: ic_card) within a styled capsule container.
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
+ * 
+ * @example
+ * ```jsx
+ * // Default icon (ic_card)
+ * <IconCapsule modes={{}} />
+ * 
+ * // Custom icon
+ * <IconCapsule iconName="ic_rupee" modes={{}} />
+ * 
+ * // With appearance mode
+ * <IconCapsule modes={{"Appearance": "Secondary"}} />
+ * 
+ * // With accessibility label
+ * <IconCapsule iconName="ic_card" accessibilityLabel="Credit card icon" />
+ * ```
+ */
+function IconCapsule({
+  iconName = "ic_card",
+  modes = {},
+  accessibilityLabel,
+  accessibilityRole = "image",
+  ...rest
+}) {
+  // Resolve design tokens using the provided modes
+  const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleborder/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleborder/size', modes) || 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsuleicon/color', modes) || '#0f0d0a';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
+
+  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
+  const borderRadius = radius === 9999 ? size / 2 : radius;
+
+  // Container style
+  const containerStyle = {
+    width: size,
+    height: size,
+    borderRadius: borderRadius,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    backgroundColor: backgroundColor,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // Generate default accessibility label from icon name if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyle,
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: defaultAccessibilityLabel,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
+      size: iconSize,
+      color: iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    })
+  });
+}
+var _default = exports.default = IconCapsule;
+//# sourceMappingURL=IconCapsule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_Icon","_jsxRuntime","e","__esModule","default","IconCapsule","iconName","modes","accessibilityLabel","accessibilityRole","rest","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","jsx","View","style","children","name","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAmC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,GAAG,CAAC,CAAC;EACVC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB;EACA,MAAMC,IAAI,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAEL,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMM,MAAM,GAAG,IAAAD,yCAAiB,EAAC,oBAAoB,EAAEL,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMO,eAAe,GAAG,IAAAF,yCAAiB,EAAC,wBAAwB,EAAEL,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMQ,WAAW,GAAG,IAAAH,yCAAiB,EAAC,yBAAyB,EAAEL,KAAK,CAAC,IAAI,qBAAqB;EAChG,MAAMS,UAAU,GAAG,IAAAJ,yCAAiB,EAAC,wBAAwB,EAAEL,KAAK,CAAC,IAAI,CAAC;EAC1E,MAAMU,SAAS,GAAG,IAAAL,yCAAiB,EAAC,uBAAuB,EAAEL,KAAK,CAAC,IAAI,SAAS;EAChF,MAAMW,QAAQ,GAAG,IAAAN,yCAAiB,EAAC,uBAAuB,EAAEL,KAAK,CAAC,IAAI,EAAE;;EAExE;EACA,MAAMY,YAAY,GAAGN,MAAM,KAAK,IAAI,GAAGF,IAAI,GAAG,CAAC,GAAGE,MAAM;;EAExD;EACA,MAAMO,cAAyB,GAAG;IAChCC,KAAK,EAAEV,IAAI;IACXW,MAAM,EAAEX,IAAI;IACZQ,YAAY,EAAEA,YAAY;IAC1BI,WAAW,EAAEP,UAAU;IACvBD,WAAW,EAAEA,WAAW;IACxBD,eAAe,EAAEA,eAAe;IAChCU,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;;EAED;EACA,MAAMC,yBAAyB,GAAGnB,kBAAkB,IAAIF,QAAQ,CAACsB,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAEC,CAAC,IAAIA,CAAC,CAACC,WAAW,CAAC,CAAC,CAAC;EAE9I,oBACE,IAAA7B,WAAA,CAAA8B,GAAA,EAACjC,YAAA,CAAAkC,IAAI;IACHC,KAAK,EAAEb,cAAe;IACtBX,iBAAiB,EAAEA,iBAAkB;IACrCD,kBAAkB,EAAEmB,yBAA0B;IAAA,GAC1CjB,IAAI;IAAAwB,QAAA,eAER,IAAAjC,WAAA,CAAA8B,GAAA,EAAC/B,KAAA,CAAAI,OAAI;MACH+B,IAAI,EAAE7B,QAAS;MACfK,IAAI,EAAEO,QAAS;MACfkB,KAAK,EAAEnB,SAAU;MACjBoB,2BAA2B,EAAE,IAAK;MAClCC,yBAAyB,EAAC;IAAI,CAC/B;EAAC,CACE,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEcC,WAAW","ignoreList":[]}

package/lib/commonjs/components/IconCapsule/IconCapsule.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as IconCapsuleStories from './IconCapsule.stories';
+import IconCapsule from './IconCapsule';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={IconCapsuleStories} />
+
+# IconCapsule
+
+IconCapsule component that displays an icon within a circular or rounded container.
+
+## 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.
+
+### Icon Capsule Size
+- **Modes:** M | L | S
+- **Default:** M
+
+### Appearance.Brand
+- **Modes:** Primary | Secondary | Neutral
+- **Default:** Primary
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={IconCapsuleStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel` when the icon conveys meaning; defaults to the icon name.',
+    'Use `accessibilityRole="image"` for decorative usage; switch to `button` only when wrapping separately.',
+    'Avoid relying on color alone—pair with adjacent text or tooltip for meaning.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — circular/rounded capsule with tokenized size and border.</li>
+    <li><strong>Icon</strong> — centered registry icon hidden from the accessibility tree.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use for status badges or supporting visuals; keep tappable behavior on a parent control.',
+    'Match capsule size to surrounding controls via `modes` instead of manual width/height.',
+    'Keep to one icon; avoid stacking multiple glyphs inside.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={IconCapsule} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`iconCapsule/background`**
+- **`iconCapsule/icon/size`**
+- **`iconCapsule/radius`**
+- **`iconCapsule/size`**
+- **`iconCapsuleborder/color`**
+- **`iconCapsuleborder/size`**
+- **`iconCapsuleicon/color`**
+
+All tokens support mode-based theming through the `modes` prop.