@factorialco/f0-react-native 0.27.0 → 0.28.1

package/README.md

@@ -103,52 +103,64 @@ import "./global.css";
 
 > **Note:** Add `@source "./node_modules/@factorialco/f0-react-native/lib";` so Tailwind can detect all component classes.
 
-### 5️⃣ Add Custom Fonts (Host App)
+### 5️⃣ Add Inter Fonts (Host App)
 
-To use custom fonts in your host app, load them with Expo Font and override the font CSS variables.
+F0 components use the **Inter** font family. The host app must embed the font files
+and register them with Uniwind so both iOS and Android resolve them correctly.
 
-**Install font dependencies (Expo):**
+#### Step A: Add font files
 
-```bash
-pnpm add expo-font @expo-google-fonts/your-font
-```
+Place the Inter `.ttf` files in your project. **File names must match the PostScript
+name embedded in each font file** (you can inspect PostScript names with tools like
+`fc-query` or `fontTools`):
 
-**Load fonts in your app (Expo):**
+```
+assets/fonts/Inter/
+  Inter-Regular.ttf      # PostScript name: Inter-Regular   (weight 400)
+  Inter-Medium.ttf       # PostScript name: Inter-Medium    (weight 500)
+  Inter-SemiBold.ttf     # PostScript name: Inter-SemiBold  (weight 600)
+  Inter-Bold.ttf         # PostScript name: Inter-Bold      (weight 700)
+```
 
-```tsx
-import { useFonts } from "expo-font";
-import {
-  YourFont_400Regular,
-  YourFont_500Medium,
-  YourFont_600SemiBold,
-} from "@expo-google-fonts/your-font";
+> **Why file names matter:** iOS resolves fonts by PostScript name, Android by
+> asset file name (minus extension). When they match, a single CSS value works on
+> both platforms without platform-specific overrides.
 
-export default function App() {
-  const [fontsLoaded] = useFonts({
-    YourFont_400Regular,
-    YourFont_500Medium,
-    YourFont_600SemiBold,
-  });
+#### Step B: Register with `expo-font`
 
-  if (!fontsLoaded) {
-    return null; // Or return a loading screen
-  }
+Add the `expo-font` config plugin to your **`app.json`**:
 
-  return <YourApp />; // Render your app root
-}
+```json
+["expo-font", { "fonts": [
+  "./assets/fonts/Inter/Inter-Regular.ttf",
+  "./assets/fonts/Inter/Inter-Medium.ttf",
+  "./assets/fonts/Inter/Inter-SemiBold.ttf",
+  "./assets/fonts/Inter/Inter-Bold.ttf"
+]}]
 ```
 
-**Override font variables in `global.css`:**
+This embeds the fonts at build time — no runtime `useFonts` call needed.
+
+#### Step C: Define font variables in `global.css`
+
+Add a `@theme` block **after** the F0 style imports:
 
 ```css
 @theme {
-  --font-normal: "YourFont-Regular";
-  --font-medium: "YourFont-Medium";
-  --font-semibold: "YourFont-SemiBold";
+  --font-normal: "Inter-Regular";
+  --font-medium: "Inter-Medium";
+  --font-semibold: "Inter-SemiBold";
+  --font-bold: "Inter-Bold";
 }
 ```
 
-> **Note:** The font names must match the PostScript names of the loaded fonts. Use the exact names from your font package or assets.
+The values must match the file names (without `.ttf`). Uniwind maps Tailwind
+`font-normal`, `font-medium`, `font-semibold`, and `font-bold` utilities to
+these variables.
+
+> **Rebuild required:** Font changes are picked up at build time, not via
+> Metro hot reload. Run `npx expo prebuild --clean && npx expo run:ios` (or
+> `run:android`) after adding or renaming font files.
 
 ### 6️⃣ TypeScript Support (Optional)
 
@@ -167,8 +179,8 @@ Use this section after each manual update so people can install the latest build
 ### ✅ Latest Update
 
 - **Branch / Channel:** `production`
-- **Update message:** `Typography Scale`
-- **Published at:** `Feb 6, 2026 1:19 PM`
+- **Update message:** `F0Text and AnimatedF0Text`
+- **Published at:** `Mar 4, 2026`
 
 ### 🔗 Deep Link
 

package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js

@@ -0,0 +1,2 @@
+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);
+//# sourceMappingURL=AnimatedF0Text.js.map

package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js.map

@@ -0,0 +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":[]}

package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md

@@ -0,0 +1,159 @@
+# AnimatedF0Text
+
+Animated text primitive for React Native with semantic typography variants and Reanimated animation support.
+
+## Features
+
+- All F0Text semantic typography variants and colors
+- Reanimated `entering`/`exiting` layout animations
+- Animated `style` prop for custom animations via `useAnimatedStyle`
+- Layout transition animations
+- Shares the same typography system as F0Text
+- Performance optimized with React.memo and useMemo
+
+## Installation
+
+```tsx
+import { AnimatedF0Text } from "@factorialco/f0-react-native"
+```
+
+Requires `react-native-reanimated` as a peer dependency.
+
+## When to use AnimatedF0Text vs F0Text
+
+| Use case                                          | Component        |
+| ------------------------------------------------- | ---------------- |
+| Static text, no animation                         | `F0Text`         |
+| Text that fades in/out                            | `AnimatedF0Text` |
+| Text with entering/exiting transitions            | `AnimatedF0Text` |
+| Text driven by animated values (scroll, gestures) | `AnimatedF0Text` |
+
+## Usage
+
+### Entering/Exiting Animations
+
+<!-- prettier-ignore -->
+```tsx
+import { AnimatedF0Text } from "@factorialco/f0-react-native"
+import { FadeIn, FadeOut, SlideInLeft } from "react-native-reanimated"
+
+<>
+  <AnimatedF0Text
+    variant="heading-xl"
+    entering={FadeIn.duration(300)}
+    exiting={FadeOut.duration(200)}
+  >
+    Welcome back
+  </AnimatedF0Text>
+
+  <AnimatedF0Text variant="heading-md" entering={SlideInLeft.springify()}>
+    Slide in heading
+  </AnimatedF0Text>
+</>
+```
+
+### Custom Animated Styles
+
+<!-- prettier-ignore -->
+```tsx
+import { AnimatedF0Text } from "@factorialco/f0-react-native"
+import { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated"
+
+const opacity = useSharedValue(0)
+
+const animatedStyle = useAnimatedStyle(() => ({
+  opacity: opacity.value,
+  transform: [{ translateY: withTiming(opacity.value * -10) }],
+}))
+
+<>
+  <AnimatedF0Text variant="body-md-default" style={animatedStyle}>
+    Custom animated text
+  </AnimatedF0Text>
+</>
+```
+
+### Layout Transitions
+
+<!-- prettier-ignore -->
+```tsx
+import { AnimatedF0Text } from "@factorialco/f0-react-native"
+import { LinearTransition } from "react-native-reanimated"
+
+<>
+  <AnimatedF0Text
+    variant="body-sm-default"
+    layout={LinearTransition.springify()}
+  >
+    {dynamicContent}
+  </AnimatedF0Text>
+</>
+```
+
+## API Reference
+
+### Props
+
+AnimatedF0Text accepts all F0Text semantic props plus Reanimated animation props.
+
+#### Typography Props (shared with F0Text)
+
+| Prop            | Type                | Default             | Description                              |
+| --------------- | ------------------- | ------------------- | ---------------------------------------- |
+| `variant`       | `TypographyVariant` | `'body-sm-default'` | Typography variant                       |
+| `color`         | `TextColor`         | `'default'`         | Text color from F0 semantic color system |
+| `align`         | `TextAlign`         | `'left'`            | Text alignment                           |
+| `decoration`    | `TextDecoration`    | `'none'`            | Text decoration                          |
+| `transform`     | `TextTransform`     | `'none'`            | Text transform                           |
+| `numberOfLines` | `number`            | `undefined`         | Max lines before truncation              |
+
+#### Animation Props
+
+| Prop       | Type                                              | Description                                                    |
+| ---------- | ------------------------------------------------- | -------------------------------------------------------------- |
+| `entering` | `EntryOrExitLayoutType`                           | Reanimated entering animation (e.g. `FadeIn`, `SlideInLeft`)   |
+| `exiting`  | `EntryOrExitLayoutType`                           | Reanimated exiting animation (e.g. `FadeOut`, `SlideOutRight`) |
+| `layout`   | `BaseAnimationBuilder \| LayoutAnimationFunction` | Layout transition animation                                    |
+| `style`    | `AnimatedStyle`                                   | Animated style from `useAnimatedStyle`                         |
+
+All React Native `TextProps` are also supported (onPress, testID, etc.).
+
+### Typography Variants
+
+See [F0Text documentation](../F0Text/F0Text.md) for the full list of typography variants and colors.
+
+## Architecture
+
+```
+F0Text/                        # Parent folder for text primitives
+├── F0Text/                    # Static text component
+│   ├── F0Text.tsx
+│   ├── F0Text.types.ts        # Shared types (TypographyVariant, TextColor, etc.)
+│   ├── F0Text.styles.ts       # Shared styles (textVariants)
+│   ├── F0Text.md
+│   ├── index.ts
+│   └── __tests__/
+├── AnimatedF0Text/            # Animated text component
+│   ├── AnimatedF0Text.tsx     # Animated text (Reanimated Animated.Text)
+│   ├── AnimatedF0Text.types.ts
+│   ├── AnimatedF0Text.md
+│   ├── index.ts
+│   └── __tests__/
+└── index.ts                   # Barrel re-exporting both
+```
+
+- **Types** are imported from `../F0Text/F0Text.types.ts` (`TypographyVariant`, `TextColor`, etc.)
+- **Styles** are imported from `../F0Text/F0Text.styles.ts` (`textVariants`)
+
+This ensures both components always produce identical typography output.
+
+## Accessibility
+
+- Fully supports React Native `Text` accessibility props
+- Animations respect the device's reduced motion setting when using Reanimated's built-in animations
+
+## Performance
+
+- **React.memo**: Prevents re-renders when props unchanged
+- **useMemo**: Memoizes className computation
+- Only imported when animation is needed (tree-shakeable)

package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.js

@@ -0,0 +1,2 @@
+export{};export{};
+//# sourceMappingURL=AnimatedF0Text.types.js.map

package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/primitives/F0Text/AnimatedF0Text/index.js

@@ -0,0 +1,2 @@
+export{AnimatedF0Text}from"./AnimatedF0Text";
+//# sourceMappingURL=index.js.map

package/lib/module/components/primitives/F0Text/AnimatedF0Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimatedF0Text"],"sourceRoot":"../../../../../../src","sources":["components/primitives/F0Text/AnimatedF0Text/index.ts"],"mappings":"AAMA,OAASA,cAAc,KAAQ,kBAAkB","ignoreList":[]}

package/lib/module/components/primitives/F0Text/F0Text/F0Text.js

@@ -0,0 +1,2 @@
+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";
+//# sourceMappingURL=F0Text.js.map

package/lib/module/components/primitives/F0Text/F0Text/F0Text.js.map

@@ -0,0 +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

@@ -20,6 +20,7 @@ import { F0Text } from "@factorialco/f0-react-native"
 
 ## Usage
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   <F0Text variant="heading-lg">Welcome</F0Text>
@@ -60,6 +61,7 @@ All variants use **Inter** font family with the weight included in the variant n
 
 | Variant      | Size | Line Height | Weight         | Letter Spacing |
 | ------------ | ---- | ----------- | -------------- | -------------- |
+| `heading-xl` | 36px | 40px        | Semibold (600) | -0.2px         |
 | `heading-lg` | 24px | 32px        | Semibold (600) | -0.2px         |
 | `heading-md` | 20px | 28px        | Semibold (600) | -0.2px         |
 | `heading-sm` | 16px | 24px        | Semibold (600) | -              |
@@ -97,9 +99,11 @@ All variants use **Inter** font family with the weight included in the variant n
 
 ### Typography Variants
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   {/* Headings */}
+  <F0Text variant="heading-xl">Extra Large Heading</F0Text>
   <F0Text variant="heading-lg">Large Heading</F0Text>
   <F0Text variant="heading-md">Medium Heading</F0Text>
   <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
 
 ### Colors
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   <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
 
 ### Text Decorations & Transforms
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   <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
 
 ### Truncation
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   <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
 
 F0Text doesn't accept `className` to prevent typography override. Use a View wrapper for spacing:
 
+<!-- prettier-ignore -->
 ```tsx
 <>
   {/* Spacing with View wrapper */}
@@ -197,6 +205,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
 
 ### Combined Props
 
+<!-- prettier-ignore -->
 ```tsx
 <F0Text
   variant="heading-md"
@@ -211,6 +220,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
 
 ### Nested Text
 
+<!-- prettier-ignore -->
 ```tsx
 <F0Text variant="body-sm-default">
   This is regular text with{" "}
@@ -223,6 +233,7 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
 
 ### Real-world Card Example
 
+<!-- prettier-ignore -->
 ```tsx
 <View className="rounded-lg bg-f0-background-secondary p-4">
   <View className="mb-2">
@@ -243,27 +254,82 @@ F0Text doesn't accept `className` to prevent typography override. Use a View wra
 ## Architecture
 
 ```
-F0Text/
-├── F0Text.tsx          # Main component
-├── F0Text.md           # Documentation
-├── F0Text.types.ts     # TypeScript types
-├── F0Text.styles.ts    # Tailwind variants config
-├── index.ts            # Public exports
-└── __tests__/
-    ├── index.spec.tsx
-    └── __snapshots__/
+F0Text/                        # Parent folder for text primitives
+├── F0Text/                    # Static text component
+│   ├── F0Text.tsx             # Main component
+│   ├── F0Text.md              # Documentation
+│   ├── F0Text.types.ts        # TypeScript types
+│   ├── F0Text.styles.ts       # Tailwind variants config
+│   ├── index.ts               # Public exports
+│   └── __tests__/
+│       ├── F0Text.spec.tsx
+│       └── __snapshots__/
+├── AnimatedF0Text/            # Animated text component
+│   ├── AnimatedF0Text.tsx
+│   ├── AnimatedF0Text.md
+│   ├── AnimatedF0Text.types.ts
+│   ├── index.ts
+│   └── __tests__/
+│       ├── AnimatedF0Text.spec.tsx
+│       └── __snapshots__/
+└── index.ts                   # Barrel re-exporting both
 ```
 
 ### Font Family
 
-F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
+F0Text uses the **Inter** font family through Tailwind/Uniwind `font-*` utility classes,
+which map to `--font-*` CSS variables defined in the app's `@theme`:
+
+| Tailwind Class  | CSS Variable      | Font Name      | Font Weight |
+| --------------- | ----------------- | -------------- | ----------- |
+| `font-normal`   | `--font-normal`   | Inter-Regular  | 400         |
+| `font-medium`   | `--font-medium`   | Inter-Medium   | 500         |
+| `font-semibold` | `--font-semibold` | Inter-SemiBold | 600         |
+| `font-bold`     | `--font-bold`     | Inter-Bold     | 700         |
+
+#### Host App Font Setup
+
+The consuming app must embed the Inter `.ttf` files and wire them up for both
+iOS and Android. See the [README "Add Inter Fonts"](../../../../../README.md#5️⃣-add-inter-fonts-host-app) section for the full
+step-by-step guide. The short version:
+
+1. **Name font files to match their PostScript name** (e.g. `Inter-Regular.ttf`
+   for PostScript name `Inter-Regular`). iOS resolves fonts by PostScript name,
+   Android by asset file name — matching them avoids platform-specific overrides.
+
+2. **Register via `expo-font`** config plugin in `app.json`:
+
+```json
+[
+  "expo-font",
+  {
+    "fonts": [
+      "./assets/fonts/Inter/Inter-Regular.ttf",
+      "./assets/fonts/Inter/Inter-Medium.ttf",
+      "./assets/fonts/Inter/Inter-SemiBold.ttf",
+      "./assets/fonts/Inter/Inter-Bold.ttf"
+    ]
+  }
+]
+```
+
+3. **Define `@theme` variables** in `global.css`:
+
+```css
+@theme {
+  --font-normal: "Inter-Regular";
+  --font-medium: "Inter-Medium";
+  --font-semibold: "Inter-SemiBold";
+  --font-bold: "Inter-Bold";
+}
+```
+
+The `@theme` values must match the file names (without `.ttf`). Uniwind maps
+`font-normal`, `font-medium`, `font-semibold`, and `font-bold` utility classes
+to these variables.
 
-| Tailwind Class  | React Native Font Family | Font Weight |
-| --------------- | ------------------------ | ----------- |
-| `font-normal`   | Inter-Regular            | 400         |
-| `font-medium`   | Inter-Medium             | 500         |
-| `font-semibold` | Inter-SemiBold           | 600         |
-| `font-bold`     | Inter-Bold               | 700         |
+> **Rebuild required:** Font changes are picked up at native build time.
+> Run `npx expo prebuild --clean` after adding or renaming font files.
 
 ## Accessibility
 
@@ -279,6 +345,7 @@ F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
 
 ### Best Practices
 
+<!-- prettier-ignore -->
 ```tsx
 // ✅ Good: Use appropriate variant
 <F0Text variant="body-md-semibold">Bold text</F0Text>
@@ -287,11 +354,12 @@ F0Text uses **Inter** font family through Tailwind/Uniwind font weight classes:
 // <F0Text className="font-bold">Text</F0Text>
 ```
 
+<!-- prettier-ignore -->
 ```tsx
 // ✅ Good: Memoized handler
 const handlePress = useCallback(() => {}, [])
-;<F0Text onPress={handlePress}>Click</F0Text>
+<F0Text onPress={handlePress}>Click</F0Text>
 
 // ❌ Bad: Inline function
-;<F0Text onPress={() => {}}>Click</F0Text>
+<F0Text onPress={() => {}}>Click</F0Text>
 ```

package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js

@@ -0,0 +1,2 @@
+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"}});
+//# sourceMappingURL=F0Text.styles.js.map

package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map

@@ -0,0 +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/module/components/primitives/F0Text/F0Text/F0Text.types.js

@@ -0,0 +1,2 @@
+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"];
+//# sourceMappingURL=F0Text.types.js.map

package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js.map

@@ -0,0 +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":[]}

package/lib/module/components/primitives/F0Text/F0Text/index.js

@@ -0,0 +1,2 @@
+export{F0Text}from"./F0Text";export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text";
+//# sourceMappingURL=index.js.map

package/lib/module/components/primitives/F0Text/F0Text/index.js.map

@@ -0,0 +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":[]}

package/lib/module/components/primitives/F0Text/index.js

@@ -1,2 +1,2 @@
-export{F0Text}from"./F0Text";export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text";
+export{F0Text}from"./F0Text";export{TYPOGRAPHY_VARIANTS,TEXT_COLORS,TEXT_ALIGN,TEXT_DECORATIONS,TEXT_TRANSFORMS}from"./F0Text";export{AnimatedF0Text}from"./AnimatedF0Text";
 //# sourceMappingURL=index.js.map

package/lib/module/components/primitives/F0Text/index.js.map

@@ -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":"AAMA,OAASA,MAAM,KAAQ,UAAU,CASjC,OACEC,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,UAAU","ignoreList":[]}
+{"version":3,"names":["F0Text","TYPOGRAPHY_VARIANTS","TEXT_COLORS","TEXT_ALIGN","TEXT_DECORATIONS","TEXT_TRANSFORMS","AnimatedF0Text"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Text/index.ts"],"mappings":"AAOA,OAASA,MAAM,KAAQ,UAAU,CASjC,OACEC,mBAAmB,CACnBC,WAAW,CACXC,UAAU,CACVC,gBAAgB,CAChBC,eAAe,KACV,UAAU,CAEjB,OAASC,cAAc,KAAQ,kBAAkB","ignoreList":[]}

package/lib/module/styles/theme.css

@@ -77,6 +77,13 @@
   --tracking-4xl: -0.02em;
 
   /* Semantic Typography Tokens - F0Text Variants */
+  /* Heading xl */
+  --p-text-heading-xl-font-size: 2.25rem; /* 36px */
+  --p-text-heading-xl-font-line-height: 2.5rem; /* 40px */
+  --p-text-heading-xl-font-letter-spacing: -0.2px;
+  --p-text-heading-xl-font-weight: 600;
+  --p-text-heading-xl-font-family: Inter;
+
   /* Heading lg */
   --p-text-heading-lg-font-size: 1.5rem; /* 24px */
   --p-text-heading-lg-font-line-height: 2rem; /* 32px */

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { AnimatedF0TextProps } from "./AnimatedF0Text.types";
+export declare const AnimatedF0Text: React.MemoExoticComponent<React.ForwardRefExoticComponent<AnimatedF0TextProps & React.RefAttributes<React.Component<import("react-native-reanimated").AnimatedProps<import("react-native").TextProps>, any, any>>>>;
+export type { AnimatedF0TextProps };
+//# sourceMappingURL=AnimatedF0Text.d.ts.map

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts

@@ -0,0 +1,45 @@
+import type { TextProps as RNTextProps } from "react-native";
+import type { AnimatedProps } from "react-native-reanimated";
+import type { TextAlign, TextColor, TextDecoration, TextTransform, TypographyVariant } from "../F0Text/F0Text.types";
+/**
+ * Props for the AnimatedF0Text component.
+ *
+ * Combines F0Text semantic typography props with Reanimated animation
+ * capabilities (`entering`, `exiting`, `layout`, animated `style`).
+ */
+export interface AnimatedF0TextProps extends Omit<AnimatedProps<RNTextProps>, "className"> {
+    /**
+     * Semantic typography variant
+     * @default "body-sm-default"
+     */
+    variant?: TypographyVariant;
+    /**
+     * Text color from F0 semantic color system
+     * @default "default"
+     */
+    color?: TextColor;
+    /**
+     * Text alignment
+     * @default "left"
+     */
+    align?: TextAlign;
+    /**
+     * Text decoration
+     * @default "none"
+     */
+    decoration?: TextDecoration;
+    /**
+     * Text transform
+     * @default "none"
+     */
+    transform?: TextTransform;
+    /**
+     * Maximum number of lines before truncating with ellipsis
+     */
+    numberOfLines?: number;
+    /**
+     * Children content
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=AnimatedF0Text.types.d.ts.map

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * AnimatedF0Text - Animated text primitive component
+ *
+ * @see AnimatedF0Text.md for documentation
+ */
+export { AnimatedF0Text } from "./AnimatedF0Text";
+export type { AnimatedF0TextProps } from "./AnimatedF0Text";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/index.d.ts.map

@@ -0,0 +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"}