@cdx-ui/components 0.0.1-alpha.2 → 0.0.1-alpha.21

package/src/components/Button/index.tsx

@@ -11,10 +11,12 @@ import {
 } from 'react-native';
 import { createButton, type IButtonProps } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import {
   type ButtonGroupVariantProps,
   type ButtonVariantProps,
   buttonGroupVariants,
+  buttonIconVariants,
   buttonRootVariants,
   buttonSpinnerVariants,
   buttonTextVariants,
@@ -46,9 +48,10 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'solid',
-      color = 'primary',
-      size = 'md',
+      variant = 'strong',
+      color = 'action',
+      size = 'default',
+      mode = 'light',
       fullWidth = false,
       className,
       children,
@@ -58,7 +61,7 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
     ref,
   ) => {
     const computedClassName = cn(
-      buttonRootVariants({ variant, color, size, fullWidth }),
+      buttonRootVariants({ variant, color, size, mode, fullWidth }),
       className,
     );
 
@@ -67,7 +70,7 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
         ref={ref}
         className={computedClassName}
         style={style}
-        context={{ variant, color, size, fullWidth }}
+        context={{ variant, color, size, mode, fullWidth }}
         {...props}
       >
         {children}
@@ -89,9 +92,9 @@ export interface ButtonTextProps extends TextProps {
 
 const ButtonLabel = forwardRef<Text, ButtonTextProps>(
   ({ className, children, style, ...props }, ref) => {
-    const { variant, color, size } = useButtonStyleContext();
+    const { variant, color, size, mode } = useButtonStyleContext();
 
-    const computedClassName = cn(buttonTextVariants({ variant, color, size }), className);
+    const computedClassName = cn(buttonTextVariants({ variant, color, size, mode }), className);
 
     return (
       <ButtonPrimitive.Text ref={ref} className={computedClassName} style={style} {...props}>
@@ -135,13 +138,15 @@ const ButtonGroup = forwardRef<View, ButtonGroupProps>(
 
 ButtonGroup.displayName = 'Button.Group';
 
-export interface ButtonIconProps extends ViewProps {
-  className?: string;
-}
+export interface ButtonIconProps extends Omit<IconProps, 'children'> {}
 
-const ButtonIcon = forwardRef<View, ButtonIconProps>(({ className, style, ...props }, ref) => {
-  return <ButtonPrimitive.Icon ref={ref} className={className} style={style} {...props} />;
-});
+const ButtonIcon = ({ className, style, as, ...props }: ButtonIconProps) => {
+  const { size } = useButtonStyleContext();
+
+  const computedClassName = cn(buttonIconVariants({ size }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
 
 ButtonIcon.displayName = 'Button.Icon';
 
@@ -152,8 +157,11 @@ export interface ButtonSpinnerProps extends ActivityIndicatorProps {
 
 const ButtonSpinner = forwardRef<ActivityIndicator, ButtonSpinnerProps>(
   ({ className, colorClassName, style, ...props }, ref) => {
-    const { variant, color } = useButtonStyleContext();
-    const computedColorClassName = cn(buttonSpinnerVariants({ variant, color }), colorClassName);
+    const { variant, color, mode } = useButtonStyleContext();
+    const computedColorClassName = cn(
+      buttonSpinnerVariants({ variant, color, mode }),
+      colorClassName,
+    );
 
     return (
       <ButtonPrimitive.Spinner