react-native-varia 0.3.0 → 0.4.1

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.1",
   "bin": {
     "varia": "bin/cli.js"
   },

package/lib/components/OldSlider.tsx

@@ -1,327 +0,0 @@
-import React from 'react'
-import {type LayoutChangeEvent, View} from 'react-native'
-import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-import {runOnJS} from 'react-native-worklets'
-import {SliderStyles, SliderDefaultVariants} from '../theme/OldSlider.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-
-type SliderVariants = UnistylesVariants<typeof SliderStyles>
-
-type SliderProps = SliderVariants & {
-  colorPalette?: PalettesWithNestedKeys
-  thickness?: number
-  minimumTrackThickness?: number
-  minimumTrackColor?: string
-  displayStepsOnMinimumTrack?: boolean
-  thumbSize?: {
-    width: number
-    height: number
-  }
-  thumbChildren?: React.ReactNode
-  axis: 'x' | 'y'
-  steps?: number
-  value?: number
-  onValueChange?: (value: number) => void
-  onSlidingComplete?: (value: number) => void
-}
-
-const OldSlider = ({
-  colorPalette = 'accent',
-  variant = SliderDefaultVariants.variant,
-  size = SliderDefaultVariants.size,
-  displayStepsOnMinimumTrack = false,
-  thumbChildren: ThumbChildren,
-  axis = 'x',
-  value = 0,
-  steps,
-  onValueChange,
-  onSlidingComplete,
-}: SliderProps) => {
-  let styles
-  if (axis === 'x') {
-    styles = stylesX
-  } else {
-    styles = stylesY
-  }
-  SliderStyles.useVariants({
-    size,
-    variant,
-  })
-  const thumbStyle = SliderStyles.thumb(colorPalette)
-  const maximumTrackStyle = SliderStyles.maximumTrack(colorPalette)
-  const minimumTrackStyle = SliderStyles.minimumTrack(colorPalette, false)
-
-  const halfSize = (thumbStyle.width ?? 0) / 2
-  const thumbSize = {
-    width: thumbStyle.width,
-    height: thumbStyle.height,
-  }
-  const maximumTrackWidth = maximumTrackStyle.height ?? 30
-  const minimumTrackWidth = minimumTrackStyle.height ?? 30
-  const context = useSharedValue({x: 0})
-  const translate = useSharedValue(value)
-  const trackLength = useSharedValue(0)
-  const isInsideChild = useSharedValue(false)
-
-  const handleTrackLayout = (event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout
-    trackLength.value = axis === 'x' ? width : height
-  }
-
-  const slideGesture = Gesture.Pan()
-    .onTouchesDown(() => {
-      isInsideChild.value = true
-    })
-    .onBegin(() => {
-      context.value.x = translate.value
-    })
-    .onUpdate(e => {
-      const stepLength = steps ? trackLength.value / steps : 1
-      const delta = axis === 'y' ? -e.translationY : e.translationX
-
-      const rawValue = Math.max(
-        0,
-        Math.min(context.value.x + delta, trackLength.value),
-      )
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-      } else {
-        onValueChange &&
-          runOnJS(onValueChange)(
-            Math.round((snappedValue / trackLength.value) * 100) / 100,
-          )
-      }
-    })
-    .onEnd(() => {
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const snappedValue = steps
-        ? Math.round(translate.value / stepLength)
-        : translate.value / trackLength.value
-
-      onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
-    })
-    .onFinalize(() => {
-      isInsideChild.value = false
-    })
-  const tapGesture = Gesture.Tap()
-    .onBegin(e => {
-      if (isInsideChild.value) {
-        return
-      }
-      const tapPosition = axis === 'x' ? e.x : e.y
-      const stepLength = steps ? trackLength.value / steps : 1
-
-      const rawValue =
-        axis === 'y'
-          ? Math.max(
-              0,
-              Math.min(trackLength.value - tapPosition, trackLength.value),
-            )
-          : Math.max(0, Math.min(tapPosition, trackLength.value))
-
-      const snappedValue = steps
-        ? Math.round(rawValue / stepLength) * stepLength
-        : rawValue
-
-      translate.value = snappedValue
-
-      if (steps) {
-        const stepIndex = Math.round(snappedValue / stepLength)
-        onValueChange && runOnJS(onValueChange)(stepIndex)
-        onSlidingComplete && runOnJS(onSlidingComplete)(stepIndex)
-      } else {
-        const normalizedValue =
-          Math.round((snappedValue / trackLength.value) * 100) / 100
-        onValueChange && runOnJS(onValueChange)(normalizedValue)
-        onSlidingComplete && runOnJS(onSlidingComplete)(normalizedValue)
-      }
-    })
-    .simultaneousWithExternalGesture(slideGesture)
-
-  const animatedTrack = useAnimatedStyle(() => ({
-    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-  }))
-
-  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
-
-  return (
-    <View
-      style={[
-        styles.container(maximumTrackWidth, halfSize),
-        SliderStyles.container(colorPalette),
-      ]}>
-      {axis === 'x' && <View style={{width: halfSize}} />}
-      <GestureDetector gesture={tapGesture}>
-        <View
-          style={[
-            styles.maximumTrack(maximumTrackWidth),
-            SliderStyles.maximumTrack(colorPalette),
-          ]}
-          onLayout={handleTrackLayout}>
-          {steps && (
-            <View style={styles.steps}>
-              {Array.from({length: steps + 1}, (_, index) => index).map(
-                (_, i) => (
-                  <View
-                    key={i}
-                    style={[
-                      styles.step(i, steps),
-                      SliderStyles.step(colorPalette),
-                    ]}
-                  />
-                ),
-              )}
-            </View>
-          )}
-          <Animated.View
-            style={[
-              styles.minimumTrack(halfSize, minimumTrackWidth),
-              SliderStyles.minimumTrack(colorPalette, opacityTrack),
-              animatedTrack,
-            ]}>
-            <GestureDetector gesture={slideGesture}>
-              <View
-                style={[
-                  SliderStyles.thumb(colorPalette),
-                  styles.thumb(halfSize, thumbSize),
-                ]}>
-                {ThumbChildren || null}
-              </View>
-            </GestureDetector>
-          </Animated.View>
-        </View>
-      </GestureDetector>
-      {axis === 'y' && <View style={{height: halfSize}} />}
-    </View>
-  )
-}
-
-const stylesX = StyleSheet.create(theme => ({
-  container: (thickness, halfSize) => ({
-    flex: thickness ? 1 : 1,
-    maxWidth: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: 0,
-    paddingRight: halfSize,
-    flexDirection: 'row',
-  }),
-  maximumTrack: thickness => ({
-    flex: thickness ? 1 : 1,
-    justifyContent: 'center',
-    position: 'relative',
-    borderRadius: 22,
-  }),
-  minimumTrack: (halfSize, minimumTrackThickness) => ({
-    height: minimumTrackThickness,
-    width: '100%',
-    left: halfSize * -1,
-    bottom: 'auto',
-    paddingBottom: 0,
-    paddingLeft: halfSize,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 0,
-    borderTopLeftRadius: 20,
-    justifyContent: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
-    width: halfSize ? thumbSize.width : thumbSize.width,
-    height: thumbSize.height,
-    borderRadius: 25,
-    position: 'absolute',
-    right: 0,
-    zIndex: 2,
-    transform: [{translateX: '50%'}],
-  }),
-  steps: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-    position: 'absolute',
-  },
-  step: (index, length) => ({
-    width: 1,
-    height: '100%',
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-  }),
-}))
-const stylesY = StyleSheet.create(theme => ({
-  container: (maximumTrackWidth, halfSize) => ({
-    flex: 1,
-    maxWidth: maximumTrackWidth,
-    maxHeight: 'auto',
-    borderRadius: 22,
-    width: '100%',
-    height: '100%',
-    paddingTop: halfSize,
-    paddingRight: 0,
-    flexDirection: 'column',
-    borderWidth: 1,
-    borderColor: 'yellow',
-    // minWidth: 30,
-  }),
-  maximumTrack: maximumTrackWidth => ({
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    maxWidth: maximumTrackWidth,
-  }),
-  minimumTrack: (halfSize, minimumTrackWidth) => ({
-    position: 'absolute',
-    height: '100%',
-    width: minimumTrackWidth,
-    left: 'auto',
-    bottom: halfSize * -1,
-    paddingBottom: halfSize,
-    paddingLeft: 0,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-    borderTopLeftRadius: 0,
-    alignItems: 'center',
-  }),
-  thumb: (halfSize, thumbSize) => ({
-    borderRadius: 25,
-    position: 'absolute',
-    top: 0,
-    zIndex: 2,
-    transform: [{translateY: halfSize * -1}],
-    width: thumbSize.height,
-    height: thumbSize.width,
-  }),
-  steps: {
-    width: '100%',
-    height: '100%',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    zIndex: 0,
-  },
-  step: (index, length) => ({
-    width: '100%',
-    height: 1,
-    backgroundColor:
-      index === 0 || index === length ? 'transparent' : theme.colors.fg.default,
-  }),
-}))
-
-export default OldSlider