react-native-varia 0.2.3 → 0.2.4

package/bin/cli.js

@@ -1,11 +1,10 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require("commander");
 const inquirer = require("inquirer");
 const path = require("path");
 const fs = require("fs-extra");
 
-// 🔹 Dependencias entre componentes
 const COMPONENT_DEPENDENCIES = {
   Button: ["Spinner", "IconWrapper"],
   Field: ["Text"],
@@ -19,9 +18,18 @@ const ICON_DEPENDENCIES = {
   NumberInput: ["Plus", "Minus"],
 };
 
-/**
- * Obtiene todas las dependencias de un componente de forma recursiva.
- */
+const CONTEXT_DEPENDENCIES = {
+  Field: true
+};
+
+function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
+  if (!CONTEXT_DEPENDENCIES[component]) return;
+
+  const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
+  const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
+  copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+}
+
 function resolveDependencies(component, seen = new Set()) {
   if (seen.has(component)) return [];
   seen.add(component);
@@ -36,21 +44,14 @@ function resolveDependencies(component, seen = new Set()) {
   return [...new Set(allDeps)];
 }
 
-// Carpetas base
 const COMPONENTS_DIR = path.join(__dirname, "../lib/components");
 const THEME_DIR = path.join(__dirname, "../lib/theme");
 
-/**
- * Obtiene la lista de todos los componentes disponibles en la librería.
- */
 function getAvailableComponents() {
   if (!fs.existsSync(COMPONENTS_DIR)) return [];
   return fs.readdirSync(COMPONENTS_DIR).map((name) => path.parse(name).name);
 }
 
-/**
- * Copia un archivo desde origen a destino.
- */
 function copyFile(srcPath, destPath, label, overwrite = true) {
   if (!fs.existsSync(srcPath)) {
     console.warn(`⚠️ ${label} no encontrado: ${srcPath}`);
@@ -73,9 +74,6 @@ function copyFile(srcPath, destPath, label, overwrite = true) {
   }
 }
 
-/**
- * Copia un componente y su recipe.
- */
 function copyComponentAndRecipe(component, destComponents, destTheme, overwrite = true) {
   const componentSrc = path.join(COMPONENTS_DIR, `${component}.tsx`);
   const componentDest = path.join(process.cwd(), destComponents, `${component}.tsx`);
@@ -86,9 +84,6 @@ function copyComponentAndRecipe(component, destComponents, destTheme, overwrite
   copyFile(recipeSrc, recipeDest, `Recipe de "${component}"`, overwrite);
 }
 
-/**
- * Pregunta si se desea sobrescribir componentes existentes.
- */
 async function confirmOverwrite(existingComponents) {
   const { overwrite } = await inquirer.prompt([
     {
@@ -119,12 +114,10 @@ program
     const patternsDest = path.join(process.cwd(), "src/patterns");
 
     try {
-      // Copiar varia
       fs.ensureDirSync(path.dirname(variaDest));
       fs.copySync(variaSrc, variaDest, { overwrite: true });
       console.log(`✅ Carpeta "varia" copiada a ${variaDest}`);
 
-      // Copiar patterns
       fs.ensureDirSync(path.dirname(patternsDest));
       fs.copySync(patternsSrc, patternsDest, { overwrite: true });
       console.log(`✅ Carpeta "patterns" copiada a ${patternsDest}`);
@@ -233,9 +226,8 @@ program
       (c) => c.charAt(0).toUpperCase() + c.slice(1)
     );
 
-    // 🔹 Obtener dependencias totales
     const allComponents = new Set();
-    const componentToDeps = {}; // para saber qué depende de qué
+    const componentToDeps = {};
     for (const c of componentsCapitalized) {
       const deps = resolveDependencies(c);
       componentToDeps[c] = deps;
@@ -245,7 +237,6 @@ program
 
     const allComponentsArray = Array.from(allComponents);
 
-    // 🔹 Validar existencia
     const notFound = allComponentsArray.filter((c) => !available.includes(c));
     if (notFound.length > 0) {
       console.error(`❌ Los siguientes componentes no existen: ${notFound.join(", ")}`);
@@ -254,12 +245,18 @@ program
       process.exit(1);
     }
 
-    // 🔹 Preparar instalación
+    function copyContextComponentIfNeeded(component, destComponents, overwrite = true) {
+      if (!CONTEXT_DEPENDENCIES[component]) return;
+
+      const contextSrc = path.join(COMPONENTS_DIR, "context", `${component}.tsx`);
+      const contextDest = path.join(process.cwd(), destComponents, "context", `${component}.tsx`);
+      copyFile(contextSrc, contextDest, `Context de "${component}"`, overwrite);
+    }
+
     for (const mainComponent of componentsCapitalized) {
       const componentPath = path.join(process.cwd(), options.dest, `${mainComponent}.tsx`);
       let overwriteMain = true;
 
-      // Preguntar solo si el componente principal existe
       if (fs.existsSync(componentPath)) {
         const { overwrite } = await inquirer.prompt([
           {
@@ -276,10 +273,10 @@ program
         }
       }
 
-      // 🔹 Copiar componente principal
       copyComponentAndRecipe(mainComponent, options.dest, options.theme, overwriteMain);
 
-      // 🔹 Copiar dependencias (sin sobrescribir si existen)
+      copyContextComponentIfNeeded(mainComponent, options.dest, overwriteMain);
+
       const deps = componentToDeps[mainComponent] || [];
       for (const dep of deps) {
         const depPath = path.join(process.cwd(), options.dest, `${dep}.tsx`);
@@ -291,7 +288,6 @@ program
         copyComponentAndRecipe(dep, options.dest, options.theme, true);
       }
 
-      // 🔹 Copiar íconos dependientes
       const iconDeps = ICON_DEPENDENCIES[mainComponent] || [];
       if (iconDeps.length > 0) {
         console.log(`🎨 Añadiendo íconos requeridos por "${mainComponent}": ${iconDeps.join(", ")}`);
@@ -305,7 +301,6 @@ program
           copyIconTemplate(iconName, options.icons);
         }
 
-        // Asegurar que IconWrapper esté disponible
         ensureIconWrapper(options.dest, options.theme);
       }
     }
@@ -336,9 +331,6 @@ function copyIconTemplate(iconName, dest) {
   }
 }
 
-/**
- * Copia IconWrapper si no existe en la app
- */
 function ensureIconWrapper(destComponents, destTheme) {
   const wrapperComponentDest = path.join(process.cwd(), destComponents, "IconWrapper.tsx");
   const wrapperRecipeDest = path.join(process.cwd(), destTheme, "IconWrapper.recipe.tsx");
@@ -363,7 +355,6 @@ function ensureIconWrapper(destComponents, destTheme) {
   }
 }
 
-// Comando CLI: add-icon
 program
   .command("add-icon [iconName]")
   .description("Copia un icono basado en la plantilla Icon.tsx")
@@ -381,7 +372,6 @@ program
     const finalName = rawName.charAt(0).toUpperCase() + rawName.slice(1);
     const destPath = path.join(process.cwd(), options.dest, `${finalName}.tsx`);
 
-    // 🔹 Si ya existe, preguntar antes de sobrescribir
     if (fs.existsSync(destPath)) {
       const { overwrite } = await inquirer.prompt([
         {

package/lib/components/Accordion.tsx

@@ -0,0 +1,113 @@
+import React, {ReactNode, useState} from 'react'
+import {View, Pressable} from 'react-native'
+import Animated from 'react-native-reanimated'
+import {LinearTransition} from 'react-native-reanimated'
+import {StyleSheet} from 'react-native-unistyles'
+import Text from './Text'
+
+type AccordionItemProps = {
+  title: string
+  itemKey: string
+  children: ReactNode
+  isOpen?: boolean
+  onToggle?: () => void
+  scrollViewRef?: any
+}
+
+type AccordionGroupRootProps = {
+  children: ReactNode
+  defaultOpenKeys?: string[]
+  allowMultiple?: boolean
+}
+
+export const AccordionGroup = {
+  Root: AccordionGroupRoot,
+  Item: AccordionGroupItem,
+}
+
+function AccordionGroupRoot({
+  children,
+  defaultOpenKeys = [],
+  allowMultiple = false,
+}: AccordionGroupRootProps) {
+  const [openKeys, setOpenKeys] = useState<Set<string>>(
+    () => new Set(defaultOpenKeys),
+  )
+
+  const toggleItem = (key: string) => {
+    setOpenKeys(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(key)) {
+        newSet.delete(key)
+      } else {
+        if (allowMultiple) {
+          newSet.add(key)
+        } else {
+          return new Set([key])
+        }
+      }
+      return newSet
+    })
+  }
+
+  const items = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) return child
+    const cp = child.props as AccordionItemProps
+    const key = cp.itemKey
+    const isOpen = openKeys.has(key)
+    return React.cloneElement(child, {
+      isOpen,
+      onToggle: () => toggleItem(key),
+    })
+  })
+
+  return <View style={styles.groupContainer}>{items}</View>
+}
+
+function AccordionGroupItem({
+  title,
+  children,
+  isOpen = false,
+  onToggle,
+}: AccordionItemProps) {
+  return (
+    <Animated.View
+      // Aquí aplicas la transición de layout
+      layout={LinearTransition.duration(150)}
+      style={styles.itemContainer}>
+      <Pressable onPress={onToggle} style={styles.header}>
+        <Text style={styles.headerText}>{title}</Text>
+      </Pressable>
+
+      {isOpen && (
+        <View style={styles.contentContainer}>
+          <View style={styles.innerContent}>{children}</View>
+        </View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  groupContainer: {},
+  itemContainer: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 6,
+    marginVertical: 8,
+    overflow: 'hidden', // importante para que no se vea contenido fuera
+  },
+  header: {
+    padding: 12,
+    backgroundColor: '#f0f0f0',
+  },
+  headerText: {
+    fontSize: 16,
+  },
+  contentContainer: {
+    // no necesitamos animar altura manual, lo hace el layout
+  },
+  innerContent: {
+    padding: 12,
+  },
+})

package/lib/components/Button.tsx

@@ -10,6 +10,12 @@ type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
 type ButtonVariants = UnistylesVariants<typeof ButtonStyles>
 
+interface TextAdjustmentProps {
+  adjustsFontSizeToFit?: boolean
+  numberOfLines?: number
+  ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip'
+}
+
 type ButtonProps = ButtonVariants & {
   colorPalette?: PalettesWithNestedKeys
   text?: string
@@ -27,6 +33,7 @@ type ButtonProps = ButtonVariants & {
     size?: number
   }
   mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
+  style?: StyleProp<ViewStyle>
 }
 
 const Button = ({
@@ -42,6 +49,7 @@ const Button = ({
   textAdjustment = 'singleLine',
   icon,
   mixins,
+  style,
 }: ButtonProps) => {
   ButtonStyles.useVariants({
     size,
@@ -50,7 +58,7 @@ const Button = ({
   })
 
   const getTextProps = useMemo(
-    () => (): Record<string, any> => {
+    () => (): TextAdjustmentProps => {
       switch (textAdjustment) {
         case 'adjustToFit':
           return {adjustsFontSizeToFit: true, numberOfLines: 1}
@@ -87,6 +95,7 @@ const Button = ({
         styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
         mixins && mixins,
+        style,
       ]}
       onPress={onPress}
       disabled={disabled || loading}>

package/lib/components/CircleProgress.tsx

@@ -1,5 +1,5 @@
 import {useEffect} from 'react'
-import {View, StyleSheet} from 'react-native'
+import {TextStyle, View, ViewStyle} from 'react-native'
 import Animated, {
   Easing,
   interpolate,
@@ -10,9 +10,15 @@ import Animated, {
 } from 'react-native-reanimated'
 import Svg, {Circle, G} from 'react-native-svg'
 import {circleProgressTokens} from '../theme/CircleProgress.recipe'
-import {withUnistyles} from 'react-native-unistyles'
+import {withUnistyles, StyleSheet} from 'react-native-unistyles'
 import {resolveColor} from '../style/varia/utils'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {
+  NestedColorsType,
+  PalettesWithNestedKeys,
+  progressDirection,
+  rotationDirection,
+  ThemeType,
+} from '../style/varia/types'
 import {SharedValue} from 'react-native-reanimated'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)
@@ -22,17 +28,19 @@ interface CircleProgressProps {
   variant?: keyof typeof circleProgressTokens.variants.variant
   size?: keyof typeof circleProgressTokens.variants.size
   trackStrokeWidth?: number
-  progress: SharedValue<number> // ✅ Nuevo
-
+  progress: SharedValue<number>
   progressStrokeWidth?: number
   duration: number
   trackColor?: string
   progressColor?: string
-  progressDirection?: 'forward' | 'reverse'
-  rotationDirection?: 'clockwise' | 'counterclockwise'
+  progressDirection?: progressDirection
+  rotationDirection?: rotationDirection
   children?: React.ReactNode
-  fontSize?: number | undefined
-  colors: any
+  fontSize?: TextStyle['fontSize']
+  colors: NestedColorsType
+  flex?: ViewStyle['flex']
+  width?: ViewStyle['width']
+  height?: ViewStyle['height']
 }
 
 const BaseCircleProgress = ({
@@ -49,6 +57,9 @@ const BaseCircleProgress = ({
   rotationDirection = 'clockwise',
   children,
   colors,
+  flex = 1,
+  width = '100%',
+  height,
 }: CircleProgressProps) => {
   const resolvedSize = circleProgressTokens.variants.size[size]
 
@@ -106,7 +117,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container(flex, width, height)}>
       <Svg
         width="100%"
         height="100%"
@@ -143,16 +154,17 @@ const BaseCircleProgress = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: (
+    flex: ViewStyle['flex'],
+    width: ViewStyle['width'],
+    height: ViewStyle['height'],
+  ) => ({
     aspectRatio: 1,
-    flex: 1,
-  },
+    flex,
+    maxWidth: width,
+    maxHeight: height,
+  }),
   childContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -163,6 +175,3 @@ const CircleProgress = withUnistyles(BaseCircleProgress, theme => ({
 }))
 
 export default CircleProgress
-
-const clamp = (num: number, min: number, max: number) =>
-  Math.min(Math.max(num, min), max)

package/lib/components/Divider.tsx

@@ -1,24 +1,27 @@
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-// import type { VariaThemeType } from '../style/theme';
+import {View} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
+import {resolveColor} from '../style/varia/utils'
 
 const Divider = ({
   color,
   size = 1,
   axis = 'y',
   margin = 0,
+  colorPalette = 'accent',
 }: {
-  color?: string;
-  size?: number;
-  axis?: 'x' | 'y';
-  margin?: number;
+  color?: ThemeColors
+  size?: number
+  axis?: 'x' | 'y'
+  margin?: number
+  colorPalette?: PalettesWithNestedKeys
 }) => {
   return (
     <View style={styles.container(size, axis, margin)}>
-      <View style={[styles.divider(color, size, axis)]} />
+      <View style={[styles.divider(color, colorPalette, size, axis)]} />
     </View>
-  );
-};
+  )
+}
 
 const styles = StyleSheet.create(theme => ({
   container: (size, axis, margin) => ({
@@ -31,13 +34,13 @@ const styles = StyleSheet.create(theme => ({
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
   }),
-  divider: (color, size, axis) => ({
+  divider: (color, colorPalette, size, axis) => ({
     width: axis === 'x' ? size : '100%',
     height: axis === 'y' ? size : '100%',
     backgroundColor: color
-      ? color
-      : theme.colors.foreground,
+      ? resolveColor(color, theme.colors, colorPalette)
+      : theme.colors.fg.default,
   }),
-}));
+}))
 
-export default Divider;
+export default Divider

package/lib/components/Drawer.tsx

@@ -202,7 +202,6 @@ type InternalDrawerSliderProps = {
   externalTranslate?: SharedValue<number>
 }
 
-// Tipo público — el que exportas (sin direction)
 export type DrawerSliderProps = Omit<
   InternalDrawerSliderProps,
   'direction' | 'axis'
@@ -238,7 +237,6 @@ const DrawerSliderInternal = ({
   const animationVariant = SlidingDrawerTokens.variants.animation[animation]
   const VELOCITY_THRESHOLD = 2000
 
-  // --- shared values base ---
   const viewRef = useAnimatedRef<Animated.View>()
   const translate = useSharedValue(screenHeight)
   const context = useSharedValue({position: screenHeight, snapPoint: 0})
@@ -254,37 +252,7 @@ const DrawerSliderInternal = ({
     )
   }
 
-  // --- medir el contenido dinámicamente ---
-  // const onLayout = () => {
-  //   scheduleOnUI(() => {
-  //     'worklet'
-  //     const measured = measure(viewRef)
-  //     if (measured) {
-  //       const {height} = measured
-  //       contentHeight.value = height
-
-  //       // resuelve snapPoints declarativos
-  //       const resolved = snapPoints.map(p => {
-  //         if (p === 'hidden') return screenHeight * direction
-  //         if (p === 'content') return (screenHeight - height) * direction
-  //         // if (typeof p === 'string' && p.endsWith('%')) {
-  //         //   const percentage = parseFloat(p) / 100
-  //         //   return screenHeight * (1 - percentage) * direction
-  //         // }
-  //         return p * direction
-  //       })
-
-  //       resolvedSnapPoints.value = resolved
-
-  //       // inicializa la posición (oculto)
-  //       translate.value = resolved[0]
-  //       context.value = {position: resolved[0], snapPoint: 0}
-  //     }
-  //   })
-  // }
-
   const onLayout = () => {
-    // captura valores aquí (en JS)
     const _screenHeight = screenHeight
     const _screenWidth = screenWidth
     const _axis = axis
@@ -316,10 +284,13 @@ const DrawerSliderInternal = ({
     'worklet'
     return resolvedSnapPoints.value.length > 0
       ? resolvedSnapPoints.value
-      : snapPoints.map(p => (p as any) * direction)
+      : snapPoints.map(p => {
+          // if (p === 'hidden') return screenHeight * direction
+          // if (p === 'content') return (screenHeight - contentHeight.value) * direction
+          return (p as number) * direction
+        })
   }
 
-  // --- lógica de snapping ---
   const updateCurrentSnapPoint = (snapPoint: number) => {
     'worklet'
     context.value = {position: context.value.position, snapPoint}
@@ -374,7 +345,6 @@ const DrawerSliderInternal = ({
     isCollapsed,
   }))
 
-  // --- sincronizar overlay con movimiento ---
   useAnimatedReaction(
     () => translate.value,
     value => {
@@ -392,7 +362,6 @@ const DrawerSliderInternal = ({
     },
   )
 
-  // --- Gestures ---
   const slideGesture = Gesture.Pan()
     .enabled(allowGestures)
     .onBegin(() => {
@@ -408,16 +377,13 @@ const DrawerSliderInternal = ({
 
       if (proposed < minPoint) {
         if (lockAtEdges) {
-          // Bloquea overscroll superior (cuando ya estás en el extremo)
           clamped = minPoint
         } else {
-          // Aplica resistencia
           const overdrag = minPoint - proposed
           clamped = minPoint - overdrag / (1 + overdrag / 60)
         }
       } else if (proposed > maxPoint) {
         if (lockAtEdges) {
-          // Bloquea overscroll inferior
           clamped = maxPoint
         } else {
           const overdrag = proposed - maxPoint
@@ -477,7 +443,6 @@ const DrawerSliderInternal = ({
       }
     })
 
-  // --- estilos animados ---
   const blockAnimatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -504,10 +469,6 @@ const DrawerSliderInternal = ({
   )
 }
 
-/* -----------------------------
- * Export grouped
- * ----------------------------*/
-
 export const Drawer = {
   Root: DrawerRoot,
   Positioner: DrawerPositioner,
@@ -515,10 +476,6 @@ export const Drawer = {
   Slider: DrawerSlider,
 }
 
-/* -----------------------------
- * Styles
- * ----------------------------*/
-
 const styles = StyleSheet.create((theme, rt) => ({
   positioner: {
     flex: 1,