react-native-varia 0.2.4 → 0.4.0

package/lib/components/Accordion.tsx

@@ -2,10 +2,16 @@ 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 {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
+import {AccordionStyles, AccordionDefaultVariants} from '../theme/Accordion'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
 
-type AccordionItemProps = {
+const AnimatedView = Animated.createAnimatedComponent(View)
+type AccordionVariants = UnistylesVariants<typeof AccordionStyles>
+
+type AccordionItemProps = AccordionVariants & {
+  colorPalette?: PalettesWithNestedKeys
   title: string
   itemKey: string
   children: ReactNode
@@ -14,10 +20,12 @@ type AccordionItemProps = {
   scrollViewRef?: any
 }
 
-type AccordionGroupRootProps = {
+type AccordionGroupRootProps = AccordionVariants & {
   children: ReactNode
   defaultOpenKeys?: string[]
   allowMultiple?: boolean
+  flex?: Flex
+  alignSelf?: AlignSelf
 }
 
 export const AccordionGroup = {
@@ -26,9 +34,13 @@ export const AccordionGroup = {
 }
 
 function AccordionGroupRoot({
+  variant = AccordionDefaultVariants.variant,
+  size = AccordionDefaultVariants.size,
   children,
   defaultOpenKeys = [],
   allowMultiple = false,
+  flex = 1,
+  alignSelf = 'auto',
 }: AccordionGroupRootProps) {
   const [openKeys, setOpenKeys] = useState<Set<string>>(
     () => new Set(defaultOpenKeys),
@@ -52,31 +64,43 @@ function AccordionGroupRoot({
 
   const items = React.Children.map(children, child => {
     if (!React.isValidElement(child)) return child
-    const cp = child.props as AccordionItemProps
-    const key = cp.itemKey
+
+    const element = child as React.ReactElement<AccordionItemProps>
+    const key = element.props.itemKey
     const isOpen = openKeys.has(key)
-    return React.cloneElement(child, {
+
+    return React.cloneElement(element, {
       isOpen,
+      variant,
+      size,
       onToggle: () => toggleItem(key),
     })
   })
 
-  return <View style={styles.groupContainer}>{items}</View>
+  return <View style={styles.groupContainer(flex, alignSelf)}>{items}</View>
 }
 
 function AccordionGroupItem({
+  variant = AccordionDefaultVariants.variant,
+  size = AccordionDefaultVariants.size,
+  colorPalette = 'accent',
   title,
   children,
   isOpen = false,
   onToggle,
 }: AccordionItemProps) {
+  AccordionStyles.useVariants({variant, size, active: isOpen})
   return (
-    <Animated.View
-      // Aquí aplicas la transición de layout
+    <AnimatedView
       layout={LinearTransition.duration(150)}
-      style={styles.itemContainer}>
-      <Pressable onPress={onToggle} style={styles.header}>
-        <Text style={styles.headerText}>{title}</Text>
+      style={[
+        styles.itemContainer,
+        AccordionStyles.itemContainer(colorPalette),
+      ]}>
+      <Pressable
+        onPress={onToggle}
+        style={[styles.header, AccordionStyles.header(colorPalette)]}>
+        <Text style={AccordionStyles.headerTitle(colorPalette)}>{title}</Text>
       </Pressable>
 
       {isOpen && (
@@ -84,30 +108,46 @@ function AccordionGroupItem({
           <View style={styles.innerContent}>{children}</View>
         </View>
       )}
-    </Animated.View>
+    </AnimatedView>
   )
 }
 
 const styles = StyleSheet.create({
-  groupContainer: {},
+  groupContainer: (flex: Flex, alignSelf: AlignSelf) => ({
+    flex,
+    alignSelf,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'accordion-group-container-base',
+    },
+  }),
   itemContainer: {
     borderWidth: 1,
-    borderColor: '#ddd',
     borderRadius: 6,
     marginVertical: 8,
-    overflow: 'hidden', // importante para que no se vea contenido fuera
+    overflow: 'hidden',
+    _web: {
+      _classNames: 'accordion-item-container-base',
+    },
   },
   header: {
-    padding: 12,
-    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    _web: {
+      _classNames: 'accordion-header-base',
+    },
   },
   headerText: {
     fontSize: 16,
+    color: 'blue',
+    _web: {
+      _classNames: 'accordion-header-text-base',
+    },
   },
-  contentContainer: {
-    // no necesitamos animar altura manual, lo hace el layout
-  },
+  contentContainer: {},
   innerContent: {
     padding: 12,
+    _web: {
+      _classNames: 'accordion-item-content-base',
+    },
   },
 })

package/lib/components/Badge.tsx

@@ -80,6 +80,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    _web: {
+      _classNames: 'badge-base',
+    },
   },
   badgeAbsolute: (x, y) => ({
     position: 'absolute',
@@ -89,9 +92,15 @@ const styles = StyleSheet.create({
       {translateY: y === 'top' ? '-50%' : '50%'},
       {translateX: x === 'left' ? '-50%' : '50%'},
     ],
+    _web: {
+      _classNames: 'badge-absolute-base',
+    },
   }),
   text: {
     textAlign: 'center',
+    _web: {
+      _classNames: 'badge-text-base',
+    },
   },
   customStyle: style => ({
     ...style,

package/lib/components/Button.tsx

@@ -5,6 +5,7 @@ import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
 import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {getVariantValue} from '../style/varia/utils'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
@@ -22,6 +23,7 @@ type ButtonProps = ButtonVariants & {
   onPress: () => void
   loading?: boolean
   disabled?: boolean
+  activeOpacity?: number
   maxWidth?: number | string
   flex?: number
   textAdjustment?: TextAdjustment
@@ -40,6 +42,7 @@ const Button = ({
   colorPalette = 'accent',
   size = ButtonDefaultVariants.size,
   variant = ButtonDefaultVariants.variant,
+  activeOpacity = 0.6,
   onPress,
   text,
   loading = false,
@@ -76,6 +79,13 @@ const Button = ({
     [textAdjustment],
   )
 
+  const resolvedColor = getVariantValue(
+    ButtonStyles.text(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
+
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
     <IconComponent
@@ -84,13 +94,15 @@ const Button = ({
         scale: icon.scale,
         colorPalette,
         size: icon.size,
-        color: ButtonStyles.text(colorPalette).color,
+        color: resolvedColor,
       }}
     />
   ) : null
 
   return (
     <TouchableOpacity
+      role="button"
+      activeOpacity={activeOpacity}
       style={[
         styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
@@ -100,10 +112,7 @@ const Button = ({
       onPress={onPress}
       disabled={disabled || loading}>
       {loading ? (
-        <Spinner
-          size={size as SpinnerProps['size']}
-          color={ButtonStyles.text(colorPalette).color}
-        />
+        <Spinner size={size as SpinnerProps['size']} color={resolvedColor} />
       ) : (
         <>
           {icon?.position === 'left' && IconRendered}
@@ -129,10 +138,16 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flexShrink: 1,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'button-container-base',
+    },
   }),
   text: {
     textAlign: 'center',
+    _web: {
+      _classNames: 'button-text-base',
+    },
   },
 })
 

package/lib/components/Checkbox.tsx

@@ -1,9 +1,11 @@
 import React, {useCallback} from 'react'
-import {View, Text, Pressable, StyleSheet} from 'react-native'
+import {View, Text, Pressable} from 'react-native'
+import {StyleSheet} from 'react-native-unistyles'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {CheckboxDefaultVariants, CheckboxStyles} from '../theme/Checkbox.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import Svg, {Line} from 'react-native-svg'
+import {getVariantValue} from '../style/varia/utils'
 
 type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
 
@@ -31,12 +33,18 @@ function Checkbox({
 
   const isChecked = checked
 
-  const checkStyle = CheckboxStyles.check(colorPalette) as {
-    width: string
-    color: string
-  }
-  const checkSize = checkStyle.width
-  const checkColor = checkStyle.color
+  const checkColor = getVariantValue(
+    CheckboxStyles.check(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
+  const checkSize = getVariantValue(
+    CheckboxStyles.check(colorPalette),
+    'size',
+    size,
+    'width',
+  )
 
   return (
     <Pressable
@@ -58,14 +66,20 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    _web: {
+      _classNames: 'checkbox-container-base',
+    },
   },
   checkContainer: {
     alignItems: 'center',
     justifyContent: 'center',
+    _web: {
+      _classNames: 'badge-check-container-base',
+    },
   },
 })
 
-export {Checkbox}
+export default Checkbox
 
 const Check = ({size, color}: {size: string; color: string}) => {
   return (

package/lib/components/CircleProgress.tsx

@@ -163,10 +163,18 @@ const styles = StyleSheet.create({
     flex,
     maxWidth: width,
     maxHeight: height,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'circle-progress-container',
+    },
   }),
   childContainer: {
+    flexBasis: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'circle-progress-child-container',
+    },
   },
 })
 

package/lib/components/Divider.tsx

@@ -26,20 +26,27 @@ const Divider = ({
 const styles = StyleSheet.create(theme => ({
   container: (size, axis, margin) => ({
     flex: 1,
+    alignSelf: 'stretch',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    maxHeight: axis === 'y' ? size : '100%',
-    maxWidth: axis === 'x' ? size : '100%',
+    maxWidth: axis === 'y' ? size : '100%',
+    maxHeight: axis === 'x' ? size : '100%',
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
+    _web: {
+      _classNames: 'divider-container-base',
+    },
   }),
   divider: (color, colorPalette, size, axis) => ({
-    width: axis === 'x' ? size : '100%',
-    height: axis === 'y' ? size : '100%',
+    width: axis === 'y' ? size : '100%',
+    height: axis === 'x' ? size : '100%',
     backgroundColor: color
       ? resolveColor(color, theme.colors, colorPalette)
       : theme.colors.fg.default,
+    _web: {
+      _classNames: 'divider-base',
+    },
   }),
 }))
 

package/lib/components/Drawer.tsx

@@ -4,7 +4,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react'
-import {TouchableWithoutFeedback} from 'react-native'
+import {Platform, TouchableWithoutFeedback, View} from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
   measure,
@@ -16,11 +16,8 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {runOnUI, scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
-import {
-  SlidingDrawerTokens,
-  SlidingDrawerStyles,
-} from '../theme/SlidingDrawer.recipe'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
+import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import {
   StyleSheet,
@@ -33,21 +30,21 @@ import {HStack} from '../patterns'
  * Types
  * ----------------------------*/
 
-export type SlidingDrawerRef = {
+export type DrawerRef = {
   expand: () => void | null
   collapse: () => void | null
   snapTo: (point: number) => void | null
   isCollapsed: () => boolean
 }
 
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
+type DrawerVariants = UnistylesVariants<typeof DrawerStyles>
 
-type DrawerContextType = SlidingDrawerVariants & {
+type DrawerContextType = DrawerVariants & {
   colorPalette: PalettesWithNestedKeys
   overlayOpacity: SharedValue<number>
 }
 
-type DrawerRootProps = SlidingDrawerVariants & {
+type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
 }
@@ -70,10 +67,10 @@ const useDrawer = () => {
 
 const DrawerRoot = ({
   colorPalette = 'accent',
-  variant = SlidingDrawerTokens.defaultProps.variant,
+  variant = DrawerTokens.defaultProps.variant,
   children,
 }: DrawerRootProps) => {
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   const overlayOpacity = useSharedValue(0)
   const value = useMemo(
@@ -103,7 +100,7 @@ const DrawerPositioner = ({
   axis: 'x' | 'y'
 }) => {
   const {variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
 
@@ -121,7 +118,7 @@ const DrawerPositioner = ({
     <HStack
       style={[
         styles.positioner,
-        SlidingDrawerStyles.positioner,
+        DrawerStyles.positioner,
         {
           justifyContent:
             axis === 'y'
@@ -148,10 +145,11 @@ const DrawerPositioner = ({
 const AnimatedTouchable = Animated.createAnimatedComponent(
   TouchableWithoutFeedback,
 )
+const AnimatedView = Animated.createAnimatedComponent(View)
 
 const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   const {colorPalette, overlayOpacity, variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
   const visible = useSharedValue(0)
 
   useAnimatedReaction(
@@ -172,11 +170,12 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
 
   return (
     <AnimatedTouchable onPress={onPress}>
-      <Animated.View
+      <AnimatedView
         style={[
           StyleSheet.absoluteFillObject,
           displayOverlayStyle,
-          SlidingDrawerStyles.overlay(colorPalette),
+          DrawerStyles.overlay(colorPalette),
+          {pointerEvents: 'auto'},
         ]}
       />
     </AnimatedTouchable>
@@ -192,13 +191,13 @@ type InternalDrawerSliderProps = {
   direction: 1 | -1
   lockAtEdges?: boolean
   snapPoints?: number[] | ('hidden' | 'content')[]
-  animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  animation?: keyof typeof DrawerTokens.variants.animation
   onExpand?: () => void
   onCollapse?: () => void
   onSnap?: (point: number) => void
   allowGestures?: boolean
   children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef | null>
+  ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
 }
 
@@ -216,7 +215,7 @@ const DrawerSliderInternal = ({
   direction,
   lockAtEdges = false,
   snapPoints = ['hidden', 'content'],
-  animation = SlidingDrawerTokens.defaultProps.animation,
+  animation = DrawerTokens.defaultProps.animation,
   onExpand,
   onCollapse,
   onSnap,
@@ -227,14 +226,14 @@ const DrawerSliderInternal = ({
 }: InternalDrawerSliderProps) => {
   const {variant, colorPalette, overlayOpacity} = useDrawer()
 
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   const screenHeight =
     UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
   const screenWidth = UnistylesRuntime.screen.width
 
   const animations = {withSpring, withTiming}
-  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
+  const animationVariant = DrawerTokens.variants.animation[animation]
   const VELOCITY_THRESHOLD = 2000
 
   const viewRef = useAnimatedRef<Animated.View>()
@@ -455,16 +454,17 @@ const DrawerSliderInternal = ({
 
   return (
     <GestureDetector gesture={slideGesture}>
-      <Animated.View
+      <AnimatedView
         ref={viewRef}
         onLayout={onLayout}
         style={[
           styles.slider,
           blockAnimatedStyle,
-          SlidingDrawerStyles.slider(colorPalette),
+          DrawerStyles.slider(colorPalette),
+          {pointerEvents: 'auto'},
         ]}>
         {children}
-      </Animated.View>
+      </AnimatedView>
     </GestureDetector>
   )
 }
@@ -485,6 +485,12 @@ const styles = StyleSheet.create((theme, rt) => ({
     left: 0,
     right: 0,
     bottom: 0,
+    pointerEvents: 'box-none',
+    _web: {
+      pointerEvents: 'none',
+      overflow: 'hidden',
+      _classNames: 'drawer-positioner-base',
+    },
   },
   slider: {
     flex: 1,
@@ -492,5 +498,8 @@ const styles = StyleSheet.create((theme, rt) => ({
     alignItems: 'center',
     justifyContent: 'flex-start',
     zIndex: 100,
+    _web: {
+      _classNames: 'drawer-slider-base',
+    },
   },
 }))

package/lib/components/Field.tsx

@@ -106,6 +106,10 @@ const styles = StyleSheet.create({
   root: (flex: Flex) => ({
     flex,
     flexDirection: 'column',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'field-root',
+    },
   }),
 })
 

package/lib/components/GradientBackground.tsx

@@ -75,6 +75,9 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     overflow: 'hidden',
     borderColor: 'transparent',
+    _web: {
+      _classNames: 'gradient_background-container-base',
+    },
   },
 })
 

package/lib/components/GradientText.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, TextStyle, View, type ColorValue} from 'react-native'
+import {TextStyle, View, type ColorValue} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
@@ -6,17 +6,25 @@ import Svg, {
   Text,
   type NumberProp,
 } from 'react-native-svg'
-import {withUnistyles} from 'react-native-unistyles'
+import {
+  UnistylesVariants,
+  withUnistyles,
+  StyleSheet,
+} from 'react-native-unistyles'
 import {gradientTextTokens} from '../theme/GradientText.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeType,
 } from '../style/varia/types'
-import {resolveColor, resolveFontSize} from '../style/varia/utils'
+import {getVariantValue, resolveColor} from '../style/varia/utils'
 import {ThemeColors} from '../style/varia/types'
+import {TextStyles} from '../theme/Text.recipe'
+
+type AllTextVariants = UnistylesVariants<typeof TextStyles>
+type TextVariantsWithoutVariant = Omit<AllTextVariants, 'variant'>
 
-interface GradientTextProps {
+type GradientTextProps = TextVariantsWithoutVariant & {
   colorPalette: PalettesWithNestedKeys
   variant?: keyof typeof gradientTextTokens.variants.variant
   direction?: keyof typeof gradientTextTokens.variants.direction
@@ -26,7 +34,7 @@ interface GradientTextProps {
   fontSizes: ThemeType['fontSizes']
   fontSize?: TextStyle['fontSize']
   children?: React.ReactNode
-  size?: keyof typeof gradientTextTokens.variants.size
+  // size?: keyof typeof gradientTextTokens.variants.size
 }
 
 const BaseGradientText = ({
@@ -41,6 +49,10 @@ const BaseGradientText = ({
   children,
   size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
+  TextStyles.useVariants({
+    size,
+  })
+
   const colorValue = gradientTextTokens.variants.variant[variant]
 
   const resolvedStartColor = resolveColor(
@@ -54,8 +66,19 @@ const BaseGradientText = ({
     colorPalette,
   )
 
-  const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
-  const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+  // const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
+  // const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+
+  const resolvedFontSize =
+    fontSize ||
+    getVariantValue(TextStyles.text(colorPalette), 'size', size, 'fontSize')
+  const resolvedFontWeight =
+    getVariantValue(
+      TextStyles.text(colorPalette),
+      'size',
+      size,
+      'fontWeight',
+    ) || 400
 
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
@@ -77,10 +100,7 @@ const BaseGradientText = ({
           <Text
             fill="url(#gradient)"
             fontSize={resolvedFontSize}
-            fontWeight={
-              (gradientTextTokens.variants.size[size] as {fontWeight?: number})
-                .fontWeight ?? 400
-            }
+            fontWeight={resolvedFontWeight}
             x="50%"
             y={resolvedFontSize}
             textAnchor="middle">
@@ -95,9 +115,15 @@ const BaseGradientText = ({
 const styles = StyleSheet.create({
   root: {
     flexDirection: 'row',
+    _web: {
+      _classNames: 'gradient_text-root-base',
+    },
   },
   innerContainer: {
     width: '100%',
+    _web: {
+      _classNames: 'gradient-inner-container-base',
+    },
   },
 })