@factorialco/f0-react-native 0.32.0 → 0.34.0

package/README.md

@@ -172,6 +172,31 @@ these variables.
 
 This file is automatically generated by Uniwind when you run Metro. You can add it to your `.gitignore` if desired.
 
+## 🤖 PR Previews (Published with React Native ALPHA)
+
+Expo preview publishing is tied to the React Native ALPHA workflow. The QR comment is posted only when the React Native ALPHA publish job succeeds.
+
+- Trigger source: React Native ALPHA workflow (`build-and-publish-alpha`)
+- Scope: runs when the React Native package changes (or when manually triggered with the `build` PR comment path in that workflow)
+- Publish branch: `development`
+- Update message: latest commit message (via `eas update --auto`)
+- PR output: one updatable comment with Expo Go links and a QR code
+
+### Required Secret
+
+Add this repository secret in GitHub:
+
+- `EXPO_TOKEN`: personal access token from Expo account settings
+
+### How it appears in GitHub
+
+On each PR update, CI posts or updates a single comment containing:
+
+- Update metadata (message, group ID, timestamp)
+- Expo update page link
+- Direct QR link
+- Embedded QR image for quick scan in Expo Go
+
 ## 📱 Expo Go (Latest Update)
 
 Use this section after each manual update so people can install the latest build in Expo Go.

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

@@ -1,2 +1,2 @@
-import{tv}from"tailwind-variants";import{F0Icon}from"../primitives/F0Icon";import{jsx as _jsx}from"react/jsx-runtime";var badgeVariants=tv({base:"flex shrink-0 items-center justify-center rounded-full",variants:{type:{neutral:"bg-transparent text-f0-icon",highlight:"text-f0-special-highlight",positive:"bg-f0-background-positive-bold text-f0-foreground-inverse",critical:"bg-f0-icon-critical text-f0-foreground-inverse",warning:"bg-f0-background-warning-bold text-f0-foreground-inverse"},size:{xs:"h-2.5 w-2.5",sm:"h-3 w-3",md:"h-5 w-5",lg:"h-6 w-6"}},defaultVariants:{type:"neutral",size:"md"}});var iconSizes={xs:"xs",sm:"xs",md:"sm",lg:"md"};export var Badge=function Badge(_ref){var type=_ref.type,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,icon=_ref.icon;return _jsx(F0Icon,{className:badgeVariants({type:type,size:size}),icon:icon,size:iconSizes[size]});};
+import{F0Badge}from"../F0Badge";import{jsx as _jsx}from"react/jsx-runtime";export var BADGE_TYPES=["neutral","highlight","positive","critical","warning"];export var BADGE_SIZES=["xs","sm","md","lg"];export var Badge=function Badge(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?"neutral":_ref$type,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,icon=_ref.icon;return _jsx(F0Badge,{icon:icon,variant:type,size:size});};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tv","F0Icon","jsx","_jsx","badgeVariants","base","variants","type","neutral","highlight","positive","critical","warning","size","xs","sm","md","lg","defaultVariants","iconSizes","Badge","_ref","_ref$size","icon","className"],"sourceRoot":"../../../../src","sources":["components/Badge/index.tsx"],"mappings":"AAAA,OAASA,EAAE,KAA2B,mBAAmB,CAEzD,OAASC,MAAM,KAAuB,sBAAsB,QAAAC,GAAA,IAAAC,IAAA,yBAE5D,GAAM,CAAAC,aAAa,CAAGJ,EAAE,CAAC,CACvBK,IAAI,CAAE,wDAAwD,CAC9DC,QAAQ,CAAE,CACRC,IAAI,CAAE,CACJC,OAAO,CAAE,6BAA6B,CACtCC,SAAS,CAAE,2BAA2B,CACtCC,QAAQ,CAAE,2DAA2D,CACrEC,QAAQ,CAAE,gDAAgD,CAC1DC,OAAO,CAAE,0DACX,CAAC,CACDC,IAAI,CAAE,CACJC,EAAE,CAAE,aAAa,CACjBC,EAAE,CAAE,SAAS,CACbC,EAAE,CAAE,SAAS,CACbC,EAAE,CAAE,SACN,CACF,CAAC,CACDC,eAAe,CAAE,CACfX,IAAI,CAAE,SAAS,CACfM,IAAI,CAAE,IACR,CACF,CAAC,CAAC,CAEF,GAAM,CAAAM,SAAS,CAAG,CAChBL,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IACN,CAAU,CAOV,MAAO,IAAM,CAAAG,KAAK,CAAG,QAAR,CAAAA,KAAKA,CAAAC,IAAA,CAAgD,IAA1C,CAAAd,IAAI,CAAAc,IAAA,CAAJd,IAAI,CAAAe,SAAA,CAAAD,IAAA,CAAER,IAAI,CAAJA,IAAI,CAAAS,SAAA,UAAG,IAAI,CAAAA,SAAA,CAAEC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAC7C,MACE,CAAApB,IAAA,CAACF,MAAM,EACLuB,SAAS,CAAEpB,aAAa,CAAC,CAAEG,IAAI,CAAJA,IAAI,CAAEM,IAAI,CAAJA,IAAK,CAAC,CAAE,CACzCU,IAAI,CAAEA,IAAK,CACXV,IAAI,CAAEM,SAAS,CAACN,IAAI,CAAE,CACvB,CAAC,CAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["F0Badge","jsx","_jsx","BADGE_TYPES","BADGE_SIZES","Badge","_ref","_ref$type","type","_ref$size","size","icon","variant"],"sourceRoot":"../../../../src","sources":["components/Badge/index.tsx"],"mappings":"AAAA,OAASA,OAAO,KAAQ,YAAY,QAAAC,GAAA,IAAAC,IAAA,yBAMpC,MAAO,IAAM,CAAAC,WAAW,CAAG,CACzB,SAAS,CACT,WAAW,CACX,UAAU,CACV,UAAU,CACV,SAAS,CACD,CAUV,MAAO,IAAM,CAAAC,WAAW,CAAG,CAAC,IAAI,CAAE,IAAI,CAAE,IAAI,CAAE,IAAI,CAAU,CAqB5D,MAAO,IAAM,CAAAC,KAAK,CAAG,QAAR,CAAAA,KAAKA,CAAAC,IAAA,CAA4D,KAAAC,SAAA,CAAAD,IAAA,CAAtDE,IAAI,CAAJA,IAAI,CAAAD,SAAA,UAAG,SAAS,CAAAA,SAAA,CAAAE,SAAA,CAAAH,IAAA,CAAEI,IAAI,CAAJA,IAAI,CAAAD,SAAA,UAAG,IAAI,CAAAA,SAAA,CAAEE,IAAI,CAAAL,IAAA,CAAJK,IAAI,CACzD,MAAO,CAAAT,IAAA,CAACF,OAAO,EAACW,IAAI,CAAEA,IAAK,CAACC,OAAO,CAAEJ,IAAK,CAACE,IAAI,CAAEA,IAAK,CAAE,CAAC,CAC3D,CAAC","ignoreList":[]}

package/lib/module/components/F0Badge/F0Badge.js

@@ -0,0 +1,2 @@
+import React from"react";import{F0Icon}from"../primitives/F0Icon";import{badgeVariants}from"./F0Badge.styles";import{F0_BADGE_ICON_SIZES}from"./F0Badge.types";import{jsx as _jsx}from"react/jsx-runtime";var F0Badge=React.memo(function F0Badge(_ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?"neutral":_ref$variant,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,icon=_ref.icon;return _jsx(F0Icon,{className:badgeVariants({variant:variant,size:size}),icon:icon,size:F0_BADGE_ICON_SIZES[size]});});F0Badge.displayName="F0Badge";export{F0Badge};
+//# sourceMappingURL=F0Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","F0Icon","badgeVariants","F0_BADGE_ICON_SIZES","jsx","_jsx","F0Badge","memo","_ref","_ref$variant","variant","_ref$size","size","icon","className","displayName"],"sourceRoot":"../../../../src","sources":["components/F0Badge/F0Badge.tsx"],"mappings":"AAAA,MAAO,CAAAA,KAAK,KAAM,OAAO,CAEzB,OAASC,MAAM,KAAQ,sBAAsB,CAE7C,OAASC,aAAa,KAAQ,kBAAkB,CAChD,OAASC,mBAAmB,KAA2B,iBAAiB,QAAAC,GAAA,IAAAC,IAAA,yBAExE,GAAM,CAAAC,OAAO,CAAGN,KAAK,CAACO,IAAI,CAAC,QAAS,CAAAD,OAAOA,CAAAE,IAAA,CAI1B,KAAAC,YAAA,CAAAD,IAAA,CAHfE,OAAO,CAAPA,OAAO,CAAAD,YAAA,UAAG,SAAS,CAAAA,YAAA,CAAAE,SAAA,CAAAH,IAAA,CACnBI,IAAI,CAAJA,IAAI,CAAAD,SAAA,UAAG,IAAI,CAAAA,SAAA,CACXE,IAAI,CAAAL,IAAA,CAAJK,IAAI,CAEJ,MACE,CAAAR,IAAA,CAACJ,MAAM,EACLa,SAAS,CAAEZ,aAAa,CAAC,CAAEQ,OAAO,CAAPA,OAAO,CAAEE,IAAI,CAAJA,IAAK,CAAC,CAAE,CAC5CC,IAAI,CAAEA,IAAK,CACXD,IAAI,CAAET,mBAAmB,CAACS,IAAI,CAAE,CACjC,CAAC,CAEN,CAAC,CAAC,CAEFN,OAAO,CAACS,WAAW,CAAG,SAAS,CAE/B,OAAST,OAAO","ignoreList":[]}

package/lib/module/components/F0Badge/F0Badge.md

@@ -0,0 +1,67 @@
+# F0Badge
+
+Semantic icon badge component for React Native in F0.
+
+## Overview
+
+F0Badge renders an icon inside a circular badge with semantic color variants and size variants.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Badge } from "@factorialco/f0-react-native"
+import { Add } from "@factorialco/f0-react-native/icons/app"
+
+<F0Badge icon={Add} />
+<F0Badge icon={Add} variant="highlight" />
+<F0Badge icon={Add} size="lg" variant="positive" />
+```
+
+## Props
+
+| Prop      | Type             | Default     | Description                 |
+| --------- | ---------------- | ----------- | --------------------------- |
+| `icon`    | `IconType`       | required    | Icon component to render    |
+| `variant` | `F0BadgeVariant` | `"neutral"` | Semantic visual variant     |
+| `size`    | `F0BadgeSize`    | `"md"`      | Badge and icon size mapping |
+
+## Variants
+
+- `neutral`
+- `highlight`
+- `positive`
+- `critical`
+- `warning`
+
+## Sizes
+
+- `xs`
+- `sm`
+- `md`
+- `lg`
+
+## Accessibility
+
+F0Badge is decorative by default. Accessibility semantics come from the surrounding parent component unless explicitly handled by consumers.
+
+## Testing
+
+Main tests:
+
+- `src/components/F0Badge/__tests__/F0Badge.spec.tsx`
+
+Coverage includes snapshots for variants and sizes, and icon-size mapping checks.
+
+## File Structure
+
+```
+src/components/F0Badge/
+├── F0Badge.tsx
+├── F0Badge.types.ts
+├── F0Badge.styles.ts
+├── F0Badge.md
+├── index.ts
+└── __tests__/
+    └── F0Badge.spec.tsx
+```

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

@@ -0,0 +1,2 @@
+import{tv}from"tailwind-variants";export var badgeVariantClasses={neutral:"bg-transparent text-f0-icon",highlight:"text-f0-special-highlight",positive:"bg-f0-background-positive-bold text-f0-foreground-inverse",critical:"bg-f0-icon-critical text-f0-foreground-inverse",warning:"bg-f0-background-warning-bold text-f0-foreground-inverse"};export var badgeSizeClasses={xs:"h-2.5 w-2.5",sm:"h-3 w-3",md:"h-5 w-5",lg:"h-6 w-6"};export var badgeVariants=tv({base:"flex shrink-0 items-center justify-center rounded-full",variants:{variant:badgeVariantClasses,size:badgeSizeClasses},defaultVariants:{variant:"neutral",size:"md"}});
+//# sourceMappingURL=F0Badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tv","badgeVariantClasses","neutral","highlight","positive","critical","warning","badgeSizeClasses","xs","sm","md","lg","badgeVariants","base","variants","variant","size","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/F0Badge/F0Badge.styles.ts"],"mappings":"AAAA,OAASA,EAAE,KAAQ,mBAAmB,CAEtC,MAAO,IAAM,CAAAC,mBAAmB,CAAG,CACjCC,OAAO,CAAE,6BAA6B,CACtCC,SAAS,CAAE,2BAA2B,CACtCC,QAAQ,CAAE,2DAA2D,CACrEC,QAAQ,CAAE,gDAAgD,CAC1DC,OAAO,CAAE,0DACX,CAAU,CAEV,MAAO,IAAM,CAAAC,gBAAgB,CAAG,CAC9BC,EAAE,CAAE,aAAa,CACjBC,EAAE,CAAE,SAAS,CACbC,EAAE,CAAE,SAAS,CACbC,EAAE,CAAE,SACN,CAAU,CAEV,MAAO,IAAM,CAAAC,aAAa,CAAGZ,EAAE,CAAC,CAC9Ba,IAAI,CAAE,wDAAwD,CAC9DC,QAAQ,CAAE,CACRC,OAAO,CAAEd,mBAAmB,CAC5Be,IAAI,CAAET,gBACR,CAAC,CACDU,eAAe,CAAE,CACfF,OAAO,CAAE,SAAS,CAClBC,IAAI,CAAE,IACR,CACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/F0Badge/F0Badge.types.js

@@ -0,0 +1,2 @@
+import{badgeSizeClasses,badgeVariantClasses}from"./F0Badge.styles";export var F0_BADGE_VARIANTS=Object.keys(badgeVariantClasses);export var F0_BADGE_SIZES=Object.keys(badgeSizeClasses);export var F0_BADGE_ICON_SIZES={xs:"xs",sm:"xs",md:"sm",lg:"md"};
+//# sourceMappingURL=F0Badge.types.js.map

package/lib/module/components/F0Badge/F0Badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeSizeClasses","badgeVariantClasses","F0_BADGE_VARIANTS","Object","keys","F0_BADGE_SIZES","F0_BADGE_ICON_SIZES","xs","sm","md","lg"],"sourceRoot":"../../../../src","sources":["components/F0Badge/F0Badge.types.ts"],"mappings":"AAIA,OACEA,gBAAgB,CAChBC,mBAAmB,KAEd,kBAAkB,CAIzB,MAAO,IAAM,CAAAC,iBAAiB,CAAGC,MAAM,CAACC,IAAI,CAC1CH,mBACF,CAAkC,CAIlC,MAAO,IAAM,CAAAI,cAAc,CAAGF,MAAM,CAACC,IAAI,CACvCJ,gBACF,CAA+B,CAE/B,MAAO,IAAM,CAAAM,mBAAmB,CAAG,CACjCC,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IAAI,CACRC,EAAE,CAAE,IACN,CAAU","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export{F0Badge}from"./F0Badge";export{F0_BADGE_SIZES,F0_BADGE_VARIANTS,F0_BADGE_ICON_SIZES}from"./F0Badge.types";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["F0Badge","F0_BADGE_SIZES","F0_BADGE_VARIANTS","F0_BADGE_ICON_SIZES"],"sourceRoot":"../../../../src","sources":["components/F0Badge/index.ts"],"mappings":"AAAA,OAASA,OAAO,KAAQ,WAAW,CACnC,OACEC,cAAc,CACdC,iBAAiB,CACjBC,mBAAmB,KACd,iBAAiB","ignoreList":[]}

package/lib/module/components/exports.js

@@ -1,2 +1,2 @@
-export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/PressableFeedback";
+export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./F0Badge";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/PressableFeedback";
 //# sourceMappingURL=exports.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,gCAAgC","ignoreList":[]}
+{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,WAAW,CACzB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,gCAAgC","ignoreList":[]}

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

@@ -1,58 +1,32 @@
-import { type VariantProps } from "tailwind-variants";
-import { type IconType } from "../primitives/F0Icon";
-declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    type: {
-        neutral: string;
-        highlight: string;
-        positive: string;
-        critical: string;
-        warning: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "flex shrink-0 items-center justify-center rounded-full", {
-    type: {
-        neutral: string;
-        highlight: string;
-        positive: string;
-        critical: string;
-        warning: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    type: {
-        neutral: string;
-        highlight: string;
-        positive: string;
-        critical: string;
-        warning: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "flex shrink-0 items-center justify-center rounded-full", unknown, unknown, undefined>>;
-declare const iconSizes: {
-    readonly xs: "xs";
-    readonly sm: "xs";
-    readonly md: "sm";
-    readonly lg: "md";
-};
-export interface BadgeProps extends VariantProps<typeof badgeVariants> {
+import type { IconType } from "../primitives/F0Icon";
+/**
+ * @deprecated Use `F0_BADGE_VARIANTS` from `../F0Badge` instead.
+ */
+export declare const BADGE_TYPES: readonly ["neutral", "highlight", "positive", "critical", "warning"];
+/**
+ * @deprecated Use `F0BadgeVariant` from `../F0Badge` instead.
+ */
+export type BadgeType = (typeof BADGE_TYPES)[number];
+/**
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
+ */
+export declare const BADGE_SIZES: readonly ["xs", "sm", "md", "lg"];
+/**
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
+ */
+export type BadgeSize = (typeof BADGE_SIZES)[number];
+/**
+ * @deprecated Use `F0BadgeProps` from `../F0Badge` instead.
+ * Migration: replace `type` with `variant`.
+ */
+export interface BadgeProps {
     icon: IconType;
-    size?: keyof typeof iconSizes;
+    type?: BadgeType;
+    size?: BadgeSize;
 }
+/**
+ * @deprecated Use `F0Badge` from `../F0Badge` instead.
+ * Migration: replace `type` with `variant`.
+ */
 export declare const Badge: ({ type, size, icon }: BadgeProps) => import("react").JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE5D,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAqBjB,CAAA;AAEF,QAAA,MAAM,SAAS;;;;;CAKL,CAAA;AAEV,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACpE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAA;CAC9B;AAED,eAAO,MAAM,KAAK,GAAI,sBAA6B,UAAU,gCAQ5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,WAAW,sEAMd,CAAA;AAEV;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,WAAW,mCAAoC,CAAA;AAE5D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,GAAI,sBAAyC,UAAU,gCAExE,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { type F0BadgeProps } from "./F0Badge.types";
+declare const F0Badge: React.NamedExoticComponent<F0BadgeProps>;
+export { F0Badge };
+//# sourceMappingURL=F0Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Badge/F0Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAExE,QAAA,MAAM,OAAO,0CAYX,CAAA;AAIF,OAAO,EAAE,OAAO,EAAE,CAAA"}

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

@@ -0,0 +1,57 @@
+export declare const badgeVariantClasses: {
+    readonly neutral: "bg-transparent text-f0-icon";
+    readonly highlight: "text-f0-special-highlight";
+    readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
+    readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
+    readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
+};
+export declare const badgeSizeClasses: {
+    readonly xs: "h-2.5 w-2.5";
+    readonly sm: "h-3 w-3";
+    readonly md: "h-5 w-5";
+    readonly lg: "h-6 w-6";
+};
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        readonly neutral: "bg-transparent text-f0-icon";
+        readonly highlight: "text-f0-special-highlight";
+        readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
+        readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
+        readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
+    };
+    size: {
+        readonly xs: "h-2.5 w-2.5";
+        readonly sm: "h-3 w-3";
+        readonly md: "h-5 w-5";
+        readonly lg: "h-6 w-6";
+    };
+}, undefined, "flex shrink-0 items-center justify-center rounded-full", {
+    variant: {
+        readonly neutral: "bg-transparent text-f0-icon";
+        readonly highlight: "text-f0-special-highlight";
+        readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
+        readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
+        readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
+    };
+    size: {
+        readonly xs: "h-2.5 w-2.5";
+        readonly sm: "h-3 w-3";
+        readonly md: "h-5 w-5";
+        readonly lg: "h-6 w-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        readonly neutral: "bg-transparent text-f0-icon";
+        readonly highlight: "text-f0-special-highlight";
+        readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
+        readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
+        readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
+    };
+    size: {
+        readonly xs: "h-2.5 w-2.5";
+        readonly sm: "h-3 w-3";
+        readonly md: "h-5 w-5";
+        readonly lg: "h-6 w-6";
+    };
+}, undefined, "flex shrink-0 items-center justify-center rounded-full", unknown, unknown, undefined>>;
+//# sourceMappingURL=F0Badge.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Badge/F0Badge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;;;;;;CAMtB,CAAA;AAEV,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAUxB,CAAA"}

package/lib/typescript/components/F0Badge/F0Badge.types.d.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+import type { IconType } from "../primitives/F0Icon";
+import { badgeSizeClasses, badgeVariantClasses, type badgeVariants } from "./F0Badge.styles";
+export type F0BadgeVariant = keyof typeof badgeVariantClasses;
+export declare const F0_BADGE_VARIANTS: ReadonlyArray<F0BadgeVariant>;
+export type F0BadgeSize = keyof typeof badgeSizeClasses;
+export declare const F0_BADGE_SIZES: ReadonlyArray<F0BadgeSize>;
+export declare const F0_BADGE_ICON_SIZES: {
+    readonly xs: "xs";
+    readonly sm: "xs";
+    readonly md: "sm";
+    readonly lg: "md";
+};
+export interface F0BadgeProps extends VariantProps<typeof badgeVariants> {
+    icon: IconType;
+    variant?: F0BadgeVariant;
+    size?: F0BadgeSize;
+}
+//# sourceMappingURL=F0Badge.types.d.ts.map

package/lib/typescript/components/F0Badge/F0Badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"F0Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Badge/F0Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAEpD,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,mBAAmB,CAAA;AAE7D,eAAO,MAAM,iBAAiB,EAEzB,aAAa,CAAC,cAAc,CAAC,CAAA;AAElC,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAEvD,eAAO,MAAM,cAAc,EAEtB,aAAa,CAAC,WAAW,CAAC,CAAA;AAE/B,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAA;AAEV,MAAM,WAAW,YAAa,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACtE,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB"}

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

@@ -0,0 +1,4 @@
+export { F0Badge } from "./F0Badge";
+export { F0_BADGE_SIZES, F0_BADGE_VARIANTS, F0_BADGE_ICON_SIZES, } from "./F0Badge.types";
+export type { F0BadgeProps, F0BadgeSize, F0BadgeVariant } from "./F0Badge.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,iBAAiB,CAAA;AACxB,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA"}

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

@@ -2,6 +2,7 @@ export * from "./Activity/ActivityItem";
 export * from "./Avatars/exports";
 export * from "./Badge";
 export * from "./Button";
+export * from "./F0Badge";
 export * from "./Counter";
 export * from "./ExampleComponent";
 export { Icon, type IconProps } from "./Icon";

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

@@ -1 +1 @@
-{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../../../src/components/exports.ts"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "expo-router/entry",

package/src/components/Badge/__tests__/index.spec.tsx

@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Add } from "../../../icons/app"
+import { Badge } from "../index"
+
+const getClassName = (
+  json: ReturnType<ReturnType<typeof render>["toJSON"]>
+) => {
+  if (!json || Array.isArray(json)) return ""
+  return String(json.props.className ?? "")
+}
+
+describe("Badge (deprecated wrapper)", () => {
+  it("renders by delegating to F0Badge", () => {
+    const { toJSON } = render(<Badge icon={Add} />)
+    expect(toJSON()).toBeTruthy()
+  })
+
+  it("maps `type` to F0Badge `variant`", () => {
+    const { toJSON } = render(<Badge icon={Add} type="critical" />)
+    expect(getClassName(toJSON())).toContain("bg-f0-icon-critical")
+  })
+
+  it("preserves size mapping contract", () => {
+    const { toJSON } = render(<Badge icon={Add} size="lg" />)
+    expect(getClassName(toJSON())).toContain("stroke-md")
+  })
+})

package/src/components/Badge/index.tsx

@@ -1,48 +1,46 @@
-import { tv, type VariantProps } from "tailwind-variants"
+import { F0Badge } from "../F0Badge"
+import type { IconType } from "../primitives/F0Icon"
 
-import { F0Icon, type IconType } from "../primitives/F0Icon"
+/**
+ * @deprecated Use `F0_BADGE_VARIANTS` from `../F0Badge` instead.
+ */
+export const BADGE_TYPES = [
+  "neutral",
+  "highlight",
+  "positive",
+  "critical",
+  "warning",
+] as const
 
-const badgeVariants = tv({
-  base: "flex shrink-0 items-center justify-center rounded-full",
-  variants: {
-    type: {
-      neutral: "bg-transparent text-f0-icon",
-      highlight: "text-f0-special-highlight",
-      positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
-      critical: "bg-f0-icon-critical text-f0-foreground-inverse",
-      warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
-    },
-    size: {
-      xs: "h-2.5 w-2.5",
-      sm: "h-3 w-3",
-      md: "h-5 w-5",
-      lg: "h-6 w-6",
-    },
-  },
-  defaultVariants: {
-    type: "neutral",
-    size: "md",
-  },
-})
+/**
+ * @deprecated Use `F0BadgeVariant` from `../F0Badge` instead.
+ */
+export type BadgeType = (typeof BADGE_TYPES)[number]
 
-const iconSizes = {
-  xs: "xs",
-  sm: "xs",
-  md: "sm",
-  lg: "md",
-} as const
+/**
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
+ */
+export const BADGE_SIZES = ["xs", "sm", "md", "lg"] as const
 
-export interface BadgeProps extends VariantProps<typeof badgeVariants> {
+/**
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
+ */
+export type BadgeSize = (typeof BADGE_SIZES)[number]
+
+/**
+ * @deprecated Use `F0BadgeProps` from `../F0Badge` instead.
+ * Migration: replace `type` with `variant`.
+ */
+export interface BadgeProps {
   icon: IconType
-  size?: keyof typeof iconSizes
+  type?: BadgeType
+  size?: BadgeSize
 }
 
-export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
-  return (
-    <F0Icon
-      className={badgeVariants({ type, size })}
-      icon={icon}
-      size={iconSizes[size]}
-    />
-  )
+/**
+ * @deprecated Use `F0Badge` from `../F0Badge` instead.
+ * Migration: replace `type` with `variant`.
+ */
+export const Badge = ({ type = "neutral", size = "md", icon }: BadgeProps) => {
+  return <F0Badge icon={icon} variant={type} size={size} />
 }

package/src/components/F0Badge/F0Badge.md

@@ -0,0 +1,67 @@
+# F0Badge
+
+Semantic icon badge component for React Native in F0.
+
+## Overview
+
+F0Badge renders an icon inside a circular badge with semantic color variants and size variants.
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import { F0Badge } from "@factorialco/f0-react-native"
+import { Add } from "@factorialco/f0-react-native/icons/app"
+
+<F0Badge icon={Add} />
+<F0Badge icon={Add} variant="highlight" />
+<F0Badge icon={Add} size="lg" variant="positive" />
+```
+
+## Props
+
+| Prop      | Type             | Default     | Description                 |
+| --------- | ---------------- | ----------- | --------------------------- |
+| `icon`    | `IconType`       | required    | Icon component to render    |
+| `variant` | `F0BadgeVariant` | `"neutral"` | Semantic visual variant     |
+| `size`    | `F0BadgeSize`    | `"md"`      | Badge and icon size mapping |
+
+## Variants
+
+- `neutral`
+- `highlight`
+- `positive`
+- `critical`
+- `warning`
+
+## Sizes
+
+- `xs`
+- `sm`
+- `md`
+- `lg`
+
+## Accessibility
+
+F0Badge is decorative by default. Accessibility semantics come from the surrounding parent component unless explicitly handled by consumers.
+
+## Testing
+
+Main tests:
+
+- `src/components/F0Badge/__tests__/F0Badge.spec.tsx`
+
+Coverage includes snapshots for variants and sizes, and icon-size mapping checks.
+
+## File Structure
+
+```
+src/components/F0Badge/
+├── F0Badge.tsx
+├── F0Badge.types.ts
+├── F0Badge.styles.ts
+├── F0Badge.md
+├── index.ts
+└── __tests__/
+    └── F0Badge.spec.tsx
+```

package/src/components/F0Badge/F0Badge.styles.ts

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants"
+
+export const badgeVariantClasses = {
+  neutral: "bg-transparent text-f0-icon",
+  highlight: "text-f0-special-highlight",
+  positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
+  critical: "bg-f0-icon-critical text-f0-foreground-inverse",
+  warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
+} as const
+
+export const badgeSizeClasses = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+} as const
+
+export const badgeVariants = tv({
+  base: "flex shrink-0 items-center justify-center rounded-full",
+  variants: {
+    variant: badgeVariantClasses,
+    size: badgeSizeClasses,
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md",
+  },
+})

package/src/components/F0Badge/F0Badge.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import { F0Icon } from "../primitives/F0Icon"
+
+import { badgeVariants } from "./F0Badge.styles"
+import { F0_BADGE_ICON_SIZES, type F0BadgeProps } from "./F0Badge.types"
+
+const F0Badge = React.memo(function F0Badge({
+  variant = "neutral",
+  size = "md",
+  icon,
+}: F0BadgeProps) {
+  return (
+    <F0Icon
+      className={badgeVariants({ variant, size })}
+      icon={icon}
+      size={F0_BADGE_ICON_SIZES[size]}
+    />
+  )
+})
+
+F0Badge.displayName = "F0Badge"
+
+export { F0Badge }