@factorialco/f0-react-native 0.28.1 → 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.
Files changed (34) hide show
  1. package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js +1 -1
  2. package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.js.map +1 -1
  3. package/lib/module/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +45 -8
  4. package/lib/module/components/primitives/F0Text/F0Text/F0Text.js +1 -1
  5. package/lib/module/components/primitives/F0Text/F0Text/F0Text.js.map +1 -1
  6. package/lib/module/components/primitives/F0Text/F0Text/F0Text.md +42 -31
  7. package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js +1 -1
  8. package/lib/module/components/primitives/F0Text/F0Text/F0Text.styles.js.map +1 -1
  9. package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js +1 -1
  10. package/lib/module/components/primitives/F0Text/F0Text/F0Text.types.js.map +1 -1
  11. package/lib/module/lib/utils.js.map +1 -1
  12. package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.d.ts.map +1 -1
  13. package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts +14 -0
  14. package/lib/typescript/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.d.ts.map +1 -1
  15. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.d.ts.map +1 -1
  16. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts +2 -2
  17. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.styles.d.ts.map +1 -1
  18. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts +22 -18
  19. package/lib/typescript/components/primitives/F0Text/F0Text/F0Text.types.d.ts.map +1 -1
  20. package/lib/typescript/lib/utils.d.ts +1 -2
  21. package/lib/typescript/lib/utils.d.ts.map +1 -1
  22. package/package.json +1 -1
  23. package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.md +45 -8
  24. package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.tsx +20 -8
  25. package/src/components/primitives/F0Text/AnimatedF0Text/AnimatedF0Text.types.ts +15 -0
  26. package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/AnimatedF0Text.spec.tsx +220 -0
  27. package/src/components/primitives/F0Text/AnimatedF0Text/__tests__/__snapshots__/AnimatedF0Text.spec.tsx.snap +16 -16
  28. package/src/components/primitives/F0Text/F0Text/F0Text.md +42 -31
  29. package/src/components/primitives/F0Text/F0Text/F0Text.styles.ts +1 -1
  30. package/src/components/primitives/F0Text/F0Text/F0Text.tsx +17 -10
  31. package/src/components/primitives/F0Text/F0Text/F0Text.types.ts +22 -18
  32. package/src/components/primitives/F0Text/F0Text/__tests__/F0Text.spec.tsx +340 -16
  33. package/src/components/primitives/F0Text/F0Text/__tests__/__snapshots__/F0Text.spec.tsx.snap +36 -36
  34. package/src/lib/utils.ts +1 -2
@@ -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","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":[]}
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","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":[]}
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
- **Note**: `className` and `style` props are **not available**. Use semantic props for typography. For spacing/layout, wrap F0Text in a View. Both props are filtered at runtime to prevent override via spread.
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 doesn't accept `className` to prevent typography override. Use a View wrapper for spacing:
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 with View wrapper */}
189
- <View className="mt-4 mb-2">
190
- <F0Text variant="body-sm-default">Text with margin</F0Text>
191
- </View>
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 with View wrapper */}
194
- <View className="flex-1">
195
- <F0Text variant="body-sm-default">Flexible text</F0Text>
196
- </View>
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">Success message</F0Text>
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
- <View className="mb-2">
240
- <F0Text variant="heading-sm">Card Title</F0Text>
241
- </View>
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
- <View className="mt-2">
247
- <F0Text variant="body-xs-medium" color="tertiary">
248
- Last updated 2 hours ago
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
 
@@ -347,11 +353,16 @@ to these variables.
347
353
 
348
354
  <!-- prettier-ignore -->
349
355
  ```tsx
350
- // ✅ Good: Use appropriate variant
356
+ // ✅ Good: Use semantic props for typography
351
357
  <F0Text variant="body-md-semibold">Bold text</F0Text>
352
358
 
353
- // Bad: Don't try to override with className (not supported)
354
- // <F0Text className="font-bold">Text</F0Text>
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>
355
366
  ```
356
367
 
357
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,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":[]}
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","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"];
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,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":[]}
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,CAUA,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
+ {"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;AAMzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AA+DjE,eAAO,MAAM,cAAc,qNAAsC,CAAA;AAEjE,YAAY,EAAE,mBAAmB,EAAE,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"}
@@ -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
@@ -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;CAC3B"}
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;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"}
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"}
@@ -50,7 +50,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
50
50
  lowercase: string;
51
51
  capitalize: string;
52
52
  };
53
- }, undefined, "", {
53
+ }, undefined, "no-underline normal-case tracking-normal", {
54
54
  variant: {
55
55
  "heading-xl": string;
56
56
  "heading-lg": string;
@@ -140,6 +140,6 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
140
140
  lowercase: string;
141
141
  capitalize: string;
142
142
  };
143
- }, undefined, "", unknown, unknown, undefined>>;
143
+ }, undefined, "no-underline normal-case tracking-normal", unknown, unknown, undefined>>;
144
144
  export type TextVariants = VariantProps<typeof textVariants>;
145
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;;;;;GAKG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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
- * (`style` and `className` are handled by F0 instead).
5
- * Used with omitProps for runtime safety.
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", "className"];
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
- * Internal props for the F0Text component.
35
- * @private
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 F0TextPropsInternal extends Omit<RNTextProps, "style"> {
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
- * Excluded from public API via Omit<F0TextPropsInternal, "className">.
73
- * @private
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,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"}
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"}
@@ -2,11 +2,10 @@ import { type CnOptions } from "tailwind-variants";
2
2
  export declare function cn(...args: CnOptions): string;
3
3
  /**
4
4
  * Omits specified keys from an object at runtime.
5
- * Used to filter blocked props (e.g. style, className) before spreading to primitives.
5
+ * Used to filter blocked props (e.g. style) before spreading to primitives.
6
6
  *
7
7
  * @example
8
8
  * omitProps(rest, ["style"])
9
- * omitProps(rest, ["style", "className"])
10
9
  */
11
10
  export declare function omitProps<T extends Record<string, unknown>, K extends string>(obj: T, keys: readonly K[]): Omit<T, K>;
12
11
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE3D,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,CAM7C;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3E,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAMZ"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE3D,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,CAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,EAC3E,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAMZ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorialco/f0-react-native",
3
- "version": "0.28.1",
3
+ "version": "0.29.0",
4
4
  "type": "module",
5
5
  "description": "React Native components for F0 Design System",
6
6
  "main": "expo-router/entry",
@@ -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
 
@@ -2,6 +2,7 @@ import React from "react"
2
2
  import { Text as RNText } from "react-native"
3
3
  import Animated from "react-native-reanimated"
4
4
 
5
+ import { cn } from "../../../../lib/utils"
5
6
  import { textVariants } from "../F0Text/F0Text.styles"
6
7
 
7
8
  import type { AnimatedF0TextProps } from "./AnimatedF0Text.types"
@@ -15,10 +16,17 @@ const AnimatedText = Animated.createAnimatedComponent(RNText)
15
16
  * typography system as F0Text. Supports `entering`, `exiting`, `layout`
16
17
  * animations and animated `style` props.
17
18
  *
19
+ * Typography is controlled by semantic props and always takes precedence.
20
+ * `className` is accepted for layout/positioning (margin, padding, flex, etc.).
21
+ * `style` is accepted for Reanimated animated values.
22
+ *
18
23
  * @example
19
24
  * <AnimatedF0Text variant="heading-xl" entering={FadeIn.duration(300)}>
20
25
  * Welcome back
21
26
  * </AnimatedF0Text>
27
+ * <AnimatedF0Text variant="body-sm-default" className="mt-4 flex-1" style={animatedStyle}>
28
+ * Positioned animated text
29
+ * </AnimatedF0Text>
22
30
  */
23
31
  const AnimatedF0TextComponent = React.forwardRef<
24
32
  React.ComponentRef<typeof AnimatedText>,
@@ -31,6 +39,7 @@ const AnimatedF0TextComponent = React.forwardRef<
31
39
  align = "left",
32
40
  decoration = "none",
33
41
  transform = "none",
42
+ className,
34
43
  children,
35
44
  numberOfLines,
36
45
  style,
@@ -40,14 +49,17 @@ const AnimatedF0TextComponent = React.forwardRef<
40
49
  ) => {
41
50
  const textClassName = React.useMemo(
42
51
  () =>
43
- textVariants({
44
- variant,
45
- color,
46
- align,
47
- decoration,
48
- transform,
49
- }),
50
- [variant, color, align, decoration, transform]
52
+ cn(
53
+ className,
54
+ textVariants({
55
+ variant,
56
+ color,
57
+ align,
58
+ decoration,
59
+ transform,
60
+ })
61
+ ),
62
+ [variant, color, align, decoration, transform, className]
51
63
  )
52
64
 
53
65
  return (