react-native-varia 0.5.2 → 0.6.0

package/lib/components/FloatingAction.tsx

@@ -1,5 +1,5 @@
 import React, {createContext, useContext} from 'react'
-import {View, Pressable} from 'react-native'
+import {View, Pressable, StyleProp} from 'react-native'
 import Animated, {
   withDelay,
   useAnimatedStyle,
@@ -48,6 +48,7 @@ function Item({children, onPress, ...props}: ItemProps) {
     variant,
     size,
     colorPalette = 'accent',
+    itemStyles,
   } = {...useFloatingContext(), ...props}
   FloatingActionStyles.useVariants({
     variant,
@@ -91,9 +92,10 @@ function Item({children, onPress, ...props}: ItemProps) {
     <AnimatedPressable
       testID="varia-floating-action-item"
       style={[
+        FloatingActionStyles.item(colorPalette),
         animatedStyles,
+        itemStyles,
         styles.itemButton,
-        FloatingActionStyles.item(colorPalette),
       ]}
       onPress={onPress}>
       {children}
@@ -112,6 +114,9 @@ type FloatingActionProps = FloatingActionVariants & {
   right?: ViewStyle['right']
   left?: ViewStyle['left']
   children: React.ReactNode
+  buttonContainerStyles?: StyleProp<ViewStyle>
+  buttonStyles?: StyleProp<ViewStyle>
+  itemStyles?: StyleProp<ViewStyle>
 }
 
 function Root({
@@ -125,6 +130,9 @@ function Root({
   bottom = null,
   right = null,
   left = null,
+  buttonContainerStyles,
+  buttonStyles,
+  itemStyles,
 }: FloatingActionProps) {
   FloatingActionStyles.useVariants({
     variant,
@@ -155,16 +163,18 @@ function Root({
     <View
       testID="varia-floating-action-container"
       style={[
-        styles.buttonContainer(top, bottom, left, right),
         FloatingActionStyles.buttonContainer(colorPalette),
+        buttonContainerStyles,
+        styles.buttonContainer(top, bottom, left, right),
       ]}>
       <AnimatedPressable
         testID="varia-floating-action-button"
         onPress={() => (isExpanded.value = !isExpanded.value)}
         style={[
+          FloatingActionStyles.button(colorPalette),
+          buttonStyles,
           plusIconStyle,
           styles.button,
-          FloatingActionStyles.button(colorPalette),
         ]}>
         <Plus size={iconHeight - 20} color={iconColor} />
       </AnimatedPressable>
@@ -179,6 +189,7 @@ function Root({
             variant,
             size,
             colorPalette,
+            itemStyles,
           }}>
           {child}
         </FloatingActionContext.Provider>

package/lib/components/GradientBackground.tsx

@@ -45,7 +45,7 @@ const BaseGradientBackground = ({
     gradientBackgroundTokens.variants.direction[direction]
 
   return (
-    <View style={[styles.container, containerStyles && containerStyles]}>
+    <View style={[containerStyles && containerStyles, styles.container]}>
       <Svg
         width="100%"
         height="100%"

package/lib/components/GradientText.tsx

@@ -1,4 +1,10 @@
-import {TextStyle, View, type ColorValue} from 'react-native'
+import {
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+  type ColorValue,
+} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
@@ -34,6 +40,7 @@ type GradientTextProps = TextVariantsWithoutVariant & {
   fontSizes: ThemeType['fontSizes']
   fontSize?: TextStyle['fontSize']
   children?: React.ReactNode
+  containerStyles?: StyleProp<ViewStyle>
   // size?: keyof typeof gradientTextTokens.variants.size
 }
 
@@ -48,6 +55,7 @@ const BaseGradientText = ({
   fontSizes,
   children,
   size = gradientTextTokens.defaultProps.size,
+  containerStyles,
 }: GradientTextProps) => {
   TextStyles.useVariants({
     size,
@@ -83,9 +91,9 @@ const BaseGradientText = ({
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
   return (
-    <View style={styles.root}>
+    <View style={[containerStyles, styles.container]}>
       <View style={styles.innerContainer}>
-        <Svg height={resolvedFontSize + 20} width="100%">
+        <Svg height={resolvedFontSize} width="100%">
           <Defs>
             <LinearGradient
               id="gradient"
@@ -102,7 +110,8 @@ const BaseGradientText = ({
             fontSize={resolvedFontSize}
             fontWeight={resolvedFontWeight}
             x="50%"
-            y={resolvedFontSize}
+            y={resolvedFontSize / 2}
+            alignmentBaseline="middle"
             textAnchor="middle">
             {children}
           </Text>
@@ -113,8 +122,9 @@ const BaseGradientText = ({
 }
 
 const styles = StyleSheet.create({
-  root: {
+  container: {
     flexDirection: 'row',
+    alignItems: 'center',
     _web: {
       _classNames: 'gradient_text-root-base',
     },

package/lib/components/IconWrapper.tsx

@@ -64,7 +64,7 @@ const Icon = ({
   // const viewBoxHeight = IconTokens.variants.size[size].viewBoxHeight ?? 0
 
   return (
-    <View style={[styles.root(size, width, height, rotation), style]}>
+    <View style={[styles.container(size, width, height, rotation), style]}>
       <Svg
         width={size || width}
         height={size || height}
@@ -100,7 +100,7 @@ const Icon = ({
 export default Icon
 
 const styles = StyleSheet.create({
-  root: (size, width, height, rotation) => ({
+  container: (size, width, height, rotation) => ({
     width: size || width,
     height: size || height,
     justifyContent: 'center',

package/lib/components/Input.tsx

@@ -52,7 +52,8 @@ type InputProps = InputVariants &
       rotation?: number
       size?: number
     }
-    style?: StyleProp<ViewStyle>
+    containerStyles?: StyleProp<ViewStyle>
+    textInputStyles?: StyleProp<ViewStyle | TextStyle>
     direction?: StackDirection
   }
 
@@ -76,7 +77,8 @@ const Input = ({
   inputMixins,
   disabled,
   invalid,
-  style,
+  textInputStyles,
+  containerStyles,
   icon,
   textAlignVertical = 'center',
   direction = 'column',
@@ -130,12 +132,18 @@ const Input = ({
   return (
     <View
       testID="varia-input-container"
-      style={styles.container(flex, direction, alignSelf, textAlignVertical)}>
+      style={[
+        containerStyles,
+        styles.container(flex, direction, alignSelf, textAlignVertical),
+      ]}>
       {IconRendered}
       <TextInput
         testID="varia-input"
         editable={!disabled}
         style={[
+          InputStyles.input(colorPalette),
+          inputMixins && inputMixins,
+          textInputStyles && textInputStyles,
           styles.input(
             flex,
             maxWidth,
@@ -145,9 +153,6 @@ const Input = ({
             (icon?.size || 0) + resolvedPaddingHorizontal * 2,
             alignSelf,
           ),
-          InputStyles.input(colorPalette),
-          inputMixins && inputMixins,
-          style && style,
           iconPosition && {
             paddingInline: 0,
             paddingLeft:

package/lib/components/Link.tsx

@@ -18,7 +18,7 @@ type LinkProps = TextVariants & {
   underline?: boolean
   fontSize?: number
   color?: ThemeColors
-  style?: StyleProp<ViewStyle>
+  textStyles?: StyleProp<TextStyle>
   mixins?:
     | StyleProp<ViewStyle>
     | StyleProp<ViewStyle>[]
@@ -35,6 +35,7 @@ const Link = ({
   underline,
   fontSize,
   color,
+  textStyles,
   mixins,
 }: LinkProps) => {
   console.log(color)
@@ -55,12 +56,11 @@ const Link = ({
         fontSize={fontSize}
         color={color}
         colorPalette={colorPalette}
-        style={
-          [
-            styles.link(underline ? 'underline' : 'none'),
-            mixins && mixins,
-          ] as any
-        }>
+        style={[
+          textStyles,
+          mixins && mixins,
+          styles.link(underline ? 'underline' : 'none'),
+        ]}>
         {text}
       </Text>
     </TouchableOpacity>

package/lib/components/Modal.tsx

@@ -1,5 +1,12 @@
 import React, {createContext, useContext} from 'react'
-import {TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native'
+import {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {Portal} from '@gorhom/portal'
 import Svg, {Path} from 'react-native-svg'
@@ -22,6 +29,11 @@ type ModalRootProps = ModalVariants & {
   setIsOpen: (isOpen: boolean) => void
   zIndex?: ZIndex
   children: React.ReactNode
+  overlayStyles?: StyleProp<ViewStyle>
+  contentStyles?: StyleProp<ViewStyle>
+  headerStyles?: StyleProp<ViewStyle>
+  titleStyles?: StyleProp<TextStyle>
+  closeTriggerStyles?: StyleProp<ViewStyle>
 }
 
 type ModalContextProps = Omit<ModalRootProps, 'children' | 'isOpen'>
@@ -45,6 +57,11 @@ const ModalRoot = ({
   setIsOpen,
   zIndex,
   children,
+  overlayStyles,
+  contentStyles,
+  headerStyles,
+  titleStyles,
+  closeTriggerStyles,
 }: ModalRootProps) => {
   ModalStyles.useVariants({
     variant,
@@ -58,6 +75,11 @@ const ModalRoot = ({
     animation,
     setIsOpen,
     zIndex,
+    overlayStyles,
+    contentStyles,
+    headerStyles,
+    titleStyles,
+    closeTriggerStyles,
   }
 
   return (
@@ -74,7 +96,6 @@ type ModalOverlayProps = {
   variant?: ModalVariants['variant']
   animation?: keyof typeof ModalTokens.animations.variants
   colorPalette?: PalettesWithNestedKeys
-  customStyle?: any
 }
 
 const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
@@ -85,6 +106,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
     animation,
     setIsOpen,
     zIndex,
+    overlayStyles,
   } = {...context, ...props}
 
   ModalStyles.useVariants({variant})
@@ -93,8 +115,9 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
     <AnimatedView
       testID="varia-modal-overlay"
       style={[
-        styles.overlay(zIndex || ZINDEXES.modal),
         ModalStyles.overlay(colorPalette),
+        overlayStyles,
+        styles.overlay(zIndex || ZINDEXES.modal),
       ]}
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
@@ -114,7 +137,6 @@ type ModalContentProps = Omit<ModalVariants, 'variant'> & {
   variant?: ModalVariants['variant']
   animation?: keyof typeof ModalTokens.animations.variants
   colorPalette?: PalettesWithNestedKeys
-  customStyle?: any
 }
 
 const ModalContent = ({children, ...props}: ModalContentProps) => {
@@ -123,6 +145,7 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
     colorPalette = 'accent',
     variant,
     animation,
+    contentStyles,
   } = {
     ...context,
     ...props,
@@ -133,7 +156,11 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
   return (
     <AnimatedView
       testID="varia-modal-content"
-      style={[styles.content(), ModalStyles.content(colorPalette)]}
+      style={[
+        ModalStyles.content(colorPalette),
+        contentStyles,
+        styles.content(),
+      ]}
       entering={ModalTokens.animations.variants[animation]?.enteringContent}
       exiting={ModalTokens.animations.variants[animation]?.exitingContent}>
       {children}
@@ -141,9 +168,10 @@ const ModalContent = ({children, ...props}: ModalContentProps) => {
   )
 }
 
-const ModalHeader = ({children}: {children: React.ReactNode}) => {
+const ModalHeader = ({children, ...props}: {children: React.ReactNode}) => {
+  const {headerStyles} = {...useModalContext(), ...props}
   return (
-    <View testID="varia-modal-header" style={styles.header}>
+    <View testID="varia-modal-header" style={[headerStyles, styles.header]}>
       {children}
     </View>
   )
@@ -151,11 +179,13 @@ const ModalHeader = ({children}: {children: React.ReactNode}) => {
 
 const ModalTitle = ({children, ...props}: {children: React.ReactNode}) => {
   const context = useModalContext()
-  const {variant, colorPalette = 'accent'} = {...context, ...props}
+  const {variant, colorPalette = 'accent', titleStyles} = {...context, ...props}
 
   ModalStyles.useVariants({variant})
   return (
-    <Text testID="varia-modal-title" style={ModalStyles.title(colorPalette)}>
+    <Text
+      testID="varia-modal-title"
+      style={[titleStyles, ModalStyles.title(colorPalette)]}>
       {children}
     </Text>
   )
@@ -165,7 +195,6 @@ type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
   children: React.ReactNode
   variant?: ModalVariants['variant']
   colorPalette?: PalettesWithNestedKeys
-  customStyle?: any
 }
 
 const ModalBody = ({children}: ModalBodyProps) => {
@@ -207,20 +236,20 @@ type ModalCloseTriggerProps = {
   style?: any
 }
 
-const ModalCloseTrigger = ({children, style}: ModalCloseTriggerProps) => {
-  const {setIsOpen} = useModalContext()
+const ModalCloseTrigger = ({children}: ModalCloseTriggerProps) => {
+  const {setIsOpen, closeTriggerStyles} = useModalContext()
 
   const onClose = () => setIsOpen(false)
 
   return (
     <View
       style={[
+        closeTriggerStyles,
         {
           position: 'absolute',
           right: 0,
           top: 0,
         },
-        style,
       ]}>
       {children({onClose})}
     </View>

package/lib/components/NumberInput.tsx

@@ -1,4 +1,10 @@
-import React, {createContext, useContext, useMemo, useState} from 'react'
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 import {View, TextInput, Pressable, StyleProp, ViewStyle} from 'react-native'
 import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
 import {
@@ -19,7 +25,6 @@ type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 type PublicInputProps = Omit<NumberInputVariants, 'variant' | 'size'> & {
   placeholder?: string
   flex?: number
-  style?: StyleProp<ViewStyle>
 }
 
 interface IconProps {
@@ -34,7 +39,7 @@ type PublicTriggerProps = {
   colorPalette?: PalettesWithNestedKeys
 }
 
-type SimpleNumberInputProps = NumberInputVariants & {
+type NumberInputProps = NumberInputVariants & {
   value?: number
   onChange?: (n: number) => void
   onBlur?: () => void
@@ -46,9 +51,14 @@ type SimpleNumberInputProps = NumberInputVariants & {
   alignSelf?: AlignSelf
   style?: StyleProp<ViewStyle>
   direction?: 'row' | 'column'
+  containerStyles?: StyleProp<ViewStyle>
+  inputStyles?: StyleProp<ViewStyle>
+  increaseTriggerStyles?: StyleProp<ViewStyle>
+  decreaseTriggerStyles?: StyleProp<ViewStyle>
+  children: ReactNode
 }
 
-export const SimpleNumberInputContext = createContext<{
+export const NumberInputContext = createContext<{
   value: number
   setValue: (n: number) => void
   onBlur?: () => void
@@ -61,6 +71,9 @@ export const SimpleNumberInputContext = createContext<{
   flex?: number
   alignSelf?: AlignSelf
   direction?: StackDirection
+  inputStyles?: StyleProp<ViewStyle>
+  increaseTriggerStyles?: StyleProp<ViewStyle>
+  decreaseTriggerStyles?: StyleProp<ViewStyle>
 }>({
   value: 0,
   setValue: () => {},
@@ -70,8 +83,8 @@ export const SimpleNumberInputContext = createContext<{
   flex: 0,
 })
 
-function useSimpleNumberInputContext() {
-  const ctx = useContext(SimpleNumberInputContext)
+function useNumberInputContext() {
+  const ctx = useContext(NumberInputContext)
   if (!ctx) {
     throw new Error('SimpleNumberInput.* must be inside SimpleNumberInput.Root')
   }
@@ -94,8 +107,11 @@ const NumberInput = {
     max,
     alignSelf = 'auto',
     direction = 'column',
-    style,
-  }: React.PropsWithChildren<SimpleNumberInputProps>) => {
+    containerStyles,
+    inputStyles,
+    increaseTriggerStyles,
+    decreaseTriggerStyles,
+  }: NumberInputProps) => {
     NumberInputStyles.useVariants({variant, size, distribution})
     const [internalValue, setInternalValue] = useState<number>(defaultValue)
     const isControlled = propValue !== undefined && propOnChange !== undefined
@@ -110,7 +126,7 @@ const NumberInput = {
     }
 
     return (
-      <SimpleNumberInputContext.Provider
+      <NumberInputContext.Provider
         value={{
           value,
           setValue,
@@ -123,17 +139,20 @@ const NumberInput = {
           flex,
           alignSelf,
           direction,
+          inputStyles,
+          increaseTriggerStyles,
+          decreaseTriggerStyles,
         }}>
         <View
           testID="varia-select-root"
           style={[
-            simpleNumberInputstyles.rootContainer(flex, alignSelf),
             NumberInputStyles.container(colorPalette),
-            style || {},
+            containerStyles,
+            styles.rootContainer(flex, alignSelf),
           ]}>
           {children}
         </View>
-      </SimpleNumberInputContext.Provider>
+      </NumberInputContext.Provider>
     )
   },
 
@@ -148,11 +167,11 @@ const NumberInput = {
       distribution,
       min,
       max,
-      style,
+      inputStyles,
       flex,
       alignSelf,
       direction,
-    } = {...useSimpleNumberInputContext(), ...props}
+    } = {...useNumberInputContext(), ...props}
     const resolvedDirection =
       direction === 'row'
         ? distribution === 'horizontal'
@@ -180,9 +199,9 @@ const NumberInput = {
       <TextInput
         testID="varia-select-input"
         style={[
-          simpleNumberInputstyles.input(childFlex as number),
           NumberInputStyles.input(colorPalette),
-          style || {},
+          inputStyles,
+          styles.input(childFlex as number),
         ]}
         keyboardType="numeric"
         value={value.toString()}
@@ -203,11 +222,10 @@ const NumberInput = {
       colorPalette = 'accent',
       children,
       max,
-    } = {...useSimpleNumberInputContext(), ...props}
+      increaseTriggerStyles,
+    } = {...useNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
-    // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
-    //   .color
     const color = getVariantValue(
       NumberInputStyles.buttons(colorPalette),
       'variant',
@@ -228,9 +246,10 @@ const NumberInput = {
         onPress={() => setValue(value + 1)}
         disabled={max !== undefined && value >= max}
         style={[
-          simpleNumberInputstyles.button,
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.increaseTrigger(colorPalette),
+          increaseTriggerStyles,
+          styles.button,
         ]}>
         {iconWithProps}
       </Pressable>
@@ -247,7 +266,8 @@ const NumberInput = {
       colorPalette = 'accent',
       children,
       min,
-    } = {...useSimpleNumberInputContext(), ...props}
+      decreaseTriggerStyles,
+    } = {...useNumberInputContext(), ...props}
     NumberInputStyles.useVariants({variant, size, distribution})
 
     // const color = (NumberInputStyles.buttons(colorPalette) as {color: string})
@@ -272,9 +292,10 @@ const NumberInput = {
         onPress={() => setValue(value - 1)}
         disabled={min !== undefined && value <= min}
         style={[
-          simpleNumberInputstyles.button,
           NumberInputStyles.buttons(colorPalette),
           NumberInputStyles.decreaseTrigger(colorPalette),
+          decreaseTriggerStyles,
+          styles.button,
         ]}>
         {iconWithProps}
       </Pressable>
@@ -292,7 +313,7 @@ const DecreaseTriggerIcon = ({color}: {color?: string}) => {
 
 export default NumberInput
 
-const simpleNumberInputstyles = StyleSheet.create({
+const styles = StyleSheet.create({
   rootContainer: (flex: number, alignSelf?: AlignSelf) => ({
     flexDirection: 'row',
     flex,