jfs-components 0.0.1

package/lib/commonjs/components/Avatar/Avatar.js

@@ -0,0 +1,209 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
+
+/**
+ * Avatar component that displays either an image or a monogram.
+ * 
+ * This component supports two styles:
+ * - Image: Displays a user's profile picture
+ * - Monogram: Displays user initials in a circular background
+ * 
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.monogram="MS"] - The initials to display when style is "Monogram"
+ * @param {"Image"|"Monogram"} [props.style="Image"] - The style of the avatar
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Avatar Size": "M"})
+ * @param {string} [props.imageSource] - Optional image source for Image style (defaults to built-in image)
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses monogram or "User avatar"
+ * 
+ * @example
+ * ```jsx
+ * // Image style
+ * <Avatar style="Image" modes={{"Avatar Size": "M"}} />
+ * 
+ * // Monogram style
+ * <Avatar style="Monogram" monogram="JD" modes={{"Avatar Size": "L"}} />
+ * ```
+ */
+
+function Avatar({
+  monogram = "MS",
+  style = "Image",
+  modes = {},
+  imageSource,
+  accessibilityLabel,
+  ...rest
+}) {
+  // Resolve design tokens using the provided modes
+  const size = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/background', modes) || '#dbcfff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/color', modes) || '#5c00b5';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontSize', modes) || 12;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/lineHeight', modes) || 14;
+  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontWeight', modes) || 500;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontFamily', modes) || 'Inter';
+
+  // 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,
+    overflow: 'hidden',
+    ...(style === 'Monogram' ? {
+      backgroundColor: backgroundColor
+    } : {})
+  };
+
+  // Image container style
+  const imageContainerStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: borderRadius,
+    overflow: 'hidden'
+  };
+
+  // Image style
+  const imageStyle = {
+    width: '100%',
+    height: '100%',
+    borderRadius: borderRadius
+  };
+
+  // Monogram container style
+  const monogramContainerStyle = {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 7,
+    paddingHorizontal: 5
+  };
+
+  // Monogram text style
+  const monogramTextStyle = {
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight,
+    fontFamily: labelFontFamily,
+    color: labelColor,
+    textAlign: 'center'
+  };
+
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || (style === "Monogram" ? `Avatar with initials ${monogram}` : "User avatar");
+  // Interaction placeholders for press/focus
+  const [isPressed, setIsPressed] = _react.default.useState(false);
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const pressedStyle = isPressed ? {
+    transform: [{
+      scale: 0.98
+    }]
+  } : null;
+  const focusStyle = isFocused ? {
+    borderColor: '#222',
+    borderWidth: 1
+  } : null;
+  if (style === "Monogram") {
+    const Wrapper = rest?.onPress ? _reactNative.Pressable : _reactNative.View;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      style: [containerStyle, pressedStyle, focusStyle],
+      accessibilityRole: "image",
+      accessibilityLabel: defaultAccessibilityLabel,
+      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);
+      },
+      ...rest,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: monogramContainerStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: monogramTextStyle,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: monogram
+        })
+      })
+    });
+  }
+
+  // Normalize imageSource: if it's a string (URL), convert to { uri: string } format
+  // Otherwise, use it as-is (could be require() result or already { uri: ... } object)
+  const normalizedImageSource = _react.default.useMemo(() => {
+    if (!imageSource) return avatarImage;
+    if (typeof imageSource === 'string') {
+      // If it's a string, treat it as a URL
+      return {
+        uri: imageSource
+      };
+    }
+    // Otherwise, use it as-is (could be require() result or { uri: ... } object)
+    return imageSource;
+  }, [imageSource]);
+  const Wrapper = rest?.onPress ? _reactNative.Pressable : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    style: [containerStyle, pressedStyle, focusStyle],
+    accessibilityRole: "image",
+    accessibilityLabel: defaultAccessibilityLabel,
+    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);
+    },
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: imageContainerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: normalizedImageSource,
+        resizeMode: "cover",
+        style: imageStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    })
+  });
+}
+var _default = exports.default = Avatar;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","avatarImage","Avatar","monogram","style","modes","imageSource","accessibilityLabel","rest","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","labelColor","labelFontSize","labelLineHeight","labelFontWeight","labelFontFamily","borderRadius","containerStyle","width","height","borderWidth","overflow","imageContainerStyle","imageStyle","monogramContainerStyle","justifyContent","alignItems","paddingVertical","paddingHorizontal","monogramTextStyle","fontSize","lineHeight","fontWeight","fontFamily","color","textAlign","defaultAccessibilityLabel","isPressed","setIsPressed","React","useState","isFocused","setIsFocused","pressedStyle","transform","scale","focusStyle","Wrapper","onPress","Pressable","View","jsx","accessibilityRole","onPressIn","onPressOut","onFocus","onBlur","children","Text","accessibilityElementsHidden","importantForAccessibility","normalizedImageSource","useMemo","uri","Image","source","resizeMode","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Avatar/Avatar.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from './Avatar.stories';
+import Avatar from './Avatar';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+Avatar component that displays either an image or a monogram.
+
+## 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.
+
+### Avatar Size
+- **Modes:** L | M | S
+- **Default:** L
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={AvatarStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Always set `accessibilityLabel` so assistive tech can announce the user or account represented.',
+    'Treat Avatar as non-interactive; wrap it in a Button/IconButton if you need tap behavior so the control gets a proper role.',
+    'For monograms, keep initials to 2–3 characters to avoid truncation and rely on the label for pronunciation.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Container</strong> — token-driven size, radius, border.</li>
+    <li><strong>Image</strong> — fills the container; hidden from the accessibility tree.</li>
+    <li><strong>Monogram</strong> — centered initials with token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use `modes` to align Avatar sizing with Button/IconButton heights in the same layout.',
+    'Keep the component square; prefer overriding via provided tokens instead of forcing width/height independently.',
+    'Provide a valid `imageSource` object or URL; fall back image is bundled for Storybook only.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={Avatar} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`avatar/background`**
+- **`avatar/border/color`**
+- **`avatar/border/size`**
+- **`avatar/label/color`**
+- **`avatar/label/fontFamily`**
+- **`avatar/label/fontSize`**
+- **`avatar/label/fontWeight`**
+- **`avatar/label/lineHeight`**
+- **`avatar/radius`**
+- **`avatar/size`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function AvatarGroup({
+  modes = {},
+  children,
+  style,
+  ...rest
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes) || 0;
+  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
+  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/left', modes) || 0;
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/right', modes) || 0;
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/top', modes) || 0;
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/bottom', modes) || 0;
+  const validChildren = _react.default.Children.toArray(children).filter(_react.default.isValidElement);
+  const totalChildren = validChildren.length;
+
+  // shared geometry logic
+  const r = avatarSize / 2;
+  const gapInt = parseInt(gap.toString(), 10);
+  const avatarSizeInt = parseInt(avatarSize.toString(), 10);
+  const borderSizeInt = parseInt(borderSize.toString(), 10);
+  const avatarRadiusInt = parseInt(avatarRadius.toString(), 10);
+  const nextAvatarX = avatarSizeInt + gapInt;
+  // If radius is 9999 (full circle), use actual radius r.
+  // Effective radius for the hole includes the border of the next avatar.
+  const effectiveRadius = avatarRadiusInt >= 9999 ? r : avatarRadiusInt;
+  const holeRadius = effectiveRadius + borderSizeInt;
+  const holeCenter = {
+    x: nextAvatarX + r,
+    y: r
+  };
+
+  // Native Mask Path
+  const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
+  const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
+  const maskPath = `${rectPath} ${circlePath}`;
+
+  // Web Mask Gradient
+  // radial-gradient(circle at CX CY, transparent R, black R+1)
+  const webMaskImage = `radial-gradient(circle at ${holeCenter.x}px ${holeCenter.y}px, transparent ${holeRadius}px, black ${holeRadius + 0.5}px)`;
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: parseInt(paddingLeft.toString(), 10),
+    paddingRight: parseInt(paddingRight.toString(), 10),
+    paddingTop: parseInt(paddingTop.toString(), 10),
+    paddingBottom: parseInt(paddingBottom.toString(), 10)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    ...rest,
+    children: validChildren.map((child, index) => {
+      const isLast = index === totalChildren - 1;
+      const element = child;
+      const elementProps = element.props || {};
+      const clonedChild = /*#__PURE__*/_react.default.cloneElement(element, {
+        modes: {
+          ...modes,
+          ...(elementProps.modes || {})
+        }
+      });
+      if (isLast) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            zIndex: index
+          },
+          children: clonedChild
+        }, index);
+      }
+
+      // Wrapper style for avatar dimension
+      const wrapperStyle = {
+        zIndex: index,
+        width: avatarSizeInt,
+        height: avatarSizeInt,
+        marginRight: isLast ? 0 : gapInt,
+        // Apply negative gap here
+        // On web, we apply the mask directly to the container
+        ...(_reactNative.Platform.OS === 'web' ? {
+          maskImage: webMaskImage,
+          WebkitMaskImage: webMaskImage
+        } : {})
+      };
+      if (_reactNative.Platform.OS === 'web') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: wrapperStyle,
+          children: clonedChild
+        }, index);
+      }
+
+      // Native MaskedView
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: wrapperStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
+          style: {
+            flex: 1,
+            height: '100%'
+          },
+          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+            height: "100%",
+            width: "100%",
+            viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+              d: maskPath,
+              fill: "black",
+              fillRule: "evenodd"
+            })
+          }),
+          children: clonedChild
+        })
+      }, index);
+    })
+  });
+}
+var _default = exports.default = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_maskedView","_reactNativeSvg","_interopRequireWildcard","_figmaVariablesResolver","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AvatarGroup","modes","children","style","rest","gap","getVariableByName","avatarSize","avatarRadius","borderSize","borderColor","paddingLeft","paddingRight","paddingTop","paddingBottom","validChildren","React","Children","toArray","filter","isValidElement","totalChildren","length","gapInt","parseInt","toString","avatarSizeInt","borderSizeInt","avatarRadiusInt","nextAvatarX","effectiveRadius","holeRadius","holeCenter","x","y","rectPath","circlePath","maskPath","webMaskImage","containerStyle","flexDirection","alignItems","jsx","View","map","child","index","isLast","element","elementProps","props","clonedChild","cloneElement","zIndex","wrapperStyle","width","height","marginRight","Platform","OS","maskImage","WebkitMaskImage","flex","maskElement","viewBox","Path","d","fill","fillRule","_default","exports"],"sourceRoot":"../../../../src","sources":["components/AvatarGroup/AvatarGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/AvatarGroup/AvatarGroup.mdx

@@ -0,0 +1,42 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AvatarGroupStories from './AvatarGroup.stories';
+import AvatarGroup from './AvatarGroup';
+
+<Meta of={AvatarGroupStories} />
+
+# AvatarGroup
+
+AvatarGroup component with design-token-driven styling.
+
+## 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.
+
+### Avatar Size
+- **Modes:** L | M | S
+- **Default:** L
+## Usage
+
+<Canvas>
+  <Story of={AvatarGroupStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={AvatarGroup} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`avatar/border/color`**
+- **`avatar/border/size`**
+- **`avatar/radius`**
+- **`avatar/size`**
+- **`avatarGroup/gap`**
+- **`avatarGroup/padding/bottom`**
+- **`avatarGroup/padding/left`**
+- **`avatarGroup/padding/right`**
+- **`avatarGroup/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/lib/commonjs/components/Badge/Badge.js

@@ -0,0 +1,68 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Badge({
+  label = 'Label',
+  modes = {},
+  onPress,
+  accessibilityLabel,
+  style,
+  labelStyle,
+  ...rest
+}) {
+  // Resolve token values (fall back to sensible defaults)
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes) || '#d8effe';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes)) || 12;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes) || undefined;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes) || '600';
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/horizontal', modes)) || 6;
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes)) || 4;
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes)) || 4;
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const Container = onPress ? _reactNative.Pressable : _reactNative.View;
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius,
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {})
+  };
+  const textStyle = {
+    color: labelColor,
+    fontSize,
+    fontFamily,
+    fontWeight: fontWeight,
+    lineHeight,
+    includeFontPadding: false,
+    ...(labelStyle || {})
+  };
+  const defaultAccessibilityLabel = accessibilityLabel || label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    style: containerStyle,
+    accessibilityRole: onPress ? 'button' : 'text',
+    accessibilityLabel: defaultAccessibilityLabel,
+    onPress: onPress,
+    ...rest,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      accessibilityElementsHidden: false,
+      children: label
+    })
+  });
+}
+var _default = exports.default = Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","Badge","label","modes","onPress","accessibilityLabel","style","labelStyle","rest","backgroundColor","getVariableByName","labelColor","fontSize","Number","fontFamily","undefined","fontWeight","paddingHorizontal","paddingVertical","borderRadius","lineHeight","Math","round","Container","Pressable","View","containerStyle","alignSelf","alignItems","justifyContent","textStyle","color","includeFontPadding","defaultAccessibilityLabel","jsx","accessibilityRole","children","Text","numberOfLines","ellipsizeMode","accessibilityElementsHidden","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Badge/Badge.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Badge/Badge.mdx

@@ -0,0 +1,42 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as BadgeStories from './Badge.stories';
+import Badge from './Badge';
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+Simple, token-driven badge component used to surface short labels or statuses.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Props
+
+<ArgsTable of={Badge} />
+
+## Usage
+
+<Canvas>
+  <Story of={BadgeStories} />
+</Canvas>
+
+
+
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`badge/color/background`**
+- **`badge/color/label`**
+- **`badge/fontFamily`**
+- **`badge/label/fontSize`**
+- **`badge/label/fontWeight`**
+- **`badge/label/lineHeight`**
+- **`badge/padding/horizontal`**
+- **`badge/padding/vertical`**
+- **`badge/radius`**
+
+All tokens support mode-based theming through the `modes` prop.