react-native-varia 0.3.0 → 0.4.0

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/types.ts

@@ -279,6 +279,9 @@ export function createCircleProgressTokens<
 
 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']

package/lib/varia/utils.ts

@@ -1,4 +1,4 @@
-import { Platform } from 'react-native'
+import {Platform} from 'react-native'
 
 type StyleObj = {
   variants?: Record<string, Record<string, Record<string, any>>>
@@ -92,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) {
@@ -128,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
 }
 
@@ -320,12 +379,12 @@ export function computeFlexSync(
 export function getVariantValue<
   VariantGroup extends string,
   VariantValue extends string | undefined,
-  PropName extends string
+  PropName extends string,
 >(
   styleObj: StyleObj,
   variantGroup: VariantGroup,
   variantValue: VariantValue,
-  propName: PropName
+  propName: PropName,
 ): undefined | any {
   if (variantValue == null) {
     // Si no hay variante, devolvemos undefined
@@ -346,4 +405,37 @@ export function getVariantValue<
   } 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.3.0",
+  "version": "0.4.0",
   "bin": {
     "varia": "bin/cli.js"
   },