react-native-varia 0.5.1 → 0.6.0

package/lib/components/{ui/Accordion.tsx → Accordion.tsx}

@@ -1,11 +1,15 @@
 import React, {ReactNode, useState} from 'react'
-import {View, Pressable} from 'react-native'
+import {View, Pressable, TextStyle, StyleProp} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {LinearTransition} from 'react-native-reanimated'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
-import {AccordionStyles, AccordionDefaultVariants} from '../../theme/Accordion'
+import {
+  AccordionStyles,
+  AccordionDefaultVariants,
+} from '../../theme/Accordion.recipe'
 import {AlignSelf, Flex, PalettesWithNestedKeys} from '../../style/varia/types'
+import {ViewStyle} from 'react-native'
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 type AccordionVariants = UnistylesVariants<typeof AccordionStyles>
@@ -18,6 +22,10 @@ type AccordionItemProps = AccordionVariants & {
   isOpen?: boolean
   onToggle?: () => void
   scrollViewRef?: any
+  itemContainerStyles?: StyleProp<ViewStyle>
+  headerStyles?: StyleProp<ViewStyle>
+  headerTitleStyles?: StyleProp<TextStyle>
+  innerContentStyles?: StyleProp<ViewStyle>
 }
 
 type AccordionGroupRootProps = AccordionVariants & {
@@ -26,6 +34,11 @@ type AccordionGroupRootProps = AccordionVariants & {
   allowMultiple?: boolean
   flex?: Flex
   alignSelf?: AlignSelf
+  colorPalette?: PalettesWithNestedKeys
+  itemContainerStyles?: StyleProp<ViewStyle>
+  headerStyles?: StyleProp<ViewStyle>
+  headerTitleStyles?: StyleProp<TextStyle>
+  innerContentStyles?: StyleProp<ViewStyle>
 }
 
 export const AccordionGroup = {
@@ -41,6 +54,11 @@ function AccordionGroupRoot({
   allowMultiple = false,
   flex = 1,
   alignSelf = 'auto',
+  colorPalette = 'accent',
+  itemContainerStyles,
+  headerStyles,
+  headerTitleStyles,
+  innerContentStyles,
 }: AccordionGroupRootProps) {
   const [openKeys, setOpenKeys] = useState<Set<string>>(
     () => new Set(defaultOpenKeys),
@@ -73,6 +91,11 @@ function AccordionGroupRoot({
       isOpen,
       variant,
       size,
+      colorPalette,
+      itemContainerStyles,
+      headerStyles,
+      headerTitleStyles,
+      innerContentStyles,
       onToggle: () => toggleItem(key),
     })
   })
@@ -80,7 +103,10 @@ function AccordionGroupRoot({
   return (
     <View
       testID="varia-accordion-group-root"
-      style={styles.groupContainer(flex, alignSelf)}>
+      style={[
+        // AccordionStyles.groupContainer(colorPalette)
+        styles.groupContainer(flex, alignSelf),
+      ]}>
       {items}
     </View>
   )
@@ -95,6 +121,10 @@ function AccordionGroupItem({
   isOpen = false,
   onToggle,
   itemKey,
+  itemContainerStyles,
+  headerStyles,
+  headerTitleStyles,
+  innerContentStyles,
 }: AccordionItemProps) {
   AccordionStyles.useVariants({variant, size, active: isOpen})
   return (
@@ -102,21 +132,36 @@ function AccordionGroupItem({
       testID={`varia-accordion-group-item-${itemKey}`}
       layout={LinearTransition.duration(150)}
       style={[
-        styles.itemContainer,
         AccordionStyles.itemContainer(colorPalette),
+        itemContainerStyles,
+        styles.itemContainer,
       ]}>
       <Pressable
         testID={`varia-accordion-group-header-${itemKey}`}
         onPress={onToggle}
-        style={[styles.header, AccordionStyles.header(colorPalette)]}>
-        <Text style={AccordionStyles.headerTitle(colorPalette)}>{title}</Text>
+        style={[
+          AccordionStyles.header(colorPalette),
+          headerStyles,
+          styles.header,
+        ]}>
+        <Text
+          style={[
+            AccordionStyles.headerTitle(colorPalette),
+            headerTitleStyles,
+          ]}>
+          {title}
+        </Text>
       </Pressable>
 
       {isOpen && (
-        <View
-          style={styles.contentContainer}
-          testID={`varia-accordion-group-content-${itemKey}`}>
-          <View style={styles.innerContent}>{children}</View>
+        <View testID={`varia-accordion-group-content-${itemKey}`}>
+          <View
+            style={[
+              AccordionStyles.innerContent(colorPalette),
+              innerContentStyles,
+            ]}>
+            {children}
+          </View>
         </View>
       )}
     </AnimatedView>
@@ -133,9 +178,6 @@ const styles = StyleSheet.create({
     },
   }),
   itemContainer: {
-    borderWidth: 1,
-    borderRadius: 6,
-    marginVertical: 8,
     overflow: 'hidden',
     _web: {
       _classNames: 'accordion-item-container-base',
@@ -147,18 +189,4 @@ const styles = StyleSheet.create({
       _classNames: 'accordion-header-base',
     },
   },
-  headerText: {
-    fontSize: 16,
-    color: 'blue',
-    _web: {
-      _classNames: 'accordion-header-text-base',
-    },
-  },
-  contentContainer: {},
-  innerContent: {
-    padding: 12,
-    _web: {
-      _classNames: 'accordion-item-content-base',
-    },
-  },
 })

package/lib/components/{ui/Badge.tsx → Badge.tsx}

@@ -1,4 +1,4 @@
-import {Text, View, ViewStyle, StyleProp} from 'react-native'
+import {Text, View, ViewStyle, StyleProp, TextStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {BadgeStyles, BadgeDefaultVariants} from '../../theme/Badge.recipe'
 import {ReactNode} from 'react'
@@ -20,6 +20,8 @@ type BadgeProps = BadgeVariants & {
   backgroundColor?: string
   color?: string
   mixins?: StyleProp<ViewStyle>
+  containerStyles?: StyleProp<ViewStyle>
+  textStyles?: StyleProp<TextStyle>
 }
 
 const Badge = ({
@@ -32,6 +34,8 @@ const Badge = ({
   x,
   y,
   mixins,
+  containerStyles,
+  textStyles,
 }: BadgeProps) => {
   BadgeStyles.useVariants({
     variant,
@@ -46,12 +50,13 @@ const Badge = ({
       <View
         testID="varia-badge"
         style={[
-          styles.badge,
-          styles.badgeAbsolute(x, y),
           BadgeStyles.container(colorPalette),
           mixins && mixins,
+          containerStyles,
+          styles.badgeAbsolute(x, y),
+          styles.badge,
         ]}>
-        <Text style={[styles.text, BadgeStyles.text(colorPalette)]}>
+        <Text style={[BadgeStyles.text(colorPalette), textStyles, styles.text]}>
           {displayedContent}
         </Text>
       </View>
@@ -60,11 +65,12 @@ const Badge = ({
     <View
       testID="varia-badge"
       style={[
-        styles.badge,
         BadgeStyles.container(colorPalette),
         mixins && mixins,
+        containerStyles,
+        styles.badge,
       ]}>
-      <Text style={[styles.text, BadgeStyles.text(colorPalette)]}>
+      <Text style={[BadgeStyles.text(colorPalette), textStyles, styles.text]}>
         {displayedContent}
       </Text>
     </View>

package/lib/components/{ui/Button.tsx → Button.tsx}

@@ -1,4 +1,10 @@
-import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
+import {
+  StyleProp,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {ButtonStyles, ButtonDefaultVariants} from '../../theme/Button.recipe'
 import {useMemo} from 'react'
@@ -35,7 +41,8 @@ type ButtonProps = ButtonVariants & {
     size?: number
   }
   mixins?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
-  style?: StyleProp<ViewStyle>
+  containerStyles?: StyleProp<ViewStyle>
+  textStyles?: StyleProp<TextStyle>
 }
 
 const Button = ({
@@ -52,7 +59,8 @@ const Button = ({
   textAdjustment = 'singleLine',
   icon,
   mixins,
-  style,
+  containerStyles,
+  textStyles,
 }: ButtonProps) => {
   ButtonStyles.useVariants({
     size,
@@ -104,10 +112,10 @@ const Button = ({
       role="button"
       activeOpacity={activeOpacity}
       style={[
-        styles.container(flex, maxWidth),
         ButtonStyles.container(colorPalette),
         mixins && mixins,
-        style,
+        containerStyles,
+        styles.container(flex, maxWidth),
       ]}
       onPress={onPress}
       disabled={disabled || loading}>
@@ -119,7 +127,11 @@ const Button = ({
           {text && (
             <Text
               {...getTextProps()}
-              style={[styles.text, ButtonStyles.text(colorPalette)]}>
+              style={[
+                ButtonStyles.text(colorPalette),
+                textStyles,
+                styles.text,
+              ]}>
               {text}
             </Text>
           )}

package/lib/components/{ui/Checkbox.tsx → Checkbox.tsx}

@@ -1,5 +1,12 @@
 import React, {useCallback} from 'react'
-import {View, Text, Pressable} from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
+} from 'react-native'
 import {StyleSheet} from 'react-native-unistyles'
 import {UnistylesVariants} from 'react-native-unistyles'
 import {
@@ -17,6 +24,9 @@ type CheckboxProps = CheckboxVariants & {
   colorPalette?: PalettesWithNestedKeys
   checked: boolean
   onCheckedChange: (checked: boolean) => void
+  containerStyles?: StyleProp<ViewStyle>
+  checkContainerStyles?: StyleProp<ViewStyle>
+  checkboxLabelStyles?: StyleProp<TextStyle>
 }
 
 function Checkbox({
@@ -26,6 +36,9 @@ function Checkbox({
   colorPalette = 'accent',
   variant = CheckboxDefaultVariants.variant,
   size = CheckboxDefaultVariants.size,
+  containerStyles,
+  checkContainerStyles,
+  checkboxLabelStyles,
 }: CheckboxProps) {
   CheckboxStyles.useVariants({variant, size, checked})
 
@@ -52,13 +65,18 @@ function Checkbox({
   return (
     <Pressable
       testID="varia-checkbox-container"
-      style={[styles.container, CheckboxStyles.container(colorPalette)]}
+      style={[
+        CheckboxStyles.container(colorPalette),
+        containerStyles,
+        styles.container,
+      ]}
       onPress={handlePress}>
       <View
         testID="varia-check-container"
         style={[
-          styles.checkContainer,
           CheckboxStyles.checkContainer(colorPalette),
+          checkContainerStyles,
+          styles.checkContainer,
         ]}>
         {isChecked && (
           <Check testID="varia-check" size={checkSize} color={checkColor} />
@@ -66,7 +84,7 @@ function Checkbox({
       </View>
       <Text
         testID="varia-checkbox-label"
-        style={CheckboxStyles.label(colorPalette)}>
+        style={[CheckboxStyles.label(colorPalette), checkboxLabelStyles]}>
         {children}
       </Text>
     </Pressable>

package/lib/components/{ui/CircleProgress.tsx → CircleProgress.tsx}

@@ -1,5 +1,5 @@
 import {useEffect} from 'react'
-import {TextStyle, View, ViewStyle} from 'react-native'
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
 import Animated, {
   Easing,
   interpolate,
@@ -40,6 +40,8 @@ interface CircleProgressProps {
   flex?: ViewStyle['flex']
   width?: ViewStyle['width']
   height?: ViewStyle['height']
+  containerStyles?: StyleProp<ViewStyle>
+  childStyles?: StyleProp<ViewStyle>
 }
 
 const BaseCircleProgress = ({
@@ -59,6 +61,8 @@ const BaseCircleProgress = ({
   flex = 1,
   width = '100%',
   height,
+  containerStyles,
+  childStyles,
 }: CircleProgressProps) => {
   const resolvedSize = circleProgressTokens.variants.size[size]
 
@@ -116,7 +120,7 @@ const BaseCircleProgress = ({
   })
 
   return (
-    <View style={styles.container(flex, width, height)}>
+    <View style={[containerStyles, styles.container(flex, width, height)]}>
       <Svg
         width="100%"
         height="100%"
@@ -147,7 +151,7 @@ const BaseCircleProgress = ({
             animatedProps={animatedProps}></AnimatedCircle>
         </G>
       </Svg>
-      <View style={styles.childContainer}>{children}</View>
+      <View style={[childStyles, styles.childContainer]}>{children}</View>
     </View>
   )
 }

package/lib/components/{ui/Divider.tsx → Divider.tsx}

@@ -1,4 +1,4 @@
-import {View} from 'react-native'
+import {View, ViewStyle, StyleProp} from 'react-native'
 import {StyleSheet} from 'react-native-unistyles'
 import {PalettesWithNestedKeys, ThemeColors} from '../../style/varia/types'
 import {resolveColor} from '../../style/varia/utils'
@@ -9,20 +9,24 @@ const Divider = ({
   axis = 'y',
   margin = 0,
   colorPalette = 'accent',
+  containerStyles,
+  dividerStyles,
 }: {
   color?: ThemeColors
   size?: number
   axis?: 'x' | 'y'
   margin?: number
   colorPalette?: PalettesWithNestedKeys
+  containerStyles?: StyleProp<ViewStyle>
+  dividerStyles?: StyleProp<ViewStyle>
 }) => {
   return (
     <View
       testID="varia-divider-container"
-      style={styles.container(size, axis, margin)}>
+      style={[styles.container(size, axis, margin), containerStyles]}>
       <View
         testID="varia-divider"
-        style={[styles.divider(color, colorPalette, size, axis)]}
+        style={[styles.divider(color, colorPalette, size, axis), dividerStyles]}
       />
     </View>
   )

package/lib/components/{ui/Drawer.tsx → Drawer.tsx}

@@ -9,8 +9,10 @@ import React, {
 import {
   Dimensions,
   Keyboard,
+  StyleProp,
   TouchableWithoutFeedback,
   View,
+  ViewStyle,
 } from 'react-native'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import Animated, {
@@ -46,15 +48,25 @@ type DrawerVariants = UnistylesVariants<typeof DrawerStyles>
 type DrawerContextType = DrawerVariants & {
   colorPalette: PalettesWithNestedKeys
   overlayOpacity: SharedValue<number>
+  positionerStyles?: StyleProp<ViewStyle>
+  overlayStyles?: StyleProp<ViewStyle>
+  sliderStyles?: StyleProp<ViewStyle>
 }
 
 type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
   zIndex?: ZIndex
+  positionerStyles?: StyleProp<ViewStyle>
+  overlayStyles?: StyleProp<ViewStyle>
+  sliderStyles?: StyleProp<ViewStyle>
 }
 
 const DrawerContext = createContext<DrawerContextType | null>(null)
+export const DrawerGestureContext = createContext<null | ReturnType<
+  typeof Gesture.Pan
+>>(null)
+
 const useDrawer = () => {
   const ctx = useContext(DrawerContext)
   if (!ctx)
@@ -67,6 +79,9 @@ const DrawerRoot = ({
   variant = DrawerTokens.defaultProps.variant,
   zIndex,
   children,
+  positionerStyles,
+  overlayStyles,
+  sliderStyles,
 }: DrawerRootProps) => {
   DrawerStyles.useVariants({variant})
 
@@ -77,8 +92,18 @@ const DrawerRoot = ({
       variant,
       overlayOpacity,
       zIndex,
+      positionerStyles,
+      overlayStyles,
+      sliderStyles,
     }),
-    [colorPalette, variant, zIndex],
+    [
+      colorPalette,
+      variant,
+      zIndex,
+      positionerStyles,
+      overlayStyles,
+      sliderStyles,
+    ],
   )
 
   return (
@@ -95,7 +120,7 @@ const DrawerPositioner = ({
   direction: 1 | -1
   axis: 'x' | 'y'
 }) => {
-  const {variant} = useDrawer()
+  const {variant, positionerStyles} = useDrawer()
   DrawerStyles.useVariants({variant})
 
   type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
@@ -113,8 +138,9 @@ const DrawerPositioner = ({
   return (
     <HStack
       style={[
-        styles.positioner,
         DrawerStyles.positioner,
+        positionerStyles,
+        styles.positioner,
         {
           justifyContent:
             axis === 'y'
@@ -141,7 +167,7 @@ const AnimatedTouchable = Animated.createAnimatedComponent(
 const AnimatedView = Animated.createAnimatedComponent(View)
 
 const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
-  const {colorPalette, overlayOpacity, variant} = useDrawer()
+  const {colorPalette, overlayOpacity, variant, overlayStyles} = useDrawer()
   DrawerStyles.useVariants({variant})
   const visible = useSharedValue(0)
 
@@ -165,9 +191,10 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
     <AnimatedTouchable onPress={onPress}>
       <AnimatedView
         style={[
+          DrawerStyles.overlay(colorPalette),
+          overlayStyles,
           StyleSheet.absoluteFillObject,
           displayOverlayStyle,
-          DrawerStyles.overlay(colorPalette),
           {pointerEvents: 'auto'},
         ]}
       />
@@ -189,6 +216,8 @@ type InternalDrawerSliderProps = {
   ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
   zIndex?: ZIndex
+  snapThreshold?: number
+  snapThresholdMode?: 'relative' | 'absolute'
 }
 
 export type DrawerSliderProps = Omit<
@@ -214,8 +243,10 @@ const DrawerSliderInternal = ({
   externalTranslate,
   ref,
   zIndex,
+  snapThreshold = 0.5,
+  snapThresholdMode = 'relative',
 }: InternalDrawerSliderProps) => {
-  const {variant, colorPalette, overlayOpacity} = useDrawer()
+  const {variant, colorPalette, overlayOpacity, sliderStyles} = useDrawer()
 
   DrawerStyles.useVariants({variant})
 
@@ -422,14 +453,28 @@ const DrawerSliderInternal = ({
         return
       }
 
+      // const forwardsThreshold =
+      //   (points[context.value.snapPoint] +
+      //     points[context.value.snapPoint + 1]) /
+      //   2
+      // const backwardsThreshold =
+      //   (points[context.value.snapPoint] +
+      //     points[context.value.snapPoint - 1]) /
+      //   2
+
+      const current = points[context.value.snapPoint]
+      const next = points[context.value.snapPoint + 1]
+      const prev = points[context.value.snapPoint - 1]
+
       const forwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint + 1]) /
-        2
+        next != null ? current + (next - current) * snapThreshold : current
+
       const backwardsThreshold =
-        (points[context.value.snapPoint] +
-          points[context.value.snapPoint - 1]) /
-        2
+        prev != null
+          ? snapThresholdMode === 'absolute'
+            ? current + (prev - current) * (1 - snapThreshold)
+            : current + (prev - current) * snapThreshold
+          : current
 
       if (translation * direction < 0) {
         if (
@@ -467,19 +512,22 @@ const DrawerSliderInternal = ({
   })
 
   return (
-    <GestureDetector gesture={slideGesture}>
-      <AnimatedView
-        ref={viewRef}
-        onLayout={onLayout}
-        style={[
-          styles.slider(zIndex || ZINDEXES.drawer),
-          blockAnimatedStyle,
-          DrawerStyles.slider(colorPalette),
-          {pointerEvents: 'auto'},
-        ]}>
-        {children}
-      </AnimatedView>
-    </GestureDetector>
+    <DrawerGestureContext.Provider value={slideGesture}>
+      <GestureDetector gesture={slideGesture}>
+        <AnimatedView
+          ref={viewRef}
+          onLayout={onLayout}
+          style={[
+            DrawerStyles.slider(colorPalette),
+            sliderStyles,
+            styles.slider(zIndex || ZINDEXES.drawer),
+            blockAnimatedStyle,
+            {pointerEvents: 'auto'},
+          ]}>
+          {children}
+        </AnimatedView>
+      </GestureDetector>
+    </DrawerGestureContext.Provider>
   )
 }
 

package/lib/components/{ui/Field.tsx → Field.tsx}

@@ -7,7 +7,7 @@ import FieldContext, {
   FieldVariants,
   useField,
 } from './context/Field'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
 import {StyleSheet} from 'react-native-unistyles'
 
 type FieldRootProps = FieldVariants & {
@@ -15,7 +15,8 @@ type FieldRootProps = FieldVariants & {
   error?: string
   colorPalette?: PalettesWithNestedKeys
   flex?: number
-  style?: StyleProp<ViewStyle>
+  containerStyles?: StyleProp<ViewStyle>
+  labelStyles?: StyleProp<TextStyle>
 }
 
 const FieldRoot = ({
@@ -25,7 +26,8 @@ const FieldRoot = ({
   size = DefaultFieldVariants.size,
   colorPalette = 'accent',
   flex = 0,
-  style,
+  containerStyles,
+  labelStyles,
 }: FieldRootProps) => {
   FieldStyles.useVariants({size})
 
@@ -34,6 +36,7 @@ const FieldRoot = ({
     variant,
     size,
     colorPalette,
+    labelStyles,
   }
 
   FieldStyles.useVariants({variant, size})
@@ -42,9 +45,9 @@ const FieldRoot = ({
     <View
       testID="varia-field-root"
       style={[
-        styles.root(flex),
         FieldStyles.root(colorPalette),
-        style && style,
+        containerStyles && containerStyles,
+        styles.root(flex),
       ]}>
       <FieldContext.Provider value={contextValue}>
         {children}
@@ -65,6 +68,7 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
     size,
     variant,
     colorPalette = 'accent',
+    labelStyles,
   } = {
     ...useField(),
     ...props,
@@ -73,7 +77,9 @@ const FieldLabel = ({children, ...props}: FieldLabelProps) => {
   FieldStyles.useVariants({variant, size})
 
   return (
-    <Text testID="varia-field-label" style={FieldStyles.label(colorPalette)}>
+    <Text
+      testID="varia-field-label"
+      style={[FieldStyles.label(colorPalette), labelStyles]}>
       {children}
     </Text>
   )