react-native-varia 0.2.4 → 0.4.0

package/lib/theme/Spinner.recipe.tsx

@@ -10,6 +10,7 @@ export const SpinnerTokens = {
 
 export const SpinnerStyles = StyleSheet.create(theme => ({
   base: {
+    height: 100,
     variants: {
       size: {
         xs: {
@@ -29,5 +30,8 @@ export const SpinnerStyles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      height: 120,
+    },
   },
 }))

package/lib/theme/Switch.recipe.tsx

@@ -30,7 +30,11 @@ export const SwitchTokens = {
 
 export const SwitchStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
+    // width: theme.sizes[16],
+    // height: theme.sizes[16],
     borderRadius: theme.radii.full,
+    padding: theme.spacing['0.5'],
+    borderWidth: 0,
     variants: {
       variant: {
         solid: {},
@@ -39,14 +43,21 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         sm: {
           padding: theme.spacing['0.5'],
           maxWidth: theme.sizes[10],
+          minWidth: theme.sizes[10],
         },
         md: {
           padding: theme.spacing['0.5'],
           maxWidth: theme.sizes[16],
+          minWidth: theme.sizes[16],
         },
         lg: {
           padding: theme.spacing[1],
           maxWidth: theme.sizes[20],
+          minWidth: theme.sizes[20],
+        },
+        flex: {
+          borderRadius: theme.radii.md,
+          // alignSelf: 'stretch',
         },
       },
       enabled: {
@@ -70,6 +81,8 @@ export const SwitchStyles = StyleSheet.create(theme => ({
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.default,
     borderRadius: theme.radii.full,
+    // width: theme.sizes[6],
+    // height: theme.sizes[6],
     variants: {
       variant: {
         solid: {},
@@ -78,6 +91,12 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         sm: {height: theme.sizes[5], width: theme.sizes[5]},
         md: {height: theme.sizes[6], width: theme.sizes[6]},
         lg: {height: theme.sizes[8], width: theme.sizes[8]},
+        flex: {
+          borderRadius: theme.radii.md,
+          alignSelf: 'stretch',
+          width: 30,
+          minHeight: 30,
+        },
       },
     },
     compoundVariants: [

package/lib/theme/Text.recipe.tsx

@@ -11,7 +11,7 @@ export const TextStyles = StyleSheet.create(theme => ({
       variant: {
         heading: {
           color: theme.colors.fg.default,
-          fontWeight: theme.fontWeights.semibold,
+          fontWeight: theme.fontWeights.bold,
         },
         default: {
           color: theme.colors.fg.default,
@@ -19,46 +19,97 @@ export const TextStyles = StyleSheet.create(theme => ({
         },
       },
       size: {
+        // xs: {
+        //   ...textStyle.xs,
+        //   // fontSize: 100
+        // },
+        // sm: {
+        //   ...textStyle.sm,
+        //   // fontSize: 100
+        // },
+        // md: {
+        //   // ...textStyle.md,
+        //   fontSize: 100
+        // },
+        // lg: {
+        //   ...textStyle.lg,
+        // },
+        // xl: {
+        //   ...textStyle.xl,
+        // },
+        // '2xl': {
+        //   ...textStyle['2xl'],
+        //   lineHeight: 32,
+        // },
+        // '3xl': {
+        //   ...textStyle['3xl'],
+        //   lineHeight: 38,
+        // },
+        // '4xl': {
+        //   ...textStyle['4xl'],
+        //   lineHeight: 44,
+        //   letterSpacing: -0.032,
+        // },
+        // '5xl': {
+        //   ...textStyle['5xl'],
+        //   lineHeight: 60,
+        //   letterSpacing: -0.032,
+        // },
+        // '6xl': {
+        //   ...textStyle['6xl'],
+        //   lineHeight: 72,
+        //   letterSpacing: -0.032,
+        // },
+        // '7xl': {
+        //   ...textStyle['7xl'],
+        //   lineHeight: 92,
+        //   letterSpacing: -0.032,
+        // },
         xs: {
-          ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
+          lineHeight: 12,
         },
         sm: {
-          ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
+          lineHeight: 20,
         },
         md: {
-          ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         lg: {
-          ...textStyle.lg,
+          fontSize: theme.fontSizes.lg,
+          lineHeight: 28,
         },
         xl: {
-          ...textStyle.xl,
+          fontSize: theme.fontSizes.xl,
+          lineHeight: 30,
         },
         '2xl': {
-          ...textStyle['2xl'],
+          fontSize: theme.fontSizes['2xl'],
           lineHeight: 32,
         },
         '3xl': {
-          ...textStyle['3xl'],
+          fontSize: theme.fontSizes['3xl'],
           lineHeight: 38,
         },
         '4xl': {
-          ...textStyle['4xl'],
+          fontSize: theme.fontSizes['4xl'],
           lineHeight: 44,
           letterSpacing: -0.032,
         },
         '5xl': {
-          ...textStyle['5xl'],
+          fontSize: theme.fontSizes['5xl'],
           lineHeight: 60,
           letterSpacing: -0.032,
         },
         '6xl': {
-          ...textStyle['6xl'],
+          fontSize: theme.fontSizes['6xl'],
           lineHeight: 72,
           letterSpacing: -0.032,
         },
         '7xl': {
-          ...textStyle['7xl'],
+          fontSize: theme.fontSizes['7xl'],
           lineHeight: 92,
           letterSpacing: -0.032,
         },

package/lib/theme/Toast.recipe.tsx

@@ -8,7 +8,34 @@ export const ToastDefaultVariants = {
 } as const
 
 export const ToastStyles = StyleSheet.create(theme => ({
+  root: {
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        error: {},
+      },
+      size: {
+        sm: {
+          marginVertical: theme.spacing[6],
+          marginHorizontal: theme.spacing[6],
+        },
+        md: {
+          marginVertical: theme.spacing[10],
+          marginHorizontal: theme.spacing[10],
+        },
+        lg: {
+          marginVertical: theme.spacing[12],
+          marginHorizontal: theme.spacing[10],
+        },
+      },
+    },
+  },
   container: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.md,
+    alignItems: 'center',
+    backgroundColor: theme.colors[colorPalette].default,
     variants: {
       variant: {
         solid: {
@@ -21,7 +48,8 @@ export const ToastStyles = StyleSheet.create(theme => ({
         },
         outline: {
           borderWidth: 2,
-          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.bg.subtle,
+          borderColor: theme.colors[colorPalette][5],
         },
         error: {
           borderColor: theme.colors.red[9],
@@ -31,13 +59,15 @@ export const ToastStyles = StyleSheet.create(theme => ({
       },
       size: {
         sm: {
-          bottom: theme.spacing[5],
+          padding: theme.spacing[3],
         },
         md: {
-          bottom: theme.spacing[5],
+          padding: theme.spacing[4],
+          alignSelf: 'stretch',
         },
         lg: {
-          bottom: theme.spacing[8],
+          padding: theme.spacing[4],
+          alignSelf: 'stretch',
         },
       },
     },
@@ -57,13 +87,16 @@ export const ToastStyles = StyleSheet.create(theme => ({
       },
       size: {
         sm: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
         },
         md: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
         },
         lg: {
-          ...textStyle.sm,
+          // ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
         },
       },
     },

package/lib/varia/mixins.ts

@@ -18,9 +18,6 @@ const mixins = StyleSheet.create((theme, rt) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  sx: (sx: any) => ({
-    ...sx,
-  }),
   w: (width: number) => ({
     width,
   }),
@@ -181,7 +178,6 @@ export const {
   row,
   gap,
   center,
-  sx,
   flexColumn,
   w,
   h,

package/lib/varia/types.ts

@@ -1,3 +1,4 @@
+import {ViewStyle} from 'react-native'
 import {darkTheme, lightTheme} from '../themes'
 
 export interface AlphaPalette {
@@ -275,3 +276,13 @@ export function createCircleProgressTokens<
 }) {
   return tokens
 }
+
+export type AlignSelf = ViewStyle['alignSelf']
+export type StackDirection = 'row' | 'column'
+export type JustifyContent = ViewStyle['justifyContent']
+export type Gap = ViewStyle['gap']
+export type AlignItems = ViewStyle['alignItems']
+export type progressDirection = 'forward' | 'reverse'
+export type rotationDirection = 'clockwise' | 'counterclockwise'
+export type Flex = ViewStyle['flex']
+export type MaxWidth = ViewStyle['maxWidth']

package/lib/varia/utils.ts

@@ -1,3 +1,9 @@
+import {Platform} from 'react-native'
+
+type StyleObj = {
+  variants?: Record<string, Record<string, Record<string, any>>>
+  [key: string]: any
+}
 export function hexToRgba(hex: string, alpha: number = 1) {
   hex = hex.replace(/^#/, '')
 
@@ -22,6 +28,7 @@ export function hexToRgba(hex: string, alpha: number = 1) {
 
 import {Dimensions, PixelRatio} from 'react-native'
 import {
+  AlignSelf,
   AlphaPalette,
   ColorPalette,
   ColorPaletteBackground,
@@ -85,29 +92,77 @@ export {
   heightFromPixel as hpx,
 }
 
-export const extractThemeColor = (color: ThemeColors, theme: any) => {
-  return color.includes('.')
-    ? (
-        theme.colors[
-          color.split('.')[0] as keyof typeof theme.colors
-        ] as unknown as Record<string, string>
-      )[color.split('.')[1]]
-    : color in theme.colors &&
-      typeof theme.colors[color as keyof typeof theme.colors] === 'string'
-    ? (theme.colors[color as keyof typeof theme.colors] as string)
-    : !(color in theme.colors)
-    ? color
-    : undefined
+export const extractThemeColor = (
+  color: string,
+  theme: any,
+): string | undefined => {
+  if (color.includes('.')) {
+    const [paletteKey, shadeKey] = color.split('.')
+    const palette = theme.colors[paletteKey as keyof typeof theme.colors]
+    if (
+      palette &&
+      typeof palette === 'object' &&
+      shadeKey in (palette as Record<string, any>)
+    ) {
+      return (palette as Record<string, string>)[shadeKey]
+    }
+    // Si no existe la paleta o el shade, seguimos abajo para fallback
+  }
+
+  // Si el color corresponde a una clave simple en colors
+  if (color in theme.colors) {
+    const val = theme.colors[color as keyof typeof theme.colors]
+    if (typeof val === 'string') {
+      // Es un color simple → lo devolvemos
+      return val
+    } else {
+      // Es una paleta / objeto → devolvemos el string literal (p. ej. "pink") para fallback
+      return color
+    }
+  }
+
+  // Si no existe en theme.colors → asumimos que es un color CSS válido
+  return color
 }
 
+// export const resolveColor = (
+//   value: string,
+//   colors: NestedColorsType,
+//   colorPalette?: string,
+// ): string => {
+//   if (value.includes('.')) {
+//     const [palette, key] = value.split('.')
+
+//     if (palette === 'colorPalette' && colorPalette) {
+//       const paletteObj = (colors as any)[colorPalette]
+//       if (paletteObj && key in paletteObj) {
+//         return paletteObj[key]
+//       }
+//     }
+
+//     const paletteObj = (colors as any)[palette]
+//     if (paletteObj && key in paletteObj) {
+//       return paletteObj[key]
+//     }
+//   }
+
+//   if (value in colors) {
+//     return (colors as any)[value]
+//   }
+
+//   return value
+// }
+
 export const resolveColor = (
   value: string,
   colors: NestedColorsType,
   colorPalette?: string,
 ): string => {
+  // Caso: value incluye punto → color anidado tipo "pink.10"
   if (value.includes('.')) {
     const [palette, key] = value.split('.')
 
+    // Caso especial cuando la paleta es "colorPalette"
     if (palette === 'colorPalette' && colorPalette) {
       const paletteObj = (colors as any)[colorPalette]
       if (paletteObj && key in paletteObj) {
@@ -121,10 +176,21 @@ export const resolveColor = (
     }
   }
 
+  // Caso: value es key simple dentro del theme
   if (value in colors) {
-    return (colors as any)[value]
+    const result = (colors as any)[value]
+
+    // Si el resultado es un objeto → es una paleta, no un color
+    // → devolver el string original
+    if (typeof result === 'object' && result !== null) {
+      return value
+    }
+
+    // Si es un color simple → devolverlo
+    return result
   }
 
+  // Caso: no existe como key → asumir que es un color CSS válido
   return value
 }
 
@@ -281,3 +347,95 @@ export const createPreset = <T extends CreatePresetDTO>(
       }
   }
 }
+
+export function computeFlexSync(
+  parentFlex: number,
+  parentStretch: AlignSelf,
+  parentDirection: 'row' | 'column',
+) {
+  const flex = typeof parentFlex === 'number' ? parentFlex : 0
+  const stretch = parentStretch === 'stretch'
+  const dir = parentDirection === 'row' ? 'row' : 'column'
+
+  let childFlex = flex
+
+  if (dir === 'column') {
+    if (flex === 0 && stretch) {
+      childFlex = 1
+    } else if (flex >= 1 && !stretch) {
+      childFlex = 0
+    } else if (flex >= 1 && stretch) {
+      childFlex = 1
+    }
+  } else if (dir === 'row') {
+    if (flex === 0 && stretch) {
+      childFlex = 0
+    }
+  }
+
+  return {flex: childFlex}
+}
+
+export function getVariantValue<
+  VariantGroup extends string,
+  VariantValue extends string | undefined,
+  PropName extends string,
+>(
+  styleObj: StyleObj,
+  variantGroup: VariantGroup,
+  variantValue: VariantValue,
+  propName: PropName,
+): undefined | any {
+  if (variantValue == null) {
+    // Si no hay variante, devolvemos undefined
+    return undefined
+  }
+
+  if (Platform.OS === 'web') {
+    const variants = styleObj.variants
+    if (!variants) return undefined
+
+    const group = variants[variantGroup] as any
+    if (!group) return undefined
+
+    const variantStyles = group[variantValue] as any
+    if (!variantStyles) return undefined
+
+    return variantStyles[propName]
+  } else {
+    return (styleObj as any)[propName]
+  }
+}
+
+export function getCompoundVariantValue<
+  Conditions extends Record<string, any>,
+  PropName extends string,
+>(
+  styleObj: StyleObj,
+  conditions: Conditions,
+  propName: PropName,
+): any | undefined {
+  if (Platform.OS !== 'web') {
+    // En nativo se comporta igual que los estilos planos
+    return (styleObj as any)[propName]
+  }
+
+  const compoundVariants = styleObj.compoundVariants
+  if (!Array.isArray(compoundVariants)) return undefined
+
+  // Buscar la variante que cumpla TODAS las condiciones
+  const match = compoundVariants.find(variant => {
+    for (const key in conditions) {
+      if (variant[key] !== conditions[key]) {
+        return false
+      }
+    }
+    return true
+  })
+
+  if (!match) return undefined
+
+  if (!match.styles) return undefined
+
+  return match.styles[propName]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "bin": {
     "varia": "bin/cli.js"
   },