react-native-varia 0.3.0 → 0.4.1

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,19 +6,23 @@ import Svg, {
   Text,
   type NumberProp,
 } from 'react-native-svg'
-import {UnistylesVariants, 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 {getVariantValue, 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'
+import {TextStyles} from '../theme/Text.recipe'
 
 type AllTextVariants = UnistylesVariants<typeof TextStyles>
-type TextVariantsWithoutVariant = Omit<AllTextVariants, "variant">;
+type TextVariantsWithoutVariant = Omit<AllTextVariants, 'variant'>
 
 type GradientTextProps = TextVariantsWithoutVariant & {
   colorPalette: PalettesWithNestedKeys
@@ -46,9 +50,9 @@ const BaseGradientText = ({
   size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
   TextStyles.useVariants({
-    size
+    size,
   })
-  
+
   const colorValue = gradientTextTokens.variants.variant[variant]
 
   const resolvedStartColor = resolveColor(
@@ -65,9 +69,16 @@ const BaseGradientText = ({
   // 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 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]
 
@@ -89,10 +100,6 @@ const BaseGradientText = ({
           <Text
             fill="url(#gradient)"
             fontSize={resolvedFontSize}
-            // fontWeight={
-            //   (gradientTextTokens.variants.size[size] as {fontWeight?: number})
-            //     .fontWeight ?? 400
-            // }
             fontWeight={resolvedFontWeight}
             x="50%"
             y={resolvedFontSize}
@@ -108,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',
+    },
   },
 })
 

package/lib/components/IconWrapper.tsx

@@ -14,7 +14,6 @@ import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
-  ThemeType,
 } from '../style/varia/types'
 import {resolveColor} from '../style/varia/utils'
 
@@ -69,7 +68,7 @@ const Icon = ({
       <Svg
         width={size || width}
         height={size || height}
-        viewBox="0 0 24 24"
+        viewBox="0 0 23 23"
         // viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
         fill="none"
         {...rest}>
@@ -107,7 +106,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     ...(rotation && {transform: [{rotate: `${rotation}deg`}]}),
-    // transform: rotation ? [{rotate: `${rotation}deg`}] : [],
+    _web: {
+      _classNames: 'icon_wrapper-root-base',
+    },
   }),
 })
 

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',
+    },
   },
 })