@factorialco/f0-react-native 0.27.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/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/{src/components/primitives → lib/module/components/primitives/F0Text}/F0Text/F0Text.md +34 -11
- 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 +1 -1
- package/lib/module/components/primitives/F0Text/index.js.map +1 -1
- package/lib/module/styles/theme.css +7 -0
- 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.map +1 -0
- package/lib/typescript/components/primitives/F0Text/{F0Text.styles.d.ts → F0Text/F0Text.styles.d.ts} +3 -0
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Text/{F0Text.types.d.ts → F0Text/F0Text.types.d.ts} +1 -1
- 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 +5 -2
- package/lib/typescript/components/primitives/F0Text/index.d.ts.map +1 -1
- package/package.json +1 -1
- 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/{lib/module/components/primitives → src/components/primitives/F0Text}/F0Text/F0Text.md +34 -11
- package/src/components/primitives/F0Text/{F0Text.styles.ts → F0Text/F0Text.styles.ts} +2 -0
- package/src/components/primitives/F0Text/{F0Text.tsx → F0Text/F0Text.tsx} +1 -1
- package/src/components/primitives/F0Text/{F0Text.types.ts → F0Text/F0Text.types.ts} +1 -0
- package/src/components/primitives/F0Text/{__tests__/index.spec.tsx → F0Text/__tests__/F0Text.spec.tsx} +1 -0
- package/src/components/primitives/F0Text/{__tests__/__snapshots__/index.spec.tsx.snap → F0Text/__tests__/__snapshots__/F0Text.spec.tsx.snap} +9 -0
- package/src/components/primitives/F0Text/F0Text/index.ts +22 -0
- package/src/components/primitives/F0Text/index.ts +6 -2
- package/src/styles/theme.css +7 -0
- package/lib/module/components/primitives/F0Text/F0Text.js +0 -2
- package/lib/module/components/primitives/F0Text/F0Text.js.map +0 -1
- package/lib/module/components/primitives/F0Text/F0Text.styles.js +0 -2
- package/lib/module/components/primitives/F0Text/F0Text.styles.js.map +0 -1
- package/lib/module/components/primitives/F0Text/F0Text.types.js +0 -2
- package/lib/module/components/primitives/F0Text/F0Text.types.js.map +0 -1
- package/lib/typescript/components/primitives/F0Text/F0Text.d.ts.map +0 -1
- package/lib/typescript/components/primitives/F0Text/F0Text.styles.d.ts.map +0 -1
- package/lib/typescript/components/primitives/F0Text/F0Text.types.d.ts.map +0 -1
- /package/lib/typescript/components/primitives/F0Text/{F0Text.d.ts → F0Text/F0Text.d.ts} +0 -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
|
|
|
@@ -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":[]}
|
package/{src/components/primitives → lib/module/components/primitives/F0Text}/F0Text/F0Text.md
RENAMED
|
@@ -20,6 +20,7 @@ import { F0Text } from "@factorialco/f0-react-native"
|
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
22
22
|
|
|
23
|
+
<!-- prettier-ignore -->
|
|
23
24
|
```tsx
|
|
24
25
|
<>
|
|
25
26
|
<F0Text variant="heading-lg">Welcome</F0Text>
|
|
@@ -60,6 +61,7 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
60
61
|
|
|
61
62
|
| Variant | Size | Line Height | Weight | Letter Spacing |
|
|
62
63
|
| ------------ | ---- | ----------- | -------------- | -------------- |
|
|
64
|
+
| `heading-xl` | 36px | 40px | Semibold (600) | -0.2px |
|
|
63
65
|
| `heading-lg` | 24px | 32px | Semibold (600) | -0.2px |
|
|
64
66
|
| `heading-md` | 20px | 28px | Semibold (600) | -0.2px |
|
|
65
67
|
| `heading-sm` | 16px | 24px | Semibold (600) | - |
|
|
@@ -97,9 +99,11 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
97
99
|
|
|
98
100
|
### Typography Variants
|
|
99
101
|
|
|
102
|
+
<!-- prettier-ignore -->
|
|
100
103
|
```tsx
|
|
101
104
|
<>
|
|
102
105
|
{/* Headings */}
|
|
106
|
+
<F0Text variant="heading-xl">Extra Large Heading</F0Text>
|
|
103
107
|
<F0Text variant="heading-lg">Large Heading</F0Text>
|
|
104
108
|
<F0Text variant="heading-md">Medium Heading</F0Text>
|
|
105
109
|
<F0Text variant="heading-sm">Small Heading</F0Text>
|
|
@@ -117,6 +121,7 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
117
121
|
|
|
118
122
|
### Colors
|
|
119
123
|
|
|
124
|
+
<!-- prettier-ignore -->
|
|
120
125
|
```tsx
|
|
121
126
|
<>
|
|
122
127
|
<F0Text variant="body-sm-default" color="default">
|
|
@@ -139,6 +144,7 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
139
144
|
|
|
140
145
|
### Text Decorations & Transforms
|
|
141
146
|
|
|
147
|
+
<!-- prettier-ignore -->
|
|
142
148
|
```tsx
|
|
143
149
|
<>
|
|
144
150
|
<F0Text variant="body-sm-default" decoration="underline">
|
|
@@ -158,6 +164,7 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
158
164
|
|
|
159
165
|
### Truncation
|
|
160
166
|
|
|
167
|
+
<!-- prettier-ignore -->
|
|
161
168
|
```tsx
|
|
162
169
|
<>
|
|
163
170
|
<F0Text variant="body-sm-default" numberOfLines={1}>
|
|
@@ -175,6 +182,7 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
175
182
|
|
|
176
183
|
F0Text doesn't accept `className` to prevent typography override. Use a View wrapper for spacing:
|
|
177
184
|
|
|
185
|
+
<!-- prettier-ignore -->
|
|
178
186
|
```tsx
|
|
179
187
|
<>
|
|
180
188
|
{/* Spacing with View wrapper */}
|
|
@@ -197,6 +205,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
|
|
|
197
205
|
|
|
198
206
|
### Combined Props
|
|
199
207
|
|
|
208
|
+
<!-- prettier-ignore -->
|
|
200
209
|
```tsx
|
|
201
210
|
<F0Text
|
|
202
211
|
variant="heading-md"
|
|
@@ -211,6 +220,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
|
|
|
211
220
|
|
|
212
221
|
### Nested Text
|
|
213
222
|
|
|
223
|
+
<!-- prettier-ignore -->
|
|
214
224
|
```tsx
|
|
215
225
|
<F0Text variant="body-sm-default">
|
|
216
226
|
This is regular text with{" "}
|
|
@@ -223,6 +233,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
|
|
|
223
233
|
|
|
224
234
|
### Real-world Card Example
|
|
225
235
|
|
|
236
|
+
<!-- prettier-ignore -->
|
|
226
237
|
```tsx
|
|
227
238
|
<View className="rounded-lg bg-f0-background-secondary p-4">
|
|
228
239
|
<View className="mb-2">
|
|
@@ -243,15 +254,25 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
|
|
|
243
254
|
## Architecture
|
|
244
255
|
|
|
245
256
|
```
|
|
246
|
-
F0Text/
|
|
247
|
-
├── F0Text
|
|
248
|
-
├── F0Text.
|
|
249
|
-
├── F0Text.
|
|
250
|
-
├── F0Text.
|
|
251
|
-
├──
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
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
|
|
255
276
|
```
|
|
256
277
|
|
|
257
278
|
### Font Family
|
|
@@ -279,6 +300,7 @@ F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
|
|
|
279
300
|
|
|
280
301
|
### Best Practices
|
|
281
302
|
|
|
303
|
+
<!-- prettier-ignore -->
|
|
282
304
|
```tsx
|
|
283
305
|
// ✅ Good: Use appropriate variant
|
|
284
306
|
<F0Text variant="body-md-semibold">Bold text</F0Text>
|
|
@@ -287,11 +309,12 @@ F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
|
|
|
287
309
|
// <F0Text className="font-bold">Text</F0Text>
|
|
288
310
|
```
|
|
289
311
|
|
|
312
|
+
<!-- prettier-ignore -->
|
|
290
313
|
```tsx
|
|
291
314
|
// ✅ Good: Memoized handler
|
|
292
315
|
const handlePress = useCallback(() => {}, [])
|
|
293
|
-
|
|
316
|
+
<F0Text onPress={handlePress}>Click</F0Text>
|
|
294
317
|
|
|
295
318
|
// ❌ Bad: Inline function
|
|
296
|
-
|
|
319
|
+
<F0Text onPress={() => {}}>Click</F0Text>
|
|
297
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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{F0Text}from"./F0Text";export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text";
|
|
1
|
+
export{F0Text}from"./F0Text";export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text";export{AnimatedF0Text}from"./AnimatedF0Text";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["F0Text","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Text/index.ts"],"mappings":"
|
|
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":[]}
|
|
@@ -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 */
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedF0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AA+DjE,eAAO,MAAM,cAAc,qNAAsC,CAAA;AAEjE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { TextProps as RNTextProps } from "react-native";
|
|
2
|
+
import type { AnimatedProps } from "react-native-reanimated";
|
|
3
|
+
import type { TextAlign, TextColor, TextDecoration, TextTransform, TypographyVariant } from "../F0Text/F0Text.types";
|
|
4
|
+
/**
|
|
5
|
+
* Props for the AnimatedF0Text component.
|
|
6
|
+
*
|
|
7
|
+
* Combines F0Text semantic typography props with Reanimated animation
|
|
8
|
+
* capabilities (`entering`, `exiting`, `layout`, animated `style`).
|
|
9
|
+
*/
|
|
10
|
+
export interface AnimatedF0TextProps extends Omit<AnimatedProps<RNTextProps>, "className"> {
|
|
11
|
+
/**
|
|
12
|
+
* Semantic typography variant
|
|
13
|
+
* @default "body-sm-default"
|
|
14
|
+
*/
|
|
15
|
+
variant?: TypographyVariant;
|
|
16
|
+
/**
|
|
17
|
+
* Text color from F0 semantic color system
|
|
18
|
+
* @default "default"
|
|
19
|
+
*/
|
|
20
|
+
color?: TextColor;
|
|
21
|
+
/**
|
|
22
|
+
* Text alignment
|
|
23
|
+
* @default "left"
|
|
24
|
+
*/
|
|
25
|
+
align?: TextAlign;
|
|
26
|
+
/**
|
|
27
|
+
* Text decoration
|
|
28
|
+
* @default "none"
|
|
29
|
+
*/
|
|
30
|
+
decoration?: TextDecoration;
|
|
31
|
+
/**
|
|
32
|
+
* Text transform
|
|
33
|
+
* @default "none"
|
|
34
|
+
*/
|
|
35
|
+
transform?: TextTransform;
|
|
36
|
+
/**
|
|
37
|
+
* Maximum number of lines before truncating with ellipsis
|
|
38
|
+
*/
|
|
39
|
+
numberOfLines?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Children content
|
|
42
|
+
*/
|
|
43
|
+
children?: React.ReactNode;
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=AnimatedF0Text.types.d.ts.map
|
package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedF0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAE5D,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,iBAAiB,EAClB,MAAM,wBAAwB,CAAA;AAE/B;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,aAAa,CAAC,WAAW,CAAC,EAC1B,WAAW,CACZ;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AnimatedF0Text - Animated text primitive component
|
|
3
|
+
*
|
|
4
|
+
* @see AnimatedF0Text.md for documentation
|
|
5
|
+
*/
|
|
6
|
+
export { AnimatedF0Text } from "./AnimatedF0Text";
|
|
7
|
+
export type { AnimatedF0TextProps } from "./AnimatedF0Text";
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"F0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAK7C,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAoDvE,eAAO,MAAM,MAAM,uGAA8B,CAAA;AAGjD,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,gBAAgB,CAAA"}
|
package/lib/typescript/components/primitives/F0Text/{F0Text.styles.d.ts → F0Text/F0Text.styles.d.ts}
RENAMED
|
@@ -6,6 +6,7 @@ import { type VariantProps } from "tailwind-variants";
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
8
8
|
variant: {
|
|
9
|
+
"heading-xl": string;
|
|
9
10
|
"heading-lg": string;
|
|
10
11
|
"heading-md": string;
|
|
11
12
|
"heading-sm": string;
|
|
@@ -50,6 +51,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
|
50
51
|
};
|
|
51
52
|
}, undefined, "", {
|
|
52
53
|
variant: {
|
|
54
|
+
"heading-xl": string;
|
|
53
55
|
"heading-lg": string;
|
|
54
56
|
"heading-md": string;
|
|
55
57
|
"heading-sm": string;
|
|
@@ -94,6 +96,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
|
94
96
|
};
|
|
95
97
|
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
96
98
|
variant: {
|
|
99
|
+
"heading-xl": string;
|
|
97
100
|
"heading-lg": string;
|
|
98
101
|
"heading-md": string;
|
|
99
102
|
"heading-sm": string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"F0Text.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEzD;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
|
package/lib/typescript/components/primitives/F0Text/{F0Text.types.d.ts → F0Text/F0Text.types.d.ts}
RENAMED
|
@@ -8,7 +8,7 @@ export declare const F0_TEXT_BANNED_PROPS: readonly ["style", "className"];
|
|
|
8
8
|
/**
|
|
9
9
|
* Typography variant types based on semantic design tokens
|
|
10
10
|
*/
|
|
11
|
-
export declare const TYPOGRAPHY_VARIANTS: readonly ["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"];
|
|
11
|
+
export declare const TYPOGRAPHY_VARIANTS: readonly ["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"];
|
|
12
12
|
export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
|
|
13
13
|
/**
|
|
14
14
|
* Text color variants aligned with F0 semantic color system
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"F0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAE5D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,iCAAkC,CAAA;AAEnE;;GAEG;AACH,eAAO,MAAM,mBAAmB,uMAYtB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE;;GAEG;AACH,eAAO,MAAM,WAAW,4JAad,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,UAAU,iDAAkD,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gDAAiD,CAAA;AAE9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,2DAKlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE5D;;;GAGG;AACH,UAAU,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* F0Text - Text primitive component
|
|
3
|
+
*
|
|
4
|
+
* @see F0Text.md for documentation
|
|
5
|
+
*/
|
|
6
|
+
export { F0Text } from "./F0Text";
|
|
7
|
+
export type { F0TextProps, TypographyVariant, TextColor, TextAlign, TextDecoration, TextTransform, } from "./F0Text";
|
|
8
|
+
export { TYPOGRAPHY_VARIANTS, TEXT_COLORS, TEXT_ALIGN, TEXT_DECORATIONS, TEXT_TRANSFORMS, } from "./F0Text";
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,UAAU,CAAA"}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* F0Text - Text primitive
|
|
2
|
+
* F0Text - Text primitive components
|
|
3
3
|
*
|
|
4
|
-
* @see F0Text.md for documentation
|
|
4
|
+
* @see F0Text/F0Text.md for documentation
|
|
5
|
+
* @see AnimatedF0Text/AnimatedF0Text.md for animated variant documentation
|
|
5
6
|
*/
|
|
6
7
|
export { F0Text } from "./F0Text";
|
|
7
8
|
export type { F0TextProps, TypographyVariant, TextColor, TextAlign, TextDecoration, TextTransform, } from "./F0Text";
|
|
8
9
|
export { TYPOGRAPHY_VARIANTS, TEXT_COLORS, TEXT_ALIGN, TEXT_DECORATIONS, TEXT_TRANSFORMS, } from "./F0Text";
|
|
10
|
+
export { AnimatedF0Text } from "./AnimatedF0Text";
|
|
11
|
+
export type { AnimatedF0TextProps } from "./AnimatedF0Text";
|
|
9
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Text/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Text/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}
|