react-native-varia 0.3.0 → 0.4.0

package/lib/components/Input.tsx

@@ -19,6 +19,7 @@ import {
 } from '../style/varia/types'
 import {useState} from 'react'
 import {IconWrapperProps} from './IconWrapper'
+import {getVariantValue} from '../style/varia/utils'
 
 type InputVariants = UnistylesVariants<typeof InputStyles>
 
@@ -89,17 +90,22 @@ const Input = ({
     disabled,
     invalid,
   })
-  const iconPosition = icon ? !icon.position && 'left' : null
+  const iconPosition = icon ? icon.position || 'left' : null
 
-  const placeholderStyle = InputStyles.placeholder(colorPalette) as {
-    color: string
-  }
-  const placeholderColor = placeholderStyle.color
+  const resolvedPlaceholderColor = getVariantValue(
+    InputStyles.placeholder(colorPalette),
+    'variant',
+    variant,
+    'color',
+  )
 
-  const inputResolvedVariantStyle = InputStyles.input(colorPalette) as {
-    paddingHorizontal?: number
-  }
-  const paddingHorizontal = inputResolvedVariantStyle.paddingHorizontal ?? 0
+  const resolvedPaddingHorizontal =
+    getVariantValue(
+      InputStyles.input(colorPalette),
+      'size',
+      size,
+      'paddingHorizontal',
+    ) || 0
 
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
@@ -110,16 +116,16 @@ const Input = ({
         colorPalette,
         size: icon.size,
         color: InputStyles.input(colorPalette).color,
-        style: styles.icon(iconPosition, paddingHorizontal, textAlignVertical),
+        style: styles.icon(
+          iconPosition,
+          resolvedPaddingHorizontal,
+          textAlignVertical,
+        ),
       }}
     />
   ) : null
 
-  console.log(
-    iconPosition === 'left'
-      ? (icon?.size || 0) + paddingHorizontal * 2
-      : paddingHorizontal,
-  )
+  const withIconPadding = (icon?.size || 0) + resolvedPaddingHorizontal * 2
 
   return (
     <View
@@ -132,18 +138,29 @@ const Input = ({
             flex,
             maxWidth,
             iconPosition,
-            paddingHorizontal,
+            resolvedPaddingHorizontal,
             textAlignVertical,
-            (icon?.size || 0) + paddingHorizontal * 2,
+            (icon?.size || 0) + resolvedPaddingHorizontal * 2,
             alignSelf,
           ),
           InputStyles.input(colorPalette),
           inputMixins && inputMixins,
           style && style,
+          iconPosition && {
+            paddingInline: 0,
+            paddingLeft:
+              iconPosition === 'left'
+                ? withIconPadding - 0.1
+                : resolvedPaddingHorizontal,
+            paddingRight:
+              iconPosition === 'right'
+                ? withIconPadding - 0.1
+                : resolvedPaddingHorizontal,
+          },
         ]}
         value={value}
         placeholder={placeholder}
-        placeholderTextColor={placeholderColor}
+        placeholderTextColor={resolvedPlaceholderColor}
         inputMode={inputMode}
         keyboardType={keyboardType}
         secureTextEntry={password}
@@ -174,6 +191,10 @@ const styles = StyleSheet.create({
         : textAlignVertical === 'bottom'
         ? 'flex-end'
         : 'flex-start',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'input-container-base',
+    },
   }),
   input: (
     flex,
@@ -185,12 +206,14 @@ const styles = StyleSheet.create({
     alignSelf,
   ) => ({
     flex,
-    paddingLeft: iconPosition === 'left' ? padding : paddingHorizontal,
-    paddingRight: iconPosition === 'right' ? padding : paddingHorizontal,
     textAlignVertical,
     maxWidth,
     alignSelf,
-    outline: 'none'
+    outline: 'none',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'input-base',
+    },
   }),
   icon: (iconPosition, paddingHorizontal, textAlignVertical) => ({
     position: 'absolute',
@@ -198,6 +221,9 @@ const styles = StyleSheet.create({
     ...(iconPosition === 'right' && {right: paddingHorizontal}),
     top: textAlignVertical !== 'top' ? 'auto' : 10,
     bottom: textAlignVertical !== 'bottom' ? 'auto' : 10,
+    _web: {
+      _classNames: 'input-icon-base',
+    },
   }),
 })
 

package/lib/components/Link.tsx

@@ -37,6 +37,7 @@ const Link = ({
   color,
   mixins,
 }: LinkProps) => {
+  console.log(color)
   return (
     <TouchableOpacity
       onPress={async () => {
@@ -67,6 +68,9 @@ const Link = ({
 const styles = StyleSheet.create({
   link: (underline): any => ({
     textDecorationLine: underline,
+    _web: {
+      _classNames: 'link-base',
+    },
   }),
 })
 

package/lib/components/Modal.tsx

@@ -13,6 +13,7 @@ import Text from './Text'
 import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 
+const AnimatedView = Animated.createAnimatedComponent(View)
 type ModalVariants = UnistylesVariants<typeof ModalStyles>
 type AnimationKey = keyof typeof ModalTokens.animations.variants
 type ColorPaletteKey = PalettesWithNestedKeys
@@ -89,7 +90,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
   ModalStyles.useVariants({variant})
 
   return (
-    <Animated.View
+    <AnimatedView
       style={[styles.overlay, ModalStyles.overlay(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
@@ -97,7 +98,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
         <View style={StyleSheet.absoluteFillObject} />
       </TouchableWithoutFeedback>
       {children}
-    </Animated.View>
+    </AnimatedView>
   )
 }
 
@@ -123,12 +124,12 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
   ModalStyles.useVariants({variant})
 
   return (
-    <Animated.View
+    <AnimatedView
       style={[styles.content(), ModalStyles.content(colorPalette)]}
       entering={ModalTokens.animations.variants[animation]?.enteringContent}
       exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
       {children}
-    </Animated.View>
+    </AnimatedView>
   )
 }
 
@@ -217,11 +218,17 @@ const styles = StyleSheet.create(theme => {
       zIndex: 1000,
       justifyContent: 'center',
       alignItems: 'center',
+      _web: {
+        _classNames: 'modal-overlay-base',
+      },
     },
     content: () => ({
       justifyContent: 'center',
       alignItems: 'center',
       alignSelf: 'stretch',
+      _web: {
+        _classNames: 'modal-content-base',
+      },
     }),
     header: {
       flexDirection: 'row',
@@ -229,9 +236,15 @@ const styles = StyleSheet.create(theme => {
       alignItems: 'center',
       width: '100%',
       marginBottom: 10,
+      _web: {
+        _classNames: 'modal-header-base',
+      },
     },
     closeButton: {
       color: 'white',
+      _web: {
+        _classNames: 'modal-close-button-base',
+      },
     },
   }
 })
@@ -246,4 +259,4 @@ const Modal = Object.assign(ModalRoot, {
   CloseTrigger: ModalCloseTrigger,
   CloseButton: CloseButton,
 })
-export default Modal
+export default Modal

package/lib/components/NumberInput.tsx

@@ -12,7 +12,7 @@ import {
 } from '../style/varia/types'
 import Plus from '../icons/Plus'
 import Minus from '../icons/Minus'
-import {computeFlexSync} from '../style/varia/utils'
+import {computeFlexSync, getVariantValue} from '../style/varia/utils'
 
 type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 
@@ -204,8 +204,14 @@ const NumberInput = {
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
-    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
-      .color
+    // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+    //   .color
+    const color = getVariantValue(
+      NumberInputStyles.buttons(colorPalette),
+      'variant',
+      variant,
+      'color',
+    )
 
     const iconElement = children || <IncreaseTriggerIcon />
     const iconWithProps = React.isValidElement<IconProps>(iconElement)
@@ -241,8 +247,14 @@ const NumberInput = {
     } = {...useSimpleNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
-    const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
-      .color
+    // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
+    //   .color
+    const color = getVariantValue(
+      NumberInputStyles.buttons(colorPalette),
+      'variant',
+      variant,
+      'color',
+    )
 
     const iconElement = children || <DecreaseTriggerIcon />
     const iconWithProps = React.isValidElement<IconProps>(iconElement)
@@ -282,13 +294,23 @@ const simpleNumberInputstyles = StyleSheet.create({
     flex,
     alignSelf,
     alignItems: 'stretch',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'number-input-root-base',
+    },
   }),
   input: (flex: number) => ({
     paddingVertical: 0,
     flex,
+    _web: {
+      _classNames: 'number-input-base',
+    },
   }),
   button: {
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'number-input-button-base',
+    },
   },
 })

package/lib/components/RadioGroup.tsx

@@ -6,7 +6,11 @@ import {
   RadioGroupDefaultVariants,
 } from '../theme/RadioGroup.recipe'
 import {
+  AlignItems,
   AlignSelf,
+  Flex,
+  Gap,
+  JustifyContent,
   PalettesWithNestedKeys,
   StackDirection,
 } from '../style/varia/types'
@@ -21,9 +25,9 @@ type RadioGroupRootProps = RadioGroupVariants & {
   direction?: StackDirection
   flex?: number
   alignSelf?: AlignSelf
-  justifyContent?: string
-  alignItems?: string
-  gap?: number
+  justifyContent?: JustifyContent
+  alignItems?: AlignItems
+  gap?: Gap
 }
 
 type RadioGroupContextProps = {
@@ -32,7 +36,7 @@ type RadioGroupContextProps = {
   colorPalette: PalettesWithNestedKeys
   variant: RadioGroupVariants['variant']
   size: RadioGroupVariants['size']
-  flex: number
+  flex: Flex
   alignSelf?: AlignSelf
 }
 
@@ -58,7 +62,7 @@ function Root({
   flex = 0,
   alignSelf = 'auto',
   direction = 'column',
-  justifyContent,
+  justifyContent = 'space-between',
   alignItems,
   gap,
 }: RadioGroupRootProps) {
@@ -218,10 +222,17 @@ const styles = StyleSheet.create({
     alignItems,
     gap,
     justifyContent,
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'radio-root',
+    },
   }),
   item: {
     flexDirection: 'row',
     alignItems: 'center',
+    _web: {
+      _classNames: 'radio-item',
+    },
   },
 })
 

package/lib/components/ReText.tsx

@@ -52,7 +52,7 @@ const ReText = ({
     return {
       text: text.value,
     } as TextInputProps
-  })
+  }, [text])
   return (
     <AnimatedTextInput
       underlineColorAndroid="transparent"
@@ -81,6 +81,9 @@ const styles = StyleSheet.create(theme => ({
     }),
     ...(fontSize && {fontSize}),
     textAlign: 'left',
+    _web: {
+      _classNames: 'retext-text-base',
+    },
   }),
   customStyle: style => ({
     ...style,

package/lib/components/Select.tsx

@@ -277,24 +277,41 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     ...(stretch ? {alignSelf: stretch} : {}),
     alignItems: 'stretch',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'select-container-base',
+    },
   }),
   input: (flex: Flex) => ({
     flex,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    flexBasis: 'auto',
+    _web: {
+      _classNames: 'select-input-base',
+    },
   }),
   item: {
     alignItems: 'center',
     flexDirection: 'row',
+    _web: {
+      _classNames: 'select-item-base',
+    },
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.3)',
+    _web: {
+      _classNames: 'select-backdrop-base',
+    },
   },
   modalContent: {
     overflow: 'hidden',
     alignSelf: 'stretch',
+    _web: {
+      _classNames: 'select-modal-content-base',
+    },
   },
   portalContainer: {
     position: 'absolute',
@@ -304,5 +321,8 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
+    _web: {
+      _classNames: 'select-portal-container-base',
+    },
   },
 })

package/lib/components/Slider.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import {runOnJS} from 'react-native-worklets'
 import {SliderStyles, SliderDefaultVariants} from '../theme/Slider.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import {getCompoundVariantValue} from '../style/varia/utils'
 
 function throttle<T extends (...args: any[]) => any>(
   func: T,
@@ -28,6 +29,8 @@ function throttle<T extends (...args: any[]) => any>(
 
 type SliderVariants = UnistylesVariants<typeof SliderStyles>
 
+const AnimatedView = Animated.createAnimatedComponent(View)
+
 type ThumbStyleExtended = ReturnType<typeof SliderStyles.thumb> & {
   width: number
   height: number
@@ -38,7 +41,6 @@ type SliderProps = SliderVariants & {
   thickness?: number
   minimumTrackThickness?: number
   minimumTrackColor?: string
-  displayStepsOnMinimumTrack?: boolean
   thumbSize?: {
     width: number
     height: number
@@ -56,7 +58,6 @@ const Slider = ({
   colorPalette = 'accent',
   variant = SliderDefaultVariants.variant,
   size = SliderDefaultVariants.size,
-  displayStepsOnMinimumTrack = false,
   thumbChildren: ThumbChildren,
   axis = 'x',
   value = 0,
@@ -80,10 +81,21 @@ const Slider = ({
     return throttle(onValueChange, 50)
   }, [onValueChange])
 
-  const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
+  // const thumbStyle = SliderStyles.thumb(colorPalette) as ThumbStyleExtended
+  // const thumbWidth = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'width', true)
+  const thumbWidth = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'width',
+  )
+  const thumbHeight = getCompoundVariantValue(
+    SliderStyles.thumb(colorPalette),
+    {axis, size},
+    'height',
+  )
+  // const thumbHeight = getVariantValue(SliderStyles.thumb(colorPalette), 'size', size, 'height', true)
 
-  const halfSize =
-    axis === 'x' ? (thumbStyle.width ?? 0) / 2 : (thumbStyle.height ?? 0) / 2
+  const halfSize = ((axis === 'x' ? thumbWidth : thumbHeight) ?? 0) / 2
   const context = useSharedValue({x: 0})
   const translate = useSharedValue(value)
   const trackLength = useSharedValue(0)
@@ -240,9 +252,11 @@ const Slider = ({
       onSlidingComplete && runOnJS(onSlidingComplete)(snappedValue)
     })
 
-  const animatedTrack = useAnimatedStyle(() => ({
-    [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
-  }))
+  const animatedTrack = useAnimatedStyle(() => {
+    return {
+      [axis === 'y' ? 'height' : 'width']: translate.value + halfSize,
+    }
+  })
 
   const animatedThumb = useAnimatedStyle(() => {
     if (axis === 'x') {
@@ -257,8 +271,6 @@ const Slider = ({
     }
   })
 
-  const opacityTrack = steps !== undefined && displayStepsOnMinimumTrack
-
   return (
     <View
       style={[
@@ -273,10 +285,10 @@ const Slider = ({
             SliderStyles.maximumTrack(colorPalette),
           ]}
           onLayout={handleTrackLayout}>
-          <Animated.View
+          <AnimatedView
             style={[
               styles.minimumTrack(halfSize),
-              SliderStyles.minimumTrack(colorPalette, opacityTrack),
+              SliderStyles.minimumTrack(colorPalette),
               animatedTrack,
             ]}
           />
@@ -300,7 +312,7 @@ const Slider = ({
           )}
           <GestureDetector gesture={slideGesture}>
             <View style={styles.thumbContainerFull}>
-              <Animated.View style={[animatedThumb]}>
+              <AnimatedView style={[animatedThumb, {flex: 1}]}>
                 <View
                   style={[
                     SliderStyles.thumb(colorPalette),
@@ -308,7 +320,7 @@ const Slider = ({
                   ]}>
                   {ThumbChildren || null}
                 </View>
-              </Animated.View>
+              </AnimatedView>
             </View>
           </GestureDetector>
         </View>
@@ -326,16 +338,18 @@ const styles = StyleSheet.create(theme => ({
   ) => ({
     flex,
     alignSelf,
+    overflow: 'hidden',
+    // flexBasis: 'auto',
     variants: {
       axis: {
         x: {
-          maxWidth: 'auto',
+          // maxWidth: 'auto',
           paddingTop: 0,
           paddingRight: halfSize,
           flexDirection: 'row',
         },
         y: {
-          maxHeight: 'auto',
+          // maxHeight: 'auto',
           height: '100%',
           paddingTop: halfSize,
           paddingRight: 0,
@@ -343,11 +357,16 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-container-base',
+      flex: flex === 0 ? undefined : flex,
+    },
   }),
   maximumTrack: () => ({
     flex: 1,
     position: 'relative',
     overflow: 'visible',
+    flexBasis: 'auto',
     variants: {
       axis: {
         x: {
@@ -358,8 +377,12 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-maximun-track-base',
+    },
   }),
   minimumTrack: (halfSize: number) => ({
+    flexBasis: 'auto',
     variants: {
       axis: {
         x: {
@@ -369,9 +392,6 @@ const styles = StyleSheet.create(theme => ({
           bottom: 'auto',
           paddingBottom: 0,
           paddingLeft: halfSize,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 0,
-          borderTopLeftRadius: 20,
           justifyContent: 'center',
           alignItems: 'flex-end',
         },
@@ -380,13 +400,13 @@ const styles = StyleSheet.create(theme => ({
           paddingBottom: halfSize,
           marginBottom: halfSize * -1,
           paddingLeft: 0,
-          borderBottomLeftRadius: 20,
-          borderBottomRightRadius: 20,
-          borderTopLeftRadius: 0,
           alignItems: 'flex-start',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-minimum-track-base',
+    },
   }),
   thumbContainerFull: {
     position: 'absolute',
@@ -395,21 +415,28 @@ const styles = StyleSheet.create(theme => ({
     top: 0,
     bottom: 0,
     zIndex: 2,
+    _web: {
+      _classNames: 'thumb-container-full-base',
+    },
   },
   thumb: halfSize => ({
-    borderRadius: 25,
     variants: {
       axis: {
         x: {
           height: '100%',
           justifyContent: 'center',
+          alignItems: 'center',
         },
         y: {
           width: '100%',
+          justifyContent: 'center',
           alignItems: 'center',
         },
       },
     },
+    _web: {
+      _classNames: 'slider-thumb-base',
+    },
   }),
 
   stepsOverlay: {
@@ -419,6 +446,9 @@ const styles = StyleSheet.create(theme => ({
     top: 0,
     bottom: 0,
     zIndex: 1,
+    _web: {
+      _classNames: 'slider-steps-overlay-base',
+    },
   },
   steps: {
     width: '100%',
@@ -437,6 +467,9 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-steps-base',
+    },
   },
   step: (index, length) => ({
     backgroundColor:
@@ -453,6 +486,9 @@ const styles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      _classNames: 'slider-step-base',
+    },
   }),
 }))