@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.
- package/lib/module/components/Badge/index.js +1 -1
- package/lib/module/components/Badge/index.js.map +1 -1
- package/lib/module/components/F0Badge/F0Badge.js +2 -0
- package/lib/module/components/F0Badge/F0Badge.js.map +1 -0
- package/lib/module/components/F0Badge/F0Badge.md +67 -0
- package/lib/module/components/F0Badge/F0Badge.styles.js +2 -0
- package/lib/module/components/F0Badge/F0Badge.styles.js.map +1 -0
- package/lib/module/components/F0Badge/F0Badge.types.js +2 -0
- package/lib/module/components/F0Badge/F0Badge.types.js.map +1 -0
- package/lib/module/components/F0Badge/index.js +2 -0
- package/lib/module/components/F0Badge/index.js.map +1 -0
- package/lib/module/components/exports.js +1 -1
- package/lib/module/components/exports.js.map +1 -1
- package/lib/typescript/components/Badge/index.d.ts +28 -54
- package/lib/typescript/components/Badge/index.d.ts.map +1 -1
- package/lib/typescript/components/F0Badge/F0Badge.d.ts +5 -0
- package/lib/typescript/components/F0Badge/F0Badge.d.ts.map +1 -0
- package/lib/typescript/components/F0Badge/F0Badge.styles.d.ts +57 -0
- package/lib/typescript/components/F0Badge/F0Badge.styles.d.ts.map +1 -0
- package/lib/typescript/components/F0Badge/F0Badge.types.d.ts +19 -0
- package/lib/typescript/components/F0Badge/F0Badge.types.d.ts.map +1 -0
- package/lib/typescript/components/F0Badge/index.d.ts +4 -0
- package/lib/typescript/components/F0Badge/index.d.ts.map +1 -0
- package/lib/typescript/components/exports.d.ts +1 -0
- package/lib/typescript/components/exports.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Badge/__tests__/index.spec.tsx +29 -0
- package/src/components/Badge/index.tsx +38 -40
- package/src/components/F0Badge/F0Badge.md +67 -0
- package/src/components/F0Badge/F0Badge.styles.ts +28 -0
- package/src/components/F0Badge/F0Badge.tsx +24 -0
- package/src/components/F0Badge/F0Badge.types.ts +34 -0
- package/src/components/F0Badge/__tests__/F0Badge.spec.tsx +63 -0
- package/src/components/F0Badge/__tests__/__snapshots__/F0Badge.spec.tsx.snap +651 -0
- package/src/components/F0Badge/index.ts +7 -0
- package/src/components/exports.ts +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
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":["
|
|
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 @@
|
|
|
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 {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
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":"
|
|
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 @@
|
|
|
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 @@
|
|
|
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
|
@@ -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 {
|
|
1
|
+
import { F0Badge } from "../F0Badge"
|
|
2
|
+
import type { IconType } from "../primitives/F0Icon"
|
|
2
3
|
|
|
3
|
-
|
|
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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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
|
-
|
|
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
|
-
|
|
36
|
+
type?: BadgeType
|
|
37
|
+
size?: BadgeSize
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
+
}
|