@factorialco/f0-react-native 0.28.0 → 0.29.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 +42 -30
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js +1 -1
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js.map +1 -1
- package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +45 -8
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.js +1 -1
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.js.map +1 -1
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.md +94 -38
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js +1 -1
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map +1 -1
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js +1 -1
- package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js.map +1 -1
- package/lib/module/lib/utils.js.map +1 -1
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts +14 -0
- package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts +5 -4
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts +22 -18
- package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts.map +1 -1
- package/lib/typescript/lib/utils.d.ts +1 -2
- package/lib/typescript/lib/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +45 -8
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx +20 -8
- package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts +15 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/AnimatedF0Text.spec.tsx +220 -0
- package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/__snapshots__/AnimatedF0Text.spec.tsx.snap +16 -16
- package/src/components/primitives/F0Text/F0Text/F0Text.md +94 -38
- package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts +4 -3
- package/src/components/primitives/F0Text/F0Text/F0Text.tsx +17 -10
- package/src/components/primitives/F0Text/F0Text/F0Text.types.ts +22 -18
- package/src/components/primitives/F0Text/F0Text/__tests__/F0Text.spec.tsx +340 -16
- package/src/components/primitives/F0Text/F0Text/__tests__/__snapshots__/F0Text.spec.tsx.snap +36 -36
- package/src/lib/utils.ts +1 -2
package/README.md
CHANGED
|
@@ -103,52 +103,64 @@ import "./global.css";
|
|
|
103
103
|
|
|
104
104
|
> **Note:** Add `@source "./node_modules/@factorialco/f0-react-native/lib";` so Tailwind can detect all component classes.
|
|
105
105
|
|
|
106
|
-
### 5️⃣ Add
|
|
106
|
+
### 5️⃣ Add Inter Fonts (Host App)
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
F0 components use the **Inter** font family. The host app must embed the font files
|
|
109
|
+
and register them with Uniwind so both iOS and Android resolve them correctly.
|
|
109
110
|
|
|
110
|
-
|
|
111
|
+
#### Step A: Add font files
|
|
111
112
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
Place the Inter `.ttf` files in your project. **File names must match the PostScript
|
|
114
|
+
name embedded in each font file** (you can inspect PostScript names with tools like
|
|
115
|
+
`fc-query` or `fontTools`):
|
|
115
116
|
|
|
116
|
-
|
|
117
|
+
```
|
|
118
|
+
assets/fonts/Inter/
|
|
119
|
+
Inter-Regular.ttf # PostScript name: Inter-Regular (weight 400)
|
|
120
|
+
Inter-Medium.ttf # PostScript name: Inter-Medium (weight 500)
|
|
121
|
+
Inter-SemiBold.ttf # PostScript name: Inter-SemiBold (weight 600)
|
|
122
|
+
Inter-Bold.ttf # PostScript name: Inter-Bold (weight 700)
|
|
123
|
+
```
|
|
117
124
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
YourFont_400Regular,
|
|
122
|
-
YourFont_500Medium,
|
|
123
|
-
YourFont_600SemiBold,
|
|
124
|
-
} from "@expo-google-fonts/your-font";
|
|
125
|
+
> **Why file names matter:** iOS resolves fonts by PostScript name, Android by
|
|
126
|
+
> asset file name (minus extension). When they match, a single CSS value works on
|
|
127
|
+
> both platforms without platform-specific overrides.
|
|
125
128
|
|
|
126
|
-
|
|
127
|
-
const [fontsLoaded] = useFonts({
|
|
128
|
-
YourFont_400Regular,
|
|
129
|
-
YourFont_500Medium,
|
|
130
|
-
YourFont_600SemiBold,
|
|
131
|
-
});
|
|
129
|
+
#### Step B: Register with `expo-font`
|
|
132
130
|
|
|
133
|
-
|
|
134
|
-
return null; // Or return a loading screen
|
|
135
|
-
}
|
|
131
|
+
Add the `expo-font` config plugin to your **`app.json`**:
|
|
136
132
|
|
|
137
|
-
|
|
138
|
-
|
|
133
|
+
```json
|
|
134
|
+
["expo-font", { "fonts": [
|
|
135
|
+
"./assets/fonts/Inter/Inter-Regular.ttf",
|
|
136
|
+
"./assets/fonts/Inter/Inter-Medium.ttf",
|
|
137
|
+
"./assets/fonts/Inter/Inter-SemiBold.ttf",
|
|
138
|
+
"./assets/fonts/Inter/Inter-Bold.ttf"
|
|
139
|
+
]}]
|
|
139
140
|
```
|
|
140
141
|
|
|
141
|
-
|
|
142
|
+
This embeds the fonts at build time — no runtime `useFonts` call needed.
|
|
143
|
+
|
|
144
|
+
#### Step C: Define font variables in `global.css`
|
|
145
|
+
|
|
146
|
+
Add a `@theme` block **after** the F0 style imports:
|
|
142
147
|
|
|
143
148
|
```css
|
|
144
149
|
@theme {
|
|
145
|
-
--font-normal: "
|
|
146
|
-
--font-medium: "
|
|
147
|
-
--font-semibold: "
|
|
150
|
+
--font-normal: "Inter-Regular";
|
|
151
|
+
--font-medium: "Inter-Medium";
|
|
152
|
+
--font-semibold: "Inter-SemiBold";
|
|
153
|
+
--font-bold: "Inter-Bold";
|
|
148
154
|
}
|
|
149
155
|
```
|
|
150
156
|
|
|
151
|
-
|
|
157
|
+
The values must match the file names (without `.ttf`). Uniwind maps Tailwind
|
|
158
|
+
`font-normal`, `font-medium`, `font-semibold`, and `font-bold` utilities to
|
|
159
|
+
these variables.
|
|
160
|
+
|
|
161
|
+
> **Rebuild required:** Font changes are picked up at build time, not via
|
|
162
|
+
> Metro hot reload. Run `npx expo prebuild --clean && npx expo run:ios` (or
|
|
163
|
+
> `run:android`) after adding or renaming font files.
|
|
152
164
|
|
|
153
165
|
### 6️⃣ TypeScript Support (Optional)
|
|
154
166
|
|
|
@@ -1,2 +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);
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["variant","color","align","decoration","transform","className","children","numberOfLines","style"];import React from"react";import{Text as RNText}from"react-native";import Animated from"react-native-reanimated";import{cn}from"../../../../lib/utils";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,className=_ref.className,children=_ref.children,numberOfLines=_ref.numberOfLines,style=_ref.style,rest=_objectWithoutProperties(_ref,_excluded);var textClassName=React.useMemo(function(){return cn(className,textVariants({variant:variant,color:color,align:align,decoration:decoration,transform:transform}));},[variant,color,align,decoration,transform,className]);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
2
|
//# sourceMappingURL=AnimatedF0Text.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"version":3,"names":["React","Text","RNText","Animated","cn","textVariants","jsx","_jsx","AnimatedText","createAnimatedComponent","AnimatedF0TextComponent","forwardRef","_ref","ref","_ref$variant","variant","_ref$color","color","_ref$align","align","_ref$decoration","decoration","_ref$transform","transform","className","children","numberOfLines","style","rest","_objectWithoutProperties","_excluded","textClassName","useMemo","Object","assign","ellipsizeMode","undefined","displayName","AnimatedF0Text","memo"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"mappings":"uMAAA,MAAO,CAAAA,KAAK,KAAM,OAAO,CACzB,OAASC,IAAI,GAAI,CAAAC,MAAM,KAAQ,cAAc,CAC7C,MAAO,CAAAC,QAAQ,KAAM,yBAAyB,CAE9C,OAASC,EAAE,KAAQ,uBAAuB,CAC1C,OAASC,YAAY,KAAQ,yBAAyB,QAAAC,GAAA,IAAAC,IAAA,yBAItD,GAAM,CAAAC,YAAY,CAAGL,QAAQ,CAACM,uBAAuB,CAACP,MAAM,CAAC,CAqB7D,GAAM,CAAAQ,uBAAuB,CAAGV,KAAK,CAACW,UAAU,CAI9C,SAAAC,IAAA,CAaEC,GAAG,CACA,KAAAC,YAAA,CAAAF,IAAA,CAZDG,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,SAAS,CAAAZ,IAAA,CAATY,SAAS,CACTC,QAAQ,CAAAb,IAAA,CAARa,QAAQ,CACRC,aAAa,CAAAd,IAAA,CAAbc,aAAa,CACbC,KAAK,CAAAf,IAAA,CAALe,KAAK,CACFC,IAAI,CAAAC,wBAAA,CAAAjB,IAAA,CAAAkB,SAAA,EAIT,GAAM,CAAAC,aAAa,CAAG/B,KAAK,CAACgC,OAAO,CACjC,iBACE,CAAA5B,EAAE,CACAoB,SAAS,CACTnB,YAAY,CAAC,CACXU,OAAO,CAAPA,OAAO,CACPE,KAAK,CAALA,KAAK,CACLE,KAAK,CAALA,KAAK,CACLE,UAAU,CAAVA,UAAU,CACVE,SAAS,CAATA,SACF,CAAC,CACH,CAAC,GACH,CAACR,OAAO,CAAEE,KAAK,CAAEE,KAAK,CAAEE,UAAU,CAAEE,SAAS,CAAEC,SAAS,CAC1D,CAAC,CAED,MACE,CAAAjB,IAAA,CAACC,YAAY,CAAAyB,MAAA,CAAAC,MAAA,EACXrB,GAAG,CAAEA,GAAI,EACLe,IAAI,EACRJ,SAAS,CAAEO,aAAc,CACzBJ,KAAK,CAAEA,KAAM,CACbD,aAAa,CAAEA,aAAc,CAC7BS,aAAa,CAAET,aAAa,CAAG,MAAM,CAAGU,SAAU,CAAAX,QAAA,CAEjDA,QAAQ,EACG,CAAC,CAEnB,CACF,CAAC,CAEDf,uBAAuB,CAAC2B,WAAW,CAAG,gBAAgB,CAEtD,MAAO,IAAM,CAAAC,cAAc,CAAGtC,KAAK,CAACuC,IAAI,CAAC7B,uBAAuB,CAAC","ignoreList":[]}
|
|
@@ -5,6 +5,7 @@ Animated text primitive for React Native with semantic typography variants and R
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- All F0Text semantic typography variants and colors
|
|
8
|
+
- `className` for layout/positioning (margin, padding, flex, etc.) — typography always wins via twMerge
|
|
8
9
|
- Reanimated `entering`/`exiting` layout animations
|
|
9
10
|
- Animated `style` prop for custom animations via `useAnimatedStyle`
|
|
10
11
|
- Layout transition animations
|
|
@@ -90,6 +91,41 @@ import { LinearTransition } from "react-native-reanimated"
|
|
|
90
91
|
</>
|
|
91
92
|
```
|
|
92
93
|
|
|
94
|
+
### className for Layout/Positioning
|
|
95
|
+
|
|
96
|
+
`className` accepts Tailwind classes for layout and positioning. Typography classes
|
|
97
|
+
in `className` are ignored — semantic props always take precedence via twMerge.
|
|
98
|
+
|
|
99
|
+
<!-- prettier-ignore -->
|
|
100
|
+
```tsx
|
|
101
|
+
import { AnimatedF0Text } from "@factorialco/f0-react-native"
|
|
102
|
+
import { FadeIn } from "react-native-reanimated"
|
|
103
|
+
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated"
|
|
104
|
+
|
|
105
|
+
const opacity = useSharedValue(1)
|
|
106
|
+
const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }))
|
|
107
|
+
|
|
108
|
+
<>
|
|
109
|
+
{/* className for static layout, style for animated values */}
|
|
110
|
+
<AnimatedF0Text
|
|
111
|
+
variant="heading-sm"
|
|
112
|
+
className="mt-4 flex-1"
|
|
113
|
+
style={animatedStyle}
|
|
114
|
+
>
|
|
115
|
+
Positioned animated heading
|
|
116
|
+
</AnimatedF0Text>
|
|
117
|
+
|
|
118
|
+
{/* className for layout + entering animation */}
|
|
119
|
+
<AnimatedF0Text
|
|
120
|
+
variant="body-sm-default"
|
|
121
|
+
className="mb-2 self-center"
|
|
122
|
+
entering={FadeIn.duration(300)}
|
|
123
|
+
>
|
|
124
|
+
Centered fade-in text
|
|
125
|
+
</AnimatedF0Text>
|
|
126
|
+
</>
|
|
127
|
+
```
|
|
128
|
+
|
|
93
129
|
## API Reference
|
|
94
130
|
|
|
95
131
|
### Props
|
|
@@ -98,14 +134,15 @@ AnimatedF0Text accepts all F0Text semantic props plus Reanimated animation props
|
|
|
98
134
|
|
|
99
135
|
#### Typography Props (shared with F0Text)
|
|
100
136
|
|
|
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
|
|
137
|
+
| Prop | Type | Default | Description |
|
|
138
|
+
| --------------- | ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
139
|
+
| `variant` | `TypographyVariant` | `'body-sm-default'` | Typography variant |
|
|
140
|
+
| `color` | `TextColor` | `'default'` | Text color from F0 semantic color system |
|
|
141
|
+
| `align` | `TextAlign` | `'left'` | Text alignment |
|
|
142
|
+
| `decoration` | `TextDecoration` | `'none'` | Text decoration |
|
|
143
|
+
| `transform` | `TextTransform` | `'none'` | Text transform |
|
|
144
|
+
| `numberOfLines` | `number` | `undefined` | Max lines before truncation |
|
|
145
|
+
| `className` | `string` | `undefined` | Tailwind classes for layout/positioning. Typography classes are overridden by semantic props via twMerge. |
|
|
109
146
|
|
|
110
147
|
#### Animation Props
|
|
111
148
|
|
|
@@ -1,2 +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";
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["variant","color","align","decoration","transform","className","children","numberOfLines"];import React from"react";import{Text as RNText}from"react-native";import{cn,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,className=_ref.className,children=_ref.children,numberOfLines=_ref.numberOfLines,rest=_objectWithoutProperties(_ref,_excluded);var textClassName=React.useMemo(function(){return cn(className,textVariants({variant:variant,color:color,align:align,decoration:decoration,transform:transform}));},[variant,color,align,decoration,transform,className]);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
2
|
//# sourceMappingURL=F0Text.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"version":3,"names":["React","Text","RNText","cn","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","className","children","numberOfLines","rest","_objectWithoutProperties","_excluded","textClassName","useMemo","Object","assign","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":"+LAAA,MAAO,CAAAA,KAAK,KAAM,OAAO,CACzB,OAASC,IAAI,GAAI,CAAAC,MAAM,KAAQ,cAAc,CAE7C,OAASC,EAAE,CAAEC,SAAS,KAAQ,uBAAuB,CAErD,OAASC,YAAY,KAAQ,iBAAiB,CAC9C,OAASC,oBAAoB,KAA0B,gBAAgB,QAAAC,GAAA,IAAAC,IAAA,yBAavE,GAAM,CAAAC,eAAe,CAAGT,KAAK,CAACU,UAAU,CACtC,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,SAAS,CAAAZ,IAAA,CAATY,SAAS,CACTC,QAAQ,CAAAb,IAAA,CAARa,QAAQ,CACRC,aAAa,CAAAd,IAAA,CAAbc,aAAa,CACVC,IAAI,CAAAC,wBAAA,CAAAhB,IAAA,CAAAiB,SAAA,EAIT,GAAM,CAAAC,aAAa,CAAG7B,KAAK,CAAC8B,OAAO,CACjC,iBACE,CAAA3B,EAAE,CACAoB,SAAS,CACTlB,YAAY,CAAC,CACXS,OAAO,CAAPA,OAAO,CACPE,KAAK,CAALA,KAAK,CACLE,KAAK,CAALA,KAAK,CACLE,UAAU,CAAVA,UAAU,CACVE,SAAS,CAATA,SACF,CAAC,CACH,CAAC,GACH,CAACR,OAAO,CAAEE,KAAK,CAAEE,KAAK,CAAEE,UAAU,CAAEE,SAAS,CAAEC,SAAS,CAC1D,CAAC,CAED,MACE,CAAAf,IAAA,CAACN,MAAM,CAAA6B,MAAA,CAAAC,MAAA,EACLpB,GAAG,CAAEA,GAAI,EACLR,SAAS,CAACsB,IAAI,CAAEpB,oBAAoB,CAAC,EACzCiB,SAAS,CAAEM,aAAc,CACzBJ,aAAa,CAAEA,aAAc,CAC7BQ,aAAa,CAAER,aAAa,CAAG,MAAM,CAAGS,SAAU,CAAAV,QAAA,CAEjDA,QAAQ,EACH,CAAC,CAEb,CACF,CAAC,CAEDf,eAAe,CAAC0B,WAAW,CAAG,QAAQ,CAEtC,MAAO,IAAM,CAAAC,MAAM,CAAGpC,KAAK,CAACqC,IAAI,CAAC5B,eAAe,CAAC,CAIjD,OACE6B,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,gBAAgB","ignoreList":[]}
|
|
@@ -40,18 +40,19 @@ import { F0Text } from "@factorialco/f0-react-native"
|
|
|
40
40
|
|
|
41
41
|
### Props
|
|
42
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
|
|
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
|
+
| `className` | `string` | `undefined` | Layout/positioning classes (margin, padding, flex, etc.) |
|
|
51
52
|
|
|
52
|
-
All React Native `TextProps` are also supported (onPress, testID, etc.).
|
|
53
|
+
All React Native `TextProps` are also supported (onPress, testID, etc.), **except `style`** which is omitted from the type and filtered at runtime.
|
|
53
54
|
|
|
54
|
-
|
|
55
|
+
Typography is controlled exclusively by semantic props (variant, color, align, etc.) and always takes precedence — any typography classes passed via `className` are automatically overridden by the semantic props via `twMerge`.
|
|
55
56
|
|
|
56
57
|
### Typography Variants
|
|
57
58
|
|
|
@@ -180,26 +181,33 @@ All variants use **Inter** font family with the weight included in the variant n
|
|
|
180
181
|
|
|
181
182
|
### Spacing & Layout
|
|
182
183
|
|
|
183
|
-
F0Text
|
|
184
|
+
F0Text accepts `className` for layout and positioning. Typography classes in `className` are safely overridden by semantic props via `twMerge`:
|
|
184
185
|
|
|
185
186
|
<!-- prettier-ignore -->
|
|
186
187
|
```tsx
|
|
187
188
|
<>
|
|
188
|
-
{/* Spacing
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
</
|
|
189
|
+
{/* Spacing directly on the text */}
|
|
190
|
+
<F0Text variant="body-sm-default" className="mt-4 mb-2">
|
|
191
|
+
Text with margin
|
|
192
|
+
</F0Text>
|
|
192
193
|
|
|
193
|
-
{/* Layout
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
</
|
|
194
|
+
{/* Layout directly on the text */}
|
|
195
|
+
<F0Text variant="body-sm-default" className="flex-1">
|
|
196
|
+
Flexible text
|
|
197
|
+
</F0Text>
|
|
197
198
|
|
|
198
199
|
{/* Icon + Text pattern */}
|
|
199
200
|
<View className="flex-row items-center gap-2">
|
|
200
201
|
<F0Icon icon={Check} size="sm" />
|
|
201
|
-
<F0Text variant="body-sm-default"
|
|
202
|
+
<F0Text variant="body-sm-default" className="flex-1">
|
|
203
|
+
Success message
|
|
204
|
+
</F0Text>
|
|
202
205
|
</View>
|
|
206
|
+
|
|
207
|
+
{/* Typography override attempts are safely ignored */}
|
|
208
|
+
<F0Text variant="body-sm-default" className="mt-4 font-bold text-red-500">
|
|
209
|
+
font-bold and text-red-500 are ignored; mt-4 is applied
|
|
210
|
+
</F0Text>
|
|
203
211
|
</>
|
|
204
212
|
```
|
|
205
213
|
|
|
@@ -236,18 +244,16 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
|
|
|
236
244
|
<!-- prettier-ignore -->
|
|
237
245
|
```tsx
|
|
238
246
|
<View className="rounded-lg bg-f0-background-secondary p-4">
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
</
|
|
247
|
+
<F0Text variant="heading-sm" className="mb-2">
|
|
248
|
+
Card Title
|
|
249
|
+
</F0Text>
|
|
242
250
|
<F0Text variant="body-sm-default" color="secondary" numberOfLines={2}>
|
|
243
251
|
This is a description that will be truncated after two lines if it's too
|
|
244
252
|
long to fit in the available space.
|
|
245
253
|
</F0Text>
|
|
246
|
-
<
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
</F0Text>
|
|
250
|
-
</View>
|
|
254
|
+
<F0Text variant="body-xs-medium" color="tertiary" className="mt-2">
|
|
255
|
+
Last updated 2 hours ago
|
|
256
|
+
</F0Text>
|
|
251
257
|
</View>
|
|
252
258
|
```
|
|
253
259
|
|
|
@@ -277,14 +283,59 @@ F0Text/ # Parent folder for text primitives
|
|
|
277
283
|
|
|
278
284
|
### Font Family
|
|
279
285
|
|
|
280
|
-
F0Text uses **Inter** font family through Tailwind/Uniwind font
|
|
286
|
+
F0Text uses the **Inter** font family through Tailwind/Uniwind `font-*` utility classes,
|
|
287
|
+
which map to `--font-*` CSS variables defined in the app's `@theme`:
|
|
288
|
+
|
|
289
|
+
| Tailwind Class | CSS Variable | Font Name | Font Weight |
|
|
290
|
+
| --------------- | ----------------- | -------------- | ----------- |
|
|
291
|
+
| `font-normal` | `--font-normal` | Inter-Regular | 400 |
|
|
292
|
+
| `font-medium` | `--font-medium` | Inter-Medium | 500 |
|
|
293
|
+
| `font-semibold` | `--font-semibold` | Inter-SemiBold | 600 |
|
|
294
|
+
| `font-bold` | `--font-bold` | Inter-Bold | 700 |
|
|
295
|
+
|
|
296
|
+
#### Host App Font Setup
|
|
297
|
+
|
|
298
|
+
The consuming app must embed the Inter `.ttf` files and wire them up for both
|
|
299
|
+
iOS and Android. See the [README "Add Inter Fonts"](../../../../../README.md#5️⃣-add-inter-fonts-host-app) section for the full
|
|
300
|
+
step-by-step guide. The short version:
|
|
301
|
+
|
|
302
|
+
1. **Name font files to match their PostScript name** (e.g. `Inter-Regular.ttf`
|
|
303
|
+
for PostScript name `Inter-Regular`). iOS resolves fonts by PostScript name,
|
|
304
|
+
Android by asset file name — matching them avoids platform-specific overrides.
|
|
305
|
+
|
|
306
|
+
2. **Register via `expo-font`** config plugin in `app.json`:
|
|
307
|
+
|
|
308
|
+
```json
|
|
309
|
+
[
|
|
310
|
+
"expo-font",
|
|
311
|
+
{
|
|
312
|
+
"fonts": [
|
|
313
|
+
"./assets/fonts/Inter/Inter-Regular.ttf",
|
|
314
|
+
"./assets/fonts/Inter/Inter-Medium.ttf",
|
|
315
|
+
"./assets/fonts/Inter/Inter-SemiBold.ttf",
|
|
316
|
+
"./assets/fonts/Inter/Inter-Bold.ttf"
|
|
317
|
+
]
|
|
318
|
+
}
|
|
319
|
+
]
|
|
320
|
+
```
|
|
281
321
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
322
|
+
3. **Define `@theme` variables** in `global.css`:
|
|
323
|
+
|
|
324
|
+
```css
|
|
325
|
+
@theme {
|
|
326
|
+
--font-normal: "Inter-Regular";
|
|
327
|
+
--font-medium: "Inter-Medium";
|
|
328
|
+
--font-semibold: "Inter-SemiBold";
|
|
329
|
+
--font-bold: "Inter-Bold";
|
|
330
|
+
}
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
The `@theme` values must match the file names (without `.ttf`). Uniwind maps
|
|
334
|
+
`font-normal`, `font-medium`, `font-semibold`, and `font-bold` utility classes
|
|
335
|
+
to these variables.
|
|
336
|
+
|
|
337
|
+
> **Rebuild required:** Font changes are picked up at native build time.
|
|
338
|
+
> Run `npx expo prebuild --clean` after adding or renaming font files.
|
|
288
339
|
|
|
289
340
|
## Accessibility
|
|
290
341
|
|
|
@@ -302,11 +353,16 @@ F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
|
|
|
302
353
|
|
|
303
354
|
<!-- prettier-ignore -->
|
|
304
355
|
```tsx
|
|
305
|
-
// ✅ Good: Use
|
|
356
|
+
// ✅ Good: Use semantic props for typography
|
|
306
357
|
<F0Text variant="body-md-semibold">Bold text</F0Text>
|
|
307
358
|
|
|
308
|
-
//
|
|
309
|
-
|
|
359
|
+
// ✅ Good: Use className for layout
|
|
360
|
+
<F0Text variant="body-md-semibold" className="mt-4 flex-1">Bold text</F0Text>
|
|
361
|
+
|
|
362
|
+
// ❌ Bad: Don't use className for typography (it will be overridden)
|
|
363
|
+
<F0Text variant="body-sm-default" className="font-bold text-red-500">
|
|
364
|
+
font-bold and text-red-500 are silently ignored
|
|
365
|
+
</F0Text>
|
|
310
366
|
```
|
|
311
367
|
|
|
312
368
|
<!-- prettier-ignore -->
|
|
@@ -1,2 +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"}});
|
|
1
|
+
import{tv}from"tailwind-variants";export var textVariants=tv({base:"no-underline normal-case tracking-normal",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
2
|
//# sourceMappingURL=F0Text.styles.js.map
|
|
@@ -1 +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,
|
|
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,CAQzD,MAAO,IAAM,CAAAC,YAAY,CAAGD,EAAE,CAAC,CAC7BE,IAAI,CAAE,0CAA0C,CAChDC,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":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var F0_TEXT_BANNED_PROPS=["style"
|
|
1
|
+
export var F0_TEXT_BANNED_PROPS=["style"];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
2
|
//# sourceMappingURL=F0Text.types.js.map
|
|
@@ -1 +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,
|
|
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,CAAU,CAKtD,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":[]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,CASA,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":[]}
|
|
@@ -1 +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;
|
|
1
|
+
{"version":3,"file":"AnimatedF0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AA0EjE,eAAO,MAAM,cAAc,qNAAsC,CAAA;AAEjE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
|
package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts
CHANGED
|
@@ -41,5 +41,19 @@ export interface AnimatedF0TextProps extends Omit<AnimatedProps<RNTextProps>, "c
|
|
|
41
41
|
* Children content
|
|
42
42
|
*/
|
|
43
43
|
children?: React.ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* Tailwind classes for layout and positioning.
|
|
46
|
+
*
|
|
47
|
+
* Allowed: margin, padding, flex, position, width, height, opacity, z-index, etc.
|
|
48
|
+
* Ignored: font-size, font-weight, line-height, letter-spacing, color, text-align,
|
|
49
|
+
* text-decoration, text-transform — these are controlled by semantic props and
|
|
50
|
+
* always take precedence via twMerge.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* className="mt-4 flex-1"
|
|
54
|
+
* className="mb-2 self-center"
|
|
55
|
+
* className="absolute top-0 left-0"
|
|
56
|
+
*/
|
|
57
|
+
className?: string;
|
|
44
58
|
}
|
|
45
59
|
//# sourceMappingURL=AnimatedF0Text.types.d.ts.map
|
package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map
CHANGED
|
@@ -1 +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;
|
|
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;IAE1B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}
|
|
@@ -1 +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;
|
|
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;AA2DvE,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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { type VariantProps } from "tailwind-variants";
|
|
2
2
|
/**
|
|
3
3
|
* Text component variants using tailwind-variants
|
|
4
|
-
* Font weights (font-normal, font-medium, font-semibold) map to
|
|
5
|
-
* Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold)
|
|
4
|
+
* Font weights (font-normal, font-medium, font-semibold, font-bold) map to
|
|
5
|
+
* Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold, Inter-Bold)
|
|
6
|
+
* via --font-* CSS variables defined in @theme.
|
|
6
7
|
*/
|
|
7
8
|
export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
8
9
|
variant: {
|
|
@@ -49,7 +50,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
|
49
50
|
lowercase: string;
|
|
50
51
|
capitalize: string;
|
|
51
52
|
};
|
|
52
|
-
}, undefined, "", {
|
|
53
|
+
}, undefined, "no-underline normal-case tracking-normal", {
|
|
53
54
|
variant: {
|
|
54
55
|
"heading-xl": string;
|
|
55
56
|
"heading-lg": string;
|
|
@@ -139,6 +140,6 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
|
|
|
139
140
|
lowercase: string;
|
|
140
141
|
capitalize: string;
|
|
141
142
|
};
|
|
142
|
-
}, undefined, "", unknown, unknown, undefined>>;
|
|
143
|
+
}, undefined, "no-underline normal-case tracking-normal", unknown, unknown, undefined>>;
|
|
143
144
|
export type TextVariants = VariantProps<typeof textVariants>;
|
|
144
145
|
//# sourceMappingURL=F0Text.styles.d.ts.map
|
|
@@ -1 +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
|
|
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;;;;;GAKG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { TextProps as RNTextProps } from "react-native";
|
|
2
2
|
/**
|
|
3
|
-
* Props that must not be passed through to the underlying RN Text
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* Props that must not be passed through to the underlying RN Text.
|
|
4
|
+
* `style` is blocked to enforce the semantic API; `className` is allowed
|
|
5
|
+
* for layout/positioning and merged with typography classes via twMerge.
|
|
6
6
|
*/
|
|
7
|
-
export declare const F0_TEXT_BANNED_PROPS: readonly ["style"
|
|
7
|
+
export declare const F0_TEXT_BANNED_PROPS: readonly ["style"];
|
|
8
8
|
/**
|
|
9
9
|
* Typography variant types based on semantic design tokens
|
|
10
10
|
*/
|
|
@@ -31,10 +31,14 @@ export type TextDecoration = (typeof TEXT_DECORATIONS)[number];
|
|
|
31
31
|
export declare const TEXT_TRANSFORMS: readonly ["none", "uppercase", "lowercase", "capitalize"];
|
|
32
32
|
export type TextTransform = (typeof TEXT_TRANSFORMS)[number];
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
* Props for the F0Text component.
|
|
35
|
+
*
|
|
36
|
+
* `className` is available for layout/positioning (margin, padding, flex, etc.).
|
|
37
|
+
* Typography is controlled exclusively by semantic props (variant, color, align, etc.)
|
|
38
|
+
* and always takes precedence — any typography classes in `className` are overridden.
|
|
39
|
+
* `style` is NOT available (omitted from RNTextProps and filtered at runtime).
|
|
36
40
|
*/
|
|
37
|
-
interface
|
|
41
|
+
export interface F0TextProps extends Omit<RNTextProps, "style"> {
|
|
38
42
|
/**
|
|
39
43
|
* Semantic typography variant
|
|
40
44
|
* @default "body-sm-default"
|
|
@@ -69,18 +73,18 @@ interface F0TextPropsInternal extends Omit<RNTextProps, "style"> {
|
|
|
69
73
|
*/
|
|
70
74
|
children?: React.ReactNode;
|
|
71
75
|
/**
|
|
72
|
-
*
|
|
73
|
-
*
|
|
76
|
+
* Tailwind classes for layout and positioning.
|
|
77
|
+
*
|
|
78
|
+
* Allowed: margin, padding, flex, position, width, height, opacity, z-index, etc.
|
|
79
|
+
* Ignored: font-size, font-weight, line-height, letter-spacing, color, text-align,
|
|
80
|
+
* text-decoration, text-transform — these are controlled by semantic props and
|
|
81
|
+
* always take precedence via twMerge.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* className="mt-4 flex-1"
|
|
85
|
+
* className="mb-2 self-center"
|
|
86
|
+
* className="absolute top-0 left-0"
|
|
74
87
|
*/
|
|
75
88
|
className?: string;
|
|
76
89
|
}
|
|
77
|
-
/**
|
|
78
|
-
* Public props for the F0Text component
|
|
79
|
-
*
|
|
80
|
-
* Note: `className` and `style` props are NOT available.
|
|
81
|
-
* Use semantic props (variant, color, align, etc.) for typography.
|
|
82
|
-
* For spacing/layout, wrap F0Text in a View with className.
|
|
83
|
-
*/
|
|
84
|
-
export type F0TextProps = Omit<F0TextPropsInternal, "className">;
|
|
85
|
-
export {};
|
|
86
90
|
//# sourceMappingURL=F0Text.types.d.ts.map
|
|
@@ -1 +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,
|
|
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,oBAAqB,CAAA;AAEtD;;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;;;;;;;GAOG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC7D;;;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;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}
|