mobile-design 0.1.2 → 0.1.3

package/COMPONENTS.md

@@ -686,6 +686,8 @@ Recoge información mediante campos Filled u Outlined, con etiquetas, ayuda y er
 
 El contador muestra la longitud. `maxLength` establece el límite. El ref `TextFieldHandle` ofrece `focus`, `blur`, `clear` e `isFocused`. Para un área de texto de altura fija combina `multiline`, `autoGrow={false}` e `inputStyle` con una altura.
 
+El tamaño se puede usar con Filled y Outlined. Las alturas base corresponden a la superficie del campo con una línea a escala de texto normal. La ayuda se muestra debajo. En un campo multilínea, `autoGrow` conserva su comportamiento.
+
 **Propiedades de `TextField`**
 
 | Propiedad | Tipo | Inicial | Uso | Ejemplo |
@@ -730,6 +732,7 @@ El contador muestra la longitud. `maxLength` establece el límite. El ref `TextF
 | `trailing` | `React.ReactNode` | — | Slot al final lógico del contenido. | `trailing={<Text variant="labelSmall">Opcional</Text>}` |
 | `trailingIcon` | `any` | — | Icono al final del control. | `trailingIcon="close"` para borrar el contenido del campo |
 | `trailingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono final. | `trailingIconAccessibilityLabel="Borrar nombre"` |
+| `size` | `"standard" \| "compact"` | `'standard'` | Altura base de una línea de 56 dp con `standard` o 48 dp con `compact`, en Filled y Outlined. Respeta el escalado del texto. | `size="compact"` para un campo de menor altura. |
 | `variant` | `"filled" \| "outlined"` | — | Tratamiento visual o modalidad del componente. | `variant="outlined"` para usar el tratamiento con contorno |
 
 <details>
@@ -761,6 +764,7 @@ export default function Example() {
 
   return (
     <TextField
+      size="compact"
       variant="outlined"
       label="Nombre de la colección"
       value={name}
@@ -4147,6 +4151,7 @@ Recibe las props del área desplazable de Gorhom. `BottomSheetFlatList` utiliza
 | `trailingIcon` | `IconSource` | — | Icono al final del control. | `trailingIcon="close"` |
 | `trailingIconAccessibilityLabel` | `string` | — | Nombre accesible para la acción del icono final. | `trailingIconAccessibilityLabel="Borrar texto"` |
 | `testID` | `string` | — | Identificador del campo para automatización. | `testID="new-collection-name"` |
+| `size` | `"standard" \| "compact"` | `'standard'` | Altura base de una línea de 56 dp con `standard` o 48 dp con `compact`, en Filled y Outlined. Respeta el escalado del texto. | `size="compact"` |
 | `variant` | `"outlined" \| "filled"` | — | Tratamiento visual o modalidad del componente. | `variant="outlined"` |
 | `accessibilityHint` | `string` | — | Contexto adicional sobre la acción. | `accessibilityHint="Escribe un nombre de hasta sesenta caracteres"` |
 | `accessibilityLabel` | `string` | — | Nombre que anuncia la tecnología de asistencia. | `accessibilityLabel="Nombre editable de la colección"` |

package/README.md

@@ -4,7 +4,7 @@
 
 Componentes Material Design 3 para React Native y React Native Web. El paquete integra el tema, las fuentes y los componentes sobre React Native Paper.
 
-[Instalación](#instalación-desde-npm) · [Dependencias](#para-qué-sirve-cada-dependencia) · [Primer componente](#primer-componente) · [Proveedor](#configurar-el-proveedor) · [Temas y colores](#temas-y-colores) · [Tipografía e iconos](#tipografía-e-iconos) · [Índice de componentes](#índice-de-componentes)
+[Instalación](#instalación-desde-npm) · [Dependencias](#para-qué-sirve-cada-dependencia) · [Primer componente](#primer-componente) · [Proveedor](#configurar-el-proveedor) · [Temas y colores](#temas-y-colores) · [Stack](#tema-del-stack) · [Tipografía e iconos](#tipografía-e-iconos) · [Índice de componentes](#índice-de-componentes)
 
 La referencia detallada de propiedades y ejemplos viaja con el paquete. Puedes abrir `node_modules/mobile-design/COMPONENTS.md` para consultar la versión instalada. [Referencia en este código fuente](COMPONENTS.md) · [Referencia de la versión publicada](https://cdn.jsdelivr.net/npm/mobile-design@latest/COMPONENTS.md)
 
@@ -251,39 +251,76 @@ export function createBrandTheme(mode: 'light' | 'dark') {
 
 Pasa `theme={createBrandTheme(mode)}` al proveedor, donde `mode` viene del sistema o de la preferencia guardada por tu app. Para ofrecer varios temas de marca, conserva un mapa de roles por marca y modo y usa la marca activa al construir el tema. `createMobileDesignColors` adapta roles existentes y espera un registro completo de tokens. En particular, `surfaceDisabled`, `onSurfaceDisabled` y `backdrop` son roles planos de compatibilidad que el adaptador de Paper no incorpora.
 
-En el workspace de desarrollo existe el comando `pnpm theme:generate '#246B57'`. Genera las dos paletas mediante Material Color Utilities y escribe el módulo de colores, sus tipos y el bloque CSS generado del workspace. `pnpm theme:generate md3-baseline` restaura la paleta MD3 publicada y `pnpm theme:generate neutral` genera el preset neutro. Estos comandos corresponden al código fuente del workspace. En una app que instala el paquete usa los roles de tokens, el exportador externo y las APIs de tema anteriores.
+En el workspace de desarrollo existe el comando `pnpm theme:generate '#246B57'`. Genera las dos paletas mediante Material Color Utilities y escribe el módulo de colores y sus tipos dentro de @mobile-design/tokens. `pnpm theme:generate md3-baseline` restaura la paleta MD3 publicada y `pnpm theme:generate neutral` genera el preset neutro. Estos comandos corresponden al código fuente del workspace. En una app que instala el paquete usa los roles de tokens, el exportador externo y las APIs de tema anteriores.
+
+### Tema del stack
+
+```ts
+import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { createMobileDesignTheme } from 'mobile-design/react-native';
+import { adaptNavigationTheme } from 'react-native-paper';
+
+export const { LightTheme: navLight, DarkTheme: navDark } = adaptNavigationTheme({
+  reactNavigationLight: DefaultTheme,
+  reactNavigationDark: DarkTheme,
+  materialLight: createMobileDesignTheme({ colorScheme: 'light' }),
+  materialDark: createMobileDesignTheme({ colorScheme: 'dark' })
+});
+```
+
+Dentro de `MobileDesignProvider`, usa `useMobileTheme().dark` para elegir el tema de `NavigationContainer`. Con `headerShown: false`, tu `TopAppBar` usa los colores y Roboto del proveedor. [Stack completo](examples/navigation-stack.tsx) con tres pantallas y un `ScreenLayout` reutilizable. Usa `<ScreenLayout title="Perfil">…</ScreenLayout>` para componer otra pantalla.
 
 ## Tipografía e iconos
 
-Roboto es la tipografía predeterminada. El proveedor usa un subconjunto de Material Symbols Rounded que cubre los controles y ejemplos de integración. El proveedor carga las fuentes predeterminadas que utiliza el tema o el renderizador activo. Para elegir otra tipografía, registra su familia y los pesos que utilices en tu app y pasa, por ejemplo, `fontFamily="Inter"`.
+Para **Roboto y los símbolos incluidos**, basta `MobileDesignProvider`. El proveedor carga esas fuentes cuando se usan.
+
+### Incrustar fuentes con Expo
+
+Usa el plugin si necesitas una fuente incrustada en Android o iOS, disponible desde el arranque. Añade la entrada a `expo.plugins` en `app.json` y recompila. Las rutas parten de la raíz de la app.
+
+```json
+{
+  "expo": {
+    "plugins": [["expo-font", {
+      "android": { "fonts": [{
+        "fontFamily": "Inter",
+        "fontDefinitions": [
+          { "path": "./assets/fonts/Inter-Regular.ttf", "weight": 400 },
+          { "path": "./assets/fonts/Inter-Bold.ttf", "weight": 700 }
+        ]
+      }] },
+      "ios": { "fonts": ["./assets/fonts/Inter-Regular.ttf", "./assets/fonts/Inter-Bold.ttf"] }
+    }]]
+  }
+}
+```
+
+Selecciona `fontFamily="Inter"` en el proveedor. En iOS usa el nombre interno de la familia. Incluye los pesos y estilos que necesites.
+
+### Cargar una fuente propia al iniciar
 
-Agrupa las caras de una misma familia para que Expo pueda elegir el peso correcto. Coloca los archivos de tu fuente en la app y adapta las rutas del ejemplo. Monta `CustomTypeface` en el lugar que ocupa el proveedor en el primer ejemplo.
+Usa `useFonts` para cargar la familia en ejecución, también en web.
 
 ```tsx
 import { useFonts } from 'expo-font';
 import { MobileDesignProvider, Text } from 'mobile-design/react-native';
 
-const fonts = [
-    {
-        fontFamily: 'Inter',
-        fontDefinitions: [
-            { path: require('./assets/fonts/Inter-Regular.ttf'), weight: 400 },
-            { path: require('./assets/fonts/Inter-Bold.ttf'), weight: 700 },
-        ],
-    },
-] satisfies Parameters<typeof useFonts>[0];
-
 export function CustomTypeface() {
-    const [ready, error] = useFonts(fonts);
-    if (error) throw error;
-    if (!ready) return null;
-
-    return (
-        <MobileDesignProvider fontFamily="Inter">
-            <Text variant="bodyLarge">Contenido</Text>
-            <Text variant="titleLarge" style={{ fontWeight: '700' }}>Encabezado</Text>
-        </MobileDesignProvider>
-    );
+  const [ready, error] = useFonts([{
+    fontFamily: 'Inter',
+    fontDefinitions: [
+      { path: require('./assets/fonts/Inter-Regular.ttf'), weight: 400 },
+      { path: require('./assets/fonts/Inter-Bold.ttf'), weight: 700 },
+    ],
+  }]);
+  if (error) throw error;
+  if (!ready) return null;
+  return (
+    <MobileDesignProvider fontFamily="Inter">
+      <Text variant="bodyLarge">Contenido</Text>
+      <Text variant="titleLarge" style={{ fontWeight: '700' }}>Encabezado</Text>
+    </MobileDesignProvider>
+  );
 }
 ```
 
@@ -505,6 +542,7 @@ El contador muestra la longitud. `maxLength` establece el límite. El ref `TextF
 | --- | --- | --- | --- |
 | `value` · requerida | `string` | — | Valor actual controlado por la pantalla. |
 | `onChangeText` · requerida | `(value: string) => void` | — | Comunica el nuevo texto para actualizar el valor controlado. |
+| `size` | `"standard" \| "compact"` | `'standard'` | Altura base de una línea de 56 dp con `standard` o 48 dp con `compact`, en Filled y Outlined. Respeta el escalado del texto. |
 | `variant` | `"filled" \| "outlined"` | — | Tratamiento visual o modalidad del componente. |
 | `error` | `boolean` | — | Activa el tratamiento visual y accesible de error. |
 
@@ -519,6 +557,7 @@ export default function Example() {
 
   return (
     <TextField
+      size="compact"
       variant="outlined"
       label="Nombre de la colección"
       value={name}

package/examples/navigation-stack.tsx

@@ -0,0 +1,132 @@
+import { mobileDesignTokens } from '@mobile-design/tokens';
+import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator, type NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { PropsWithChildren } from 'react';
+import { ScrollView, StatusBar, StyleSheet, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { adaptNavigationTheme } from 'react-native-paper';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { Button, MobileDesignProvider, Text, TopAppBar, createMobileDesignTheme, useMobileTheme } from 'mobile-design/react-native';
+
+type RootStackParamList = {
+    SignIn: undefined;
+    SignUp: undefined;
+    ForgotPassword: undefined;
+};
+
+type ScreenProps<Route extends keyof RootStackParamList> = NativeStackScreenProps<RootStackParamList, Route>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const { LightTheme: navigationLightTheme, DarkTheme: navigationDarkTheme } = adaptNavigationTheme({
+    reactNavigationLight: DefaultTheme,
+    reactNavigationDark: DarkTheme,
+    materialLight: createMobileDesignTheme({ colorScheme: 'light', fontFamily: 'Roboto' }),
+    materialDark: createMobileDesignTheme({ colorScheme: 'dark', fontFamily: 'Roboto' }),
+});
+
+type ScreenLayoutProps = PropsWithChildren<{
+    title: string;
+    heading?: string;
+    description?: string;
+    onBack?: () => void;
+    scroll?: boolean;
+}>;
+
+export function ScreenLayout({ title, heading, description, onBack, scroll = true, children }: ScreenLayoutProps) {
+    const { colors } = useMobileTheme();
+    const content = (
+        <>
+            {heading ? <Text variant="headlineSmall" accessibilityRole="header">{heading}</Text> : null}
+            {description ? <Text variant="bodyMedium" style={{ color: colors.onSurfaceVariant }}>{description}</Text> : null}
+            {children}
+        </>
+    );
+
+    return (
+        <View style={[styles.fill, { backgroundColor: colors.surface }]}>
+            <TopAppBar
+                title={title}
+                navigationIcon={onBack ? 'arrow_back' : undefined}
+                navigationLabel="Volver"
+                onNavigationPress={onBack}
+            />
+            <SafeAreaView style={styles.fill} edges={['left', 'right', 'bottom']}>
+                {scroll ? <ScrollView contentContainerStyle={styles.content}>{content}</ScrollView> : content}
+            </SafeAreaView>
+        </View>
+    );
+}
+
+function SignInScreen({ navigation }: ScreenProps<'SignIn'>) {
+    return (
+        <ScreenLayout title="Iniciar sesión" heading="Bienvenido" description="Elige cómo continuar con tu cuenta.">
+            <Button variant="filled" onPress={() => navigation.navigate('SignUp')}>Crear cuenta</Button>
+            <Button variant="text" onPress={() => navigation.navigate('ForgotPassword')}>Olvidé mi contraseña</Button>
+        </ScreenLayout>
+    );
+}
+
+function SignUpScreen({ navigation }: ScreenProps<'SignUp'>) {
+    return (
+        <ScreenLayout
+            title="Crear cuenta"
+            description="Aquí puedes integrar los pasos de registro de tu app."
+            onBack={() => navigation.goBack()}
+        />
+    );
+}
+
+function ForgotPasswordScreen({ navigation }: ScreenProps<'ForgotPassword'>) {
+    return (
+        <ScreenLayout
+            title="Recuperar contraseña"
+            description="Aquí puedes integrar la solicitud del código y el cambio de contraseña."
+            onBack={() => navigation.goBack()}
+        />
+    );
+}
+
+function RootNavigator() {
+    const { animation, colors, dark } = useMobileTheme();
+    const navigationTheme = dark ? navigationDarkTheme : navigationLightTheme;
+
+    return (
+        <NavigationContainer theme={navigationTheme}>
+            <StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
+            <Stack.Navigator
+                initialRouteName="SignIn"
+                screenOptions={{
+                    headerShown: false,
+                    animation: animation.scale === 0 ? 'none' : 'default',
+                    contentStyle: { backgroundColor: colors.surface },
+                }}
+            >
+                <Stack.Screen name="SignIn" component={SignInScreen} />
+                <Stack.Screen name="SignUp" component={SignUpScreen} />
+                <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+}
+
+export default function App() {
+    return (
+        <GestureHandlerRootView style={styles.fill}>
+            <SafeAreaProvider>
+                <MobileDesignProvider fontFamily="Roboto">
+                    <RootNavigator />
+                </MobileDesignProvider>
+            </SafeAreaProvider>
+        </GestureHandlerRootView>
+    );
+}
+
+const styles = StyleSheet.create({
+    fill: { flex: 1 },
+    content: {
+        gap: mobileDesignTokens.spacing.small,
+        paddingHorizontal: mobileDesignTokens.spacing.medium,
+        paddingVertical: mobileDesignTokens.spacing.large,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobile-design",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Material Design 3 components for React Native and React Native Web, built on React Native Paper",
   "keywords": [
     "material-design",
@@ -32,13 +32,14 @@
     "assets/logo.svg",
     "README.md",
     "COMPONENTS.md",
+    "examples/navigation-stack.tsx",
     "LICENSE",
     "NOTICE",
     "LICENSE-Apache-2.0.txt"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@mobile-design/tokens": "0.1.2"
+    "@mobile-design/tokens": "0.1.3"
   },
   "peerDependencies": {
     "react": ">=19.2.0",
@@ -62,5 +63,10 @@
     "react-native-web": {
       "optional": true
     }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicolas-rm/mobile-design.git",
+    "directory": "library/packages/mobile-design"
   }
 }

package/src/components/fab.tsx

@@ -539,7 +539,8 @@ function MenuItem({
     const { fontScale } = useWindowDimensions();
     const colors = roleColors(theme, variant);
     const disabled = Boolean(item.disabled || (item.items && !item.items.length));
-    const [width, setWidth] = useState(56);
+    const iconSpace = item.icon ? 32 : 0;
+    const [labelWidth, setLabelWidth] = useState<number | null>(null);
     const [height, setHeight] = useState(56);
     const [focused, setFocused] = useState(false);
     const [hovered, setHovered] = useState(false);
@@ -568,7 +569,9 @@ function MenuItem({
         },
         [alpha, widthFraction]
     );
-    const naturalWidth = Math.max(56, Math.min(maxWidth, width));
+    // Keep the icon space live even before native text layout reports a new measurement.
+    const measuredWidth = labelWidth === null ? 56 : labelWidth + 49 + iconSpace;
+    const naturalWidth = Math.max(56, Math.min(maxWidth, measuredWidth));
     const geometry = useAnimatedStyle(() => ({ width: naturalWidth * Math.max(0, widthFraction.get()) }));
     const fade = useAnimatedStyle(() => ({ opacity: Math.max(0, Math.min(1, alpha.get())) }));
     const contentOffset = useAnimatedStyle(() => {
@@ -661,19 +664,19 @@ function MenuItem({
                 </Animated.View>
             </AnimatedSurface>
             <View
-                key={JSON.stringify([item.label, fontScale, maxWidth, theme.fonts.titleMedium])}
+                key={JSON.stringify([item.label, fontScale, maxWidth, iconSpace, theme.fonts.titleMedium])}
                 pointerEvents="none"
                 accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
                 {...(Platform.OS === 'web' ? { 'aria-hidden': true } : {})}
-                style={[styles.measure, { maxWidth: Math.max(1, maxWidth - 48 - (item.icon ? 32 : 0)) }]}
+                style={[styles.measure, { maxWidth: Math.max(1, maxWidth - 48 - iconSpace) }]}
             >
                 <Text
                     variant="titleMedium"
                     onLayout={
                         Platform.OS === 'web'
                             ? (event) => {
-                                  setWidth(Math.ceil(event.nativeEvent.layout.width) + 49 + (item.icon ? 32 : 0));
+                                  setLabelWidth(Math.ceil(event.nativeEvent.layout.width));
                                   setHeight(Math.max(56, Math.ceil(event.nativeEvent.layout.height) + 16));
                               }
                             : undefined
@@ -681,11 +684,7 @@ function MenuItem({
                     onTextLayout={
                         Platform.OS !== 'web'
                             ? (event) => {
-                                  setWidth(
-                                      Math.ceil(Math.max(0, ...event.nativeEvent.lines.map((line) => line.width))) +
-                                          49 +
-                                          (item.icon ? 32 : 0)
-                                  );
+                                  setLabelWidth(Math.ceil(Math.max(0, ...event.nativeEvent.lines.map((line) => line.width))));
                                   setHeight(
                                       Math.max(56, Math.ceil(event.nativeEvent.lines.reduce((sum, line) => sum + line.height, 0)) + 16)
                                   );

package/src/components/text-field.tsx

@@ -41,6 +41,8 @@ export interface TextFieldProps extends Omit<TextInputProps, 'style' | 'value' |
     value: string;
     onChangeText: (value: string) => void;
     variant?: 'filled' | 'outlined';
+    /** Compact starts at 48 dp. Both sizes grow with text scaling and multiline content. */
+    size?: 'standard' | 'compact';
     label?: string;
     disabled?: boolean;
     readOnly?: boolean;
@@ -83,6 +85,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         value,
         onChangeText,
         variant = 'filled',
+        size = 'standard',
         label,
         disabled = false,
         readOnly = false,
@@ -209,7 +212,15 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         ) : null);
     const labelStart = leadingContent ? 52 : 16;
     const lineHeight = 24 * fontScale;
-    const minimumHeight = Math.max(56, label && !outlined ? 16 + 40 * fontScale : 32 + lineHeight);
+    const compact = size === 'compact';
+    const verticalPadding = compact ? 12 : 16;
+    const filledLabelPadding = verticalPadding - 8;
+    const hasFilledLabel = Boolean(label) && !outlined;
+    const paddingTop = hasFilledLabel ? filledLabelPadding + 16 * fontScale : verticalPadding;
+    const paddingBottom = hasFilledLabel ? filledLabelPadding : verticalPadding;
+    const minimumHeight = Math.max(compact ? 48 : 56, paddingTop + lineHeight + paddingBottom);
+    const labelTop = outlined ? verticalPadding : filledLabelPadding + 8 * fontScale;
+    const labelTravel = outlined ? labelTop + 8 * fontScale : 8 * fontScale;
 
     // RNW reports scrollHeight including the previous minimum height. Measure the
     // natural textarea synchronously, restoring its style before the next paint,
@@ -315,7 +326,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
         left: direction === 'rtl' ? undefined : labelStart + (outlined ? (16 - labelStart) * progress.get() - 4 : 0),
         right: direction === 'rtl' ? labelStart + (outlined ? (16 - labelStart) * progress.get() - 4 : 0) : undefined,
         backgroundColor: outlined && progress.get() > 0.001 ? fieldColor : 'transparent',
-        transform: [{ translateY: outlined ? -(16 + 8 * fontScale) * progress.get() : -8 * fontScale * progress.get() }],
+        transform: [{ translateY: -labelTravel * progress.get() }],
     }));
     const focusInput = () => {
         // Read-only fields remain focusable for selecting and copying text.
@@ -391,8 +402,8 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
                             flexDirection: direction === 'rtl' ? 'row-reverse' : 'row',
                             paddingLeft: (direction === 'rtl' ? trailingContent : leadingContent) ? 4 : 16,
                             paddingRight: (direction === 'rtl' ? leadingContent : trailingContent) ? 4 : 16,
-                            paddingTop: label && !outlined ? 8 + 16 * fontScale : 16,
-                            paddingBottom: label && !outlined ? 8 : 16,
+                            paddingTop,
+                            paddingBottom,
                         },
                     ]}
                 >
@@ -537,7 +548,7 @@ export const TextField = forwardRef<TextFieldHandle, TextFieldProps>(function Te
                         style={[
                             styles.label,
                             {
-                                top: outlined ? 16 : 8 + 8 * fontScale,
+                                top: labelTop,
                                 paddingHorizontal: outlined ? 4 : 0,
                                 maxWidth: trailingContent ? '70%' : '85%',
                             },