@factorialco/f0-react-native 0.26.0 → 0.28.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/README.md +2 -2
- package/lib/module/components/exports.js +1 -1
- package/lib/module/components/exports.js.map +1 -1
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js +2 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js.map +1 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +159 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.js +2 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.js.map +1 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/index.js +2 -0
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/index.js.map +1 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.js +2 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.js.map +1 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.md +320 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js +2 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map +1 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js +2 -0
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js.map +1 -0
- package/lib/module/components/primitives/F0Text/F0Text/index.js +2 -0
- package/lib/module/components/primitives/F0Text/F0Text/index.js.map +1 -0
- package/lib/module/components/primitives/F0Text/index.js +2 -0
- package/lib/module/components/primitives/F0Text/index.js.map +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/lib/utils.js +1 -1
- package/lib/module/lib/utils.js.map +1 -1
- package/lib/module/styles/theme.css +7 -0
- package/lib/typescript/components/exports.d.ts +1 -0
- package/lib/typescript/components/exports.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts +5 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts +45 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/index.d.ts +8 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/index.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.d.ts +8 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts +144 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts +86 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/index.d.ts +9 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/index.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/index.d.ts +12 -0
- package/lib/typescript/components/primitives/F0Text/index.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/lib/utils.d.ts +9 -0
- package/lib/typescript/lib/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/exports.ts +3 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +159 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx +72 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts +61 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/AnimatedF0Text.spec.tsx +131 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/__snapshots__/AnimatedF0Text.spec.tsx.snap +144 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/index.ts +8 -0
- package/src/components/primitives/F0Text/F0Text/F0Text.md +320 -0
- package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts +71 -0
- package/src/components/primitives/F0Text/F0Text/F0Text.tsx +76 -0
- package/src/components/primitives/F0Text/F0Text/F0Text.types.ts +134 -0
- package/src/components/primitives/F0Text/F0Text/__tests__/F0Text.spec.tsx +228 -0
- package/src/components/primitives/F0Text/F0Text/__tests__/__snapshots__/F0Text.spec.tsx.snap +325 -0
- package/src/components/primitives/F0Text/F0Text/index.ts +22 -0
- package/src/components/primitives/F0Text/index.ts +26 -0
- package/src/index.ts +1 -1
- package/src/lib/__tests__/utils.spec.ts +48 -0
- package/src/lib/utils.ts +19 -0
- package/src/styles/theme.css +7 -0
package/README.md
CHANGED
|
@@ -167,8 +167,8 @@ Use this section after each manual update so people can install the latest build
|
|
|
167
167
|
### ✅ Latest Update
|
|
168
168
|
|
|
169
169
|
- **Branch / Channel:** `production`
|
|
170
|
-
- **Update message:** `
|
|
171
|
-
- **Published at:** `
|
|
170
|
+
- **Update message:** `F0Text and AnimatedF0Text`
|
|
171
|
+
- **Published at:** `Mar 4, 2026`
|
|
172
172
|
|
|
173
173
|
### 🔗 Deep Link
|
|
174
174
|
|
|
@@ -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*from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./PressableFeedback";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";
|
|
1
|
+
export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./Counter";export*from"./ExampleComponent";export*from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./PressableFeedback";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";
|
|
2
2
|
//# sourceMappingURL=exports.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"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,WAAc,QAAQ,CACtB,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,qBAAqB,CACnC,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"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,WAAc,QAAQ,CACtB,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,qBAAqB,CACnC,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["variant","color","align","decoration","transform","children","numberOfLines","style"];import React from"react";import{Text as RNText}from"react-native";import Animated from"react-native-reanimated";import{textVariants}from"../F0Text/F0Text.styles";import{jsx as _jsx}from"react/jsx-runtime";var AnimatedText=Animated.createAnimatedComponent(RNText);var AnimatedF0TextComponent=React.forwardRef(function(_ref,ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?"body-sm-default":_ref$variant,_ref$color=_ref.color,color=_ref$color===void 0?"default":_ref$color,_ref$align=_ref.align,align=_ref$align===void 0?"left":_ref$align,_ref$decoration=_ref.decoration,decoration=_ref$decoration===void 0?"none":_ref$decoration,_ref$transform=_ref.transform,transform=_ref$transform===void 0?"none":_ref$transform,children=_ref.children,numberOfLines=_ref.numberOfLines,style=_ref.style,rest=_objectWithoutProperties(_ref,_excluded);var textClassName=React.useMemo(function(){return textVariants({variant:variant,color:color,align:align,decoration:decoration,transform:transform});},[variant,color,align,decoration,transform]);return _jsx(AnimatedText,Object.assign({ref:ref},rest,{className:textClassName,style:style,numberOfLines:numberOfLines,ellipsizeMode:numberOfLines?"tail":undefined,children:children}));});AnimatedF0TextComponent.displayName="AnimatedF0Text";export var AnimatedF0Text=React.memo(AnimatedF0TextComponent);
|
|
2
|
+
//# sourceMappingURL=AnimatedF0Text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","RNText","Animated","textVariants","jsx","_jsx","AnimatedText","createAnimatedComponent","AnimatedF0TextComponent","forwardRef","_ref","ref","_ref$variant","variant","_ref$color","color","_ref$align","align","_ref$decoration","decoration","_ref$transform","transform","children","numberOfLines","style","rest","_objectWithoutProperties","_excluded","textClassName","useMemo","Object","assign","className","ellipsizeMode","undefined","displayName","AnimatedF0Text","memo"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"mappings":"2LAAA,MAAO,CAAAA,KAAK,KAAM,OAAO,CACzB,OAASC,IAAI,GAAI,CAAAC,MAAM,KAAQ,cAAc,CAC7C,MAAO,CAAAC,QAAQ,KAAM,yBAAyB,CAE9C,OAASC,YAAY,KAAQ,yBAAyB,QAAAC,GAAA,IAAAC,IAAA,yBAItD,GAAM,CAAAC,YAAY,CAAGJ,QAAQ,CAACK,uBAAuB,CAACN,MAAM,CAAC,CAc7D,GAAM,CAAAO,uBAAuB,CAAGT,KAAK,CAACU,UAAU,CAI9C,SAAAC,IAAA,CAYEC,GAAG,CACA,KAAAC,YAAA,CAAAF,IAAA,CAXDG,OAAO,CAAPA,OAAO,CAAAD,YAAA,UAAG,iBAAiB,CAAAA,YAAA,CAAAE,UAAA,CAAAJ,IAAA,CAC3BK,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,SAAS,CAAAA,UAAA,CAAAE,UAAA,CAAAN,IAAA,CACjBO,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,MAAM,CAAAA,UAAA,CAAAE,eAAA,CAAAR,IAAA,CACdS,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,MAAM,CAAAA,eAAA,CAAAE,cAAA,CAAAV,IAAA,CACnBW,SAAS,CAATA,SAAS,CAAAD,cAAA,UAAG,MAAM,CAAAA,cAAA,CAClBE,QAAQ,CAAAZ,IAAA,CAARY,QAAQ,CACRC,aAAa,CAAAb,IAAA,CAAba,aAAa,CACbC,KAAK,CAAAd,IAAA,CAALc,KAAK,CACFC,IAAI,CAAAC,wBAAA,CAAAhB,IAAA,CAAAiB,SAAA,EAIT,GAAM,CAAAC,aAAa,CAAG7B,KAAK,CAAC8B,OAAO,CACjC,iBACE,CAAA1B,YAAY,CAAC,CACXU,OAAO,CAAPA,OAAO,CACPE,KAAK,CAALA,KAAK,CACLE,KAAK,CAALA,KAAK,CACLE,UAAU,CAAVA,UAAU,CACVE,SAAS,CAATA,SACF,CAAC,CAAC,GACJ,CAACR,OAAO,CAAEE,KAAK,CAAEE,KAAK,CAAEE,UAAU,CAAEE,SAAS,CAC/C,CAAC,CAED,MACE,CAAAhB,IAAA,CAACC,YAAY,CAAAwB,MAAA,CAAAC,MAAA,EACXpB,GAAG,CAAEA,GAAI,EACLc,IAAI,EACRO,SAAS,CAAEJ,aAAc,CACzBJ,KAAK,CAAEA,KAAM,CACbD,aAAa,CAAEA,aAAc,CAC7BU,aAAa,CAAEV,aAAa,CAAG,MAAM,CAAGW,SAAU,CAAAZ,QAAA,CAEjDA,QAAQ,EACG,CAAC,CAEnB,CACF,CAAC,CAEDd,uBAAuB,CAAC2B,WAAW,CAAG,gBAAgB,CAEtD,MAAO,IAAM,CAAAC,cAAc,CAAGrC,KAAK,CAACsC,IAAI,CAAC7B,uBAAuB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# AnimatedF0Text
|
|
2
|
+
|
|
3
|
+
Animated text primitive for React Native with semantic typography variants and Reanimated animation support.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- All F0Text semantic typography variants and colors
|
|
8
|
+
- Reanimated `entering`/`exiting` layout animations
|
|
9
|
+
- Animated `style` prop for custom animations via `useAnimatedStyle`
|
|
10
|
+
- Layout transition animations
|
|
11
|
+
- Shares the same typography system as F0Text
|
|
12
|
+
- Performance optimized with React.memo and useMemo
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { AnimatedF0Text } from "@factorialco/f0-react-native"
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Requires `react-native-reanimated` as a peer dependency.
|
|
21
|
+
|
|
22
|
+
## When to use AnimatedF0Text vs F0Text
|
|
23
|
+
|
|
24
|
+
| Use case | Component |
|
|
25
|
+
| ------------------------------------------------- | ---------------- |
|
|
26
|
+
| Static text, no animation | `F0Text` |
|
|
27
|
+
| Text that fades in/out | `AnimatedF0Text` |
|
|
28
|
+
| Text with entering/exiting transitions | `AnimatedF0Text` |
|
|
29
|
+
| Text driven by animated values (scroll, gestures) | `AnimatedF0Text` |
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
### Entering/Exiting Animations
|
|
34
|
+
|
|
35
|
+
<!-- prettier-ignore -->
|
|
36
|
+
```tsx
|
|
37
|
+
import { AnimatedF0Text } from "@factorialco/f0-react-native"
|
|
38
|
+
import { FadeIn, FadeOut, SlideInLeft } from "react-native-reanimated"
|
|
39
|
+
|
|
40
|
+
<>
|
|
41
|
+
<AnimatedF0Text
|
|
42
|
+
variant="heading-xl"
|
|
43
|
+
entering={FadeIn.duration(300)}
|
|
44
|
+
exiting={FadeOut.duration(200)}
|
|
45
|
+
>
|
|
46
|
+
Welcome back
|
|
47
|
+
</AnimatedF0Text>
|
|
48
|
+
|
|
49
|
+
<AnimatedF0Text variant="heading-md" entering={SlideInLeft.springify()}>
|
|
50
|
+
Slide in heading
|
|
51
|
+
</AnimatedF0Text>
|
|
52
|
+
</>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Custom Animated Styles
|
|
56
|
+
|
|
57
|
+
<!-- prettier-ignore -->
|
|
58
|
+
```tsx
|
|
59
|
+
import { AnimatedF0Text } from "@factorialco/f0-react-native"
|
|
60
|
+
import { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
|
|
61
|
+
|
|
62
|
+
const opacity = useSharedValue(0)
|
|
63
|
+
|
|
64
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
65
|
+
opacity: opacity.value,
|
|
66
|
+
transform: [{ translateY: withTiming(opacity.value * -10) }],
|
|
67
|
+
}))
|
|
68
|
+
|
|
69
|
+
<>
|
|
70
|
+
<AnimatedF0Text variant="body-md-default" style={animatedStyle}>
|
|
71
|
+
Custom animated text
|
|
72
|
+
</AnimatedF0Text>
|
|
73
|
+
</>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Layout Transitions
|
|
77
|
+
|
|
78
|
+
<!-- prettier-ignore -->
|
|
79
|
+
```tsx
|
|
80
|
+
import { AnimatedF0Text } from "@factorialco/f0-react-native"
|
|
81
|
+
import { LinearTransition } from "react-native-reanimated"
|
|
82
|
+
|
|
83
|
+
<>
|
|
84
|
+
<AnimatedF0Text
|
|
85
|
+
variant="body-sm-default"
|
|
86
|
+
layout={LinearTransition.springify()}
|
|
87
|
+
>
|
|
88
|
+
{dynamicContent}
|
|
89
|
+
</AnimatedF0Text>
|
|
90
|
+
</>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## API Reference
|
|
94
|
+
|
|
95
|
+
### Props
|
|
96
|
+
|
|
97
|
+
AnimatedF0Text accepts all F0Text semantic props plus Reanimated animation props.
|
|
98
|
+
|
|
99
|
+
#### Typography Props (shared with F0Text)
|
|
100
|
+
|
|
101
|
+
| Prop | Type | Default | Description |
|
|
102
|
+
| --------------- | ------------------- | ------------------- | ---------------------------------------- |
|
|
103
|
+
| `variant` | `TypographyVariant` | `'body-sm-default'` | Typography variant |
|
|
104
|
+
| `color` | `TextColor` | `'default'` | Text color from F0 semantic color system |
|
|
105
|
+
| `align` | `TextAlign` | `'left'` | Text alignment |
|
|
106
|
+
| `decoration` | `TextDecoration` | `'none'` | Text decoration |
|
|
107
|
+
| `transform` | `TextTransform` | `'none'` | Text transform |
|
|
108
|
+
| `numberOfLines` | `number` | `undefined` | Max lines before truncation |
|
|
109
|
+
|
|
110
|
+
#### Animation Props
|
|
111
|
+
|
|
112
|
+
| Prop | Type | Description |
|
|
113
|
+
| ---------- | ------------------------------------------------- | -------------------------------------------------------------- |
|
|
114
|
+
| `entering` | `EntryOrExitLayoutType` | Reanimated entering animation (e.g. `FadeIn`, `SlideInLeft`) |
|
|
115
|
+
| `exiting` | `EntryOrExitLayoutType` | Reanimated exiting animation (e.g. `FadeOut`, `SlideOutRight`) |
|
|
116
|
+
| `layout` | `BaseAnimationBuilder \| LayoutAnimationFunction` | Layout transition animation |
|
|
117
|
+
| `style` | `AnimatedStyle` | Animated style from `useAnimatedStyle` |
|
|
118
|
+
|
|
119
|
+
All React Native `TextProps` are also supported (onPress, testID, etc.).
|
|
120
|
+
|
|
121
|
+
### Typography Variants
|
|
122
|
+
|
|
123
|
+
See [F0Text documentation](../F0Text/F0Text.md) for the full list of typography variants and colors.
|
|
124
|
+
|
|
125
|
+
## Architecture
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
F0Text/ # Parent folder for text primitives
|
|
129
|
+
├── F0Text/ # Static text component
|
|
130
|
+
│ ├── F0Text.tsx
|
|
131
|
+
│ ├── F0Text.types.ts # Shared types (TypographyVariant, TextColor, etc.)
|
|
132
|
+
│ ├── F0Text.styles.ts # Shared styles (textVariants)
|
|
133
|
+
│ ├── F0Text.md
|
|
134
|
+
│ ├── index.ts
|
|
135
|
+
│ └── __tests__/
|
|
136
|
+
├── AnimatedF0Text/ # Animated text component
|
|
137
|
+
│ ├── AnimatedF0Text.tsx # Animated text (Reanimated Animated.Text)
|
|
138
|
+
│ ├── AnimatedF0Text.types.ts
|
|
139
|
+
│ ├── AnimatedF0Text.md
|
|
140
|
+
│ ├── index.ts
|
|
141
|
+
│ └── __tests__/
|
|
142
|
+
└── index.ts # Barrel re-exporting both
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
- **Types** are imported from `../F0Text/F0Text.types.ts` (`TypographyVariant`, `TextColor`, etc.)
|
|
146
|
+
- **Styles** are imported from `../F0Text/F0Text.styles.ts` (`textVariants`)
|
|
147
|
+
|
|
148
|
+
This ensures both components always produce identical typography output.
|
|
149
|
+
|
|
150
|
+
## Accessibility
|
|
151
|
+
|
|
152
|
+
- Fully supports React Native `Text` accessibility props
|
|
153
|
+
- Animations respect the device's reduced motion setting when using Reanimated's built-in animations
|
|
154
|
+
|
|
155
|
+
## Performance
|
|
156
|
+
|
|
157
|
+
- **React.memo**: Prevents re-renders when props unchanged
|
|
158
|
+
- **useMemo**: Memoizes className computation
|
|
159
|
+
- Only imported when animation is needed (tree-shakeable)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["AnimatedF0Text"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/index.ts"],"mappings":"AAMA,OAASA,cAAc,KAAQ,kBAAkB","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["variant","color","align","decoration","transform","children","numberOfLines"];import React from"react";import{Text as RNText}from"react-native";import{omitProps}from"../../../../lib/utils";import{textVariants}from"./F0Text.styles";import{F0_TEXT_BANNED_PROPS}from"./F0Text.types";import{jsx as _jsx}from"react/jsx-runtime";var F0TextComponent=React.forwardRef(function(_ref,ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?"body-sm-default":_ref$variant,_ref$color=_ref.color,color=_ref$color===void 0?"default":_ref$color,_ref$align=_ref.align,align=_ref$align===void 0?"left":_ref$align,_ref$decoration=_ref.decoration,decoration=_ref$decoration===void 0?"none":_ref$decoration,_ref$transform=_ref.transform,transform=_ref$transform===void 0?"none":_ref$transform,children=_ref.children,numberOfLines=_ref.numberOfLines,rest=_objectWithoutProperties(_ref,_excluded);var textClassName=React.useMemo(function(){return textVariants({variant:variant,color:color,align:align,decoration:decoration,transform:transform});},[variant,color,align,decoration,transform]);return _jsx(RNText,Object.assign({ref:ref},omitProps(rest,F0_TEXT_BANNED_PROPS),{className:textClassName,numberOfLines:numberOfLines,ellipsizeMode:numberOfLines?"tail":undefined,children:children}));});F0TextComponent.displayName="F0Text";export var F0Text=React.memo(F0TextComponent);export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text.types";
|
|
2
|
+
//# sourceMappingURL=F0Text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","RNText","omitProps","textVariants","F0_TEXT_BANNED_PROPS","jsx","_jsx","F0TextComponent","forwardRef","_ref","ref","_ref$variant","variant","_ref$color","color","_ref$align","align","_ref$decoration","decoration","_ref$transform","transform","children","numberOfLines","rest","_objectWithoutProperties","_excluded","textClassName","useMemo","Object","assign","className","ellipsizeMode","undefined","displayName","F0Text","memo","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/F0Text/F0Text.tsx"],"mappings":"mLAAA,MAAO,CAAAA,KAAK,KAAM,OAAO,CACzB,OAASC,IAAI,GAAI,CAAAC,MAAM,KAAQ,cAAc,CAE7C,OAASC,SAAS,KAAQ,uBAAuB,CAEjD,OAASC,YAAY,KAAQ,iBAAiB,CAC9C,OAASC,oBAAoB,KAA0B,gBAAgB,QAAAC,GAAA,IAAAC,IAAA,yBAUvE,GAAM,CAAAC,eAAe,CAAGR,KAAK,CAACS,UAAU,CACtC,SAAAC,IAAA,CAWEC,GAAG,CACA,KAAAC,YAAA,CAAAF,IAAA,CAVDG,OAAO,CAAPA,OAAO,CAAAD,YAAA,UAAG,iBAAiB,CAAAA,YAAA,CAAAE,UAAA,CAAAJ,IAAA,CAC3BK,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,SAAS,CAAAA,UAAA,CAAAE,UAAA,CAAAN,IAAA,CACjBO,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,MAAM,CAAAA,UAAA,CAAAE,eAAA,CAAAR,IAAA,CACdS,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,MAAM,CAAAA,eAAA,CAAAE,cAAA,CAAAV,IAAA,CACnBW,SAAS,CAATA,SAAS,CAAAD,cAAA,UAAG,MAAM,CAAAA,cAAA,CAClBE,QAAQ,CAAAZ,IAAA,CAARY,QAAQ,CACRC,aAAa,CAAAb,IAAA,CAAba,aAAa,CACVC,IAAI,CAAAC,wBAAA,CAAAf,IAAA,CAAAgB,SAAA,EAIT,GAAM,CAAAC,aAAa,CAAG3B,KAAK,CAAC4B,OAAO,CACjC,iBACE,CAAAxB,YAAY,CAAC,CACXS,OAAO,CAAPA,OAAO,CACPE,KAAK,CAALA,KAAK,CACLE,KAAK,CAALA,KAAK,CACLE,UAAU,CAAVA,UAAU,CACVE,SAAS,CAATA,SACF,CAAC,CAAC,GACJ,CAACR,OAAO,CAAEE,KAAK,CAAEE,KAAK,CAAEE,UAAU,CAAEE,SAAS,CAC/C,CAAC,CAED,MACE,CAAAd,IAAA,CAACL,MAAM,CAAA2B,MAAA,CAAAC,MAAA,EACLnB,GAAG,CAAEA,GAAI,EACLR,SAAS,CAACqB,IAAI,CAAEnB,oBAAoB,CAAC,EACzC0B,SAAS,CAAEJ,aAAc,CACzBJ,aAAa,CAAEA,aAAc,CAC7BS,aAAa,CAAET,aAAa,CAAG,MAAM,CAAGU,SAAU,CAAAX,QAAA,CAEjDA,QAAQ,EACH,CAAC,CAEb,CACF,CAAC,CAEDd,eAAe,CAAC0B,WAAW,CAAG,QAAQ,CAEtC,MAAO,IAAM,CAAAC,MAAM,CAAGnC,KAAK,CAACoC,IAAI,CAAC5B,eAAe,CAAC,CAIjD,OACE6B,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,gBAAgB","ignoreList":[]}
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
# F0Text
|
|
2
|
+
|
|
3
|
+
Primitive text component for React Native with semantic typography variants and optimized performance.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Semantic typography variants (heading and body styles)
|
|
8
|
+
- F0 semantic color system integration
|
|
9
|
+
- Inter font family support
|
|
10
|
+
- Type-safe TypeScript API
|
|
11
|
+
- Uniwind (Tailwind) styling
|
|
12
|
+
- Performance optimized with React.memo and useMemo
|
|
13
|
+
- Full accessibility support
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { F0Text } from "@factorialco/f0-react-native"
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
<!-- prettier-ignore -->
|
|
24
|
+
```tsx
|
|
25
|
+
<>
|
|
26
|
+
<F0Text variant="heading-lg">Welcome</F0Text>
|
|
27
|
+
<F0Text variant="body-sm-default" color="secondary">
|
|
28
|
+
Secondary text
|
|
29
|
+
</F0Text>
|
|
30
|
+
<F0Text variant="body-md-medium" align="center">
|
|
31
|
+
Centered text
|
|
32
|
+
</F0Text>
|
|
33
|
+
<F0Text variant="body-sm-default" numberOfLines={2}>
|
|
34
|
+
Truncated text...
|
|
35
|
+
</F0Text>
|
|
36
|
+
</>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## API Reference
|
|
40
|
+
|
|
41
|
+
### Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
| --------------- | ------------------- | ------------------- | ------------------------------------------------------- |
|
|
45
|
+
| `variant` | `TypographyVariant` | `'body-sm-default'` | Typography variant with weight included |
|
|
46
|
+
| `color` | `TextColor` | `'default'` | Text color from F0 semantic color system |
|
|
47
|
+
| `align` | `TextAlign` | `'left'` | Text alignment (left, center, right, justify) |
|
|
48
|
+
| `decoration` | `TextDecoration` | `'none'` | Text decoration (none, underline, line-through) |
|
|
49
|
+
| `transform` | `TextTransform` | `'none'` | Text transform (none, uppercase, lowercase, capitalize) |
|
|
50
|
+
| `numberOfLines` | `number` | `undefined` | Max lines before truncation with ellipsis |
|
|
51
|
+
|
|
52
|
+
All React Native `TextProps` are also supported (onPress, testID, etc.).
|
|
53
|
+
|
|
54
|
+
**Note**: `className` and `style` props are **not available**. Use semantic props for typography. For spacing/layout, wrap F0Text in a View. Both props are filtered at runtime to prevent override via spread.
|
|
55
|
+
|
|
56
|
+
### Typography Variants
|
|
57
|
+
|
|
58
|
+
All variants use **Inter** font family with the weight included in the variant name.
|
|
59
|
+
|
|
60
|
+
#### Heading Variants
|
|
61
|
+
|
|
62
|
+
| Variant | Size | Line Height | Weight | Letter Spacing |
|
|
63
|
+
| ------------ | ---- | ----------- | -------------- | -------------- |
|
|
64
|
+
| `heading-xl` | 36px | 40px | Semibold (600) | -0.2px |
|
|
65
|
+
| `heading-lg` | 24px | 32px | Semibold (600) | -0.2px |
|
|
66
|
+
| `heading-md` | 20px | 28px | Semibold (600) | -0.2px |
|
|
67
|
+
| `heading-sm` | 16px | 24px | Semibold (600) | - |
|
|
68
|
+
|
|
69
|
+
#### Body Variants
|
|
70
|
+
|
|
71
|
+
| Variant | Size | Line Height | Weight | Letter Spacing |
|
|
72
|
+
| ------------------ | ---- | ----------- | -------------- | -------------- |
|
|
73
|
+
| `body-md-default` | 16px | 24px | Regular (400) | - |
|
|
74
|
+
| `body-md-medium` | 16px | 24px | Medium (500) | - |
|
|
75
|
+
| `body-md-semibold` | 16px | 24px | Semibold (600) | - |
|
|
76
|
+
| `body-sm-default` | 14px | 20px | Regular (400) | - |
|
|
77
|
+
| `body-sm-medium` | 14px | 20px | Medium (500) | - |
|
|
78
|
+
| `body-sm-semibold` | 14px | 20px | Semibold (600) | - |
|
|
79
|
+
| `body-xs-medium` | 12px | 16px | Medium (500) | - |
|
|
80
|
+
|
|
81
|
+
### Color Variants
|
|
82
|
+
|
|
83
|
+
| Color | Usage |
|
|
84
|
+
| ------------------- | ---------------------------------- |
|
|
85
|
+
| `default` | Primary text |
|
|
86
|
+
| `secondary` | Secondary information |
|
|
87
|
+
| `tertiary` | Tertiary/subtle text |
|
|
88
|
+
| `inverse` | Text on dark backgrounds |
|
|
89
|
+
| `inverse-secondary` | Secondary text on dark backgrounds |
|
|
90
|
+
| `disabled` | Disabled state text |
|
|
91
|
+
| `accent` | Highlighted/accent text |
|
|
92
|
+
| `critical` | Error messages |
|
|
93
|
+
| `info` | Informational text |
|
|
94
|
+
| `warning` | Warning messages |
|
|
95
|
+
| `positive` | Success messages |
|
|
96
|
+
| `selected` | Selected state text |
|
|
97
|
+
|
|
98
|
+
## Examples
|
|
99
|
+
|
|
100
|
+
### Typography Variants
|
|
101
|
+
|
|
102
|
+
<!-- prettier-ignore -->
|
|
103
|
+
```tsx
|
|
104
|
+
<>
|
|
105
|
+
{/* Headings */}
|
|
106
|
+
<F0Text variant="heading-xl">Extra Large Heading</F0Text>
|
|
107
|
+
<F0Text variant="heading-lg">Large Heading</F0Text>
|
|
108
|
+
<F0Text variant="heading-md">Medium Heading</F0Text>
|
|
109
|
+
<F0Text variant="heading-sm">Small Heading</F0Text>
|
|
110
|
+
|
|
111
|
+
{/* Body with different weights */}
|
|
112
|
+
<F0Text variant="body-md-default">Regular body text</F0Text>
|
|
113
|
+
<F0Text variant="body-md-medium">Medium body text</F0Text>
|
|
114
|
+
<F0Text variant="body-md-semibold">Semibold body text</F0Text>
|
|
115
|
+
|
|
116
|
+
{/* Smaller sizes */}
|
|
117
|
+
<F0Text variant="body-sm-default">Small regular text</F0Text>
|
|
118
|
+
<F0Text variant="body-xs-medium">Extra small medium text</F0Text>
|
|
119
|
+
</>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Colors
|
|
123
|
+
|
|
124
|
+
<!-- prettier-ignore -->
|
|
125
|
+
```tsx
|
|
126
|
+
<>
|
|
127
|
+
<F0Text variant="body-sm-default" color="default">
|
|
128
|
+
Primary text
|
|
129
|
+
</F0Text>
|
|
130
|
+
<F0Text variant="body-sm-default" color="secondary">
|
|
131
|
+
Secondary information
|
|
132
|
+
</F0Text>
|
|
133
|
+
<F0Text variant="body-sm-default" color="critical">
|
|
134
|
+
Error message
|
|
135
|
+
</F0Text>
|
|
136
|
+
<F0Text variant="body-sm-default" color="positive">
|
|
137
|
+
Success message
|
|
138
|
+
</F0Text>
|
|
139
|
+
<F0Text variant="body-sm-default" color="accent">
|
|
140
|
+
Highlighted text
|
|
141
|
+
</F0Text>
|
|
142
|
+
</>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Text Decorations & Transforms
|
|
146
|
+
|
|
147
|
+
<!-- prettier-ignore -->
|
|
148
|
+
```tsx
|
|
149
|
+
<>
|
|
150
|
+
<F0Text variant="body-sm-default" decoration="underline">
|
|
151
|
+
Underlined text
|
|
152
|
+
</F0Text>
|
|
153
|
+
<F0Text variant="body-sm-default" decoration="line-through">
|
|
154
|
+
Strikethrough text
|
|
155
|
+
</F0Text>
|
|
156
|
+
<F0Text variant="body-sm-default" transform="uppercase">
|
|
157
|
+
uppercase text
|
|
158
|
+
</F0Text>
|
|
159
|
+
<F0Text variant="body-sm-default" transform="capitalize">
|
|
160
|
+
capitalize words
|
|
161
|
+
</F0Text>
|
|
162
|
+
</>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Truncation
|
|
166
|
+
|
|
167
|
+
<!-- prettier-ignore -->
|
|
168
|
+
```tsx
|
|
169
|
+
<>
|
|
170
|
+
<F0Text variant="body-sm-default" numberOfLines={1}>
|
|
171
|
+
This long text will be truncated after one line with an ellipsis...
|
|
172
|
+
</F0Text>
|
|
173
|
+
|
|
174
|
+
<F0Text variant="body-md-default" numberOfLines={3}>
|
|
175
|
+
This text can span up to three lines before being truncated with an ellipsis
|
|
176
|
+
at the end. Perfect for card descriptions or preview text.
|
|
177
|
+
</F0Text>
|
|
178
|
+
</>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Spacing & Layout
|
|
182
|
+
|
|
183
|
+
F0Text doesn't accept `className` to prevent typography override. Use a View wrapper for spacing:
|
|
184
|
+
|
|
185
|
+
<!-- prettier-ignore -->
|
|
186
|
+
```tsx
|
|
187
|
+
<>
|
|
188
|
+
{/* Spacing with View wrapper */}
|
|
189
|
+
<View className="mt-4 mb-2">
|
|
190
|
+
<F0Text variant="body-sm-default">Text with margin</F0Text>
|
|
191
|
+
</View>
|
|
192
|
+
|
|
193
|
+
{/* Layout with View wrapper */}
|
|
194
|
+
<View className="flex-1">
|
|
195
|
+
<F0Text variant="body-sm-default">Flexible text</F0Text>
|
|
196
|
+
</View>
|
|
197
|
+
|
|
198
|
+
{/* Icon + Text pattern */}
|
|
199
|
+
<View className="flex-row items-center gap-2">
|
|
200
|
+
<F0Icon icon={Check} size="sm" />
|
|
201
|
+
<F0Text variant="body-sm-default">Success message</F0Text>
|
|
202
|
+
</View>
|
|
203
|
+
</>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### Combined Props
|
|
207
|
+
|
|
208
|
+
<!-- prettier-ignore -->
|
|
209
|
+
```tsx
|
|
210
|
+
<F0Text
|
|
211
|
+
variant="heading-md"
|
|
212
|
+
color="accent"
|
|
213
|
+
align="center"
|
|
214
|
+
decoration="underline"
|
|
215
|
+
transform="uppercase"
|
|
216
|
+
>
|
|
217
|
+
Featured Title
|
|
218
|
+
</F0Text>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Nested Text
|
|
222
|
+
|
|
223
|
+
<!-- prettier-ignore -->
|
|
224
|
+
```tsx
|
|
225
|
+
<F0Text variant="body-sm-default">
|
|
226
|
+
This is regular text with{" "}
|
|
227
|
+
<F0Text variant="body-sm-semibold" color="accent">
|
|
228
|
+
bold accent nested text
|
|
229
|
+
</F0Text>{" "}
|
|
230
|
+
inside.
|
|
231
|
+
</F0Text>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Real-world Card Example
|
|
235
|
+
|
|
236
|
+
<!-- prettier-ignore -->
|
|
237
|
+
```tsx
|
|
238
|
+
<View className="rounded-lg bg-f0-background-secondary p-4">
|
|
239
|
+
<View className="mb-2">
|
|
240
|
+
<F0Text variant="heading-sm">Card Title</F0Text>
|
|
241
|
+
</View>
|
|
242
|
+
<F0Text variant="body-sm-default" color="secondary" numberOfLines={2}>
|
|
243
|
+
This is a description that will be truncated after two lines if it's too
|
|
244
|
+
long to fit in the available space.
|
|
245
|
+
</F0Text>
|
|
246
|
+
<View className="mt-2">
|
|
247
|
+
<F0Text variant="body-xs-medium" color="tertiary">
|
|
248
|
+
Last updated 2 hours ago
|
|
249
|
+
</F0Text>
|
|
250
|
+
</View>
|
|
251
|
+
</View>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
## Architecture
|
|
255
|
+
|
|
256
|
+
```
|
|
257
|
+
F0Text/ # Parent folder for text primitives
|
|
258
|
+
├── F0Text/ # Static text component
|
|
259
|
+
│ ├── F0Text.tsx # Main component
|
|
260
|
+
│ ├── F0Text.md # Documentation
|
|
261
|
+
│ ├── F0Text.types.ts # TypeScript types
|
|
262
|
+
│ ├── F0Text.styles.ts # Tailwind variants config
|
|
263
|
+
│ ├── index.ts # Public exports
|
|
264
|
+
│ └── __tests__/
|
|
265
|
+
│ ├── F0Text.spec.tsx
|
|
266
|
+
│ └── __snapshots__/
|
|
267
|
+
├── AnimatedF0Text/ # Animated text component
|
|
268
|
+
│ ├── AnimatedF0Text.tsx
|
|
269
|
+
│ ├── AnimatedF0Text.md
|
|
270
|
+
│ ├── AnimatedF0Text.types.ts
|
|
271
|
+
│ ├── index.ts
|
|
272
|
+
│ └── __tests__/
|
|
273
|
+
│ ├── AnimatedF0Text.spec.tsx
|
|
274
|
+
│ └── __snapshots__/
|
|
275
|
+
└── index.ts # Barrel re-exporting both
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### Font Family
|
|
279
|
+
|
|
280
|
+
F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
|
|
281
|
+
|
|
282
|
+
| Tailwind Class | React Native Font Family | Font Weight |
|
|
283
|
+
| --------------- | ------------------------ | ----------- |
|
|
284
|
+
| `font-normal` | Inter-Regular | 400 |
|
|
285
|
+
| `font-medium` | Inter-Medium | 500 |
|
|
286
|
+
| `font-semibold` | Inter-SemiBold | 600 |
|
|
287
|
+
| `font-bold` | Inter-Bold | 700 |
|
|
288
|
+
|
|
289
|
+
## Accessibility
|
|
290
|
+
|
|
291
|
+
- Fully supports React Native `Text` accessibility props
|
|
292
|
+
- Supports `accessibilityRole`, `accessibilityLabel`, `accessibilityHint`, `accessibilityState`, and `accessible`
|
|
293
|
+
- Proper ellipsis and truncation with `numberOfLines`
|
|
294
|
+
- F0 color system helps ensure sufficient contrast; verify with platform accessibility tools
|
|
295
|
+
|
|
296
|
+
## Performance
|
|
297
|
+
|
|
298
|
+
- **React.memo**: Prevents re-renders when props unchanged
|
|
299
|
+
- **useMemo**: Memoizes className computation
|
|
300
|
+
|
|
301
|
+
### Best Practices
|
|
302
|
+
|
|
303
|
+
<!-- prettier-ignore -->
|
|
304
|
+
```tsx
|
|
305
|
+
// ✅ Good: Use appropriate variant
|
|
306
|
+
<F0Text variant="body-md-semibold">Bold text</F0Text>
|
|
307
|
+
|
|
308
|
+
// ❌ Bad: Don't try to override with className (not supported)
|
|
309
|
+
// <F0Text className="font-bold">Text</F0Text>
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
<!-- prettier-ignore -->
|
|
313
|
+
```tsx
|
|
314
|
+
// ✅ Good: Memoized handler
|
|
315
|
+
const handlePress = useCallback(() => {}, [])
|
|
316
|
+
<F0Text onPress={handlePress}>Click</F0Text>
|
|
317
|
+
|
|
318
|
+
// ❌ Bad: Inline function
|
|
319
|
+
<F0Text onPress={() => {}}>Click</F0Text>
|
|
320
|
+
```
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{tv}from"tailwind-variants";export var textVariants=tv({base:"",variants:{variant:{"heading-xl":"text-[36px] leading-[40px] tracking-[-0.2px] font-semibold","heading-lg":"text-[24px] leading-[32px] tracking-[-0.2px] font-semibold","heading-md":"text-[20px] leading-[28px] tracking-[-0.2px] font-semibold","heading-sm":"text-[16px] leading-[24px] font-semibold","body-md-default":"text-[16px] leading-[24px] font-normal","body-md-medium":"text-[16px] leading-[24px] font-medium","body-md-semibold":"text-[16px] leading-[24px] font-semibold","body-sm-default":"text-[14px] leading-[20px] font-normal","body-sm-medium":"text-[14px] leading-[20px] font-medium","body-sm-semibold":"text-[14px] leading-[20px] font-semibold","body-xs-medium":"text-[12px] leading-[16px] font-medium"},color:{default:"text-f0-foreground",secondary:"text-f0-foreground-secondary",tertiary:"text-f0-foreground-tertiary",inverse:"text-f0-foreground-inverse","inverse-secondary":"text-f0-foreground-inverse-secondary",disabled:"text-f0-foreground-disabled",accent:"text-f0-foreground-accent",critical:"text-f0-foreground-critical",info:"text-f0-foreground-info",warning:"text-f0-foreground-warning",positive:"text-f0-foreground-positive",selected:"text-f0-foreground-selected"},align:{left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"},decoration:{none:"",underline:"underline","line-through":"line-through"},transform:{none:"",uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize"}},defaultVariants:{variant:"body-sm-default",color:"default",align:"left",decoration:"none",transform:"none"}});
|
|
2
|
+
//# sourceMappingURL=F0Text.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tv","textVariants","base","variants","variant","color","default","secondary","tertiary","inverse","disabled","accent","critical","info","warning","positive","selected","align","left","center","right","justify","decoration","none","underline","transform","uppercase","lowercase","capitalize","defaultVariants"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/F0Text/F0Text.styles.ts"],"mappings":"AAAA,OAASA,EAAE,KAA2B,mBAAmB,CAOzD,MAAO,IAAM,CAAAC,YAAY,CAAGD,EAAE,CAAC,CAC7BE,IAAI,CAAE,EAAE,CACRC,QAAQ,CAAE,CACRC,OAAO,CAAE,CAEP,YAAY,CACV,4DAA4D,CAC9D,YAAY,CACV,4DAA4D,CAC9D,YAAY,CACV,4DAA4D,CAC9D,YAAY,CAAE,0CAA0C,CAGxD,iBAAiB,CAAE,wCAAwC,CAC3D,gBAAgB,CAAE,wCAAwC,CAC1D,kBAAkB,CAAE,0CAA0C,CAC9D,iBAAiB,CAAE,wCAAwC,CAC3D,gBAAgB,CAAE,wCAAwC,CAC1D,kBAAkB,CAAE,0CAA0C,CAC9D,gBAAgB,CAAE,wCACpB,CAAC,CACDC,KAAK,CAAE,CACLC,OAAO,CAAE,oBAAoB,CAC7BC,SAAS,CAAE,8BAA8B,CACzCC,QAAQ,CAAE,6BAA6B,CACvCC,OAAO,CAAE,4BAA4B,CACrC,mBAAmB,CAAE,sCAAsC,CAC3DC,QAAQ,CAAE,6BAA6B,CACvCC,MAAM,CAAE,2BAA2B,CACnCC,QAAQ,CAAE,6BAA6B,CACvCC,IAAI,CAAE,yBAAyB,CAC/BC,OAAO,CAAE,4BAA4B,CACrCC,QAAQ,CAAE,6BAA6B,CACvCC,QAAQ,CAAE,6BACZ,CAAC,CACDC,KAAK,CAAE,CACLC,IAAI,CAAE,WAAW,CACjBC,MAAM,CAAE,aAAa,CACrBC,KAAK,CAAE,YAAY,CACnBC,OAAO,CAAE,cACX,CAAC,CACDC,UAAU,CAAE,CACVC,IAAI,CAAE,EAAE,CACRC,SAAS,CAAE,WAAW,CACtB,cAAc,CAAE,cAClB,CAAC,CACDC,SAAS,CAAE,CACTF,IAAI,CAAE,EAAE,CACRG,SAAS,CAAE,WAAW,CACtBC,SAAS,CAAE,WAAW,CACtBC,UAAU,CAAE,YACd,CACF,CAAC,CACDC,eAAe,CAAE,CACfzB,OAAO,CAAE,iBAAiB,CAC1BC,KAAK,CAAE,SAAS,CAChBY,KAAK,CAAE,MAAM,CACbK,UAAU,CAAE,MAAM,CAClBG,SAAS,CAAE,MACb,CACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export var F0_TEXT_BANNED_PROPS=["style","className"];export var TYPOGRAPHY_VARIANTS=["heading-xl","heading-lg","heading-md","heading-sm","body-md-default","body-md-medium","body-md-semibold","body-sm-default","body-sm-medium","body-sm-semibold","body-xs-medium"];export var TEXT_COLORS=["default","secondary","tertiary","inverse","inverse-secondary","disabled","accent","critical","info","warning","positive","selected"];export var TEXT_ALIGN=["left","center","right","justify"];export var TEXT_DECORATIONS=["none","underline","line-through"];export var TEXT_TRANSFORMS=["none","uppercase","lowercase","capitalize"];
|
|
2
|
+
//# sourceMappingURL=F0Text.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["F0_TEXT_BANNED_PROPS","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/F0Text/F0Text.types.ts"],"mappings":"AAOA,MAAO,IAAM,CAAAA,oBAAoB,CAAG,CAAC,OAAO,CAAE,WAAW,CAAU,CAKnE,MAAO,IAAM,CAAAC,mBAAmB,CAAG,CACjC,YAAY,CACZ,YAAY,CACZ,YAAY,CACZ,YAAY,CACZ,iBAAiB,CACjB,gBAAgB,CAChB,kBAAkB,CAClB,iBAAiB,CACjB,gBAAgB,CAChB,kBAAkB,CAClB,gBAAgB,CACR,CAOV,MAAO,IAAM,CAAAC,WAAW,CAAG,CACzB,SAAS,CACT,WAAW,CACX,UAAU,CACV,SAAS,CACT,mBAAmB,CACnB,UAAU,CACV,QAAQ,CACR,UAAU,CACV,MAAM,CACN,SAAS,CACT,UAAU,CACV,UAAU,CACF,CAOV,MAAO,IAAM,CAAAC,UAAU,CAAG,CAAC,MAAM,CAAE,QAAQ,CAAE,OAAO,CAAE,SAAS,CAAU,CAOzE,MAAO,IAAM,CAAAC,gBAAgB,CAAG,CAAC,MAAM,CAAE,WAAW,CAAE,cAAc,CAAU,CAO9E,MAAO,IAAM,CAAAC,eAAe,CAAG,CAC7B,MAAM,CACN,WAAW,CACX,WAAW,CACX,YAAY,CACJ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["F0Text","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/F0Text/index.ts"],"mappings":"AAMA,OAASA,MAAM,KAAQ,UAAU,CASjC,OACEC,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,UAAU","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["F0Text","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS","AnimatedF0Text"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Text/index.ts"],"mappings":"AAOA,OAASA,MAAM,KAAQ,UAAU,CASjC,OACEC,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,UAAU,CAEjB,OAASC,cAAc,KAAQ,kBAAkB","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./components/exports";export*from"./icons";export{cn}from"./lib/utils";
|
|
1
|
+
export*from"./components/exports";export*from"./icons";export{cn,omitProps}from"./lib/utils";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AACA,WAAc,sBAAsB,CAGpC,WAAc,SAAS,CAGvB,OAASA,EAAE,KAAQ,aAAa","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["cn","omitProps"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AACA,WAAc,sBAAsB,CAGpC,WAAc,SAAS,CAGvB,OAASA,EAAE,CAAEC,SAAS,KAAQ,aAAa","ignoreList":[]}
|
package/lib/module/lib/utils.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{cnMerge}from"tailwind-variants";export function cn(){var _cnMerge;for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return(_cnMerge=cnMerge(args)({twMerge:true}))!=null?_cnMerge:"";}
|
|
1
|
+
import{cnMerge}from"tailwind-variants";export function cn(){var _cnMerge;for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return(_cnMerge=cnMerge(args)({twMerge:true}))!=null?_cnMerge:"";}export function omitProps(obj,keys){var result=Object.assign({},obj);for(var key of keys){delete result[key];}return result;}
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cnMerge","cn","_cnMerge","_len","arguments","length","args","Array","_key","twMerge"],"sourceRoot":"../../../src","sources":["lib/utils.ts"],"mappings":"AAAA,OAASA,OAAO,KAAwB,mBAAmB,CAE3D,MAAO,SAAS,CAAAC,EAAEA,CAAA,CAA6B,KAAAC,QAAA,SAAAC,IAAA,CAAAC,SAAA,CAAAC,MAAA,CAAzBC,IAAI,KAAAC,KAAA,CAAAJ,IAAA,EAAAK,IAAA,GAAAA,IAAA,CAAAL,IAAA,CAAAK,IAAA,IAAJF,IAAI,CAAAE,IAAA,EAAAJ,SAAA,CAAAI,IAAA,GACxB,OAAAN,QAAA,CACEF,OAAO,CAACM,IAAI,CAAC,CAAC,CACZG,OAAO,CAAE,IACX,CAAC,CAAC,QAAAP,QAAA,CAAI,EAAE,CAEZ","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["cnMerge","cn","_cnMerge","_len","arguments","length","args","Array","_key","twMerge","omitProps","obj","keys","result","Object","assign","key"],"sourceRoot":"../../../src","sources":["lib/utils.ts"],"mappings":"AAAA,OAASA,OAAO,KAAwB,mBAAmB,CAE3D,MAAO,SAAS,CAAAC,EAAEA,CAAA,CAA6B,KAAAC,QAAA,SAAAC,IAAA,CAAAC,SAAA,CAAAC,MAAA,CAAzBC,IAAI,KAAAC,KAAA,CAAAJ,IAAA,EAAAK,IAAA,GAAAA,IAAA,CAAAL,IAAA,CAAAK,IAAA,IAAJF,IAAI,CAAAE,IAAA,EAAAJ,SAAA,CAAAI,IAAA,GACxB,OAAAN,QAAA,CACEF,OAAO,CAACM,IAAI,CAAC,CAAC,CACZG,OAAO,CAAE,IACX,CAAC,CAAC,QAAAP,QAAA,CAAI,EAAE,CAEZ,CAUA,MAAO,SAAS,CAAAQ,SAASA,CACvBC,GAAM,CACNC,IAAkB,CACN,CACZ,GAAM,CAAAC,MAAM,CAAAC,MAAA,CAAAC,MAAA,IAAQJ,GAAG,CAAE,CACzB,IAAK,GAAM,CAAAK,GAAG,GAAI,CAAAJ,IAAI,CAAE,CACtB,MAAO,CAAAC,MAAM,CAACG,GAAG,CAAY,CAC/B,CACA,MAAO,CAAAH,MAAM,CACf","ignoreList":[]}
|
|
@@ -77,6 +77,13 @@
|
|
|
77
77
|
--tracking-4xl: -0.02em;
|
|
78
78
|
|
|
79
79
|
/* Semantic Typography Tokens - F0Text Variants */
|
|
80
|
+
/* Heading xl */
|
|
81
|
+
--p-text-heading-xl-font-size: 2.25rem; /* 36px */
|
|
82
|
+
--p-text-heading-xl-font-line-height: 2.5rem; /* 40px */
|
|
83
|
+
--p-text-heading-xl-font-letter-spacing: -0.2px;
|
|
84
|
+
--p-text-heading-xl-font-weight: 600;
|
|
85
|
+
--p-text-heading-xl-font-family: Inter;
|
|
86
|
+
|
|
80
87
|
/* Heading lg */
|
|
81
88
|
--p-text-heading-lg-font-size: 1.5rem; /* 24px */
|
|
82
89
|
--p-text-heading-lg-font-line-height: 2rem; /* 32px */
|
|
@@ -13,4 +13,5 @@ export * from "./Tags/exports";
|
|
|
13
13
|
export * from "./experimental/Lists/DataList";
|
|
14
14
|
export * from "./experimental/Lists/DetailsItem";
|
|
15
15
|
export * from "./experimental/Lists/DetailsItemsList";
|
|
16
|
+
export * from "./primitives/F0Text";
|
|
16
17
|
//# sourceMappingURL=exports.d.ts.map
|
|
@@ -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,cAAc,QAAQ,CAAA;AACtB,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,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,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,yBAAyB,CAAA;AACvC,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,kCAAkC,CAAA;AAChD,cAAc,uCAAuC,CAAA;AAGrD,cAAc,qBAAqB,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { AnimatedF0TextProps } from "./AnimatedF0Text.types";
|
|
3
|
+
export declare const AnimatedF0Text: React.MemoExoticComponent<React.ForwardRefExoticComponent<AnimatedF0TextProps & React.RefAttributes<React.Component<import("react-native-reanimated").AnimatedProps<import("react-native").TextProps>, any, any>>>>;
|
|
4
|
+
export type { AnimatedF0TextProps };
|
|
5
|
+
//# sourceMappingURL=AnimatedF0Text.d.ts.map
|