@medway-ui/native 1.1.1 → 1.2.0

package/lib/typescript/lib/overlay-host.d.ts

@@ -0,0 +1,23 @@
+import React, { type ReactNode } from 'react';
+type HostOrigin = {
+    x: number;
+    y: number;
+};
+type OverlayHostContextValue = {
+    mount: (id: string, node: ReactNode) => void;
+    unmount: (id: string) => void;
+    /** Mede a origem do host na janela (para converter pageX/pageY → coords do host). */
+    measureHostOrigin: (callback: (origin: HostOrigin) => void) => void;
+};
+/**
+ * Host de overlay no topo da árvore Medway UI.
+ * Usado pelo DropdownMenu porque o Portal zustand do rn-primitives
+ * não renderiza de forma confiável dentro da stack (RNSScreen) deste app.
+ */
+declare function OverlayHostProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+declare function useOverlayHost(): OverlayHostContextValue;
+export { OverlayHostProvider, useOverlayHost };
+export type { HostOrigin };
+//# sourceMappingURL=overlay-host.d.ts.map

package/lib/typescript/lib/overlay-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-host.d.ts","sourceRoot":"","sources":["../../../src/lib/overlay-host.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3C,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,qFAAqF;IACrF,iBAAiB,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,KAAK,IAAI,CAAC;CACrE,CAAC;AAIF;;;;GAIG;AACH,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAoDjE;AAED,iBAAS,cAAc,4BAMtB;AAaD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/lib/typescript/lib/typography.d.ts

@@ -0,0 +1,12 @@
+import type { TextStyle } from 'react-native';
+/** Montserrat files registered by the host app (ex.: App.js useFonts). */
+export declare const fontFamilyRegular: "MontserratRegular";
+export declare const fontFamilyMedium: "MontserratMedium";
+export declare const fontFamilySemibold: "MontserratSemiBold";
+/** Figma body-sm/medium */
+export declare const bodySmMediumStyle: TextStyle;
+/** Figma body-xs/medium */
+export declare const bodyXsMediumStyle: TextStyle;
+/** Figma body-sm/semibold */
+export declare const bodySmSemiboldStyle: TextStyle;
+//# sourceMappingURL=typography.d.ts.map

package/lib/typescript/lib/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/lib/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,0EAA0E;AAC1E,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC;AAC9D,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC;AAEhE,2BAA2B;AAC3B,eAAO,MAAM,iBAAiB,EAAE,SAE/B,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,iBAAiB,EAAE,SAE/B,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,mBAAmB,EAAE,SAEjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medway-ui/native",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Medway UI components for React Native (iOS/Android via Expo)",
   "author": "Alekcarvalho",
   "license": "MIT",
@@ -47,12 +47,14 @@
     "@rn-primitives/avatar": "^1.0.0",
     "@rn-primitives/checkbox": "^1.0.0",
     "@rn-primitives/dialog": "^1.0.0",
+    "@rn-primitives/dropdown-menu": "^1.5.2",
     "@rn-primitives/popover": "^1.0.0",
-    "@rn-primitives/portal": "^1.4.0",
+    "@rn-primitives/portal": "^1.5.2",
     "@rn-primitives/radio-group": "^1.0.0",
     "@rn-primitives/select": "^1.0.0",
     "@rn-primitives/slot": "^1.0.0",
     "@rn-primitives/switch": "^1.0.0",
+    "@rn-primitives/tabs": "^1.5.2",
     "@rn-primitives/tooltip": "^1.0.0"
   },
   "peerDependencies": {
@@ -87,6 +89,9 @@
     }
   },
   "devDependencies": {
+    "@medway-ui/icons": "^1.12.0",
+    "@react-navigation/native": "^7.3.18",
+    "@react-navigation/native-stack": "^7.18.10",
     "@types/react": "^19",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -110,7 +115,12 @@
         }
       ],
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "publishConfig": {

package/setup/MedwayUiProvider.tsx

@@ -3,8 +3,9 @@ import { View, StyleSheet } from 'react-native';
 import { PortalHost } from '@rn-primitives/portal';
 import { useColorScheme } from 'nativewind';
 
+import { OverlayHostProvider } from '../src/lib/overlay-host';
+
 import './global.css';
-import '@/lib/medwayIcons';
 
 type MedwayUiTheme = 'light' | 'dark' | 'system';
 
@@ -26,7 +27,8 @@ type MedwayUiProviderProps = {
 
 /**
  * Carrega tokens + Tailwind (NativeWind) para a subárvore.
- * PortalHost é obrigatório para Select, Dialog, Popover e Tooltip (@rn-primitives).
+ * - OverlayHostProvider: DropdownMenu (acima da stack, sem Modal/Portal zustand)
+ * - PortalHost: Select/Dialog/Popover/Tooltip do rn-primitives
  *
  * Dark mode: requer `darkMode: 'class'` no tailwind do app (via createMedwayUiTailwindConfig).
  */
@@ -45,8 +47,12 @@ function MedwayUiProvider({
 
   return (
     <View style={styles.root} className={isDark ? 'dark' : undefined}>
-      {children}
-      <PortalHost />
+      <OverlayHostProvider>
+        {children}
+        <View style={styles.portalHost} pointerEvents="box-none">
+          <PortalHost />
+        </View>
+      </OverlayHostProvider>
     </View>
   );
 }
@@ -55,6 +61,11 @@ const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
+  portalHost: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 99990,
+    elevation: 99990,
+  },
 });
 
 export { MedwayUiProvider };

package/setup/babel-brownfield.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 
 const DEFAULT_APP_PAGES_DIR = 'medway-ui';
@@ -15,6 +16,72 @@ function createNativeWindScopeTest(options = {}) {
   };
 }
 
+function createMedwayUiSourceTest() {
+  return function isMedwayUiSourceFile(currentFile) {
+    return (
+      currentFile.includes(`${path.sep}@medway-ui${path.sep}native${path.sep}`) ||
+      currentFile.includes(`${path.sep}medway-ui${path.sep}native${path.sep}`)
+    );
+  };
+}
+
+function resolveMedwayUiNativeSrc(projectRoot) {
+  const npmNativeSrc = path.join(projectRoot, 'node_modules/@medway-ui/native/src');
+
+  if (fs.existsSync(npmNativeSrc) && !isNativePackageSymlinkedToMonorepo(projectRoot)) {
+    return npmNativeSrc;
+  }
+
+  const monorepoNativeSrc = path.resolve(projectRoot, '../medway-ui/native/src');
+  if (fs.existsSync(monorepoNativeSrc)) {
+    return monorepoNativeSrc;
+  }
+
+  return npmNativeSrc;
+}
+
+function isNativePackageSymlinkedToMonorepo(projectRoot) {
+  const nativePath = path.join(projectRoot, 'node_modules/@medway-ui/native');
+
+  if (!fs.existsSync(nativePath)) {
+    return false;
+  }
+
+  try {
+    const nativeRealPath = fs.realpathSync(nativePath);
+    const monorepoNativePath = fs.realpathSync(
+      path.resolve(projectRoot, '../medway-ui/native'),
+    );
+
+    return nativeRealPath === monorepoNativePath;
+  } catch {
+    return false;
+  }
+}
+
+function createMedwayUiAliasResolver(projectRoot) {
+  const medwayUiNativeSrc = resolveMedwayUiNativeSrc(projectRoot);
+  const isMedwayUiSourceFile = createMedwayUiSourceTest();
+
+  return function resolveMedwayUiAlias(sourcePath, currentFile) {
+    if (!isMedwayUiSourceFile(currentFile) || !sourcePath.startsWith('@/')) {
+      return undefined;
+    }
+
+    const relativePath = sourcePath.slice(2);
+    const extensions = ['', '.tsx', '.ts', '.jsx', '.js', '/index.tsx', '/index.ts'];
+
+    for (const ext of extensions) {
+      const candidate = path.join(medwayUiNativeSrc, `${relativePath}${ext}`);
+      if (fs.existsSync(candidate)) {
+        return candidate;
+      }
+    }
+
+    return undefined;
+  };
+}
+
 function loadCssInteropBabelPlugin(projectRoot) {
   return require(
     require.resolve('react-native-css-interop/dist/babel-plugin', {
@@ -46,5 +113,8 @@ function createBrownfieldOverride(options = {}) {
 module.exports = {
   createBrownfieldOverride,
   createNativeWindScopeTest,
+  createMedwayUiAliasResolver,
+  createMedwayUiSourceTest,
+  resolveMedwayUiNativeSrc,
   DEFAULT_APP_PAGES_DIR,
 };

package/setup/metro.js

@@ -29,7 +29,9 @@ function resolveMedwayAlias(moduleName, medwayUiNativeSrc, medwayUiSharedSrc) {
 
   return (
     tryResolveMedwayModule(path.join(medwayUiNativeSrc, relativePath)) ??
-    tryResolveMedwayModule(path.join(medwayUiSharedSrc, relativePath))
+    (medwayUiSharedSrc
+      ? tryResolveMedwayModule(path.join(medwayUiSharedSrc, relativePath))
+      : null)
   );
 }
 
@@ -92,43 +94,112 @@ function resolveBareModule(moduleName, searchRoots) {
   return null;
 }
 
+/**
+ * Detecta monorepo file: (`../medway-ui`) vs pacotes npm (`node_modules/@medway-ui`).
+ * Prioriza npm quando o pacote não é symlink para o clone local.
+ */
+function isNativePackageSymlinkedToMonorepo(projectRoot) {
+  const nativePath = path.join(projectRoot, 'node_modules/@medway-ui/native');
+
+  if (!fs.existsSync(nativePath)) {
+    return false;
+  }
+
+  try {
+    const nativeRealPath = fs.realpathSync(nativePath);
+    const monorepoNativePath = fs.realpathSync(
+      path.resolve(projectRoot, '../medway-ui/native'),
+    );
+
+    return nativeRealPath === monorepoNativePath;
+  } catch {
+    return false;
+  }
+}
+
+function detectLinkedMedwayUiRoot(projectRoot) {
+  const npmScopedRoot = 'node_modules/@medway-ui';
+  const npmNativeSrc = path.resolve(projectRoot, npmScopedRoot, 'native/src');
+
+  if (fs.existsSync(npmNativeSrc) && !isNativePackageSymlinkedToMonorepo(projectRoot)) {
+    return npmScopedRoot;
+  }
+
+  const monorepoRoot = '../medway-ui';
+  const monorepoNativeSrc = path.resolve(projectRoot, monorepoRoot, 'native/src');
+
+  if (fs.existsSync(monorepoNativeSrc)) {
+    return monorepoRoot;
+  }
+
+  if (fs.existsSync(npmNativeSrc)) {
+    return npmScopedRoot;
+  }
+
+  return monorepoRoot;
+}
+
+function resolveMedwayUiPaths(projectRoot, linkedMedwayUiRoot, nativePackageRoot) {
+  const medwayUiRoot = path.resolve(projectRoot, linkedMedwayUiRoot);
+  const linkedNativeSrc = path.resolve(medwayUiRoot, 'native/src');
+  const npmNativeSrc = path.join(nativePackageRoot, 'src');
+  const isMonorepoLink = fs.existsSync(linkedNativeSrc);
+
+  return {
+    medwayUiRoot: isMonorepoLink ? medwayUiRoot : nativePackageRoot,
+    medwayUiNativeRoot: isMonorepoLink
+      ? path.resolve(medwayUiRoot, 'native')
+      : nativePackageRoot,
+    medwayUiNativeSrc: isMonorepoLink ? linkedNativeSrc : npmNativeSrc,
+    medwayUiSharedSrc: isMonorepoLink ? path.resolve(medwayUiRoot, 'src') : null,
+    isMonorepoLink,
+  };
+}
+
 /**
  * Metro + NativeWind para @medway-ui/native (monorepo file: ou npm).
  *
  * @param {import('expo/metro-config').MetroConfig} config
  * @param {object} [options]
  * @param {string} options.projectRoot
- * @param {string} [options.linkedMedwayUiRoot='../medway-ui'] - clone local no monorepo
+ * @param {string} [options.linkedMedwayUiRoot] - auto-detecta monorepo ou npm quando omitido
  * @param {boolean} [options.resolveNativeSource=true] - aponta @medway-ui/native para src/
  */
 function withMedwayUi(config, options = {}) {
   const projectRoot = options.projectRoot ?? process.cwd();
-  const linkedMedwayUiRoot = options.linkedMedwayUiRoot ?? '../medway-ui';
+  const linkedMedwayUiRoot =
+    options.linkedMedwayUiRoot ?? detectLinkedMedwayUiRoot(projectRoot);
   const resolveNativeSource = options.resolveNativeSource ?? true;
 
   const nativePackageRoot = path.resolve(__dirname, '..');
   const globalCssInput = path.join(nativePackageRoot, 'setup/global.css');
 
-  const medwayUiRoot = path.resolve(projectRoot, linkedMedwayUiRoot);
-  const medwayUiNativeRoot = path.resolve(medwayUiRoot, 'native');
-  const medwayUiNativeSrc = path.resolve(medwayUiNativeRoot, 'src');
-  const medwayUiSharedSrc = path.resolve(medwayUiRoot, 'src');
-  const escapedMedwayUiRoot = medwayUiRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-  config.watchFolders = [...(config.watchFolders ?? []), medwayUiRoot];
-
-  const existingBlockList = config.resolver.blockList;
-  const blockListArray = Array.isArray(existingBlockList)
-    ? existingBlockList
-    : existingBlockList
-      ? [existingBlockList]
-      : [];
-
-  config.resolver.blockList = [
-    ...blockListArray,
-    new RegExp(`${escapedMedwayUiRoot}[\\\\/]native[\\\\/]node_modules[\\\\/].*`),
-    new RegExp(`${escapedMedwayUiRoot}[\\\\/]node_modules[\\\\/].*`),
-  ];
+  const {
+    medwayUiRoot,
+    medwayUiNativeRoot,
+    medwayUiNativeSrc,
+    medwayUiSharedSrc,
+    isMonorepoLink,
+  } = resolveMedwayUiPaths(projectRoot, linkedMedwayUiRoot, nativePackageRoot);
+
+  if (isMonorepoLink) {
+    const escapedMedwayUiRoot = medwayUiRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    config.watchFolders = [...(config.watchFolders ?? []), medwayUiRoot];
+
+    const existingBlockList = config.resolver.blockList;
+    const blockListArray = Array.isArray(existingBlockList)
+      ? existingBlockList
+      : existingBlockList
+        ? [existingBlockList]
+        : [];
+
+    config.resolver.blockList = [
+      ...blockListArray,
+      new RegExp(`${escapedMedwayUiRoot}[\\\\/]native[\\\\/]node_modules[\\\\/].*`),
+      new RegExp(`${escapedMedwayUiRoot}[\\\\/]node_modules[\\\\/].*`),
+    ];
+  }
 
   function isMedwayUiOrigin(originModulePath) {
     return (
@@ -192,4 +263,4 @@ function withMedwayUi(config, options = {}) {
   });
 }
 
-module.exports = { withMedwayUi };
+module.exports = { withMedwayUi, detectLinkedMedwayUiRoot, resolveMedwayUiPaths };

package/setup/tailwind.js

@@ -1,13 +1,69 @@
+const fs = require('fs');
 const path = require('path');
 
 function loadDesignTokens(projectRoot) {
-  return require(require.resolve('@medway-ui/core/tokens', { paths: [projectRoot] }));
+  const tokensPath = require.resolve('@medway-ui/core/tokens', {
+    paths: [projectRoot],
+  });
+
+  try {
+    return require(tokensPath);
+  } catch (error) {
+    // Node 22+ não permite require de .ts dentro de node_modules.
+    if (error?.code !== 'ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING') {
+      throw error;
+    }
+
+    const jiti = require('jiti')(path.join(projectRoot, 'tailwind.config.js'));
+    return jiti(tokensPath);
+  }
 }
 
 function resolveNativePackageRoot() {
   return path.resolve(__dirname, '..');
 }
 
+/**
+ * React Native registers Montserrat as separate family names per weight
+ * (MontserratMedium, MontserratSemiBold, …). Numeric fontWeight + "Montserrat"
+ * does not resolve the file, so weight utilities must set fontFamily instead.
+ * Keys stay aligned with Medway UI tokens (`regular` | `medium` | `semibold` | …).
+ */
+const NATIVE_MONTSERRAT_BY_WEIGHT = {
+  thin: 'MontserratLight',
+  extralight: 'MontserratLight',
+  light: 'MontserratLight',
+  normal: 'Montserrat',
+  regular: 'Montserrat',
+  medium: 'MontserratMedium',
+  semibold: 'MontserratSemiBold',
+  bold: 'MontserratBold',
+  extrabold: 'MontserratExtraBold',
+  black: 'MontserratBlack',
+};
+
+function createNativeMontserratFontPlugin() {
+  // Lazy-require so greenfield web tooling can still import this file if needed.
+  const plugin = require('tailwindcss/plugin');
+
+  return plugin(({ addBase, addUtilities }) => {
+    addBase({
+      '*': {
+        fontFamily: 'Montserrat',
+      },
+    });
+
+    addUtilities(
+      Object.fromEntries(
+        Object.entries(NATIVE_MONTSERRAT_BY_WEIGHT).map(([weight, fontFamily]) => [
+          `.font-${weight}`,
+          { fontFamily },
+        ]),
+      ),
+    );
+  });
+}
+
 /**
  * Tailwind config para apps com @medway-ui/native.
  *
@@ -23,14 +79,12 @@ function createMedwayUiTailwindConfig(options = {}) {
     colors,
     fontFamily,
     fontSize,
-    fontWeight,
     lineHeight,
     borderRadius,
     boxShadow,
   } = loadDesignTokens(projectRoot);
 
   const nativeRoot = resolveNativePackageRoot();
-  const nativeSrc = path.join(nativeRoot, 'src');
 
   const libContent = [
     path.join(nativeRoot, 'src/**/*.{js,jsx,ts,tsx}'),
@@ -38,9 +92,15 @@ function createMedwayUiTailwindConfig(options = {}) {
   ];
 
   if (linkedMedwayUiRoot) {
-    libContent.push(
-      path.resolve(projectRoot, linkedMedwayUiRoot, 'native/src/**/*.{ts,tsx}'),
+    const linkedNativeSrc = path.resolve(
+      projectRoot,
+      linkedMedwayUiRoot,
+      'native/src',
     );
+
+    if (fs.existsSync(linkedNativeSrc)) {
+      libContent.push(path.join(linkedNativeSrc, '**/*.{ts,tsx}'));
+    }
   }
 
   return {
@@ -48,17 +108,25 @@ function createMedwayUiTailwindConfig(options = {}) {
     darkMode: 'class',
     presets: [require('nativewind/preset')],
     theme: {
+      // Disable numeric font-weight utilities; RN needs fontFamily per weight.
+      fontWeight: {},
       extend: {
         colors,
-        fontFamily,
+        fontFamily: {
+          ...fontFamily,
+          sans: ['Montserrat'],
+        },
         fontSize,
-        fontWeight,
         lineHeight,
         borderRadius,
         boxShadow,
       },
     },
+    plugins: [createNativeMontserratFontPlugin()],
   };
 }
 
-module.exports = { createMedwayUiTailwindConfig };
+module.exports = {
+  createMedwayUiTailwindConfig,
+  NATIVE_MONTSERRAT_BY_WEIGHT,
+};

package/setup/tokens.native.css

@@ -545,11 +545,15 @@
   --color-gradient-pt-bg-2: var(--color-gray-450);
 
   /* === Typography fontfamily === */
-  --font-sans:
-    "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* RN: single family name (loaded via expo-font as "Montserrat"). */
+  --font-sans: Montserrat;
 
   /* === Typography weight === */
+  /*
+   * Token keys stay the same as web. On native, Tailwind maps these class
+   * names (font-medium, font-semibold, …) to Montserrat* fontFamily files
+   * in setup/tailwind.js — numeric fontWeight is not used for RN text.
+   */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
@@ -615,6 +619,7 @@
   --sidebar-width-mobile: 256px;
   --sidebar-width-icon: 72px;
 }
+
 .dark {
   /* === Dark base colors === */
   --color-background: var(--color-gray-850);

package/src/components/Alert.tsx

@@ -4,7 +4,9 @@ import {
   useMemo,
   type ReactNode,
 } from "react";
-import { View, Text, Pressable, type ViewProps, type PressableProps } from "react-native";
+import { View, Pressable, type ViewProps, type PressableProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CloseMd } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
@@ -141,7 +143,7 @@ function AlertDescription({ className, children, ...props }: ViewProps & { child
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={3}
-        className={cn("text-sm leading-5", alertTextColorVariants({ variant }))}
+        className={cn("text-sm font-medium leading-5", alertTextColorVariants({ variant }))}
       >
         {children}
       </Text>

package/src/components/Avatar.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import * as AvatarPrimitive from "@rn-primitives/avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { User } from "@medway-ui/icons/native";

package/src/components/Badge.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 

package/src/components/Button.tsx

@@ -1,11 +1,7 @@
 import { type ReactNode } from "react";
-import {
-  Pressable,
-  View,
-  Text,
-  type PressableProps,
-  type ViewStyle,
-} from "react-native";
+import { Pressable, View, type PressableProps, type ViewStyle } from "react-native";
+
+import { Text } from "@/components/Text";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { Loading } from "@/components/Loading";

package/src/components/CardNews.tsx

@@ -8,13 +8,14 @@ import {
 } from "react";
 import {
   Image,
-  Text,
   View,
   useWindowDimensions,
   type ImageProps,
   type ViewProps,
 } from "react-native";
 
+import { Text } from "@/components/Text";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/Avatar";
 import { Button, type ButtonProps } from "@/components/Button";
 import { FallbackImage } from "@/components/FallbackImage";