@factorialco/f0-react-native 0.28.0 → 0.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +42 -30
  2. package/lib/module/components/primitives/F0Text/F0Text/F0Text.md +53 -8
  3. package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map +1 -1
  4. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts +3 -2
  5. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/primitives/F0Text/F0Text/F0Text.md +53 -8
  8. package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts +3 -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 Custom Fonts (Host App)
106
+ ### 5️⃣ Add Inter Fonts (Host App)
107
107
 
108
- To use custom fonts in your host app, load them with Expo Font and override the font CSS variables.
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
- **Install font dependencies (Expo):**
111
+ #### Step A: Add font files
111
112
 
112
- ```bash
113
- pnpm add expo-font @expo-google-fonts/your-font
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
- **Load fonts in your app (Expo):**
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
- ```tsx
119
- import { useFonts } from "expo-font";
120
- import {
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
- export default function App() {
127
- const [fontsLoaded] = useFonts({
128
- YourFont_400Regular,
129
- YourFont_500Medium,
130
- YourFont_600SemiBold,
131
- });
129
+ #### Step B: Register with `expo-font`
132
130
 
133
- if (!fontsLoaded) {
134
- return null; // Or return a loading screen
135
- }
131
+ Add the `expo-font` config plugin to your **`app.json`**:
136
132
 
137
- return <YourApp />; // Render your app root
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
- **Override font variables in `global.css`:**
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: "YourFont-Regular";
146
- --font-medium: "YourFont-Medium";
147
- --font-semibold: "YourFont-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
- > **Note:** The font names must match the PostScript names of the loaded fonts. Use the exact names from your font package or assets.
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
 
package/lib/module/components/primitives/F0Text/F0Text/F0Text.md CHANGED
@@ -277,14 +277,59 @@ F0Text/ # Parent folder for text primitives
277
277
 
278
278
  ### Font Family
279
279
 
280
- F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
281
-
282
- | Tailwind Class | React Native Font Family | Font Weight |
283
- | --------------- | ------------------------ | ----------- |
284
- | `font-normal` | Inter-Regular | 400 |
285
- | `font-medium` | Inter-Medium | 500 |
286
- | `font-semibold` | Inter-SemiBold | 600 |
287
- | `font-bold` | Inter-Bold | 700 |
280
+ F0Text uses the **Inter** font family through Tailwind/Uniwind `font-*` utility classes,
281
+ which map to `--font-*` CSS variables defined in the app's `@theme`:
282
+
283
+ | Tailwind Class | CSS Variable | Font Name | Font Weight |
284
+ | --------------- | ----------------- | -------------- | ----------- |
285
+ | `font-normal` | `--font-normal` | Inter-Regular | 400 |
286
+ | `font-medium` | `--font-medium` | Inter-Medium | 500 |
287
+ | `font-semibold` | `--font-semibold` | Inter-SemiBold | 600 |
288
+ | `font-bold` | `--font-bold` | Inter-Bold | 700 |
289
+
290
+ #### Host App Font Setup
291
+
292
+ The consuming app must embed the Inter `.ttf` files and wire them up for both
293
+ iOS and Android. See the [README "Add Inter Fonts"](../../../../../README.md#5️⃣-add-inter-fonts-host-app) section for the full
294
+ step-by-step guide. The short version:
295
+
296
+ 1. **Name font files to match their PostScript name** (e.g. `Inter-Regular.ttf`
297
+ for PostScript name `Inter-Regular`). iOS resolves fonts by PostScript name,
298
+ Android by asset file name — matching them avoids platform-specific overrides.
299
+
300
+ 2. **Register via `expo-font`** config plugin in `app.json`:
301
+
302
+ ```json
303
+ [
304
+ "expo-font",
305
+ {
306
+ "fonts": [
307
+ "./assets/fonts/Inter/Inter-Regular.ttf",
308
+ "./assets/fonts/Inter/Inter-Medium.ttf",
309
+ "./assets/fonts/Inter/Inter-SemiBold.ttf",
310
+ "./assets/fonts/Inter/Inter-Bold.ttf"
311
+ ]
312
+ }
313
+ ]
314
+ ```
315
+
316
+ 3. **Define `@theme` variables** in `global.css`:
317
+
318
+ ```css
319
+ @theme {
320
+ --font-normal: "Inter-Regular";
321
+ --font-medium: "Inter-Medium";
322
+ --font-semibold: "Inter-SemiBold";
323
+ --font-bold: "Inter-Bold";
324
+ }
325
+ ```
326
+
327
+ The `@theme` values must match the file names (without `.ttf`). Uniwind maps
328
+ `font-normal`, `font-medium`, `font-semibold`, and `font-bold` utility classes
329
+ to these variables.
330
+
331
+ > **Rebuild required:** Font changes are picked up at native build time.
332
+ > Run `npx expo prebuild --clean` after adding or renaming font files.
288
333
 
289
334
  ## Accessibility
290
335
 
package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map CHANGED
@@ -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,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":[]}
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,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":[]}
package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts CHANGED
@@ -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: {
package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map CHANGED
@@ -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;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA6DvB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorialco/f0-react-native",
3
- "version": "0.28.0",
3
+ "version": "0.28.1",
4
4
  "type": "module",
5
5
  "description": "React Native components for F0 Design System",
6
6
  "main": "expo-router/entry",
package/src/components/primitives/F0Text/F0Text/F0Text.md CHANGED
@@ -277,14 +277,59 @@ F0Text/ # Parent folder for text primitives
277
277
 
278
278
  ### Font Family
279
279
 
280
- F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
281
-
282
- | Tailwind Class | React Native Font Family | Font Weight |
283
- | --------------- | ------------------------ | ----------- |
284
- | `font-normal` | Inter-Regular | 400 |
285
- | `font-medium` | Inter-Medium | 500 |
286
- | `font-semibold` | Inter-SemiBold | 600 |
287
- | `font-bold` | Inter-Bold | 700 |
280
+ F0Text uses the **Inter** font family through Tailwind/Uniwind `font-*` utility classes,
281
+ which map to `--font-*` CSS variables defined in the app's `@theme`:
282
+
283
+ | Tailwind Class | CSS Variable | Font Name | Font Weight |
284
+ | --------------- | ----------------- | -------------- | ----------- |
285
+ | `font-normal` | `--font-normal` | Inter-Regular | 400 |
286
+ | `font-medium` | `--font-medium` | Inter-Medium | 500 |
287
+ | `font-semibold` | `--font-semibold` | Inter-SemiBold | 600 |
288
+ | `font-bold` | `--font-bold` | Inter-Bold | 700 |
289
+
290
+ #### Host App Font Setup
291
+
292
+ The consuming app must embed the Inter `.ttf` files and wire them up for both
293
+ iOS and Android. See the [README "Add Inter Fonts"](../../../../../README.md#5️⃣-add-inter-fonts-host-app) section for the full
294
+ step-by-step guide. The short version:
295
+
296
+ 1. **Name font files to match their PostScript name** (e.g. `Inter-Regular.ttf`
297
+ for PostScript name `Inter-Regular`). iOS resolves fonts by PostScript name,
298
+ Android by asset file name — matching them avoids platform-specific overrides.
299
+
300
+ 2. **Register via `expo-font`** config plugin in `app.json`:
301
+
302
+ ```json
303
+ [
304
+ "expo-font",
305
+ {
306
+ "fonts": [
307
+ "./assets/fonts/Inter/Inter-Regular.ttf",
308
+ "./assets/fonts/Inter/Inter-Medium.ttf",
309
+ "./assets/fonts/Inter/Inter-SemiBold.ttf",
310
+ "./assets/fonts/Inter/Inter-Bold.ttf"
311
+ ]
312
+ }
313
+ ]
314
+ ```
315
+
316
+ 3. **Define `@theme` variables** in `global.css`:
317
+
318
+ ```css
319
+ @theme {
320
+ --font-normal: "Inter-Regular";
321
+ --font-medium: "Inter-Medium";
322
+ --font-semibold: "Inter-SemiBold";
323
+ --font-bold: "Inter-Bold";
324
+ }
325
+ ```
326
+
327
+ The `@theme` values must match the file names (without `.ttf`). Uniwind maps
328
+ `font-normal`, `font-medium`, `font-semibold`, and `font-bold` utility classes
329
+ to these variables.
330
+
331
+ > **Rebuild required:** Font changes are picked up at native build time.
332
+ > Run `npx expo prebuild --clean` after adding or renaming font files.
288
333
 
289
334
  ## Accessibility
290
335
 
package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts CHANGED
@@ -2,8 +2,9 @@ import { tv, type VariantProps } from "tailwind-variants"
2
2
 
3
3
  /**
4
4
  * Text component variants using tailwind-variants
5
- * Font weights (font-normal, font-medium, font-semibold) map to
6
- * Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold)
5
+ * Font weights (font-normal, font-medium, font-semibold, font-bold) map to
6
+ * Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold, Inter-Bold)
7
+ * via --font-* CSS variables defined in @theme.
7
8
  */
8
9
  export const textVariants = tv({
9
10
  base: "",