react-native-varia 0.5.2 → 0.6.0

package/lib/components/RadioGroup.tsx

@@ -1,5 +1,12 @@
 import React, {createContext, useContext, useState, useCallback} from 'react'
-import {View, Text, Pressable, ViewStyle} from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
+} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {
   RadioGroupStyles,
@@ -28,6 +35,10 @@ type RadioGroupRootProps = RadioGroupVariants & {
   justifyContent?: JustifyContent
   alignItems?: AlignItems
   gap?: Gap
+  containerStyles?: StyleProp<ViewStyle>
+  itemStyles?: StyleProp<ViewStyle>
+  indicatorStyles?: StyleProp<ViewStyle>
+  itemTextStyles?: StyleProp<TextStyle>
 }
 
 type RadioGroupContextProps = {
@@ -38,6 +49,9 @@ type RadioGroupContextProps = {
   size: RadioGroupVariants['size']
   flex: Flex
   alignSelf?: AlignSelf
+  itemStyles?: StyleProp<ViewStyle>
+  indicatorStyles?: StyleProp<ViewStyle>
+  itemTextStyles?: StyleProp<ViewStyle>
 }
 
 const RadioGroupContext = createContext<RadioGroupContextProps | null>(null)
@@ -65,6 +79,10 @@ function Root({
   justifyContent = 'space-between',
   alignItems,
   gap,
+  containerStyles,
+  itemStyles,
+  indicatorStyles,
+  itemTextStyles,
 }: RadioGroupRootProps) {
   RadioGroupStyles.useVariants({variant, size})
   const [value, setValue] = useState(defaultValue)
@@ -86,6 +104,9 @@ function Root({
     variant,
     size,
     flex,
+    itemStyles,
+    indicatorStyles,
+    itemTextStyles,
   }
 
   return (
@@ -93,6 +114,8 @@ function Root({
       <View
         testID="varia-radio-group-root"
         style={[
+          RadioGroupStyles.container(colorPalette),
+          containerStyles,
           styles.root(
             flex,
             direction,
@@ -101,7 +124,6 @@ function Root({
             alignItems as ViewStyle['alignItems'],
             gap,
           ),
-          RadioGroupStyles.container(colorPalette),
         ]}>
         {children}
       </View>
@@ -116,7 +138,8 @@ type PublicItemProps = {
 
 function Item({children, value: itemValue}: PublicItemProps) {
   const context = useRadioGroupContext()
-  const {value, onValueChange, colorPalette, variant, size} = context
+  const {value, onValueChange, colorPalette, variant, size, itemStyles} =
+    context
   const isSelected = value === itemValue
 
   RadioGroupStyles.useVariants({
@@ -143,8 +166,9 @@ function Item({children, value: itemValue}: PublicItemProps) {
       aria-checked={value === itemValue}
       testID={`varia-radio-group-item-${value}`}
       style={({pressed}) => [
-        styles.item,
         RadioGroupStyles.item(colorPalette, pressed),
+        itemStyles,
+        styles.item,
       ]}
       onPress={() => onValueChange(itemValue)}
       accessibilityRole="radio"
@@ -163,10 +187,12 @@ function Indicator({
     variant,
     size,
     colorPalette = 'accent',
+    indicatorStyles,
   } = {
     ...useRadioGroupContext(),
     ...props,
   }
+  console.log('🚀 ~ indicatorStyles:', indicatorStyles)
   const isSelected = value === itemValue
   RadioGroupStyles.useVariants({
     variant,
@@ -177,7 +203,7 @@ function Indicator({
   return (
     <View
       testID="varia-radio-group-indicator"
-      style={RadioGroupStyles.control(colorPalette)}>
+      style={[RadioGroupStyles.control(colorPalette), indicatorStyles]}>
       <View style={RadioGroupStyles.indicator(colorPalette)} />
     </View>
   )
@@ -196,6 +222,7 @@ function ItemText({
     variant,
     size,
     colorPalette = 'accent',
+    itemTextStyles,
   } = {
     ...useRadioGroupContext(),
     ...props,
@@ -208,7 +235,9 @@ function ItemText({
   })
 
   return (
-    <Text style={[RadioGroupStyles.itemText(colorPalette)]}>{children}</Text>
+    <Text style={[RadioGroupStyles.itemText(colorPalette), itemTextStyles]}>
+      {children}
+    </Text>
   )
 }
 

package/lib/components/ReText.tsx

@@ -61,9 +61,9 @@ const ReText = ({
       value={initialValue}
       style={[
         TextStyles.text(colorPalette),
-        styles.text(fontSize, color),
         style && style,
         mixins && mixins,
+        styles.text(fontSize, color),
       ]}
       onStartShouldSetResponder={() => true}
       {...rest}

package/lib/components/Select.tsx

@@ -12,6 +12,9 @@ import {
   ScrollView,
   TouchableWithoutFeedback,
   Pressable,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
 } from 'react-native'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {Portal} from '@gorhom/portal'
@@ -50,6 +53,11 @@ interface SelectContextType {
   size: SelectVariants['size']
   flex: Flex
   zIndex: ZIndex
+  triggerStyles?: StyleProp<ViewStyle>
+  overlayStyles?: StyleProp<ViewStyle>
+  contentStyles?: StyleProp<ViewStyle>
+  itemStyles?: StyleProp<ViewStyle>
+  itemTextStyles?: StyleProp<TextStyle>
 }
 
 const SelectContext = createContext<SelectContextType | undefined>(undefined)
@@ -74,6 +82,12 @@ type RootProps = SelectVariants & {
   stretch?: AlignSelf
   direction?: 'row' | 'column'
   zIndex?: ZIndex
+  containerStyles?: StyleProp<ViewStyle>
+  triggerStyles?: StyleProp<ViewStyle>
+  overlayStyles?: StyleProp<ViewStyle>
+  contentStyles?: StyleProp<ViewStyle>
+  itemStyles?: StyleProp<ViewStyle>
+  itemTextStyles?: StyleProp<ViewStyle>
 }
 
 const SelectRoot = ({
@@ -90,6 +104,12 @@ const SelectRoot = ({
   stretch,
   direction = 'column',
   zIndex,
+  containerStyles,
+  triggerStyles,
+  overlayStyles,
+  contentStyles,
+  itemStyles,
+  itemTextStyles,
 }: RootProps) => {
   SelectStyles.useVariants({variant, size})
   const [internalValue, setInternalValue] = useState(defaultValue)
@@ -121,7 +141,9 @@ const SelectRoot = ({
   )
 
   return (
-    <View style={[styles.container(flex, stretch)]} testID="varia-select-root">
+    <View
+      style={[containerStyles, styles.container(flex, stretch)]}
+      testID="varia-select-root">
       {trigger &&
         React.cloneElement(trigger as ReactElement<TriggerProps>, {
           isOpen,
@@ -131,6 +153,7 @@ const SelectRoot = ({
           flex,
           stretch,
           direction,
+          triggerStyles,
           variant:
             (trigger as ReactElement<TriggerProps>).props.variant ?? variant,
           size: (trigger as ReactElement<TriggerProps>).props.size ?? size,
@@ -153,6 +176,11 @@ const SelectRoot = ({
               size,
               flex,
               zIndex,
+              triggerStyles,
+              overlayStyles,
+              contentStyles,
+              itemStyles,
+              itemTextStyles,
             }}>
             <View style={styles.portalContainer(zIndex || ZINDEXES.select)}>
               {portalChildren}
@@ -176,6 +204,7 @@ interface TriggerProps {
   flex?: Flex
   stretch?: AlignSelf
   direction?: 'row' | 'column'
+  triggerStyles?: StyleProp<ViewStyle>
 }
 
 const SelectTrigger = ({
@@ -190,6 +219,7 @@ const SelectTrigger = ({
   stretch,
   direction,
   options = [],
+  triggerStyles,
 }: TriggerProps) => {
   SelectStyles.useVariants({variant, size})
   const {flex: childFlex} = useMemo(() => {
@@ -200,8 +230,9 @@ const SelectTrigger = ({
     <Pressable
       onPress={() => setIsOpen?.(!isOpen)}
       style={({pressed}) => [
-        styles.input(childFlex),
         SelectStyles.trigger(colorPalette, pressed),
+        triggerStyles,
+        styles.input(childFlex),
       ]}
       testID="varia-select-trigger">
       <Text>{selected ? selected.label : placeholder}</Text>
@@ -220,11 +251,15 @@ const SelectOverlay = ({
   colorPalette?: PalettesWithNestedKeys
 }) => {
   SelectStyles.useVariants({variant, size})
-  const {setIsOpen} = useSelect()
+  const {setIsOpen, overlayStyles} = useSelect()
   return (
     <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
       <View
-        style={[styles.backdrop, SelectStyles.overlay(colorPalette)]}
+        style={[
+          SelectStyles.overlay(colorPalette),
+          overlayStyles,
+          styles.backdrop,
+        ]}
         testID="varia-select-overlay"
       />
     </TouchableWithoutFeedback>
@@ -240,11 +275,18 @@ const SelectContent = ({
   variant?: SelectVariants['variant']
   size?: SelectVariants['size']
 }) => {
-  const {variant, size, colorPalette} = {...useSelect(), ...props}
+  const {variant, size, colorPalette, contentStyles} = {
+    ...useSelect(),
+    ...props,
+  }
   SelectStyles.useVariants({variant, size})
   return (
     <View
-      style={[styles.modalContent, SelectStyles.content(colorPalette)]}
+      style={[
+        SelectStyles.content(colorPalette),
+        contentStyles,
+        styles.modalContent,
+      ]}
       testID="varia-select-content">
       <ScrollView>{children}</ScrollView>
     </View>
@@ -259,6 +301,8 @@ const SelectItem = ({value, label, ...props}: Option) => {
     setValue,
     value: selected,
     colorPalette,
+    itemStyles,
+    itemTextStyles,
   } = {...useSelect(), ...props}
   const isSelected = selected === value
   SelectStyles.useVariants({variant, size})
@@ -267,8 +311,17 @@ const SelectItem = ({value, label, ...props}: Option) => {
       onPress={() => setValue(value)}
       testID="varia-select-item"
       aria-selected={isSelected}>
-      <View style={[styles.item, SelectStyles.item(colorPalette, isSelected)]}>
-        <Text style={SelectStyles.itemText(colorPalette, isSelected)}>
+      <View
+        style={[
+          SelectStyles.item(colorPalette, isSelected),
+          itemStyles,
+          styles.item,
+        ]}>
+        <Text
+          style={[
+            SelectStyles.itemText(colorPalette, isSelected),
+            itemTextStyles,
+          ]}>
           {label}
         </Text>
       </View>