react-native-varia 0.5.2 → 0.6.1

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/theme/Accordion.recipe.tsx

@@ -6,6 +6,30 @@ export const AccordionDefaultVariants = {
   size: 'md',
 } as const
 export const AccordionStyles = StyleSheet.create(theme => ({
+  groupContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          padding: theme.spacing[2],
+        },
+        md: {
+          padding: theme.spacing[2],
+        },
+        lg: {
+          padding: theme.spacing[2],
+        },
+        xl: {
+          padding: theme.spacing[3],
+        },
+        nosize: {},
+      },
+    },
+  }),
   itemContainer: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
     variants: {
@@ -181,4 +205,28 @@ export const AccordionStyles = StyleSheet.create(theme => ({
       },
     ],
   }),
+  innerContent: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          padding: theme.spacing[2],
+        },
+        md: {
+          padding: theme.spacing[2],
+        },
+        lg: {
+          padding: theme.spacing[2],
+        },
+        xl: {
+          padding: theme.spacing[3],
+        },
+        nosize: {},
+      },
+    },
+  }),
 }))

package/lib/theme/Drawer.recipe.tsx

@@ -49,6 +49,7 @@ export const DrawerStyles = StyleSheet.create((theme, rt) => ({
     },
   },
   slider: (colorPalette: PalettesWithNestedKeys) => ({
+    alignSelf: 'stretch',
     boxShadow: theme.shadows.sm,
     borderRadius: theme.radii.lg,
     backgroundColor: theme.colors.bg.default,