react-native-varia 0.5.2 → 0.6.0

package/lib/components/Switch.tsx

@@ -1,4 +1,10 @@
-import {Platform, TouchableWithoutFeedback, View} from 'react-native'
+import {
+  Platform,
+  StyleProp,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -31,6 +37,8 @@ type SwitchProps = SwitchVariants & {
   enabledIcon?: ReactNode
   disabledIcon?: ReactNode
   alignSelf?: AlignSelf
+  containerStyles?: StyleProp<ViewStyle>
+  thumbStyles?: StyleProp<ViewStyle>
 }
 
 const Switch = ({
@@ -44,6 +52,8 @@ const Switch = ({
   size = SwitchTokens.defaultProps.size,
   flex = 0,
   alignSelf = 'flex-start',
+  containerStyles,
+  thumbStyles,
 }: SwitchProps) => {
   const animatedRef = useRef<View>(null)
 
@@ -166,15 +176,17 @@ const Switch = ({
       <AnimatedView
         ref={animatedRef}
         style={[
+          SwitchStyles.container(colorPalette),
+          containerStyles,
           styles.container(flex, alignSelf),
           animatedStyle,
-          SwitchStyles.container(colorPalette),
         ]}>
         <AnimatedView
           testID="varia-switch-thumb"
           style={[
-            styles.thumb,
             SwitchStyles.thumb(colorPalette),
+            thumbStyles,
+            styles.thumb,
             thumbAnimatedStyle,
             circleTranslationStyle,
           ]}>

package/lib/components/Text.tsx

@@ -11,7 +11,7 @@ type TextProps = TextVariants &
     colorPalette?: PalettesWithNestedKeys
     fontSize?: number | undefined
     color?: ThemeColors
-    style?: TextStyle
+    style?: StyleProp<TextStyle>
     children?: React.ReactNode
     mixins?: StyleProp<TextStyle> | StyleProp<TextStyle>[]
   }
@@ -37,8 +37,8 @@ const Text = ({
       style={[
         TextStyles.text(colorPalette),
         styles.text(color, fontSize),
-        mixins && mixins,
         style,
+        mixins && mixins,
       ]}
       {...props}>
       {children}

package/lib/components/Toast.tsx

@@ -15,6 +15,7 @@ import {PalettesWithNestedKeys, ZIndex} from '../../style/varia/types'
 import Text from './Text'
 import {AnimatedHStack, VStack} from '../../patterns'
 import {ZINDEXES} from '../../style/varia/constants'
+import {StyleProp, TextStyle, ViewStyle} from 'react-native'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 
@@ -25,6 +26,8 @@ export type ToastProps = ToastVariants & {
   onClose?: () => void
   position?: 'top' | 'bottom'
   zIndex?: ZIndex
+  containerStyles?: StyleProp<ViewStyle>
+  textStyles?: StyleProp<TextStyle>
 }
 
 const Toast: React.FC<ToastProps> = ({
@@ -36,6 +39,8 @@ const Toast: React.FC<ToastProps> = ({
   onClose,
   position = 'bottom',
   zIndex,
+  containerStyles,
+  textStyles,
 }) => {
   ToastStyles.useVariants({variant, size})
 
@@ -91,13 +96,19 @@ const Toast: React.FC<ToastProps> = ({
           justifyContent:
             position === 'bottom' || !position ? 'flex-end' : 'flex-start',
         },
-        styles.container(zIndex || ZINDEXES.toast),
         ToastStyles.root,
+        styles.container(zIndex || ZINDEXES.toast),
       ]}>
       <AnimatedHStack
         ref={animatedRef}
-        style={[animatedStyle, ToastStyles.container(colorPalette)]}>
-        <Text style={ToastStyles.text(colorPalette)}>{message}</Text>
+        style={[
+          animatedStyle,
+          ToastStyles.container(colorPalette),
+          containerStyles,
+        ]}>
+        <Text style={[ToastStyles.text(colorPalette), textStyles]}>
+          {message}
+        </Text>
       </AnimatedHStack>
     </VStack>
   )

package/lib/components/context/Field.tsx

@@ -2,6 +2,7 @@ import {createContext, useContext} from 'react'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {FieldStyles} from '../../../theme/Field.recipe'
 import {PalettesWithNestedKeys} from '../../../style/varia/types'
+import {StyleProp, TextStyle} from 'react-native'
 
 export type FieldVariants = UnistylesVariants<typeof FieldStyles>
 
@@ -10,6 +11,7 @@ export type FieldContextType = {
   variant?: FieldVariants['variant']
   size?: FieldVariants['size']
   colorPalette?: PalettesWithNestedKeys
+  labelStyles?: StyleProp<TextStyle>
 }
 
 const FieldContext = createContext<FieldContextType | undefined>(undefined)

package/lib/varia/types.ts

@@ -287,3 +287,9 @@ export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']
 export type MaxWidth = ViewStyle['maxWidth']
 export type ZIndex = ViewStyle['zIndex']
+
+export type Axis = 'x' | 'y'
+export type SizeEntry = {
+  x?: Record<string, any>
+  y?: Record<string, any>
+}

package/lib/varia/utils.ts

@@ -37,6 +37,7 @@ import {
   ColorScheme,
   CreatePresetDTO,
   CustomColorScheme,
+  SizeEntry,
   ThemeColors,
   ThemePresetDTO,
 } from './types'
@@ -439,3 +440,9 @@ export function getCompoundVariantValue<
 
   return match.styles[propName]
 }
+
+export const generateCompoundVariants = (sizes: Record<string, SizeEntry>) =>
+  Object.entries(sizes).flatMap(([size, axes]) => [
+    {axis: 'x', size, styles: axes.x ?? {}},
+    {axis: 'y', size, styles: axes.y ?? {}},
+  ])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "bin": {
     "varia": "bin/cli.js"
   },