@cdx-ui/components 0.0.1-beta.93 → 0.0.1-beta.95

package/lib/module/components/Badge/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { Text, View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import { badgeIconVariants, badgeIndicatorVariants, badgeLabelVariants, badgeRootVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const INDICATOR_STYLE = {
+  pointerEvents: 'none'
+};
+const Badge = /*#__PURE__*/forwardRef(({
+  children,
+  variant = 'default',
+  color = 'action',
+  placement = 'top-end',
+  overlap = 'rectangular',
+  label,
+  icon: IconComponent,
+  accessibilityLabel,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const isDecorative = variant === 'dot' || !accessibilityLabel;
+  const renderContent = () => {
+    if (variant === 'dot') return null;
+    if (IconComponent) {
+      return /*#__PURE__*/_jsx(Icon, {
+        as: IconComponent,
+        className: badgeIconVariants({
+          color
+        })
+      });
+    }
+    if (typeof label === 'string' || typeof label === 'number') {
+      return /*#__PURE__*/_jsx(Text, {
+        className: badgeLabelVariants({
+          color
+        }),
+        ...dataAttributes({
+          slot: 'badge-label'
+        }),
+        children: label
+      });
+    }
+    return label ?? null;
+  };
+  const hasChildren = children != null;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(badgeRootVariants({
+      standalone: !hasChildren
+    }), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'badge'
+    })),
+    children: [children, /*#__PURE__*/_jsx(View, {
+      className: cn(badgeIndicatorVariants({
+        variant,
+        color,
+        placement,
+        overlap
+      })),
+      style: INDICATOR_STYLE,
+      accessible: !isDecorative,
+      accessibilityLabel: accessibilityLabel,
+      "aria-hidden": isDecorative,
+      accessibilityElementsHidden: isDecorative,
+      importantForAccessibility: isDecorative ? 'no-hide-descendants' : 'auto',
+      ...dataAttributes({
+        slot: 'badge-indicator'
+      }),
+      children: renderContent()
+    })]
+  });
+});
+Badge.displayName = 'Badge';
+export { Badge };
+//# sourceMappingURL=index.js.map

package/lib/module/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Text","View","dataAttributes","mergeDataAttributes","cn","Icon","badgeIconVariants","badgeIndicatorVariants","badgeLabelVariants","badgeRootVariants","jsx","_jsx","jsxs","_jsxs","INDICATOR_STYLE","pointerEvents","Badge","children","variant","color","placement","overlap","label","icon","IconComponent","accessibilityLabel","className","style","props","ref","isDecorative","renderContent","as","slot","hasChildren","standalone","accessible","accessibilityElementsHidden","importantForAccessibility","displayName"],"sourceRoot":"../../../../src","sources":["components/Badge/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SAASC,IAAI,EAAEC,IAAI,QAAwB,cAAc;AACzD,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,oBAAoB;AACxE,SAASC,EAAE,QAAQ,eAAe;AAElC,SAASC,IAAI,QAAQ,SAAS;AAC9B,SACEC,iBAAiB,EACjBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,QAEZ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAElB,MAAMC,eAAe,GAAG;EAAEC,aAAa,EAAE;AAAgB,CAAC;AAS1D,MAAMC,KAAK,gBAAGjB,UAAU,CACtB,CACE;EACEkB,QAAQ;EACRC,OAAO,GAAG,SAAS;EACnBC,KAAK,GAAG,QAAQ;EAChBC,SAAS,GAAG,SAAS;EACrBC,OAAO,GAAG,aAAa;EACvBC,KAAK;EACLC,IAAI,EAAEC,aAAa;EACnBC,kBAAkB;EAClBC,SAAS;EACTC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAGZ,OAAO,KAAK,KAAK,IAAI,CAACO,kBAAkB;EAE7D,MAAMM,aAAa,GAAGA,CAAA,KAAM;IAC1B,IAAIb,OAAO,KAAK,KAAK,EAAE,OAAO,IAAI;IAClC,IAAIM,aAAa,EAAE;MACjB,oBAAOb,IAAA,CAACN,IAAI;QAAC2B,EAAE,EAAER,aAAc;QAACE,SAAS,EAAEpB,iBAAiB,CAAC;UAAEa;QAAM,CAAC;MAAE,CAAE,CAAC;IAC7E;IACA,IAAI,OAAOG,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC1D,oBACEX,IAAA,CAACX,IAAI;QACH0B,SAAS,EAAElB,kBAAkB,CAAC;UAAEW;QAAM,CAAC,CAAE;QAAA,GACrCjB,cAAc,CAAC;UAAE+B,IAAI,EAAE;QAAc,CAAC,CAAC;QAAAhB,QAAA,EAE1CK;MAAK,CACF,CAAC;IAEX;IACA,OAAOA,KAAK,IAAI,IAAI;EACtB,CAAC;EAED,MAAMY,WAAW,GAAGjB,QAAQ,IAAI,IAAI;EAEpC,oBACEJ,KAAA,CAACZ,IAAI;IACH4B,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAEtB,EAAE,CAACK,iBAAiB,CAAC;MAAE0B,UAAU,EAAE,CAACD;IAAY,CAAC,CAAC,EAAER,SAAS,CAAE;IAC1EC,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACLzB,mBAAmB,CAACyB,KAAK,EAAE1B,cAAc,CAAC;MAAE+B,IAAI,EAAE;IAAQ,CAAC,CAAC,CAAC;IAAAhB,QAAA,GAEhEA,QAAQ,eACTN,IAAA,CAACV,IAAI;MACHyB,SAAS,EAAEtB,EAAE,CAACG,sBAAsB,CAAC;QAAEW,OAAO;QAAEC,KAAK;QAAEC,SAAS;QAAEC;MAAQ,CAAC,CAAC,CAAE;MAC9EM,KAAK,EAAEb,eAAgB;MACvBsB,UAAU,EAAE,CAACN,YAAa;MAC1BL,kBAAkB,EAAEA,kBAAmB;MACvC,eAAaK,YAAa;MAC1BO,2BAA2B,EAAEP,YAAa;MAC1CQ,yBAAyB,EAAER,YAAY,GAAG,qBAAqB,GAAG,MAAO;MAAA,GACrE5B,cAAc,CAAC;QAAE+B,IAAI,EAAE;MAAkB,CAAC,CAAC;MAAAhB,QAAA,EAE9Cc,aAAa,CAAC;IAAC,CACZ,CAAC;EAAA,CACH,CAAC;AAEX,CACF,CAAC;AACDf,KAAK,CAACuB,WAAW,GAAG,OAAO;AAE3B,SAASvB,KAAK","ignoreList":[]}

package/lib/module/components/Badge/styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+export const badgeRootVariants = cva(['relative self-start'], {
+  variants: {
+    standalone: {
+      true: 'inline-flex',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    standalone: false
+  }
+});
+export const badgeIndicatorVariants = cva(['absolute items-center justify-center overflow-hidden', 'rounded-[var(--border-radius-round)]', 'border border-surface-primary', TRANSITION_COLORS], {
+  variants: {
+    variant: {
+      default: 'h-5 min-w-5 px-1',
+      dot: 'h-2 w-2 min-w-0 px-0'
+    },
+    color: {
+      action: 'bg-surface-action-strong',
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong'
+    },
+    placement: {
+      'top-start': 'top-0 ltr:left-0 rtl:right-0',
+      'top-end': 'top-0 ltr:right-0 rtl:left-0',
+      'bottom-start': 'bottom-0 ltr:left-0 rtl:right-0',
+      'bottom-end': 'bottom-0 ltr:right-0 rtl:left-0'
+    },
+    overlap: {
+      circular: '',
+      rectangular: ''
+    }
+  },
+  compoundVariants: [
+  // Positioning model (mirrors MUI Badge): the indicator is always centered on an
+  // anchor point via a 50% self-translate, so it straddles that point regardless of
+  // its own size (dot vs default). `overlap` only moves the anchor point.
+  //
+  // Translate uses arbitrary `[50%]` (not the `1/2` fraction utility) because the
+  // fraction sugar is web-only in Uniwind — Avatar's badge uses `[N%]` translate on
+  // native, Toast gates `-translate-x-1/2` behind `web:`.
+  //
+  // rectangular: anchor at the host's true bounding-box corner.
+  {
+    placement: 'top-end',
+    overlap: 'rectangular',
+    className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]'
+  }, {
+    placement: 'top-start',
+    overlap: 'rectangular',
+    className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]'
+  }, {
+    placement: 'bottom-end',
+    overlap: 'rectangular',
+    className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]'
+  }, {
+    placement: 'bottom-start',
+    overlap: 'rectangular',
+    className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]'
+  },
+  // circular: anchor inset 14% from each edge — the ~45° point of the inscribed
+  // circle ((1 - √2/2)/2 ≈ 14.6%, rounded to 14% per MUI) — so the indicator sits
+  // on the host's visible arc. The inset is host-relative (percent of the wrapper,
+  // which hugs the host), keeping it independent of the indicator's own size.
+  {
+    placement: 'top-end',
+    overlap: 'circular',
+    className: 'top-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]'
+  }, {
+    placement: 'top-start',
+    overlap: 'circular',
+    className: 'top-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]'
+  }, {
+    placement: 'bottom-end',
+    overlap: 'circular',
+    className: 'bottom-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]'
+  }, {
+    placement: 'bottom-start',
+    overlap: 'circular',
+    className: 'bottom-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]'
+  }],
+  defaultVariants: {
+    variant: 'default',
+    color: 'action',
+    placement: 'top-end',
+    overlap: 'rectangular'
+  }
+});
+export const badgeLabelVariants = cva(['body-sm font-medium text-center'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong'
+    }
+  },
+  defaultVariants: {
+    color: 'action'
+  }
+});
+export const badgeIconVariants = cva(['size-3'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong'
+    }
+  },
+  defaultVariants: {
+    color: 'action'
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Badge/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","TRANSITION_COLORS","badgeRootVariants","variants","standalone","true","false","defaultVariants","badgeIndicatorVariants","variant","default","dot","color","action","danger","warning","success","info","placement","overlap","circular","rectangular","compoundVariants","className","badgeLabelVariants","badgeIconVariants"],"sourceRoot":"../../../../src","sources":["components/Badge/styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/index.js

@@ -3,6 +3,7 @@
 export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
+export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Button';

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

@@ -1 +1 @@
-{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}
+{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}

package/lib/module/figma/Badge.Indicator.figma.js

@@ -0,0 +1,41 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=6866-4851
+// source=packages/components/src/components/Badge/index.tsx
+// component=Badge
+import figma from 'figma';
+const instance = figma.selectedInstance;
+
+// Figma variant → code: dot → "dot"; number/icon → "default" (omitted, content prop differentiates).
+const figmaVariant = instance.getEnum('variant', {
+  number: 'number',
+  dot: 'dot',
+  icon: 'icon'
+});
+const color = instance.getEnum('color', {
+  action: 'action',
+  danger: 'danger',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+});
+const labelText = figmaVariant === 'number' ? instance.findText('Badge.Content')?.textContent : undefined;
+const iconResult = figmaVariant === 'icon' ? instance.getInstanceSwap('Badge.Icon')?.executeTemplate() : undefined;
+const iconName = iconResult?.metadata?.props?.componentName;
+const iconSnippet = iconName ?? iconResult?.example;
+const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
+
+// Emit variant only for dot (default is the code default and needs no prop).
+const variantProp = figmaVariant === 'dot' ? figma.code` variant="dot"` : '';
+const labelProp = labelText ? figma.code` label="${labelText}"` : '';
+const iconProp = figmaVariant === 'icon' ? figma.code` icon={${iconSnippet}}` : '';
+export default {
+  id: 'badge-indicator',
+  imports: ["import { Badge } from '@cdx-ui/components'", ...iconImports],
+  metadata: {
+    nestable: true
+  },
+  example: figma.code`
+<Badge${variantProp} color="${color}"${labelProp}${iconProp} />`
+};
+//# sourceMappingURL=Badge.Indicator.figma.js.map

package/lib/module/figma/Badge.Indicator.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","figmaVariant","getEnum","number","dot","icon","color","action","danger","warning","success","info","labelText","findText","textContent","undefined","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","variantProp","code","labelProp","iconProp","id","imports","nestable"],"sourceRoot":"../../../src","sources":["figma/Badge.Indicator.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,YAAY,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAAEC,MAAM,EAAE,QAAQ;EAAEC,GAAG,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAO,CAAC,CAAC;AAChG,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE,QAAQ;EAChBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMC,SAAS,GACbX,YAAY,KAAK,QAAQ,GACpBF,QAAQ,CAACc,QAAQ,CAAC,eAAe,CAAC,EAAiCC,WAAW,GAC/EC,SAAS;AAEf,MAAMC,UAAU,GACdf,YAAY,KAAK,MAAM,GAAGF,QAAQ,CAACkB,eAAe,CAAC,YAAY,CAAC,EAAEC,eAAe,CAAC,CAAC,GAAGH,SAAS;AACjG,MAAMI,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AACnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;;AAEnF;AACA,MAAMO,WAAW,GAAGzB,YAAY,KAAK,KAAK,GAAGH,KAAK,CAAC6B,IAAI,gBAAgB,GAAG,EAAE;AAC5E,MAAMC,SAAS,GAAGhB,SAAS,GAAGd,KAAK,CAAC6B,IAAI,WAAWf,SAAS,GAAG,GAAG,EAAE;AACpE,MAAMiB,QAAQ,GAAG5B,YAAY,KAAK,MAAM,GAAGH,KAAK,CAAC6B,IAAI,UAAUJ,WAAW,GAAG,GAAG,EAAE;AAElF,eAAe;EACbO,EAAE,EAAE,iBAAiB;EACrBC,OAAO,EAAE,CAAC,4CAA4C,EAAE,GAAGN,WAAW,CAAC;EACvEL,QAAQ,EAAE;IAAEY,QAAQ,EAAE;EAAK,CAAC;EAC5BR,OAAO,EAAE1B,KAAK,CAAC6B,IAAI;AACrB,QAAQD,WAAW,WAAWpB,KAAK,IAAIsB,SAAS,GAAGC,QAAQ;AAC3D,CAAC","ignoreList":[]}

package/lib/module/figma/Badge.figma.js

@@ -0,0 +1,59 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=6894-409
+// source=packages/components/src/components/Badge/index.tsx
+// component=Badge
+import figma from 'figma';
+const instance = figma.selectedInstance;
+
+// Figma `position` (camelCase, physical) → code `placement` prop (kebab-case, logical).
+// `end` = right in LTR, `start` = left in LTR.
+const placement = instance.getEnum('position', {
+  topRight: 'top-end',
+  topLeft: 'top-start',
+  bottomRight: 'bottom-end',
+  bottomLeft: 'bottom-start'
+});
+
+// overlap: 1:1.
+const overlap = instance.getEnum('overlap', {
+  rectangular: 'rectangular',
+  circular: 'circular'
+});
+
+// variant/color/content/icon come from the nested Badge.Indicator.
+// Accessed via exposed nested props (confirmed via get_context_for_code_connect).
+// Figma variant → code: dot → "dot"; number/icon → "default" (omitted, content prop differentiates).
+const figmaVariant = instance.getEnum('variant', {
+  number: 'number',
+  dot: 'dot',
+  icon: 'icon'
+});
+const color = instance.getEnum('color', {
+  action: 'action',
+  danger: 'danger',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+});
+const labelText = figmaVariant === 'number' ? instance.findText('Badge.Content')?.textContent : undefined;
+const iconResult = figmaVariant === 'icon' ? instance.getInstanceSwap('Badge.Icon')?.executeTemplate() : undefined;
+const iconName = iconResult?.metadata?.props?.componentName;
+const iconSnippet = iconName ?? iconResult?.example;
+const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
+
+// Emit variant only for dot (default is the code default and needs no prop).
+const variantProp = figmaVariant === 'dot' ? figma.code` variant="dot"` : '';
+const labelProp = labelText ? figma.code` label="${labelText}"` : '';
+const iconProp = figmaVariant === 'icon' ? figma.code` icon={${iconSnippet}}` : '';
+const childrenSlot = instance.getSlot('children');
+const children = childrenSlot ? figma.helpers.react.renderChildren(childrenSlot) : null;
+export default {
+  id: 'badge',
+  imports: ["import { Badge } from '@cdx-ui/components'", ...iconImports],
+  example: figma.code`
+<Badge${variantProp} color="${color}" placement="${placement}" overlap="${overlap}"${labelProp}${iconProp}>
+  ${children}
+</Badge>`
+};
+//# sourceMappingURL=Badge.figma.js.map

package/lib/module/figma/Badge.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","placement","getEnum","topRight","topLeft","bottomRight","bottomLeft","overlap","rectangular","circular","figmaVariant","number","dot","icon","color","action","danger","warning","success","info","labelText","findText","textContent","undefined","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","variantProp","code","labelProp","iconProp","childrenSlot","getSlot","children","helpers","react","renderChildren","id","imports"],"sourceRoot":"../../../src","sources":["figma/Badge.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,UAAU,EAAE;EAC7CC,QAAQ,EAAE,SAAS;EACnBC,OAAO,EAAE,WAAW;EACpBC,WAAW,EAAE,YAAY;EACzBC,UAAU,EAAE;AACd,CAAC,CAAC;;AAEF;AACA,MAAMC,OAAO,GAAGR,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CM,WAAW,EAAE,aAAa;EAC1BC,QAAQ,EAAE;AACZ,CAAC,CAAC;;AAEF;AACA;AACA;AACA,MAAMC,YAAY,GAAGX,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAAES,MAAM,EAAE,QAAQ;EAAEC,GAAG,EAAE,KAAK;EAAEC,IAAI,EAAE;AAAO,CAAC,CAAC;AAChG,MAAMC,KAAK,GAAGf,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCa,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE,QAAQ;EAChBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE;AACR,CAAC,CAAC;AAEF,MAAMC,SAAS,GACbV,YAAY,KAAK,QAAQ,GACpBX,QAAQ,CAACsB,QAAQ,CAAC,eAAe,CAAC,EAAiCC,WAAW,GAC/EC,SAAS;AAEf,MAAMC,UAAU,GACdd,YAAY,KAAK,MAAM,GAAGX,QAAQ,CAAC0B,eAAe,CAAC,YAAY,CAAC,EAAEC,eAAe,CAAC,CAAC,GAAGH,SAAS;AACjG,MAAMI,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AACnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;;AAEnF;AACA,MAAMO,WAAW,GAAGxB,YAAY,KAAK,KAAK,GAAGZ,KAAK,CAACqC,IAAI,gBAAgB,GAAG,EAAE;AAC5E,MAAMC,SAAS,GAAGhB,SAAS,GAAGtB,KAAK,CAACqC,IAAI,WAAWf,SAAS,GAAG,GAAG,EAAE;AACpE,MAAMiB,QAAQ,GAAG3B,YAAY,KAAK,MAAM,GAAGZ,KAAK,CAACqC,IAAI,UAAUJ,WAAW,GAAG,GAAG,EAAE;AAElF,MAAMO,YAAY,GAAGvC,QAAQ,CAACwC,OAAO,CAAC,UAAU,CAAC;AACjD,MAAMC,QAAQ,GAAGF,YAAY,GAAGxC,KAAK,CAAC2C,OAAO,CAACC,KAAK,CAACC,cAAc,CAACL,YAAY,CAAC,GAAG,IAAI;AAEvF,eAAe;EACbM,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,EAAE,GAAGZ,WAAW,CAAC;EACvED,OAAO,EAAElC,KAAK,CAACqC,IAAI;AACrB,QAAQD,WAAW,WAAWpB,KAAK,gBAAgBb,SAAS,cAAcM,OAAO,IAAI6B,SAAS,GAAGC,QAAQ;AACzG,IAAIG,QAAQ;AACZ;AACA,CAAC","ignoreList":[]}

package/lib/typescript/components/Avatar/index.d.ts

@@ -27,11 +27,19 @@ declare const AvatarIcon: {
     ({ asChild, className, style, ...props }: AvatarIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 export interface AvatarBadgeProps extends ViewProps {
     asChild?: boolean;
     className?: string;
     children?: ReactNode;
 }
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 declare const AvatarBadge: import("react").ForwardRefExoticComponent<AvatarBadgeProps & import("react").RefAttributes<View>>;
 type AvatarCompoundComponent = typeof AvatarRoot & {
     Image: typeof AvatarImage;

package/lib/typescript/components/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAClG,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EACL,KAAK,kBAAkB,EAMxB,MAAM,UAAU,CAAC;AAgClB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,8FAqBf,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,iBAAiB;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,oGAyChB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAuBf,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU;8CAA6C,eAAe;;CAyB3E,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,mGAkBhB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,KAAK,EAAE,OAAO,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAKb,uBAAuB,CAAC;AAE9B,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAClG,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EACL,KAAK,kBAAkB,EAMxB,MAAM,UAAU,CAAC;AAgClB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,8FAqBf,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,iBAAiB;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,oGAyChB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAuBf,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU;8CAA6C,eAAe;;CAyB3E,CAAC;AAQF;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,mGAkBhB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,KAAK,EAAE,OAAO,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAKb,uBAAuB,CAAC;AAE9B,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/typescript/components/Badge/index.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { type BadgeVariantProps } from './styles';
+export interface BadgeProps extends ViewProps, BadgeVariantProps {
+    children?: ReactNode;
+    label?: ReactNode;
+    icon?: ForgeIcon;
+    className?: string;
+}
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<View>>;
+export { Badge };
+export type { BadgeVariantProps } from './styles';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAQ,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,UAAW,SAAQ,SAAS,EAAE,iBAAiB;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,6FA+DV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/lib/typescript/components/Badge/styles.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const badgeRootVariants: (props?: ({
+    standalone?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const badgeIndicatorVariants: (props?: ({
+    variant?: "default" | "dot" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+    placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | null | undefined;
+    overlap?: "circular" | "rectangular" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const badgeLabelVariants: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const badgeIconVariants: (props?: ({
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariantProps = VariantProps<typeof badgeIndicatorVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Badge/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;8EAQ5B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;8EA8FlC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAW7B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;8EAW5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
+export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Button';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/lib/typescript/figma/Badge.Indicator.figma.d.ts

@@ -0,0 +1,11 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    metadata: {
+        nestable: boolean;
+    };
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Badge.Indicator.figma.d.ts.map

package/lib/typescript/figma/Badge.Indicator.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.Indicator.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Badge.Indicator.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AA8B1B,wBAME"}

package/lib/typescript/figma/Badge.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Badge.figma.d.ts.map

package/lib/typescript/figma/Badge.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Badge.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAkD1B,wBAOE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.93",
+  "version": "0.0.1-beta.95",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.93",
-    "@cdx-ui/utils": "0.0.1-beta.93",
-    "@cdx-ui/icons": "0.0.1-beta.93"
+    "@cdx-ui/primitives": "0.0.1-beta.95",
+    "@cdx-ui/utils": "0.0.1-beta.95",
+    "@cdx-ui/icons": "0.0.1-beta.95"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Avatar/index.tsx

@@ -213,12 +213,20 @@ AvatarIcon.displayName = 'Avatar.Icon';
 // AVATAR BADGE
 // =============================================================================
 
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 export interface AvatarBadgeProps extends ViewProps {
   asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
+/**
+ * @deprecated Use the generic `Badge` component instead.
+ * Wrap your `Avatar` in `<Badge placement="bottom-end" overlap="circular">` for equivalent behavior.
+ */
 const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
   ({ asChild, className, children, style, ...props }, ref) => {
     const { size } = useAvatarStyleContext();

package/src/components/Badge/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import {
+  badgeIconVariants,
+  badgeIndicatorVariants,
+  badgeLabelVariants,
+  badgeRootVariants,
+  type BadgeVariantProps,
+} from './styles';
+
+const INDICATOR_STYLE = { pointerEvents: 'none' as const };
+
+export interface BadgeProps extends ViewProps, BadgeVariantProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  icon?: ForgeIcon;
+  className?: string;
+}
+
+const Badge = forwardRef<View, BadgeProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      color = 'action',
+      placement = 'top-end',
+      overlap = 'rectangular',
+      label,
+      icon: IconComponent,
+      accessibilityLabel,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDecorative = variant === 'dot' || !accessibilityLabel;
+
+    const renderContent = () => {
+      if (variant === 'dot') return null;
+      if (IconComponent) {
+        return <Icon as={IconComponent} className={badgeIconVariants({ color })} />;
+      }
+      if (typeof label === 'string' || typeof label === 'number') {
+        return (
+          <Text
+            className={badgeLabelVariants({ color })}
+            {...dataAttributes({ slot: 'badge-label' })}
+          >
+            {label}
+          </Text>
+        );
+      }
+      return label ?? null;
+    };
+
+    const hasChildren = children != null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn(badgeRootVariants({ standalone: !hasChildren }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'badge' }))}
+      >
+        {children}
+        <View
+          className={cn(badgeIndicatorVariants({ variant, color, placement, overlap }))}
+          style={INDICATOR_STYLE}
+          accessible={!isDecorative}
+          accessibilityLabel={accessibilityLabel}
+          aria-hidden={isDecorative}
+          accessibilityElementsHidden={isDecorative}
+          importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'}
+          {...dataAttributes({ slot: 'badge-indicator' })}
+        >
+          {renderContent()}
+        </View>
+      </View>
+    );
+  },
+);
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeVariantProps } from './styles';