@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.31

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}>
@@ -103,6 +106,7 @@ const ButtonLabel = forwardRef<Text, ButtonTextProps>(
 
 ButtonLabel.displayName = 'Button.Label';
 
+// TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
   className?: string;
   children: ReactElement | ReactElement[];
@@ -135,13 +139,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 +158,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

package/src/components/Button/styles.ts

@@ -1,5 +1,40 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BORDER_DEFAULT,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_SM,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+import {
+  sharedFilledForegroundTextCompounds,
+  sharedFilledSurfaceCompounds,
+  sharedGhostSurfaceCompounds,
+  sharedOutlineGhostForegroundTextCompounds,
+} from './buttonSharedVariants';
+
+const buttonStrongSurfaceCompounds = sharedFilledSurfaceCompounds.map((c) => ({
+  variant: 'strong' as const,
+  ...c,
+}));
+
+const buttonGhostSurfaceCompounds = sharedGhostSurfaceCompounds.map((c) => ({
+  variant: 'ghost' as const,
+  ...c,
+}));
+
+const buttonStrongForegroundTextCompounds = sharedFilledForegroundTextCompounds.map((c) => ({
+  variant: 'strong' as const,
+  ...c,
+}));
+
+const buttonOutlineGhostForegroundTextCompounds = sharedOutlineGhostForegroundTextCompounds.map(
+  (c) => ({
+    variant: ['outline', 'ghost'] as ('outline' | 'ghost')[],
+    ...c,
+  }),
+);
 
 // TODO: Split into 2 files
 // TODO: Create cva wrapper
@@ -7,37 +42,43 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export const buttonRootVariants = cva(
   [
     'flex-row items-center justify-center',
-    'rounded-md',
-    'transition-colors duration-150', // TODO: Transition not working on mobile
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring data-[focus-visible=true]:ring-offset-2 data-[focus-visible=true]:ring-offset-bg',
+    RADIUS_SM,
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [],
-        subtle: [],
+        strong: [],
         outline: [
-          'bg-transparent border border-border',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'bg-transparent',
+          `border ${COLOR_BORDER_DEFAULT}`,
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
         ],
         ghost: [
           'bg-transparent',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
         ],
       },
       color: {
-        primary: [],
-        secondary: [],
-        success: [],
+        action: [],
         danger: [],
+        warning: [],
+        success: [],
+        info: [],
       },
       size: {
-        sm: 'h-8 px-3 gap-1.5',
-        md: 'h-10 px-4 gap-2',
-        lg: 'h-12 px-6 gap-2.5',
+        default: 'h-10 px-4 gap-2',
+        small: 'h-8 px-3 gap-1.5',
+      },
+      mode: {
+        light: [],
+        dark: [],
       },
       fullWidth: {
         true: 'w-full',
@@ -45,187 +86,135 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
+      ...buttonStrongSurfaceCompounds,
+
+      // --- outline × color (light mode) ---
       {
-        variant: 'solid',
-        color: 'primary',
-        className: [
-          'bg-blue-500',
-          Platform.select({
-            default: 'data-[active=true]:bg-blue-700',
-            web: 'data-[hover=true]:bg-blue-600 data-[active=true]:data-[hover=true]:bg-blue-700',
-          }),
-        ],
-      },
-      {
-        variant: 'solid',
-        color: 'secondary',
-        className: [
-          'bg-amber-500',
-          Platform.select({
-            default: 'data-[active=true]:bg-amber-700',
-            web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
-          }),
-        ],
-      },
-      {
-        variant: 'solid',
-        color: 'success',
+        variant: 'outline',
+        color: 'action',
         className: [
-          'bg-green-500',
+          'border-slate-300',
           Platform.select({
-            default: 'data-[active=true]:bg-green-700',
-            web: 'data-[hover=true]:bg-green-600 data-[active=true]:data-[hover=true]:bg-green-700',
+            default: 'data-[active=true]:border-slate-500 data-[active=true]:bg-slate-100',
+            web: 'data-[hover=true]:border-slate-400 data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:border-slate-500 data-[active=true]:data-[hover=true]:bg-slate-100',
           }),
         ],
       },
       {
-        variant: 'solid',
+        variant: 'outline',
         color: 'danger',
         className: [
-          'bg-red-500',
-          Platform.select({
-            default: 'data-[active=true]:bg-red-700',
-            web: 'data-[hover=true]:bg-red-600 data-[active=true]:data-[hover=true]:bg-red-700',
-          }),
-        ],
-      },
-      {
-        variant: 'subtle',
-        color: 'primary',
-        className: [
-          'bg-blue-100',
-          Platform.select({
-            default: 'data-[active=true]:bg-blue-200',
-            web: 'data-[hover=true]:bg-blue-200 data-[active=true]:data-[hover=true]:bg-blue-300',
-          }),
-        ],
-      },
-      {
-        variant: 'subtle',
-        color: 'secondary',
-        className: [
-          'bg-amber-200',
-          Platform.select({
-            default: 'data-[active=true]:bg-amber-300',
-            web: 'data-[hover=true]:bg-amber-300 data-[active=true]:data-[hover=true]:bg-amber-400',
-          }),
-        ],
-      },
-      {
-        variant: 'subtle',
-        color: 'success',
-        className: [
-          'bg-green-200',
+          'border-red-600',
           Platform.select({
-            default: 'data-[active=true]:bg-green-300',
-            web: 'data-[hover=true]:bg-green-300 data-[active=true]:data-[hover=true]:bg-green-400',
+            default: 'data-[active=true]:border-red-800 data-[active=true]:bg-red-100',
+            web: 'data-[hover=true]:border-red-700 data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:border-red-800 data-[active=true]:data-[hover=true]:bg-red-100',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'danger',
+        variant: 'outline',
+        color: 'warning',
         className: [
-          'bg-red-200',
+          'border-amber-500',
           Platform.select({
-            default: 'data-[active=true]:bg-red-300',
-            web: 'data-[hover=true]:bg-red-300 data-[active=true]:data-[hover=true]:bg-red-400',
+            default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
+            web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'primary',
+        color: 'success',
         className: [
-          'border-blue-500',
+          'border-green-600',
           Platform.select({
-            default: 'data-[active=true]:border-blue-700 data-[active=true]:bg-blue-100',
-            web: 'data-[hover=true]:border-blue-600 data-[hover=true]:bg-blue-100 data-[active=true]:data-[hover=true]:border-blue-700 data-[active=true]:data-[hover=true]:bg-blue-200',
+            default: 'data-[active=true]:border-green-800 data-[active=true]:bg-green-100',
+            web: 'data-[hover=true]:border-green-700 data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:border-green-800 data-[active=true]:data-[hover=true]:bg-green-100',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'secondary',
+        color: 'info',
         className: [
-          'border-amber-500',
+          'border-sky-500',
           Platform.select({
-            default: 'data-[active=true]:border-amber-700 data-[active=true]:bg-amber-50',
-            web: 'data-[hover=true]:border-amber-600 data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:border-amber-700 data-[active=true]:data-[hover=true]:bg-amber-100',
+            default: 'data-[active=true]:border-sky-700 data-[active=true]:bg-sky-100',
+            web: 'data-[hover=true]:border-sky-600 data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:border-sky-700 data-[active=true]:data-[hover=true]:bg-sky-100',
           }),
         ],
       },
+
+      // --- outline × action × mode: dark ---
       {
         variant: 'outline',
-        color: 'success',
+        color: 'action',
+        mode: 'dark',
         className: [
-          'border-green-500',
+          'bg-transparent border-slate-700',
           Platform.select({
-            default: 'data-[active=true]:border-green-700 data-[active=true]:bg-green-100',
-            web: 'data-[hover=true]:border-green-600 data-[hover=true]:bg-green-100 data-[active=true]:data-[hover=true]:border-green-700 data-[active=true]:data-[hover=true]:bg-green-200',
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
           }),
         ],
       },
+      // --- outline × semantic colors × mode: dark ---
       {
         variant: 'outline',
         color: 'danger',
+        mode: 'dark',
         className: [
-          'border-red-500',
-          Platform.select({
-            default: 'data-[active=true]:border-red-700 data-[active=true]:bg-red-100',
-            web: 'data-[hover=true]:border-red-600 data-[hover=true]:bg-red-100 data-[active=true]:data-[hover=true]:border-red-700 data-[active=true]:data-[hover=true]:bg-red-200',
-          }),
-        ],
-      },
-      {
-        variant: 'ghost',
-        color: 'primary',
-        className: [
-          'bg-transparent',
+          'bg-transparent border-red-500',
           Platform.select({
-            default: 'data-[active=true]:bg-blue-100',
-            web: 'data-[hover=true]:bg-blue-50 data-[active=true]:data-[hover=true]:bg-blue-100',
+            default: 'data-[active=true]:bg-red-950',
+            web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
           }),
         ],
       },
       {
-        variant: 'ghost',
-        color: 'secondary',
+        variant: 'outline',
+        color: 'warning',
+        mode: 'dark',
         className: [
-          'bg-transparent',
+          'bg-transparent border-amber-500',
           Platform.select({
-            default: 'data-[active=true]:bg-amber-100',
-            web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
+            default: 'data-[active=true]:bg-amber-950',
+            web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
           }),
         ],
       },
       {
-        variant: 'ghost',
+        variant: 'outline',
         color: 'success',
+        mode: 'dark',
         className: [
-          'bg-transparent',
+          'bg-transparent border-green-500',
           Platform.select({
-            default: 'data-[active=true]:bg-green-100',
-            web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
+            default: 'data-[active=true]:bg-green-950',
+            web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
           }),
         ],
       },
       {
-        variant: 'ghost',
-        color: 'danger',
+        variant: 'outline',
+        color: 'info',
+        mode: 'dark',
         className: [
-          'bg-transparent',
+          'bg-transparent border-sky-500',
           Platform.select({
-            default: 'data-[active=true]:bg-red-100',
-            web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
+            default: 'data-[active=true]:bg-sky-950',
+            web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
           }),
         ],
       },
+
+      ...buttonGhostSurfaceCompounds,
     ],
     defaultVariants: {
-      variant: 'solid',
-      color: 'primary',
-      size: 'md',
+      variant: 'strong',
+      color: 'action',
+      size: 'default',
+      mode: 'light',
       fullWidth: false,
     },
   },
@@ -234,156 +223,121 @@ export const buttonRootVariants = cva(
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      solid: 'text-white',
-      subtle: [],
+      strong: [],
       outline: [],
       ghost: [],
     },
     color: {
-      primary: [],
-      secondary: [],
-      success: [],
+      action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
     },
     size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
+      default: 'text-base',
+      small: 'text-sm',
+    },
+    mode: {
+      light: [],
+      dark: [],
     },
   },
   compoundVariants: [
-    {
-      variant: 'subtle',
-      color: 'primary',
-      className: 'text-blue-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'secondary',
-      className: 'text-amber-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'success',
-      className: 'text-green-950',
-    },
-    {
-      variant: 'subtle',
-      color: 'danger',
-      className: 'text-red-950',
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'primary',
-      className: [
-        'text-blue-500',
-        Platform.select({
-          default: 'data-[active=true]:text-blue-700',
-          web: 'data-[hover=true]:text-blue-600 data-[active=true]:data-[hover=true]:text-blue-700',
-        }),
-      ],
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'secondary',
-      className: [
-        'text-amber-600',
-        Platform.select({
-          default: 'data-[active=true]:text-amber-800',
-          web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800',
-        }),
-      ],
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'success',
-      className: [
-        'text-green-600',
-        Platform.select({
-          default: 'data-[active=true]:text-green-800',
-          web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800',
-        }),
-      ],
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'danger',
-      className: [
-        'text-red-500',
-        Platform.select({
-          default: 'data-[active=true]:text-red-700',
-          web: 'data-[hover=true]:text-red-600 data-[active=true]:data-[hover=true]:text-red-700',
-        }),
-      ],
-    },
+    ...buttonStrongForegroundTextCompounds,
+    ...buttonOutlineGhostForegroundTextCompounds,
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md',
+    variant: 'strong',
+    color: 'action',
+    size: 'default',
+    mode: 'light',
   },
 });
 
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      solid: 'accent-white',
-      subtle: [],
+      strong: 'accent-white',
       outline: [],
       ghost: [],
     },
     color: {
-      primary: [],
-      secondary: [],
-      success: [],
+      action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
+    mode: {
+      light: [],
+      dark: [],
     },
   },
   compoundVariants: [
+    // --- outline/ghost × color (light mode) ---
     {
-      variant: 'subtle',
-      color: 'primary',
-      className: 'accent-blue-950',
+      variant: ['outline', 'ghost'],
+      color: 'action',
+      className: 'accent-slate-900',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      className: 'accent-red-600',
     },
     {
-      variant: 'subtle',
-      color: 'secondary',
-      className: 'accent-amber-950',
+      variant: ['outline', 'ghost'],
+      color: 'warning',
+      className: 'accent-amber-600',
     },
     {
-      variant: 'subtle',
+      variant: ['outline', 'ghost'],
       color: 'success',
-      className: 'accent-green-950',
+      className: 'accent-green-600',
     },
     {
-      variant: 'subtle',
-      color: 'danger',
-      className: 'accent-red-950',
+      variant: ['outline', 'ghost'],
+      color: 'info',
+      className: 'accent-sky-600',
     },
+
+    // --- outline/ghost × color × mode: dark ---
     {
       variant: ['outline', 'ghost'],
-      color: 'primary',
-      className: 'accent-blue-500',
+      color: 'action',
+      mode: 'dark',
+      className: 'accent-white',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'secondary',
-      className: 'accent-amber-600',
+      color: 'danger',
+      mode: 'dark',
+      className: 'accent-red-300',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'warning',
+      mode: 'dark',
+      className: 'accent-amber-300',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'success',
-      className: 'accent-green-600',
+      mode: 'dark',
+      className: 'accent-green-300',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'danger',
-      className: 'accent-red-500',
+      color: 'info',
+      mode: 'dark',
+      className: 'accent-sky-300',
     },
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
+    variant: 'strong',
+    color: 'action',
+    mode: 'light',
   },
 });
 
@@ -406,5 +360,17 @@ export const buttonGroupVariants = cva([], {
   },
 });
 
+export const buttonIconVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-5',
+      small: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
 export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;
 export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;