jfs-components 0.0.1

package/lib/commonjs/components/BottomNav/BottomNav.js

@@ -0,0 +1,145 @@
+"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 _BottomNavItem = _interopRequireDefault(require("../BottomNavItem/BottomNavItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Bottom navigation bar composed of multiple `BottomNavItem`s.
+ *
+ * Styling is resolved from Figma design tokens via `getVariableByName`, with
+ * the `modes` object passed through just like other components in this
+ * library.
+ *
+ * @component
+ * @param {Object} props
+ * @param {Array} [props.items] - Items to render. Each item can include:
+ *  - key: unique key
+ *  - label: string
+ *  - iconName: icon from registry
+ *  - onPress: optional handler
+ *  - iconColor/iconSize/disabled/style/labelStyle
+ * @param {Object} [props.modes={}] - Modes forwarded to token resolver.
+ * @param {Function} [props.onItemPress] - Called with the item when pressed.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the navigation bar
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function BottomNav({
+  items = [{
+    key: 'home',
+    label: 'Home',
+    iconName: 'ic_home'
+  }, {
+    key: 'finances',
+    label: 'Finances',
+    iconName: 'ic_rupee'
+  }, {
+    key: 'pay',
+    label: 'Pay',
+    iconName: 'ic_scan_qr_code'
+  }, {
+    key: 'invest',
+    label: 'Invest',
+    iconName: 'ic_rupee_coin'
+  }, {
+    key: 'explore',
+    label: 'Explore',
+    iconName: 'ic_search'
+  }],
+  modes = {},
+  onItemPress,
+  style,
+  accessibilityLabel = "Bottom navigation",
+  accessibilityHint,
+  ...rest
+}) {
+  // Resolve container styling tokens
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/background', modes) || '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/color', modes) || '#cccfd1';
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/border/width', modes) ?? 1;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/padding/top', modes) ?? 10;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/padding/bottom', modes) ?? 23;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('bottomNav/padding/horizontal', modes) ?? 16;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingHorizontal,
+    borderTopWidth: borderWidth,
+    borderTopColor: borderColor,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomWidth: 0
+  };
+  const renderItem = item => {
+    const itemModes = item.modes ? {
+      ...modes,
+      ...item.modes
+    } : modes;
+    const handlePress = () => {
+      if (item.onPress) {
+        item.onPress();
+      }
+      if (onItemPress) {
+        onItemPress(item);
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomNavItem.default, {
+      ...(item.iconName !== undefined ? {
+        iconName: item.iconName
+      } : {}),
+      ...(item.label !== undefined ? {
+        label: item.label
+      } : {}),
+      modes: itemModes,
+      ...(item.onPress !== undefined || onItemPress !== undefined ? {
+        onPress: handlePress,
+        // Provide basic keyboard-on-web support: call press handler for Enter/Space
+        onKeyPress: e => {
+          const key = e?.nativeEvent?.key || (e?.key ?? '');
+          if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
+            handlePress();
+          }
+          ;
+          item?.onKeyPress?.(e);
+        }
+      } : {}),
+      ...(item.disabled !== undefined ? {
+        disabled: item.disabled
+      } : {}),
+      style: [{
+        flex: 1
+      }, item.style],
+      ...(item.labelStyle !== undefined ? {
+        labelStyle: item.labelStyle
+      } : {}),
+      ...(item.iconColor !== undefined ? {
+        iconColor: item.iconColor
+      } : {}),
+      ...(item.iconSize !== undefined ? {
+        iconSize: item.iconSize
+      } : {})
+    }, item.key || item.label);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : {}),
+    ...rest,
+    children: items.map(renderItem)
+  });
+}
+var _default = exports.default = BottomNav;
+//# sourceMappingURL=BottomNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_BottomNavItem","_jsxRuntime","e","__esModule","default","BottomNav","items","key","label","iconName","modes","onItemPress","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","getVariableByName","borderColor","borderWidth","paddingTop","paddingBottom","paddingHorizontal","containerStyle","flexDirection","alignItems","borderTopWidth","borderTopColor","borderLeftWidth","borderRightWidth","borderBottomWidth","renderItem","item","itemModes","handlePress","onPress","jsx","undefined","onKeyPress","nativeEvent","disabled","flex","labelStyle","iconColor","iconSize","View","accessibilityRole","children","map","_default","exports"],"sourceRoot":"../../../../src","sources":["components/BottomNav/BottomNav.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/BottomNav/BottomNav.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BottomNavStories from './BottomNav.stories';
+import BottomNav from './BottomNav';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={BottomNavStories} />
+
+# BottomNav
+
+Bottom navigation bar composed of multiple `BottomNavItem`s.
+
+## 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
+
+<Canvas>
+  <Story of={BottomNavStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel`/`accessibilityHint` on the bar to describe the destinations it controls.',
+    'Mark the active destination by passing `accessibilityState={{ selected: true }}` to the active `BottomNavItem`.',
+    'Keep item labels concise (1–2 words); icons alone are not announced.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-styled bar with padding and border.</li>
+    <li><strong>Items</strong> — `BottomNavItem` children laid out evenly.</li>
+    <li><strong>Press handling</strong> — `onItemPress` invoked with the tapped item.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep 3–5 items to preserve tap target width; give each item a stable `key`.',
+    'Forward shared `modes` so the bar and items stay in sync across themes.',
+    'Avoid wrapping the bar in another Pressable; rely on item-level handlers.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={BottomNav} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`bottomNav/background`**
+- **`bottomNav/border/color`**
+- **`bottomNav/border/width`**
+- **`bottomNav/padding/bottom`**
+- **`bottomNav/padding/horizontal`**
+- **`bottomNav/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/BottomNavItem/BottomNavItem.js

@@ -0,0 +1,173 @@
+"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); }
+/**
+ * Bottom navigation item with icon and label stacked vertically.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName`,
+ * with the `modes` object passed straight through (same pattern as the rest
+ * of the library). Defaults reflect the Figma design for the base state.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
+ * @param {string} [props.label="Home"] - Text label displayed under the icon.
+ * @param {Object} [props.modes={}] - Modes object forwarded to token resolver.
+ * @param {Function} [props.onPress] - Optional press handler.
+ * @param {boolean} [props.disabled=false] - When true, lowers opacity and disables press.
+ * @param {Object} [props.style] - Optional style overrides for the outer container.
+ * @param {Object} [props.labelStyle] - Optional style overrides for the label text.
+ * @param {string} [props.iconColor] - Optional explicit icon color override.
+ * @param {number} [props.iconSize] - Optional explicit icon size override.
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ */
+function BottomNavItem({
+  iconName = 'ic_home',
+  label = 'Home',
+  modes = {},
+  onPress,
+  disabled = false,
+  style,
+  labelStyle,
+  iconColor: iconColorOverride,
+  iconSize: iconSizeOverride,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}) {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const pressedStyle = {
+    opacity: 0.7
+  };
+  const focusStyle = {
+    borderBottomWidth: 2,
+    borderBottomColor: '#222'
+  };
+  const hoverStyle = {
+    opacity: 0.85
+  };
+  // Resolve spacing and typography
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/gap', modes) ?? 6;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontWeight', modes) ?? 500;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontSize', modes) ?? 11;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/lineHeight', modes) ?? 14;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes) || '#0d0d0f';
+
+  // Resolve icon appearance
+  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes) || '#ad8545';
+  const resolvedIconSize = iconSizeOverride ?? (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/size', modes) ?? 24;
+  const baseContainerStyle = {
+    alignItems: 'center',
+    opacity: disabled ? 0.5 : 1
+  };
+  const textStyle = {
+    color: labelColor,
+    fontFamily,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    textAlign: 'center',
+    marginTop: gap
+  };
+
+  // Use provided accessibilityLabel or fall back to label
+  const defaultAccessibilityLabel = accessibilityLabel || label;
+
+  // Get web platform support props (only used when onPress is defined)
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
+      size: resolvedIconSize,
+      color: resolvedIconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, labelStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    })]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [baseContainerStyle, style],
+      accessibilityRole: "tab",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled,
+        ...accessibilityState
+      },
+      ...rest,
+      children: renderContent()
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    accessibilityRole: "tab",
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      selected: accessibilityState?.selected,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    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
+    }) => [baseContainerStyle, style, pressed && !disabled ? pressedStyle : null, isHovered && !disabled ? hoverStyle : null, isFocused && !disabled ? focusStyle : null],
+    ...webProps,
+    children: renderContent()
+  });
+}
+var _default = exports.default = BottomNavItem;
+//# sourceMappingURL=BottomNavItem.js.map

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

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

@@ -0,0 +1,195 @@
+"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 _webPlatformUtils = require("../../utils/web-platform-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * 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 = (0, _figmaVariablesResolver.getVariableByName)('button/background', modes) || '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('button/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('button/radius', modes) || 9999;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', modes) || 20;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('button/padding/vertical', modes) || 12;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('button/gap', modes) || 8;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('button/fontFamily', modes) || 'System';
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('button/fontWeight', modes) || 700;
+  const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('button/lineHeight', modes) || 19;
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('button/fontSize', modes) || 16;
+  const textColor = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _react.useMemo)(() => ({
+    marginRight: accessoryOffset
+  }), [accessoryOffset]);
+  const trailingAccessoryStyle = (0, _react.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 = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+
+  // Interaction states (placeholders for visuals; tweak later)
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: leadingAccessoryStyle,
+      children: leading
+    }) : null, content, trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: trailingAccessoryStyle,
+      children: trailing
+    }) : null]
+  });
+}
+var _default = exports.default = Button;
+//# sourceMappingURL=Button.js.map