@cdx-ui/components 0.0.1-alpha.12 → 0.0.1-alpha.13

package/lib/commonjs/components/Heading/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Heading = void 0;
 var _react = require("react");
-var _htmlElements = require("@expo/html-elements");
+var _reactNative = require("react-native");
 var _utils = require("@cdx-ui/utils");
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,7 +21,7 @@ const Heading = exports.Heading = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0,
   size = 'lg',
   ...props
 }, ref) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlElements.Span, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     role: "heading",
     "aria-level": sizeToLevel[size ?? 'lg'],
     className: (0, _utils.cn)((0, _styles.headingStyle)({

package/lib/commonjs/components/Heading/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_htmlElements","_utils","_styles","_jsxRuntime","sizeToLevel","xl","lg","md","sm","xs","Heading","exports","memo","forwardRef","className","size","props","ref","jsx","Span","role","cn","headingStyle","displayName"],"sourceRoot":"../../../../src","sources":["components/Heading/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAkE,IAAAI,WAAA,GAAAJ,OAAA;AAElE,MAAMK,WAAW,GAAG;EAClBC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE;AACN,CAAU;AAIH,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,gBAAG,IAAAE,WAAI,eACzB,IAAAC,iBAAU,EAA0C,SAASH,OAAOA,CAClE;EAAEI,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBACE,IAAAd,WAAA,CAAAe,GAAA,EAAClB,aAAA,CAAAmB,IAAI;IACHC,IAAI,EAAC,SAAS;IACd,cAAYhB,WAAW,CAACW,IAAI,IAAI,IAAI,CAAE;IACtCD,SAAS,EAAE,IAAAO,SAAE,EAAC,IAAAC,oBAAY,EAAC;MAAEP;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAC7CE,KAAK;IACTC,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN,CAAC,CACH,CAAC;AAEDP,OAAO,CAACa,WAAW,GAAG,SAAS","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","sizeToLevel","xl","lg","md","sm","xs","Heading","exports","memo","forwardRef","className","size","props","ref","jsx","Text","role","cn","headingStyle","displayName"],"sourceRoot":"../../../../src","sources":["components/Heading/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAkE,IAAAI,WAAA,GAAAJ,OAAA;AAElE,MAAMK,WAAW,GAAG;EAClBC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE;AACN,CAAU;AAIH,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,gBAAG,IAAAE,WAAI,eACzB,IAAAC,iBAAU,EAA0C,SAASH,OAAOA,CAClE;EAAEI,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBACE,IAAAd,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAmB,IAAI;IACHC,IAAI,EAAC,SAAS;IACd,cAAYhB,WAAW,CAACW,IAAI,IAAI,IAAI,CAAE;IACtCD,SAAS,EAAE,IAAAO,SAAE,EAAC,IAAAC,oBAAY,EAAC;MAAEP;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAC7CE,KAAK;IACTC,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN,CAAC,CACH,CAAC;AAEDP,OAAO,CAACa,WAAW,GAAG,SAAS","ignoreList":[]}

package/lib/commonjs/components/Text/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Text = void 0;
 var _react = require("react");
-var _htmlElements = require("@expo/html-elements");
+var _reactNative = require("react-native");
 var _utils = require("@cdx-ui/utils");
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -14,7 +14,7 @@ const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)(function Text({
   size = 'md',
   ...props
 }, ref) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_htmlElements.Span, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     className: (0, _utils.cn)((0, _styles.textStyle)({
       size
     }), className),

package/lib/commonjs/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_htmlElements","_utils","_styles","_jsxRuntime","Text","exports","forwardRef","className","size","props","ref","jsx","Span","cn","textStyle","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAuD,IAAAI,WAAA,GAAAJ,OAAA;AAIhD,MAAMK,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,iBAAU,EAAuC,SAASF,IAAIA,CAChF;EAAEG,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBAAO,IAAAP,WAAA,CAAAQ,GAAA,EAACX,aAAA,CAAAY,IAAI;IAACL,SAAS,EAAE,IAAAM,SAAE,EAAC,IAAAC,iBAAS,EAAC;MAAEN;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAAKE,KAAK;IAAEC,GAAG,EAAEA;EAAI,CAAE,CAAC;AACrF,CAAC,CAAC;AAEFN,IAAI,CAACW,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","Text","exports","forwardRef","className","size","props","ref","jsx","cn","textStyle","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAuD,IAAAI,WAAA,GAAAJ,OAAA;AAIhD,MAAMK,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,iBAAU,EAAyC,SAASF,IAAIA,CAClF;EAAEG,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBAAO,IAAAP,WAAA,CAAAQ,GAAA,EAACX,YAAA,CAAAI,IAAM;IAACG,SAAS,EAAE,IAAAK,SAAE,EAAC,IAAAC,iBAAS,EAAC;MAAEL;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAAKE,KAAK;IAAEC,GAAG,EAAEA;EAAI,CAAE,CAAC;AACvF,CAAC,CAAC;AAEFN,IAAI,CAACU,WAAW,GAAG,MAAM","ignoreList":[]}

package/lib/module/components/Heading/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { forwardRef, memo } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import { headingStyle } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ export const Heading = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Headin
   size = 'lg',
   ...props
 }, ref) {
-  return /*#__PURE__*/_jsx(Span, {
+  return /*#__PURE__*/_jsx(Text, {
     role: "heading",
     "aria-level": sizeToLevel[size ?? 'lg'],
     className: cn(headingStyle({

package/lib/module/components/Heading/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","memo","Span","cn","headingStyle","jsx","_jsx","sizeToLevel","xl","lg","md","sm","xs","Heading","className","size","props","ref","role","displayName"],"sourceRoot":"../../../../src","sources":["components/Heading/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAA0D,OAAO;AAC1F,SAASC,IAAI,QAAQ,qBAAqB;AAC1C,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,YAAY,QAAkC,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElE,MAAMC,WAAW,GAAG;EAClBC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE;AACN,CAAU;AAIV,OAAO,MAAMC,OAAO,gBAAGZ,IAAI,cACzBD,UAAU,CAA0C,SAASa,OAAOA,CAClE;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBACEX,IAAA,CAACJ,IAAI;IACHgB,IAAI,EAAC,SAAS;IACd,cAAYX,WAAW,CAACQ,IAAI,IAAI,IAAI,CAAE;IACtCD,SAAS,EAAEX,EAAE,CAACC,YAAY,CAAC;MAAEW;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAC7CE,KAAK;IACTC,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN,CAAC,CACH,CAAC;AAEDJ,OAAO,CAACM,WAAW,GAAG,SAAS","ignoreList":[]}
+{"version":3,"names":["forwardRef","memo","Text","cn","headingStyle","jsx","_jsx","sizeToLevel","xl","lg","md","sm","xs","Heading","className","size","props","ref","role","displayName"],"sourceRoot":"../../../../src","sources":["components/Heading/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAA0D,OAAO;AAC1F,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,YAAY,QAAkC,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElE,MAAMC,WAAW,GAAG;EAClBC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE;AACN,CAAU;AAIV,OAAO,MAAMC,OAAO,gBAAGZ,IAAI,cACzBD,UAAU,CAA0C,SAASa,OAAOA,CAClE;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBACEX,IAAA,CAACJ,IAAI;IACHgB,IAAI,EAAC,SAAS;IACd,cAAYX,WAAW,CAACQ,IAAI,IAAI,IAAI,CAAE;IACtCD,SAAS,EAAEX,EAAE,CAACC,YAAY,CAAC;MAAEW;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAC7CE,KAAK;IACTC,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN,CAAC,CACH,CAAC;AAEDJ,OAAO,CAACM,WAAW,GAAG,SAAS","ignoreList":[]}

package/lib/module/components/Text/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { forwardRef } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text as RNText } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import { textStyle } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ export const Text = /*#__PURE__*/forwardRef(function Text({
   size = 'md',
   ...props
 }, ref) {
-  return /*#__PURE__*/_jsx(Span, {
+  return /*#__PURE__*/_jsx(RNText, {
     className: cn(textStyle({
       size
     }), className),

package/lib/module/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","Span","cn","textStyle","jsx","_jsx","Text","className","size","props","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAA0D,OAAO;AACpF,SAASC,IAAI,QAAQ,qBAAqB;AAC1C,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,SAAS,QAA0B,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD,OAAO,MAAMC,IAAI,gBAAGN,UAAU,CAAuC,SAASM,IAAIA,CAChF;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBAAOL,IAAA,CAACJ,IAAI;IAACM,SAAS,EAAEL,EAAE,CAACC,SAAS,CAAC;MAAEK;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAAKE,KAAK;IAAEC,GAAG,EAAEA;EAAI,CAAE,CAAC;AACrF,CAAC,CAAC;AAEFJ,IAAI,CAACK,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"names":["forwardRef","Text","RNText","cn","textStyle","jsx","_jsx","className","size","props","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAA0D,OAAO;AACpF,SAASC,IAAI,IAAIC,MAAM,QAAQ,cAAc;AAC7C,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,SAAS,QAA0B,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD,OAAO,MAAML,IAAI,gBAAGD,UAAU,CAAyC,SAASC,IAAIA,CAClF;EAAEM,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACpCC,GAAG,EACH;EACA,oBAAOJ,IAAA,CAACJ,MAAM;IAACK,SAAS,EAAEJ,EAAE,CAACC,SAAS,CAAC;MAAEI;IAAK,CAAC,CAAC,EAAED,SAAS,CAAE;IAAA,GAAKE,KAAK;IAAEC,GAAG,EAAEA;EAAI,CAAE,CAAC;AACvF,CAAC,CAAC;AAEFT,IAAI,CAACU,WAAW,GAAG,MAAM","ignoreList":[]}

package/lib/typescript/components/Heading/index.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text } from 'react-native';
 import { type HeadingVariantProps } from './styles';
-export type HeadingProps = HeadingVariantProps & ComponentPropsWithoutRef<typeof Span>;
-export declare const Heading: import("react").NamedExoticComponent<HeadingVariantProps & Omit<Omit<import("react-native").TextProps & import("react").ClassAttributes<typeof import("react-native").Text>, "style"> & import("@expo/html-elements/build/primitives/Text").WebTextProps, "ref"> & import("react").RefAttributes<never>>;
+export type HeadingProps = HeadingVariantProps & ComponentPropsWithoutRef<typeof Text>;
+export declare const Heading: import("react").NamedExoticComponent<HeadingVariantProps & import("react-native").TextProps & import("react").RefAttributes<Text>>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Heading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Heading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAUlE,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;AAEvF,eAAO,MAAM,OAAO,0SAenB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Heading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAUlE,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;AAEvF,eAAO,MAAM,OAAO,oIAenB,CAAC"}

package/lib/typescript/components/Text/index.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text as RNText } from 'react-native';
 import { TextVariantProps } from './styles';
-export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof Span>;
-export declare const Text: import("react").ForwardRefExoticComponent<TextVariantProps & Omit<Omit<import("react-native").TextProps & import("react").ClassAttributes<typeof import("react-native").Text>, "style"> & import("@expo/html-elements/build/primitives/Text").WebTextProps, "ref"> & import("react").RefAttributes<never>>;
+export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof RNText>;
+export declare const Text: import("react").ForwardRefExoticComponent<TextVariantProps & import("react-native").TextProps & import("react").RefAttributes<RNText>>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAqB,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAa,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;AAEjF,eAAO,MAAM,IAAI,4SAKf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAqB,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAa,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEnF,eAAO,MAAM,IAAI,wIAKf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.12",
+  "version": "0.0.1-alpha.13",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -58,11 +58,10 @@
     }
   },
   "dependencies": {
-    "@expo/html-elements": "55.0.3",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.12",
-    "@cdx-ui/utils": "0.0.1-alpha.12"
+    "@cdx-ui/primitives": "0.0.1-alpha.13",
+    "@cdx-ui/utils": "0.0.1-alpha.13"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Heading/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, memo, type ComponentRef, type ComponentPropsWithoutRef } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import { headingStyle, type HeadingVariantProps } from './styles';
 
@@ -11,15 +11,15 @@ const sizeToLevel = {
   xs: 5,
 } as const;
 
-export type HeadingProps = HeadingVariantProps & ComponentPropsWithoutRef<typeof Span>;
+export type HeadingProps = HeadingVariantProps & ComponentPropsWithoutRef<typeof Text>;
 
 export const Heading = memo(
-  forwardRef<ComponentRef<typeof Span>, HeadingProps>(function Heading(
+  forwardRef<ComponentRef<typeof Text>, HeadingProps>(function Heading(
     { className, size = 'lg', ...props },
     ref,
   ) {
     return (
-      <Span
+      <Text
         role="heading"
         aria-level={sizeToLevel[size ?? 'lg']}
         className={cn(headingStyle({ size }), className)}

package/src/components/Text/index.tsx

@@ -1,15 +1,15 @@
 import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
-import { Span } from '@expo/html-elements';
+import { Text as RNText } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import { textStyle, TextVariantProps } from './styles';
 
-export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof Span>;
+export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof RNText>;
 
-export const Text = forwardRef<ComponentRef<typeof Span>, TextProps>(function Text(
+export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
   { className, size = 'md', ...props },
   ref,
 ) {
-  return <Span className={cn(textStyle({ size }), className)} {...props} ref={ref} />;
+  return <RNText className={cn(textStyle({ size }), className)} {...props} ref={ref} />;
 });
 
 Text.displayName = 'Text';