@factorialco/f0-react-native 0.27.0 → 0.28.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAK7C,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAoDvE,eAAO,MAAM,MAAM,uGAA8B,CAAA;AAGjD,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,gBAAgB,CAAA"}

package/lib/typescript/components/primitives/F0Text/{F0Text.styles.d.ts → F0Text/F0Text.styles.d.ts}

@@ -1,11 +1,13 @@
 import { type VariantProps } from "tailwind-variants";
 /**
  * Text component variants using tailwind-variants
- * Font weights (font-normal, font-medium, font-semibold) map to
- * Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold)
+ * Font weights (font-normal, font-medium, font-semibold, font-bold) map to
+ * Inter font families (Inter-Regular, Inter-Medium, Inter-SemiBold, Inter-Bold)
+ * via --font-* CSS variables defined in @theme.
  */
 export declare const textVariants: import("tailwind-variants").TVReturnType<{
     variant: {
+        "heading-xl": string;
         "heading-lg": string;
         "heading-md": string;
         "heading-sm": string;
@@ -50,6 +52,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "", {
     variant: {
+        "heading-xl": string;
         "heading-lg": string;
         "heading-md": string;
         "heading-sm": string;
@@ -94,6 +97,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
+        "heading-xl": string;
         "heading-lg": string;
         "heading-md": string;
         "heading-sm": string;

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

@@ -0,0 +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/lib/typescript/components/primitives/F0Text/{F0Text.types.d.ts → F0Text/F0Text.types.d.ts}

@@ -8,7 +8,7 @@ export declare const F0_TEXT_BANNED_PROPS: readonly ["style", "className"];
 /**
  * Typography variant types based on semantic design tokens
  */
-export declare const TYPOGRAPHY_VARIANTS: readonly ["heading-lg", "heading-md", "heading-sm", "body-md-default", "body-md-medium", "body-md-semibold", "body-sm-default", "body-sm-medium", "body-sm-semibold", "body-xs-medium"];
+export declare const TYPOGRAPHY_VARIANTS: readonly ["heading-xl", "heading-lg", "heading-md", "heading-sm", "body-md-default", "body-md-medium", "body-md-semibold", "body-sm-default", "body-sm-medium", "body-sm-semibold", "body-xs-medium"];
 export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
 /**
  * Text color variants aligned with F0 semantic color system

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

@@ -0,0 +1 @@
+{"version":3,"file":"F0Text.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/F0Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAE5D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,iCAAkC,CAAA;AAEnE;;GAEG;AACH,eAAO,MAAM,mBAAmB,uMAYtB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE;;GAEG;AACH,eAAO,MAAM,WAAW,4JAad,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD;;GAEG;AACH,eAAO,MAAM,UAAU,iDAAkD,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gDAAiD,CAAA;AAE9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;GAEG;AACH,eAAO,MAAM,eAAe,2DAKlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE5D;;;GAGG;AACH,UAAU,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAA"}

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

@@ -0,0 +1,9 @@
+/**
+ * F0Text - Text primitive component
+ *
+ * @see F0Text.md for documentation
+ */
+export { F0Text } from "./F0Text";
+export type { F0TextProps, TypographyVariant, TextColor, TextAlign, TextDecoration, TextTransform, } from "./F0Text";
+export { TYPOGRAPHY_VARIANTS, TEXT_COLORS, TEXT_ALIGN, TEXT_DECORATIONS, TEXT_TRANSFORMS, } from "./F0Text";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/F0Text/F0Text/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,UAAU,CAAA"}

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

@@ -1,9 +1,12 @@
 /**
- * F0Text - Text primitive component
+ * F0Text - Text primitive components
  *
- * @see F0Text.md for documentation
+ * @see F0Text/F0Text.md for documentation
+ * @see AnimatedF0Text/AnimatedF0Text.md for animated variant documentation
  */
 export { F0Text } from "./F0Text";
 export type { F0TextProps, TypographyVariant, TextColor, TextAlign, TextDecoration, TextTransform, } from "./F0Text";
 export { TYPOGRAPHY_VARIANTS, TEXT_COLORS, TEXT_ALIGN, TEXT_DECORATIONS, TEXT_TRANSFORMS, } from "./F0Text";
+export { AnimatedF0Text } from "./AnimatedF0Text";
+export type { AnimatedF0TextProps } from "./AnimatedF0Text";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Text/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/F0Text/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,eAAe,GAChB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "expo-router/entry",

package/src/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/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { Text as RNText } from "react-native"
+import Animated from "react-native-reanimated"
+
+import { textVariants } from "../F0Text/F0Text.styles"
+
+import type { AnimatedF0TextProps } from "./AnimatedF0Text.types"
+
+const AnimatedText = Animated.createAnimatedComponent(RNText)
+
+/**
+ * AnimatedF0Text - Animated text primitive with semantic typography variants
+ *
+ * Uses Reanimated's Animated.Text under the hood while sharing the same
+ * typography system as F0Text. Supports `entering`, `exiting`, `layout`
+ * animations and animated `style` props.
+ *
+ * @example
+ * <AnimatedF0Text variant="heading-xl" entering={FadeIn.duration(300)}>
+ *   Welcome back
+ * </AnimatedF0Text>
+ */
+const AnimatedF0TextComponent = React.forwardRef<
+  React.ComponentRef<typeof AnimatedText>,
+  AnimatedF0TextProps
+>(
+  (
+    {
+      variant = "body-sm-default",
+      color = "default",
+      align = "left",
+      decoration = "none",
+      transform = "none",
+      children,
+      numberOfLines,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const textClassName = React.useMemo(
+      () =>
+        textVariants({
+          variant,
+          color,
+          align,
+          decoration,
+          transform,
+        }),
+      [variant, color, align, decoration, transform]
+    )
+
+    return (
+      <AnimatedText
+        ref={ref}
+        {...rest}
+        className={textClassName}
+        style={style}
+        numberOfLines={numberOfLines}
+        ellipsizeMode={numberOfLines ? "tail" : undefined}
+      >
+        {children}
+      </AnimatedText>
+    )
+  }
+)
+
+AnimatedF0TextComponent.displayName = "AnimatedF0Text"
+
+export const AnimatedF0Text = React.memo(AnimatedF0TextComponent)
+
+export type { AnimatedF0TextProps }

package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts

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

package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/AnimatedF0Text.spec.tsx

@@ -0,0 +1,131 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { AnimatedF0Text } from "../AnimatedF0Text"
+
+describe("AnimatedF0Text", () => {
+  describe("Snapshots", () => {
+    it("renders with default variant (body-sm-default)", () => {
+      const { toJSON } = render(<AnimatedF0Text>Default text</AnimatedF0Text>)
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    it("renders all typography variants", () => {
+      const 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",
+      ] as const
+
+      variants.forEach((variant) => {
+        const { toJSON } = render(
+          <AnimatedF0Text variant={variant}>{variant} text</AnimatedF0Text>
+        )
+        expect(toJSON()).toMatchSnapshot(`variant-${variant}`)
+      })
+    })
+
+    it("renders with color variants", () => {
+      const colors = ["default", "secondary", "accent", "critical"] as const
+
+      colors.forEach((color) => {
+        const { toJSON } = render(
+          <AnimatedF0Text color={color}>{color} text</AnimatedF0Text>
+        )
+        expect(toJSON()).toMatchSnapshot(`color-${color}`)
+      })
+    })
+  })
+
+  describe("Behavior", () => {
+    it("renders children correctly", () => {
+      const { getByText } = render(<AnimatedF0Text>Hello World</AnimatedF0Text>)
+      expect(getByText("Hello World")).toBeTruthy()
+    })
+
+    it("applies correct variant classes", () => {
+      const { getByText } = render(
+        <AnimatedF0Text variant="heading-xl">XL Heading</AnimatedF0Text>
+      )
+      const element = getByText("XL Heading")
+      expect(element.props.className).toContain("text-[36px]")
+      expect(element.props.className).toContain("leading-[40px]")
+      expect(element.props.className).toContain("tracking-[-0.2px]")
+      expect(element.props.className).toContain("font-semibold")
+    })
+
+    it("applies correct color classes", () => {
+      const { getByText } = render(
+        <AnimatedF0Text color="secondary">Secondary text</AnimatedF0Text>
+      )
+      const element = getByText("Secondary text")
+      expect(element.props.className).toContain("text-f0-foreground-secondary")
+    })
+
+    it("applies correct alignment classes", () => {
+      const { getByText } = render(
+        <AnimatedF0Text align="center">Centered text</AnimatedF0Text>
+      )
+      const element = getByText("Centered text")
+      expect(element.props.className).toContain("text-center")
+    })
+
+    it("applies decoration classes", () => {
+      const { getByText } = render(
+        <AnimatedF0Text decoration="underline">Underlined text</AnimatedF0Text>
+      )
+      const element = getByText("Underlined text")
+      expect(element.props.className).toContain("underline")
+    })
+
+    it("applies transform classes", () => {
+      const { getByText } = render(
+        <AnimatedF0Text transform="uppercase">uppercase text</AnimatedF0Text>
+      )
+      const element = getByText("uppercase text")
+      expect(element.props.className).toContain("uppercase")
+    })
+
+    it("sets numberOfLines prop correctly", () => {
+      const { getByText } = render(
+        <AnimatedF0Text numberOfLines={3}>Multiline text</AnimatedF0Text>
+      )
+      const element = getByText("Multiline text")
+      expect(element.props.numberOfLines).toBe(3)
+      expect(element.props.ellipsizeMode).toBe("tail")
+    })
+
+    it("does not set ellipsizeMode when numberOfLines is not provided", () => {
+      const { getByText } = render(<AnimatedF0Text>Normal text</AnimatedF0Text>)
+      const element = getByText("Normal text")
+      expect(element.props.ellipsizeMode).toBeUndefined()
+    })
+
+    it("accepts style prop for animated styles", () => {
+      const animatedStyle = { opacity: 0.5 }
+      const { getByText } = render(
+        <AnimatedF0Text style={animatedStyle}>Styled text</AnimatedF0Text>
+      )
+      const element = getByText("Styled text")
+      expect(element.props.style).toEqual(animatedStyle)
+    })
+
+    it("forwards additional props", () => {
+      const { getByText } = render(
+        <AnimatedF0Text testID="test-animated-text">
+          Pressable text
+        </AnimatedF0Text>
+      )
+      const element = getByText("Pressable text")
+      expect(element.props.testID).toBe("test-animated-text")
+    })
+  })
+})

package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/__snapshots__/AnimatedF0Text.spec.tsx.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-md-default 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-normal text-f0-foreground text-left"
+>
+  body-md-default
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-md-medium 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-medium text-f0-foreground text-left"
+>
+  body-md-medium
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-md-semibold 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  body-md-semibold
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-sm-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  body-sm-default
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-sm-medium 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-medium text-f0-foreground text-left"
+>
+  body-sm-medium
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-sm-semibold 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-semibold text-f0-foreground text-left"
+>
+  body-sm-semibold
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-body-xs-medium 1`] = `
+<Text
+  className="text-[12px] leading-[16px] font-medium text-f0-foreground text-left"
+>
+  body-xs-medium
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-heading-lg 1`] = `
+<Text
+  className="text-[24px] leading-[32px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-lg
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-heading-md 1`] = `
+<Text
+  className="text-[20px] leading-[28px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-md
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-heading-sm 1`] = `
+<Text
+  className="text-[16px] leading-[24px] font-semibold text-f0-foreground text-left"
+>
+  heading-sm
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders all typography variants: variant-heading-xl 1`] = `
+<Text
+  className="text-[36px] leading-[40px] tracking-[-0.2px] font-semibold text-f0-foreground text-left"
+>
+  heading-xl
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders with color variants: color-accent 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-accent text-left"
+>
+  accent
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders with color variants: color-critical 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-critical text-left"
+>
+  critical
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders with color variants: color-default 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  default
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders with color variants: color-secondary 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground-secondary text-left"
+>
+  secondary
+   text
+</Text>
+`;
+
+exports[`AnimatedF0Text Snapshots renders with default variant (body-sm-default) 1`] = `
+<Text
+  className="text-[14px] leading-[20px] font-normal text-f0-foreground text-left"
+>
+  Default text
+</Text>
+`;

package/src/components/primitives/F0Text/AnimatedF0Text/index.ts

@@ -0,0 +1,8 @@
+/**
+ * AnimatedF0Text - Animated text primitive component
+ *
+ * @see AnimatedF0Text.md for documentation
+ */
+
+export { AnimatedF0Text } from "./AnimatedF0Text"
+export type { AnimatedF0TextProps } from "./AnimatedF0Text"