react-native-varia 0.2.4 → 0.3.0

package/lib/components/Button.tsx

@@ -5,6 +5,7 @@ import {useMemo} from 'react'
 import {IconWrapperProps} from './IconWrapper'
 import Spinner, {SpinnerProps} from './Spinner'
 import {PalettesWithNestedKeys} from '../style/varia/types'
+import { getVariantValue } from '../style/varia/utils'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 
@@ -56,6 +57,7 @@ const Button = ({
     variant,
     disabled,
   })
+    console.log("🚀 ~ size:", size)
 
   const getTextProps = useMemo(
     () => (): TextAdjustmentProps => {
@@ -76,6 +78,8 @@ const Button = ({
     [textAdjustment],
   )
 
+  const resolvedColor = getVariantValue(ButtonStyles.text(colorPalette), 'variant', variant, 'color')
+
   const IconComponent = icon?.component
   const IconRendered = IconComponent ? (
     <IconComponent
@@ -84,7 +88,7 @@ const Button = ({
         scale: icon.scale,
         colorPalette,
         size: icon.size,
-        color: ButtonStyles.text(colorPalette).color,
+        color: resolvedColor,
       }}
     />
   ) : null
@@ -102,7 +106,7 @@ const Button = ({
       {loading ? (
         <Spinner
           size={size as SpinnerProps['size']}
-          color={ButtonStyles.text(colorPalette).color}
+          color={resolvedColor}
         />
       ) : (
         <>

package/lib/components/Checkbox.tsx

@@ -4,6 +4,7 @@ import {UnistylesVariants} from 'react-native-unistyles'
 import {CheckboxDefaultVariants, CheckboxStyles} from '../theme/Checkbox.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import Svg, {Line} from 'react-native-svg'
+import { getVariantValue } from '../style/varia/utils'
 
 type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
 
@@ -31,12 +32,16 @@ function Checkbox({
 
   const isChecked = checked
 
-  const checkStyle = CheckboxStyles.check(colorPalette) as {
-    width: string
-    color: string
-  }
-  const checkSize = checkStyle.width
-  const checkColor = checkStyle.color
+  // const checkStyle = CheckboxStyles.check(colorPalette) as {
+  //   width: string
+  //   color: string
+  // }
+  // const checkSize = checkStyle.width
+  // const checkColor = checkStyle.color
+
+  const checkColor = getVariantValue(CheckboxStyles.check(colorPalette), 'variant', variant, 'color')
+  const checkSize = getVariantValue(CheckboxStyles.check(colorPalette), 'size', size, 'width')
+  
 
   return (
     <Pressable
@@ -65,7 +70,7 @@ const styles = StyleSheet.create({
   },
 })
 
-export {Checkbox}
+export default Checkbox
 
 const Check = ({size, color}: {size: string; color: string}) => {
   return (

package/lib/components/Divider.tsx

@@ -26,17 +26,18 @@ const Divider = ({
 const styles = StyleSheet.create(theme => ({
   container: (size, axis, margin) => ({
     flex: 1,
+    alignSelf: 'stretch',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    maxHeight: axis === 'y' ? size : '100%',
-    maxWidth: axis === 'x' ? size : '100%',
+    maxWidth: axis === 'y' ? size : '100%',
+    maxHeight: axis === 'x' ? size : '100%',
     marginHorizontal: axis === 'x' ? margin : 0,
     marginVertical: axis === 'y' ? margin : 0,
   }),
   divider: (color, colorPalette, size, axis) => ({
-    width: axis === 'x' ? size : '100%',
-    height: axis === 'y' ? size : '100%',
+    width: axis === 'y' ? size : '100%',
+    height: axis === 'x' ? size : '100%',
     backgroundColor: color
       ? resolveColor(color, theme.colors, colorPalette)
       : theme.colors.fg.default,

package/lib/components/Drawer.tsx

@@ -16,11 +16,8 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
-import {runOnUI, scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
-import {
-  SlidingDrawerTokens,
-  SlidingDrawerStyles,
-} from '../theme/SlidingDrawer.recipe'
+import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
+import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
 import {PalettesWithNestedKeys} from '../style/varia/types'
 import {
   StyleSheet,
@@ -33,21 +30,21 @@ import {HStack} from '../patterns'
  * Types
  * ----------------------------*/
 
-export type SlidingDrawerRef = {
+export type DrawerRef = {
   expand: () => void | null
   collapse: () => void | null
   snapTo: (point: number) => void | null
   isCollapsed: () => boolean
 }
 
-type SlidingDrawerVariants = UnistylesVariants<typeof SlidingDrawerStyles>
+type DrawerVariants = UnistylesVariants<typeof DrawerStyles>
 
-type DrawerContextType = SlidingDrawerVariants & {
+type DrawerContextType = DrawerVariants & {
   colorPalette: PalettesWithNestedKeys
   overlayOpacity: SharedValue<number>
 }
 
-type DrawerRootProps = SlidingDrawerVariants & {
+type DrawerRootProps = DrawerVariants & {
   colorPalette?: PalettesWithNestedKeys
   children?: React.ReactNode
 }
@@ -70,10 +67,10 @@ const useDrawer = () => {
 
 const DrawerRoot = ({
   colorPalette = 'accent',
-  variant = SlidingDrawerTokens.defaultProps.variant,
+  variant = DrawerTokens.defaultProps.variant,
   children,
 }: DrawerRootProps) => {
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   const overlayOpacity = useSharedValue(0)
   const value = useMemo(
@@ -103,7 +100,7 @@ const DrawerPositioner = ({
   axis: 'x' | 'y'
 }) => {
   const {variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   type WithDirection = {direction?: 1 | -1; axis?: 'x' | 'y'}
 
@@ -121,7 +118,7 @@ const DrawerPositioner = ({
     <HStack
       style={[
         styles.positioner,
-        SlidingDrawerStyles.positioner,
+        DrawerStyles.positioner,
         {
           justifyContent:
             axis === 'y'
@@ -151,7 +148,7 @@ const AnimatedTouchable = Animated.createAnimatedComponent(
 
 const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
   const {colorPalette, overlayOpacity, variant} = useDrawer()
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
   const visible = useSharedValue(0)
 
   useAnimatedReaction(
@@ -176,7 +173,7 @@ const DrawerOverlay = ({onPress}: {onPress?: () => void}) => {
         style={[
           StyleSheet.absoluteFillObject,
           displayOverlayStyle,
-          SlidingDrawerStyles.overlay(colorPalette),
+          DrawerStyles.overlay(colorPalette),
         ]}
       />
     </AnimatedTouchable>
@@ -192,13 +189,13 @@ type InternalDrawerSliderProps = {
   direction: 1 | -1
   lockAtEdges?: boolean
   snapPoints?: number[] | ('hidden' | 'content')[]
-  animation?: keyof typeof SlidingDrawerTokens.variants.animation
+  animation?: keyof typeof DrawerTokens.variants.animation
   onExpand?: () => void
   onCollapse?: () => void
   onSnap?: (point: number) => void
   allowGestures?: boolean
   children?: React.ReactNode
-  ref?: React.RefObject<SlidingDrawerRef | null>
+  ref?: React.RefObject<DrawerRef | null>
   externalTranslate?: SharedValue<number>
 }
 
@@ -216,7 +213,7 @@ const DrawerSliderInternal = ({
   direction,
   lockAtEdges = false,
   snapPoints = ['hidden', 'content'],
-  animation = SlidingDrawerTokens.defaultProps.animation,
+  animation = DrawerTokens.defaultProps.animation,
   onExpand,
   onCollapse,
   onSnap,
@@ -227,14 +224,14 @@ const DrawerSliderInternal = ({
 }: InternalDrawerSliderProps) => {
   const {variant, colorPalette, overlayOpacity} = useDrawer()
 
-  SlidingDrawerStyles.useVariants({variant})
+  DrawerStyles.useVariants({variant})
 
   const screenHeight =
     UnistylesRuntime.screen.height - UnistylesRuntime.insets.top
   const screenWidth = UnistylesRuntime.screen.width
 
   const animations = {withSpring, withTiming}
-  const animationVariant = SlidingDrawerTokens.variants.animation[animation]
+  const animationVariant = DrawerTokens.variants.animation[animation]
   const VELOCITY_THRESHOLD = 2000
 
   const viewRef = useAnimatedRef<Animated.View>()
@@ -461,7 +458,7 @@ const DrawerSliderInternal = ({
         style={[
           styles.slider,
           blockAnimatedStyle,
-          SlidingDrawerStyles.slider(colorPalette),
+          DrawerStyles.slider(colorPalette),
         ]}>
         {children}
       </Animated.View>

package/lib/components/GradientText.tsx

@@ -6,17 +6,21 @@ import Svg, {
   Text,
   type NumberProp,
 } from 'react-native-svg'
-import {withUnistyles} from 'react-native-unistyles'
+import {UnistylesVariants, withUnistyles} from 'react-native-unistyles'
 import {gradientTextTokens} from '../theme/GradientText.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeType,
 } from '../style/varia/types'
-import {resolveColor, resolveFontSize} from '../style/varia/utils'
+import {getVariantValue, resolveColor, resolveFontSize} from '../style/varia/utils'
 import {ThemeColors} from '../style/varia/types'
+import { TextStyles } from '../theme/Text.recipe'
 
-interface GradientTextProps {
+type AllTextVariants = UnistylesVariants<typeof TextStyles>
+type TextVariantsWithoutVariant = Omit<AllTextVariants, "variant">;
+
+type GradientTextProps = TextVariantsWithoutVariant & {
   colorPalette: PalettesWithNestedKeys
   variant?: keyof typeof gradientTextTokens.variants.variant
   direction?: keyof typeof gradientTextTokens.variants.direction
@@ -26,7 +30,7 @@ interface GradientTextProps {
   fontSizes: ThemeType['fontSizes']
   fontSize?: TextStyle['fontSize']
   children?: React.ReactNode
-  size?: keyof typeof gradientTextTokens.variants.size
+  // size?: keyof typeof gradientTextTokens.variants.size
 }
 
 const BaseGradientText = ({
@@ -41,6 +45,10 @@ const BaseGradientText = ({
   children,
   size = gradientTextTokens.defaultProps.size,
 }: GradientTextProps) => {
+  TextStyles.useVariants({
+    size
+  })
+  
   const colorValue = gradientTextTokens.variants.variant[variant]
 
   const resolvedStartColor = resolveColor(
@@ -54,8 +62,12 @@ const BaseGradientText = ({
     colorPalette,
   )
 
-  const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
-  const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+  // const fontSizeValue = gradientTextTokens.variants.size[size].fontSize
+  // const resolvedFontSize = fontSize || resolveFontSize(fontSizeValue, fontSizes)
+
+  const resolvedFontSize = fontSize || getVariantValue(TextStyles.text(colorPalette), 'size', size, 'fontSize')
+  const resolvedFontWeight = getVariantValue(TextStyles.text(colorPalette), 'size', size, 'fontWeight') || 400
+  
 
   const directionVariant = gradientTextTokens.variants.direction[direction]
 
@@ -77,10 +89,11 @@ const BaseGradientText = ({
           <Text
             fill="url(#gradient)"
             fontSize={resolvedFontSize}
-            fontWeight={
-              (gradientTextTokens.variants.size[size] as {fontWeight?: number})
-                .fontWeight ?? 400
-            }
+            // fontWeight={
+            //   (gradientTextTokens.variants.size[size] as {fontWeight?: number})
+            //     .fontWeight ?? 400
+            // }
+            fontWeight={resolvedFontWeight}
             x="50%"
             y={resolvedFontSize}
             textAnchor="middle">

package/lib/components/Input.tsx

@@ -190,6 +190,7 @@ const styles = StyleSheet.create({
     textAlignVertical,
     maxWidth,
     alignSelf,
+    outline: 'none'
   }),
   icon: (iconPosition, paddingHorizontal, textAlignVertical) => ({
     position: 'absolute',

package/lib/components/Modal.tsx

@@ -94,7 +94,7 @@ const ModalOverlay = ({children, ...props}: ModalOverlayProps) => {
       entering={ModalTokens.animations.variants[animation]?.enteringOverlay}
       exiting={ModalTokens.animations.variants[animation]?.exitingOverlay}>
       <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
-        <View style={RNStyleSheet.absoluteFillObject} />
+        <View style={StyleSheet.absoluteFillObject} />
       </TouchableWithoutFeedback>
       {children}
     </Animated.View>
@@ -151,14 +151,7 @@ type ModalBodyProps = Omit<ModalVariants, 'variant'> & {
   customStyle?: any
 }
 
-const ModalBody = ({children, ...props}: ModalBodyProps) => {
-  const context = useModalContext()
-  const {colorPalette = 'accent', variant} = {
-    ...context,
-    ...props,
-  }
-
-  ModalStyles.useVariants({variant})
+const ModalBody = ({children}: ModalBodyProps) => {
   return <View>{children}</View>
 }
 
@@ -243,7 +236,7 @@ const styles = StyleSheet.create(theme => {
   }
 })
 
-export const Modal = Object.assign(ModalRoot, {
+const Modal = Object.assign(ModalRoot, {
   Root: ModalRoot,
   Overlay: ModalOverlay,
   Content: ModalContent,
@@ -253,3 +246,4 @@ export const Modal = Object.assign(ModalRoot, {
   CloseTrigger: ModalCloseTrigger,
   CloseButton: CloseButton,
 })
+export default Modal

package/lib/components/RadioGroup.tsx

@@ -225,9 +225,11 @@ const styles = StyleSheet.create({
   },
 })
 
-export const RadioGroup = {
+const RadioGroup = {
   Root,
   Item,
   Indicator,
   ItemText,
 }
+
+export default RadioGroup