react-native-varia 0.5.0 → 0.5.2

package/lib/components/Accordion.tsx

@@ -4,8 +4,8 @@ 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 {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import {AccordionStyles, AccordionDefaultVariants} from '../../theme/Accordion'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../../style/varia/types'
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 type AccordionVariants = UnistylesVariants<typeof AccordionStyles>

package/lib/components/Badge.tsx

@@ -1,9 +1,9 @@
 import {Text, View, ViewStyle, StyleProp} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {BadgeStyles, BadgeDefaultVariants} from '../theme/Badge.recipe'
+import {BadgeStyles, BadgeDefaultVariants} from '../../theme/Badge.recipe'
 import {ReactNode} from 'react'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {HStack} from '../patterns'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {HStack} from '../../patterns'
 
 type VeritcalPosition = 'top' | 'bottom'
 type HorizontalPosition = 'left' | 'right'

package/lib/components/Button.tsx

@@ -1,11 +1,11 @@
 import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {ButtonStyles, ButtonDefaultVariants} from '../theme/Button.recipe'
+import {ButtonStyles, ButtonDefaultVariants} from '../../theme/Button.recipe'
 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'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {getVariantValue} from '../../style/varia/utils'
 
 type TextAdjustment = 'singleLine' | 'multiline' | 'adjustToFit'
 

package/lib/components/Checkbox.tsx

@@ -2,10 +2,13 @@ import React, {useCallback} from 'react'
 import {View, Text, Pressable} from 'react-native'
 import {StyleSheet} from 'react-native-unistyles'
 import {UnistylesVariants} from 'react-native-unistyles'
-import {CheckboxDefaultVariants, CheckboxStyles} from '../theme/Checkbox.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+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'
+import {getVariantValue} from '../../style/varia/utils'
 
 type CheckboxVariants = UnistylesVariants<typeof CheckboxStyles>
 

package/lib/components/CircleProgress.tsx

@@ -9,16 +9,15 @@ import Animated, {
   Extrapolation,
 } from 'react-native-reanimated'
 import Svg, {Circle, G} from 'react-native-svg'
-import {circleProgressTokens} from '../theme/CircleProgress.recipe'
+import {circleProgressTokens} from '../../theme/CircleProgress.recipe'
 import {withUnistyles, StyleSheet} from 'react-native-unistyles'
-import {resolveColor} from '../style/varia/utils'
+import {resolveColor} from '../../style/varia/utils'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   progressDirection,
   rotationDirection,
-  ThemeType,
-} from '../style/varia/types'
+} from '../../style/varia/types'
 import {SharedValue} from 'react-native-reanimated'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)

package/lib/components/Divider.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native'
 import {StyleSheet} from 'react-native-unistyles'
-import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
-import {resolveColor} from '../style/varia/utils'
+import {PalettesWithNestedKeys, ThemeColors} from '../../style/varia/types'
+import {resolveColor} from '../../style/varia/utils'
 
 const Divider = ({
   color,

package/lib/components/Drawer.tsx

@@ -24,15 +24,15 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
-import {DrawerTokens, DrawerStyles} from '../theme/Drawer.recipe'
-import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
+import {DrawerTokens, DrawerStyles} from '../../theme/Drawer.recipe'
+import {PalettesWithNestedKeys, ZIndex} from '../../style/varia/types'
 import {
   StyleSheet,
   UnistylesRuntime,
   UnistylesVariants,
 } from 'react-native-unistyles'
-import {HStack} from '../patterns'
-import {ZINDEXES} from '../style/varia/constants'
+import {HStack} from '../../patterns'
+import {ZINDEXES} from '../../style/varia/constants'
 
 export type DrawerRef = {
   expand: () => void | null

package/lib/components/Field.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Text from './Text'
-import {DefaultFieldVariants, FieldStyles} from '../theme/Field.recipe'
-import {Flex, PalettesWithNestedKeys} from '../style/varia/types'
+import {DefaultFieldVariants, FieldStyles} from '../../theme/Field.recipe'
+import {Flex, PalettesWithNestedKeys} from '../../style/varia/types'
 import FieldContext, {
   FieldContextType,
   FieldVariants,

package/lib/components/FloatingAction.tsx

@@ -8,14 +8,14 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import Plus from '../icons/Plus'
+import Plus from '../../icons/Plus'
 import {
   FloatingActionDefaultVariants,
   FloatingActionStyles,
-} from '../theme/FloatingAction'
+} from '../../theme/FloatingAction'
 import {ViewStyle} from 'react-native'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {getVariantValue} from '../style/varia/utils'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {getVariantValue} from '../../style/varia/utils'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 

package/lib/components/GradientBackground.tsx

@@ -1,13 +1,13 @@
 import {View, StyleProp, ViewStyle} from 'react-native'
 import Svg, {Defs, LinearGradient, Stop, Rect} from 'react-native-svg'
 import {withUnistyles} from 'react-native-unistyles'
-import {gradientBackgroundTokens} from '../theme/GradientBackground.recipe'
+import {gradientBackgroundTokens} from '../../theme/GradientBackground.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
-} from '../style/varia/types'
-import {resolveColor} from '../style/varia/utils'
+} from '../../style/varia/types'
+import {resolveColor} from '../../style/varia/utils'
 import {StyleSheet} from 'react-native-unistyles'
 
 interface GradientBackgroundProps {

package/lib/components/GradientText.tsx

@@ -11,15 +11,15 @@ import {
   withUnistyles,
   StyleSheet,
 } from 'react-native-unistyles'
-import {gradientTextTokens} from '../theme/GradientText.recipe'
+import {gradientTextTokens} from '../../theme/GradientText.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeType,
-} from '../style/varia/types'
-import {getVariantValue, resolveColor} from '../style/varia/utils'
-import {ThemeColors} from '../style/varia/types'
-import {TextStyles} from '../theme/Text.recipe'
+} from '../../style/varia/types'
+import {getVariantValue, resolveColor} from '../../style/varia/utils'
+import {ThemeColors} from '../../style/varia/types'
+import {TextStyles} from '../../theme/Text.recipe'
 
 type AllTextVariants = UnistylesVariants<typeof TextStyles>
 type TextVariantsWithoutVariant = Omit<AllTextVariants, 'variant'>

package/lib/components/IconWrapper.tsx

@@ -9,13 +9,13 @@ import {
 import Svg from 'react-native-svg'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {StyleSheet, withUnistyles} from 'react-native-unistyles'
-import {IconTokens} from '../theme/IconWrapper.recipe'
+import {IconTokens} from '../../theme/IconWrapper.recipe'
 import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
-} from '../style/varia/types'
-import {resolveColor} from '../style/varia/utils'
+} from '../../style/varia/types'
+import {resolveColor} from '../../style/varia/utils'
 
 interface SVGChildProps {
   color?: string

package/lib/components/Input.tsx

@@ -9,17 +9,17 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {InputStyles, InputDefaultVariants} from '../theme/Input.recipe'
+import {InputStyles, InputDefaultVariants} from '../../theme/Input.recipe'
 import {
   AlignSelf,
   Flex,
   MaxWidth,
   PalettesWithNestedKeys,
   StackDirection,
-} from '../style/varia/types'
+} from '../../style/varia/types'
 import {useState} from 'react'
 import {IconWrapperProps} from './IconWrapper'
-import {getVariantValue} from '../style/varia/utils'
+import {getVariantValue} from '../../style/varia/utils'
 
 type InputVariants = UnistylesVariants<typeof InputStyles>
 

package/lib/components/Link.tsx

@@ -8,8 +8,8 @@ import {
 } from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
-import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
-import {DefaultTextVariants, TextStyles} from '../theme/Text.recipe'
+import {PalettesWithNestedKeys, ThemeColors} from '../../style/varia/types'
+import {DefaultTextVariants, TextStyles} from '../../theme/Text.recipe'
 type TextVariants = UnistylesVariants<typeof TextStyles>
 type LinkProps = TextVariants & {
   colorPalette?: PalettesWithNestedKeys

package/lib/components/Modal.tsx

@@ -5,9 +5,9 @@ import {Portal} from '@gorhom/portal'
 import Svg, {Path} from 'react-native-svg'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import Text from './Text'
-import {ModalStyles, ModalTokens} from '../theme/Modal.recipe'
-import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
-import {ZINDEXES} from '../style/varia/constants'
+import {ModalStyles, ModalTokens} from '../../theme/Modal.recipe'
+import {PalettesWithNestedKeys, ZIndex} from '../../style/varia/types'
+import {ZINDEXES} from '../../style/varia/constants'
 
 const AnimatedView = Animated.createAnimatedComponent(View)
 type ModalVariants = UnistylesVariants<typeof ModalStyles>

package/lib/components/NumberInput.tsx

@@ -4,15 +4,15 @@ import {UnistylesVariants, StyleSheet} from 'react-native-unistyles'
 import {
   NumberInputStyles,
   NumberInputDefaultVariants,
-} from '../theme/NumberInput.recipe'
+} from '../../theme/NumberInput.recipe'
 import {
   AlignSelf,
   PalettesWithNestedKeys,
   StackDirection,
-} from '../style/varia/types'
-import Plus from '../icons/Plus'
-import Minus from '../icons/Minus'
-import {computeFlexSync, getVariantValue} from '../style/varia/utils'
+} from '../../style/varia/types'
+import Plus from '../../icons/Plus'
+import Minus from '../../icons/Minus'
+import {computeFlexSync, getVariantValue} from '../../style/varia/utils'
 
 type NumberInputVariants = UnistylesVariants<typeof NumberInputStyles>
 

package/lib/components/RadioGroup.tsx

@@ -4,7 +4,7 @@ import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {
   RadioGroupStyles,
   RadioGroupDefaultVariants,
-} from '../theme/RadioGroup.recipe'
+} from '../../theme/RadioGroup.recipe'
 import {
   AlignItems,
   AlignSelf,
@@ -13,7 +13,7 @@ import {
   JustifyContent,
   PalettesWithNestedKeys,
   StackDirection,
-} from '../style/varia/types'
+} from '../../style/varia/types'
 
 type RadioGroupVariants = UnistylesVariants<typeof RadioGroupStyles>
 

package/lib/components/ReText.tsx

@@ -7,9 +7,9 @@ import {
   PalettesWithNestedKeys,
   TextSemanticSizes,
   ThemeColors,
-} from '../style/varia/types'
-import {TextStyles, DefaultTextVariants} from '../theme/Text.recipe'
-import {extractThemeColor} from '../style/varia/utils'
+} from '../../style/varia/types'
+import {TextStyles, DefaultTextVariants} from '../../theme/Text.recipe'
+import {extractThemeColor} from '../../style/varia/utils'
 
 type ReTextVariants = UnistylesVariants<typeof TextStyles>
 

package/lib/components/Select.tsx

@@ -17,16 +17,16 @@ import {UnistylesVariants} from 'react-native-unistyles'
 import {Portal} from '@gorhom/portal'
 import Text from './Text'
 import {StyleSheet} from 'react-native-unistyles'
-import {SelectStyles, SelectDefaultVariants} from '../theme/Select.recipe'
+import {SelectStyles, SelectDefaultVariants} from '../../theme/Select.recipe'
 import {
   AlignSelf,
   Flex,
   PalettesWithNestedKeys,
   StackDirection,
   ZIndex,
-} from '../style/varia/types'
-import {computeFlexSync} from '../style/varia/utils'
-import {ZINDEXES} from '../style/varia/constants'
+} from '../../style/varia/types'
+import {computeFlexSync} from '../../style/varia/utils'
+import {ZINDEXES} from '../../style/varia/constants'
 
 type SelectVariants = UnistylesVariants<typeof SelectStyles>
 

package/lib/components/Slider.tsx

@@ -7,9 +7,9 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 import {runOnJS} from 'react-native-worklets'
-import {SliderStyles, SliderDefaultVariants} from '../theme/Slider.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
-import {getCompoundVariantValue} from '../style/varia/utils'
+import {SliderStyles, SliderDefaultVariants} from '../../theme/Slider.recipe'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
+import {getCompoundVariantValue} from '../../style/varia/utils'
 
 function throttle<T extends (...args: any[]) => any>(
   func: T,

package/lib/components/Slideshow.tsx

@@ -10,8 +10,8 @@ import Animated, {
 import {scheduleOnRN} from 'react-native-worklets'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
-import {SlideshowStyles, SlideshowTokens} from '../theme/Slideshow.recipe'
-import {PalettesWithNestedKeys} from '../style/varia/types'
+import {SlideshowStyles, SlideshowTokens} from '../../theme/Slideshow.recipe'
+import {PalettesWithNestedKeys} from '../../style/varia/types'
 
 export type SlideshowRef = {
   handleNext: () => void | null

package/lib/components/Spinner.tsx

@@ -9,10 +9,10 @@ import {
   NestedColorsType,
   PalettesWithNestedKeys,
   ThemeColors,
-} from '../style/varia/types'
-import {SpinnerTokens} from '../theme/Spinner.recipe'
-import {getVariantValue, resolveColor} from '../style/varia/utils'
-import {SpinnerStyles} from '../theme/Spinner.recipe'
+} from '../../style/varia/types'
+import {SpinnerTokens} from '../../theme/Spinner.recipe'
+import {getVariantValue, resolveColor} from '../../style/varia/utils'
+import {SpinnerStyles} from '../../theme/Spinner.recipe'
 
 type SpinnerVariants = UnistylesVariants<typeof SpinnerStyles>
 export type SpinnerProps = SpinnerVariants &

package/lib/components/Switch.tsx

@@ -8,9 +8,9 @@ import Animated, {
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
 import {useAnimatedVariantColor} from 'react-native-unistyles/reanimated'
 import {ReactNode, useLayoutEffect, useRef} from 'react'
-import {SwitchTokens, SwitchStyles} from '../theme/Switch.recipe'
-import {AlignSelf, Flex, PalettesWithNestedKeys} from '../style/varia/types'
-import {getVariantValue} from '../style/varia/utils'
+import {SwitchTokens, SwitchStyles} from '../../theme/Switch.recipe'
+import {AlignSelf, Flex, PalettesWithNestedKeys} from '../../style/varia/types'
+import {getVariantValue} from '../../style/varia/utils'
 
 const animations = {
   withSpring,

package/lib/components/Text.tsx

@@ -1,9 +1,9 @@
 import {Text as RNText, TextProps as RNTextProps} from 'react-native'
 import type {StyleProp, TextStyle} from 'react-native'
 import {StyleSheet, UnistylesVariants} from 'react-native-unistyles'
-import {DefaultTextVariants, TextStyles} from '../theme/Text.recipe'
-import {PalettesWithNestedKeys, ThemeColors} from '../style/varia/types'
-import {extractThemeColor} from '../style/varia/utils'
+import {DefaultTextVariants, TextStyles} from '../../theme/Text.recipe'
+import {PalettesWithNestedKeys, ThemeColors} from '../../style/varia/types'
+import {extractThemeColor} from '../../style/varia/utils'
 
 type TextVariants = UnistylesVariants<typeof TextStyles>
 type TextProps = TextVariants &

package/lib/components/Toast.tsx

@@ -9,12 +9,12 @@ import Animated, {
   Easing,
 } from 'react-native-reanimated'
 import {scheduleOnRN, scheduleOnUI} from 'react-native-worklets'
-import {ToastStyles, ToastDefaultVariants} from '../theme/Toast.recipe'
+import {ToastStyles, ToastDefaultVariants} from '../../theme/Toast.recipe'
 import {UnistylesVariants} from 'react-native-unistyles'
-import {PalettesWithNestedKeys, ZIndex} from '../style/varia/types'
+import {PalettesWithNestedKeys, ZIndex} from '../../style/varia/types'
 import Text from './Text'
-import {AnimatedHStack, VStack} from '../patterns'
-import {ZINDEXES} from '../style/varia/constants'
+import {AnimatedHStack, VStack} from '../../patterns'
+import {ZINDEXES} from '../../style/varia/constants'
 
 type ToastVariants = UnistylesVariants<typeof ToastStyles>
 

package/lib/components/context/Field.tsx

@@ -1,7 +1,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 {FieldStyles} from '../../../theme/Field.recipe'
+import {PalettesWithNestedKeys} from '../../../style/varia/types'
 
 export type FieldVariants = UnistylesVariants<typeof FieldStyles>
 

package/lib/theme/Accordion.recipe.tsx

@@ -0,0 +1,184 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const AccordionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+export const AccordionStyles = StyleSheet.create(theme => ({
+  itemContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: 12,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+          borderColor: 'transparent',
+          borderWidth: 1,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+          borderWidth: 0,
+        },
+      },
+      size: {
+        sm: {
+          minHeight: theme.sizes[9],
+          paddingHorizontal: theme.sizes['3.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        md: {
+          minHeight: theme.sizes[10],
+          paddingHorizontal: theme.sizes[4],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        lg: {
+          minHeight: theme.sizes[11],
+          paddingHorizontal: theme.sizes['4.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        xl: {
+          minHeight: theme.sizes[12],
+          paddingHorizontal: theme.sizes[5],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing['2.5'],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          borderColor: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        disabled: true,
+        styles: {},
+      },
+      {
+        variant: 'ghost',
+        disabled: true,
+        styles: {
+          backgroundColor: 'transparent',
+        },
+      },
+      {
+        variant: 'subtle',
+        disabled: true,
+        styles: {
+          backgroundColor: theme.colors.bg.disabled,
+        },
+      },
+    ],
+  }),
+  header: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+        },
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[9],
+        },
+        md: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[10],
+        },
+        lg: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[11],
+        },
+        xl: {
+          paddingHorizontal: theme.spacing[3],
+          height: theme.sizes[12],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+  headerTitle: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: theme.fontSizes.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.md,
+        },
+        xl: {
+          fontSize: theme.fontSizes.lg,
+        },
+        nosize: {
+          fontSize: theme.fontSizes.md,
+        },
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          color: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        active: true,
+        styles: {},
+      },
+      {
+        variant: 'subtle',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+}))

package/lib/theme/FloatingAction.recipe.tsx

@@ -0,0 +1,117 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const FloatingActionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+
+export const FloatingActionStyles = StyleSheet.create(theme => ({
+  buttonContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  button: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+  buttonIcon: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        ghost: {
+          color: theme.colors.gray.text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  item: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/Toast.recipe.tsx

@@ -76,7 +76,7 @@ export const ToastStyles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         solid: {
-          color: theme.colors[colorPalette].fg,
+          color: theme.colors.fg.default,
         },
         subtle: {
           color: theme.colors.fg.default,
@@ -87,15 +87,12 @@ export const ToastStyles = StyleSheet.create(theme => ({
       },
       size: {
         sm: {
-          // ...textStyle.xs,
           fontSize: theme.fontSizes.xs,
         },
         md: {
-          // ...textStyle.xs,
           fontSize: theme.fontSizes.xs,
         },
         lg: {
-          // ...textStyle.sm,
           fontSize: theme.fontSizes.sm,
         },
       },

package/package.json

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

package/lib/components/Icon.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { IconWrapperProps, ThemedIcon } from '../components/IconWrapper';
-
-const IconName = ({color, ...props}: Omit<IconWrapperProps, 'children' | 'colors'>) => {
-  return (
-    <ThemedIcon {...props} color={color}>
-      <>
-      {/* Icon content */}
-      </>
-    </ThemedIcon>
-  );
-};
-export default IconName;