fluentglass 0.2.6

package/src/utils/responsive.ts

@@ -0,0 +1,110 @@
+import { Dimensions, PixelRatio } from 'react-native';
+
+/**
+ * responsive.js — Utilidades para diseño responsive mobile-first
+ *
+ * Referencia base: iPhone 14 (375pt de ancho, 812pt de alto)
+ * Todas las funciones escalan relativo a esta referencia.
+ */
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// ── Reference dimensions ──
+const BASE_WIDTH = 375;
+const BASE_HEIGHT = 812;
+
+// Cap the effective width to prevent blowup on web/desktop/tablets.
+// Max reference: iPhone 15 Pro Max = 430pt
+const MAX_MOBILE_WIDTH = 430;
+const EFFECTIVE_WIDTH = Math.min(SCREEN_WIDTH, MAX_MOBILE_WIDTH);
+
+/**
+ * Escala un valor linealmente según el ancho de la pantalla.
+ * Útil para anchos, márgenes horizontales, paddings.
+ *
+ * @param {number} size - Valor en puntos diseñado para 375pt
+ * @returns {number} Valor escalado para la pantalla actual
+ */
+export function scale(size: number) {
+    return (EFFECTIVE_WIDTH / BASE_WIDTH) * size;
+}
+
+/**
+ * Escala un valor linealmente según la altura de la pantalla.
+ * Útil para alturas, márgenes verticales.
+ *
+ * @param {number} size - Valor en puntos diseñado para 812pt
+ * @returns {number} Valor escalado
+ */
+export function verticalScale(size: number) {
+    return (SCREEN_HEIGHT / BASE_HEIGHT) * size;
+}
+
+/**
+ * Escalado moderado: aplica solo un porcentaje de la diferencia.
+ * Ideal para fontSize — evita que textos crezcan demasiado en tablets.
+ *
+ * @param {number} size - Tamaño base en puntos
+ * @param {number} factor - Factor de escalado (0 = sin escalar, 1 = escala completa). Default: 0.5
+ * @returns {number} Valor moderadamente escalado
+ */
+export function moderateScale(size: number, factor = 0.5) {
+    return size + (scale(size) - size) * factor;
+}
+
+/**
+ * Porcentaje del ancho de pantalla.
+ * @param {number} percentage - Porcentaje deseado (0-100)
+ * @returns {number} Valor en puntos
+ */
+export function wp(percentage: number) {
+    return PixelRatio.roundToNearestPixel((SCREEN_WIDTH * percentage) / 100);
+}
+
+/**
+ * Porcentaje de la altura de pantalla.
+ * @param {number} percentage - Porcentaje deseado (0-100)
+ * @returns {number} Valor en puntos
+ */
+export function hp(percentage: number) {
+    return PixelRatio.roundToNearestPixel((SCREEN_HEIGHT * percentage) / 100);
+}
+
+// ── Device flags ──
+
+/** Pantalla menor a 360pt de ancho (e.g. iPhone SE, Galaxy S) */
+export const isSmallDevice = SCREEN_WIDTH < 360;
+
+/** Pantalla menor a 375pt (incluye iPhone SE 3rd gen) */
+export const isCompactDevice = SCREEN_WIDTH < 375;
+
+/** Pantalla mayor a 600pt de ancho (tablets) */
+export const isTablet = SCREEN_WIDTH >= 600;
+
+/** Pantalla mayor a 1024pt (tablets iPad, landscape) */
+export const isLargeTablet = SCREEN_WIDTH >= 1024;
+
+// ── Responsive font size ──
+
+/**
+ * Calcula un fontSize que respeta PixelRatio para densidad de pantalla.
+ * Usa moderateScale con factor 0.25 para evitar crecimiento excesivo.
+ *
+ * @param {number} size - Tamaño de fuente base
+ * @returns {number} Tamaño ajustado
+ */
+export function responsiveFontSize(size: number) {
+    const scaledSize = moderateScale(size, 0.25);
+    return Math.round(PixelRatio.roundToNearestPixel(scaledSize));
+}
+
+// ── Spacing scale ──
+
+export const SPACING = {
+    xs: scale(4),
+    sm: scale(8),
+    md: scale(12),
+    lg: scale(16),
+    xl: scale(24),
+    xxl: scale(32),
+};