@factorialco/f0-react-native 0.33.0 → 0.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/lib/module/components/Badge/index.js +1 -1
  2. package/lib/module/components/Badge/index.js.map +1 -1
  3. package/lib/module/components/F0Badge/F0Badge.js +2 -0
  4. package/lib/module/components/F0Badge/F0Badge.js.map +1 -0
  5. package/lib/module/components/F0Badge/F0Badge.md +67 -0
  6. package/lib/module/components/F0Badge/F0Badge.styles.js +2 -0
  7. package/lib/module/components/F0Badge/F0Badge.styles.js.map +1 -0
  8. package/lib/module/components/F0Badge/F0Badge.types.js +2 -0
  9. package/lib/module/components/F0Badge/F0Badge.types.js.map +1 -0
  10. package/lib/module/components/F0Badge/index.js +2 -0
  11. package/lib/module/components/F0Badge/index.js.map +1 -0
  12. package/lib/module/components/exports.js +1 -1
  13. package/lib/module/components/exports.js.map +1 -1
  14. package/lib/typescript/components/Badge/index.d.ts +28 -54
  15. package/lib/typescript/components/Badge/index.d.ts.map +1 -1
  16. package/lib/typescript/components/F0Badge/F0Badge.d.ts +5 -0
  17. package/lib/typescript/components/F0Badge/F0Badge.d.ts.map +1 -0
  18. package/lib/typescript/components/F0Badge/F0Badge.styles.d.ts +57 -0
  19. package/lib/typescript/components/F0Badge/F0Badge.styles.d.ts.map +1 -0
  20. package/lib/typescript/components/F0Badge/F0Badge.types.d.ts +19 -0
  21. package/lib/typescript/components/F0Badge/F0Badge.types.d.ts.map +1 -0
  22. package/lib/typescript/components/F0Badge/index.d.ts +4 -0
  23. package/lib/typescript/components/F0Badge/index.d.ts.map +1 -0
  24. package/lib/typescript/components/exports.d.ts +1 -0
  25. package/lib/typescript/components/exports.d.ts.map +1 -1
  26. package/package.json +1 -1
  27. package/src/components/Badge/__tests__/index.spec.tsx +29 -0
  28. package/src/components/Badge/index.tsx +38 -40
  29. package/src/components/F0Badge/F0Badge.md +67 -0
  30. package/src/components/F0Badge/F0Badge.styles.ts +28 -0
  31. package/src/components/F0Badge/F0Badge.tsx +24 -0
  32. package/src/components/F0Badge/F0Badge.types.ts +34 -0
  33. package/src/components/F0Badge/__tests__/F0Badge.spec.tsx +63 -0
  34. package/src/components/F0Badge/__tests__/__snapshots__/F0Badge.spec.tsx.snap +651 -0
  35. package/src/components/F0Badge/index.ts +7 -0
  36. package/src/components/exports.ts +1 -0
@@ -1,2 +1,2 @@
1
- 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]});};
1
+ 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});};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +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":[]}
1
+ {"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":[]}
@@ -0,0 +1,2 @@
1
+ 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};
2
+ //# sourceMappingURL=F0Badge.js.map
@@ -0,0 +1 @@
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":[]}
@@ -0,0 +1,67 @@
1
+ # F0Badge
2
+
3
+ Semantic icon badge component for React Native in F0.
4
+
5
+ ## Overview
6
+
7
+ F0Badge renders an icon inside a circular badge with semantic color variants and size variants.
8
+
9
+ ## Usage
10
+
11
+ <!-- prettier-ignore -->
12
+ ```tsx
13
+ import { F0Badge } from "@factorialco/f0-react-native"
14
+ import { Add } from "@factorialco/f0-react-native/icons/app"
15
+
16
+ <F0Badge icon={Add} />
17
+ <F0Badge icon={Add} variant="highlight" />
18
+ <F0Badge icon={Add} size="lg" variant="positive" />
19
+ ```
20
+
21
+ ## Props
22
+
23
+ | Prop | Type | Default | Description |
24
+ | --------- | ---------------- | ----------- | --------------------------- |
25
+ | `icon` | `IconType` | required | Icon component to render |
26
+ | `variant` | `F0BadgeVariant` | `"neutral"` | Semantic visual variant |
27
+ | `size` | `F0BadgeSize` | `"md"` | Badge and icon size mapping |
28
+
29
+ ## Variants
30
+
31
+ - `neutral`
32
+ - `highlight`
33
+ - `positive`
34
+ - `critical`
35
+ - `warning`
36
+
37
+ ## Sizes
38
+
39
+ - `xs`
40
+ - `sm`
41
+ - `md`
42
+ - `lg`
43
+
44
+ ## Accessibility
45
+
46
+ F0Badge is decorative by default. Accessibility semantics come from the surrounding parent component unless explicitly handled by consumers.
47
+
48
+ ## Testing
49
+
50
+ Main tests:
51
+
52
+ - `src/components/F0Badge/__tests__/F0Badge.spec.tsx`
53
+
54
+ Coverage includes snapshots for variants and sizes, and icon-size mapping checks.
55
+
56
+ ## File Structure
57
+
58
+ ```
59
+ src/components/F0Badge/
60
+ ├── F0Badge.tsx
61
+ ├── F0Badge.types.ts
62
+ ├── F0Badge.styles.ts
63
+ ├── F0Badge.md
64
+ ├── index.ts
65
+ └── __tests__/
66
+ └── F0Badge.spec.tsx
67
+ ```
@@ -0,0 +1,2 @@
1
+ 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"}});
2
+ //# sourceMappingURL=F0Badge.styles.js.map
@@ -0,0 +1 @@
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":[]}
@@ -0,0 +1,2 @@
1
+ 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"};
2
+ //# sourceMappingURL=F0Badge.types.js.map
@@ -0,0 +1 @@
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":[]}
@@ -0,0 +1,2 @@
1
+ export{F0Badge}from"./F0Badge";export{F0_BADGE_SIZES,F0_BADGE_VARIANTS,F0_BADGE_ICON_SIZES}from"./F0Badge.types";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
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":[]}
@@ -1,2 +1,2 @@
1
- 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";
1
+ 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";
2
2
  //# sourceMappingURL=exports.js.map
@@ -1 +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":[]}
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,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":[]}
@@ -1,58 +1,32 @@
1
- import { type VariantProps } from "tailwind-variants";
2
- import { type IconType } from "../primitives/F0Icon";
3
- declare const badgeVariants: import("tailwind-variants").TVReturnType<{
4
- type: {
5
- neutral: string;
6
- highlight: string;
7
- positive: string;
8
- critical: string;
9
- warning: string;
10
- };
11
- size: {
12
- xs: string;
13
- sm: string;
14
- md: string;
15
- lg: string;
16
- };
17
- }, undefined, "flex shrink-0 items-center justify-center rounded-full", {
18
- type: {
19
- neutral: string;
20
- highlight: string;
21
- positive: string;
22
- critical: string;
23
- warning: string;
24
- };
25
- size: {
26
- xs: string;
27
- sm: string;
28
- md: string;
29
- lg: string;
30
- };
31
- }, undefined, import("tailwind-variants").TVReturnType<{
32
- type: {
33
- neutral: string;
34
- highlight: string;
35
- positive: string;
36
- critical: string;
37
- warning: string;
38
- };
39
- size: {
40
- xs: string;
41
- sm: string;
42
- md: string;
43
- lg: string;
44
- };
45
- }, undefined, "flex shrink-0 items-center justify-center rounded-full", unknown, unknown, undefined>>;
46
- declare const iconSizes: {
47
- readonly xs: "xs";
48
- readonly sm: "xs";
49
- readonly md: "sm";
50
- readonly lg: "md";
51
- };
52
- export interface BadgeProps extends VariantProps<typeof badgeVariants> {
1
+ import type { IconType } from "../primitives/F0Icon";
2
+ /**
3
+ * @deprecated Use `F0_BADGE_VARIANTS` from `../F0Badge` instead.
4
+ */
5
+ export declare const BADGE_TYPES: readonly ["neutral", "highlight", "positive", "critical", "warning"];
6
+ /**
7
+ * @deprecated Use `F0BadgeVariant` from `../F0Badge` instead.
8
+ */
9
+ export type BadgeType = (typeof BADGE_TYPES)[number];
10
+ /**
11
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
12
+ */
13
+ export declare const BADGE_SIZES: readonly ["xs", "sm", "md", "lg"];
14
+ /**
15
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
16
+ */
17
+ export type BadgeSize = (typeof BADGE_SIZES)[number];
18
+ /**
19
+ * @deprecated Use `F0BadgeProps` from `../F0Badge` instead.
20
+ * Migration: replace `type` with `variant`.
21
+ */
22
+ export interface BadgeProps {
53
23
  icon: IconType;
54
- size?: keyof typeof iconSizes;
24
+ type?: BadgeType;
25
+ size?: BadgeSize;
55
26
  }
27
+ /**
28
+ * @deprecated Use `F0Badge` from `../F0Badge` instead.
29
+ * Migration: replace `type` with `variant`.
30
+ */
56
31
  export declare const Badge: ({ type, size, icon }: BadgeProps) => import("react").JSX.Element;
57
- export {};
58
32
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ import { type F0BadgeProps } from "./F0Badge.types";
3
+ declare const F0Badge: React.NamedExoticComponent<F0BadgeProps>;
4
+ export { F0Badge };
5
+ //# sourceMappingURL=F0Badge.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,57 @@
1
+ export declare const badgeVariantClasses: {
2
+ readonly neutral: "bg-transparent text-f0-icon";
3
+ readonly highlight: "text-f0-special-highlight";
4
+ readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
5
+ readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
6
+ readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
7
+ };
8
+ export declare const badgeSizeClasses: {
9
+ readonly xs: "h-2.5 w-2.5";
10
+ readonly sm: "h-3 w-3";
11
+ readonly md: "h-5 w-5";
12
+ readonly lg: "h-6 w-6";
13
+ };
14
+ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
15
+ variant: {
16
+ readonly neutral: "bg-transparent text-f0-icon";
17
+ readonly highlight: "text-f0-special-highlight";
18
+ readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
19
+ readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
20
+ readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
21
+ };
22
+ size: {
23
+ readonly xs: "h-2.5 w-2.5";
24
+ readonly sm: "h-3 w-3";
25
+ readonly md: "h-5 w-5";
26
+ readonly lg: "h-6 w-6";
27
+ };
28
+ }, undefined, "flex shrink-0 items-center justify-center rounded-full", {
29
+ variant: {
30
+ readonly neutral: "bg-transparent text-f0-icon";
31
+ readonly highlight: "text-f0-special-highlight";
32
+ readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
33
+ readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
34
+ readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
35
+ };
36
+ size: {
37
+ readonly xs: "h-2.5 w-2.5";
38
+ readonly sm: "h-3 w-3";
39
+ readonly md: "h-5 w-5";
40
+ readonly lg: "h-6 w-6";
41
+ };
42
+ }, undefined, import("tailwind-variants").TVReturnType<{
43
+ variant: {
44
+ readonly neutral: "bg-transparent text-f0-icon";
45
+ readonly highlight: "text-f0-special-highlight";
46
+ readonly positive: "bg-f0-background-positive-bold text-f0-foreground-inverse";
47
+ readonly critical: "bg-f0-icon-critical text-f0-foreground-inverse";
48
+ readonly warning: "bg-f0-background-warning-bold text-f0-foreground-inverse";
49
+ };
50
+ size: {
51
+ readonly xs: "h-2.5 w-2.5";
52
+ readonly sm: "h-3 w-3";
53
+ readonly md: "h-5 w-5";
54
+ readonly lg: "h-6 w-6";
55
+ };
56
+ }, undefined, "flex shrink-0 items-center justify-center rounded-full", unknown, unknown, undefined>>;
57
+ //# sourceMappingURL=F0Badge.styles.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,19 @@
1
+ import type { VariantProps } from "tailwind-variants";
2
+ import type { IconType } from "../primitives/F0Icon";
3
+ import { badgeSizeClasses, badgeVariantClasses, type badgeVariants } from "./F0Badge.styles";
4
+ export type F0BadgeVariant = keyof typeof badgeVariantClasses;
5
+ export declare const F0_BADGE_VARIANTS: ReadonlyArray<F0BadgeVariant>;
6
+ export type F0BadgeSize = keyof typeof badgeSizeClasses;
7
+ export declare const F0_BADGE_SIZES: ReadonlyArray<F0BadgeSize>;
8
+ export declare const F0_BADGE_ICON_SIZES: {
9
+ readonly xs: "xs";
10
+ readonly sm: "xs";
11
+ readonly md: "sm";
12
+ readonly lg: "md";
13
+ };
14
+ export interface F0BadgeProps extends VariantProps<typeof badgeVariants> {
15
+ icon: IconType;
16
+ variant?: F0BadgeVariant;
17
+ size?: F0BadgeSize;
18
+ }
19
+ //# sourceMappingURL=F0Badge.types.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,4 @@
1
+ export { F0Badge } from "./F0Badge";
2
+ export { F0_BADGE_SIZES, F0_BADGE_VARIANTS, F0_BADGE_ICON_SIZES, } from "./F0Badge.types";
3
+ export type { F0BadgeProps, F0BadgeSize, F0BadgeVariant } from "./F0Badge.types";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -2,6 +2,7 @@ export * from "./Activity/ActivityItem";
2
2
  export * from "./Avatars/exports";
3
3
  export * from "./Badge";
4
4
  export * from "./Button";
5
+ export * from "./F0Badge";
5
6
  export * from "./Counter";
6
7
  export * from "./ExampleComponent";
7
8
  export { Icon, type IconProps } from "./Icon";
@@ -1 +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"}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorialco/f0-react-native",
3
- "version": "0.33.0",
3
+ "version": "0.34.0",
4
4
  "type": "module",
5
5
  "description": "React Native components for F0 Design System",
6
6
  "main": "expo-router/entry",
@@ -0,0 +1,29 @@
1
+ import { render } from "@testing-library/react-native"
2
+ import React from "react"
3
+
4
+ import { Add } from "../../../icons/app"
5
+ import { Badge } from "../index"
6
+
7
+ const getClassName = (
8
+ json: ReturnType<ReturnType<typeof render>["toJSON"]>
9
+ ) => {
10
+ if (!json || Array.isArray(json)) return ""
11
+ return String(json.props.className ?? "")
12
+ }
13
+
14
+ describe("Badge (deprecated wrapper)", () => {
15
+ it("renders by delegating to F0Badge", () => {
16
+ const { toJSON } = render(<Badge icon={Add} />)
17
+ expect(toJSON()).toBeTruthy()
18
+ })
19
+
20
+ it("maps `type` to F0Badge `variant`", () => {
21
+ const { toJSON } = render(<Badge icon={Add} type="critical" />)
22
+ expect(getClassName(toJSON())).toContain("bg-f0-icon-critical")
23
+ })
24
+
25
+ it("preserves size mapping contract", () => {
26
+ const { toJSON } = render(<Badge icon={Add} size="lg" />)
27
+ expect(getClassName(toJSON())).toContain("stroke-md")
28
+ })
29
+ })
@@ -1,48 +1,46 @@
1
- import { tv, type VariantProps } from "tailwind-variants"
1
+ import { F0Badge } from "../F0Badge"
2
+ import type { IconType } from "../primitives/F0Icon"
2
3
 
3
- import { F0Icon, type IconType } from "../primitives/F0Icon"
4
+ /**
5
+ * @deprecated Use `F0_BADGE_VARIANTS` from `../F0Badge` instead.
6
+ */
7
+ export const BADGE_TYPES = [
8
+ "neutral",
9
+ "highlight",
10
+ "positive",
11
+ "critical",
12
+ "warning",
13
+ ] as const
4
14
 
5
- const badgeVariants = tv({
6
- base: "flex shrink-0 items-center justify-center rounded-full",
7
- variants: {
8
- type: {
9
- neutral: "bg-transparent text-f0-icon",
10
- highlight: "text-f0-special-highlight",
11
- positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
12
- critical: "bg-f0-icon-critical text-f0-foreground-inverse",
13
- warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
14
- },
15
- size: {
16
- xs: "h-2.5 w-2.5",
17
- sm: "h-3 w-3",
18
- md: "h-5 w-5",
19
- lg: "h-6 w-6",
20
- },
21
- },
22
- defaultVariants: {
23
- type: "neutral",
24
- size: "md",
25
- },
26
- })
15
+ /**
16
+ * @deprecated Use `F0BadgeVariant` from `../F0Badge` instead.
17
+ */
18
+ export type BadgeType = (typeof BADGE_TYPES)[number]
27
19
 
28
- const iconSizes = {
29
- xs: "xs",
30
- sm: "xs",
31
- md: "sm",
32
- lg: "md",
33
- } as const
20
+ /**
21
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
22
+ */
23
+ export const BADGE_SIZES = ["xs", "sm", "md", "lg"] as const
34
24
 
35
- export interface BadgeProps extends VariantProps<typeof badgeVariants> {
25
+ /**
26
+ * @deprecated Use `F0BadgeSize` from `../F0Badge` instead.
27
+ */
28
+ export type BadgeSize = (typeof BADGE_SIZES)[number]
29
+
30
+ /**
31
+ * @deprecated Use `F0BadgeProps` from `../F0Badge` instead.
32
+ * Migration: replace `type` with `variant`.
33
+ */
34
+ export interface BadgeProps {
36
35
  icon: IconType
37
- size?: keyof typeof iconSizes
36
+ type?: BadgeType
37
+ size?: BadgeSize
38
38
  }
39
39
 
40
- export const Badge = ({ type, size = "md", icon }: BadgeProps) => {
41
- return (
42
- <F0Icon
43
- className={badgeVariants({ type, size })}
44
- icon={icon}
45
- size={iconSizes[size]}
46
- />
47
- )
40
+ /**
41
+ * @deprecated Use `F0Badge` from `../F0Badge` instead.
42
+ * Migration: replace `type` with `variant`.
43
+ */
44
+ export const Badge = ({ type = "neutral", size = "md", icon }: BadgeProps) => {
45
+ return <F0Badge icon={icon} variant={type} size={size} />
48
46
  }
@@ -0,0 +1,67 @@
1
+ # F0Badge
2
+
3
+ Semantic icon badge component for React Native in F0.
4
+
5
+ ## Overview
6
+
7
+ F0Badge renders an icon inside a circular badge with semantic color variants and size variants.
8
+
9
+ ## Usage
10
+
11
+ <!-- prettier-ignore -->
12
+ ```tsx
13
+ import { F0Badge } from "@factorialco/f0-react-native"
14
+ import { Add } from "@factorialco/f0-react-native/icons/app"
15
+
16
+ <F0Badge icon={Add} />
17
+ <F0Badge icon={Add} variant="highlight" />
18
+ <F0Badge icon={Add} size="lg" variant="positive" />
19
+ ```
20
+
21
+ ## Props
22
+
23
+ | Prop | Type | Default | Description |
24
+ | --------- | ---------------- | ----------- | --------------------------- |
25
+ | `icon` | `IconType` | required | Icon component to render |
26
+ | `variant` | `F0BadgeVariant` | `"neutral"` | Semantic visual variant |
27
+ | `size` | `F0BadgeSize` | `"md"` | Badge and icon size mapping |
28
+
29
+ ## Variants
30
+
31
+ - `neutral`
32
+ - `highlight`
33
+ - `positive`
34
+ - `critical`
35
+ - `warning`
36
+
37
+ ## Sizes
38
+
39
+ - `xs`
40
+ - `sm`
41
+ - `md`
42
+ - `lg`
43
+
44
+ ## Accessibility
45
+
46
+ F0Badge is decorative by default. Accessibility semantics come from the surrounding parent component unless explicitly handled by consumers.
47
+
48
+ ## Testing
49
+
50
+ Main tests:
51
+
52
+ - `src/components/F0Badge/__tests__/F0Badge.spec.tsx`
53
+
54
+ Coverage includes snapshots for variants and sizes, and icon-size mapping checks.
55
+
56
+ ## File Structure
57
+
58
+ ```
59
+ src/components/F0Badge/
60
+ ├── F0Badge.tsx
61
+ ├── F0Badge.types.ts
62
+ ├── F0Badge.styles.ts
63
+ ├── F0Badge.md
64
+ ├── index.ts
65
+ └── __tests__/
66
+ └── F0Badge.spec.tsx
67
+ ```
@@ -0,0 +1,28 @@
1
+ import { tv } from "tailwind-variants"
2
+
3
+ export const badgeVariantClasses = {
4
+ neutral: "bg-transparent text-f0-icon",
5
+ highlight: "text-f0-special-highlight",
6
+ positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
7
+ critical: "bg-f0-icon-critical text-f0-foreground-inverse",
8
+ warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
9
+ } as const
10
+
11
+ export const badgeSizeClasses = {
12
+ xs: "h-2.5 w-2.5",
13
+ sm: "h-3 w-3",
14
+ md: "h-5 w-5",
15
+ lg: "h-6 w-6",
16
+ } as const
17
+
18
+ export const badgeVariants = tv({
19
+ base: "flex shrink-0 items-center justify-center rounded-full",
20
+ variants: {
21
+ variant: badgeVariantClasses,
22
+ size: badgeSizeClasses,
23
+ },
24
+ defaultVariants: {
25
+ variant: "neutral",
26
+ size: "md",
27
+ },
28
+ })
@@ -0,0 +1,24 @@
1
+ import React from "react"
2
+
3
+ import { F0Icon } from "../primitives/F0Icon"
4
+
5
+ import { badgeVariants } from "./F0Badge.styles"
6
+ import { F0_BADGE_ICON_SIZES, type F0BadgeProps } from "./F0Badge.types"
7
+
8
+ const F0Badge = React.memo(function F0Badge({
9
+ variant = "neutral",
10
+ size = "md",
11
+ icon,
12
+ }: F0BadgeProps) {
13
+ return (
14
+ <F0Icon
15
+ className={badgeVariants({ variant, size })}
16
+ icon={icon}
17
+ size={F0_BADGE_ICON_SIZES[size]}
18
+ />
19
+ )
20
+ })
21
+
22
+ F0Badge.displayName = "F0Badge"
23
+
24
+ export { F0Badge }
@@ -0,0 +1,34 @@
1
+ import type { VariantProps } from "tailwind-variants"
2
+
3
+ import type { IconType } from "../primitives/F0Icon"
4
+
5
+ import {
6
+ badgeSizeClasses,
7
+ badgeVariantClasses,
8
+ type badgeVariants,
9
+ } from "./F0Badge.styles"
10
+
11
+ export type F0BadgeVariant = keyof typeof badgeVariantClasses
12
+
13
+ export const F0_BADGE_VARIANTS = Object.keys(
14
+ badgeVariantClasses
15
+ ) as ReadonlyArray<F0BadgeVariant>
16
+
17
+ export type F0BadgeSize = keyof typeof badgeSizeClasses
18
+
19
+ export const F0_BADGE_SIZES = Object.keys(
20
+ badgeSizeClasses
21
+ ) as ReadonlyArray<F0BadgeSize>
22
+
23
+ export const F0_BADGE_ICON_SIZES = {
24
+ xs: "xs",
25
+ sm: "xs",
26
+ md: "sm",
27
+ lg: "md",
28
+ } as const
29
+
30
+ export interface F0BadgeProps extends VariantProps<typeof badgeVariants> {
31
+ icon: IconType
32
+ variant?: F0BadgeVariant
33
+ size?: F0BadgeSize
34
+ }