@cdx-ui/components 0.0.1-alpha.4 → 0.0.1-alpha.41

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,9 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'solid',
-      color = 'primary',
-      size = 'md',
+      variant = 'strong',
+      color = 'action',
+      size = 'default',
       fullWidth = false,
       className,
       children,
@@ -103,6 +105,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 +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';
 

package/src/components/Button/styles.ts

@@ -1,43 +1,36 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Split into 2 files
-// TODO: Create cva wrapper
+// TODO: Validate that `dark:` syntax works with Uniwind `ScopedTheme`
 
 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',
+    'rounded-[var(--border-radius-button)]',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [],
-        subtle: [],
-        outline: [
-          'bg-transparent border border-border',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
-        ],
-        ghost: [
-          'bg-transparent',
-          'data-[hover=true]:bg-surface',
-          'data-[active=true]:bg-surface-raised',
-        ],
+        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        outline: ['bg-transparent', 'border border-stroke-primary'],
+        ghost: ['bg-transparent'],
       },
       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',
       },
       fullWidth: {
         true: 'w-full',
@@ -45,157 +38,148 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
+      // ── strong × color (filled surface) ──────────────────────────────
       {
-        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',
+        variant: 'strong',
+        color: 'action',
         className: [
-          'bg-amber-500',
+          'bg-surface-action-strong',
           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',
+            default: 'data-[active=true]:bg-surface-action-strong-active',
+            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
           }),
         ],
       },
       {
-        variant: 'solid',
-        color: 'success',
+        variant: 'strong',
+        color: 'danger',
         className: [
-          'bg-green-500',
+          'bg-surface-danger-strong',
           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]:bg-surface-danger-strong-active',
+            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
           }),
         ],
       },
       {
-        variant: 'solid',
-        color: 'danger',
+        variant: 'strong',
+        color: 'warning',
         className: [
-          'bg-red-500',
+          'bg-surface-warning-strong',
           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',
+            default: 'data-[active=true]:bg-amber-600',
+            web: 'data-[hover=true]:bg-amber-500 data-[active=true]:data-[hover=true]:bg-amber-600',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'primary',
+        variant: 'strong',
+        color: 'success',
         className: [
-          'bg-blue-100',
+          'bg-surface-success-strong',
           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',
+            default: 'data-[active=true]:bg-green-800',
+            web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
           }),
         ],
       },
       {
-        variant: 'subtle',
-        color: 'secondary',
+        variant: 'strong',
+        color: 'info',
         className: [
-          'bg-amber-200',
+          'bg-surface-info-strong',
           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',
+            default: 'data-[active=true]:bg-sky-700',
+            web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
           }),
         ],
       },
+
+      // ── outline × color (border + hover/active surface) ─────────────
       {
-        variant: 'subtle',
-        color: 'success',
+        variant: 'outline',
+        color: 'action',
         className: [
-          'bg-green-200',
+          'border-stroke-action',
           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]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
       {
-        variant: 'subtle',
+        variant: 'outline',
         color: 'danger',
         className: [
-          'bg-red-200',
+          'border-stroke-danger',
           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]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'primary',
+        color: 'warning',
         className: [
-          'border-blue-500',
+          'border-stroke-warning',
           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]:bg-surface-warning-subtle',
+            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'secondary',
+        color: 'success',
         className: [
-          'border-amber-500',
+          'border-stroke-success',
           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]:bg-surface-success-subtle',
+            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
           }),
         ],
       },
       {
         variant: 'outline',
-        color: 'success',
+        color: 'info',
         className: [
-          'border-green-500',
+          'border-stroke-info',
           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-surface-info-subtle',
+            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
           }),
         ],
       },
+
+      // ── ghost × color (hover/active surface fills) ──────────────────
       {
-        variant: 'outline',
-        color: 'danger',
+        variant: 'ghost',
+        color: 'action',
         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',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
       {
         variant: 'ghost',
-        color: 'primary',
+        color: 'danger',
         className: [
-          'bg-transparent',
           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-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
       {
         variant: 'ghost',
-        color: 'secondary',
+        color: 'warning',
         className: [
-          'bg-transparent',
           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-surface-warning-subtle',
+            web: 'data-[hover=true]:bg-surface-warning-tint data-[active=true]:data-[hover=true]:bg-surface-warning-subtle',
           }),
         ],
       },
@@ -203,29 +187,27 @@ export const buttonRootVariants = cva(
         variant: 'ghost',
         color: 'success',
         className: [
-          'bg-transparent',
           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-surface-success-subtle',
+            web: 'data-[hover=true]:bg-surface-success-tint data-[active=true]:data-[hover=true]:bg-surface-success-subtle',
           }),
         ],
       },
       {
         variant: 'ghost',
-        color: 'danger',
+        color: 'info',
         className: [
-          'bg-transparent',
           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-surface-info-subtle',
+            web: 'data-[hover=true]:bg-surface-info-tint data-[active=true]:data-[hover=true]:bg-surface-info-subtle',
           }),
         ],
       },
     ],
     defaultVariants: {
-      variant: 'solid',
-      color: 'primary',
-      size: 'md',
+      variant: 'strong',
+      color: 'action',
+      size: 'default',
       fullWidth: false,
     },
   },
@@ -234,156 +216,117 @@ 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',
     },
   },
   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',
-        }),
-      ],
-    },
+    // ── strong × color (filled foreground text) ──────────────────────
+    { variant: 'strong', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'strong', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'strong', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'strong', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'strong', color: 'info', className: 'text-content-info-on-strong' },
+
+    // ── outline/ghost × color (transparent foreground text) ──────────
+    { variant: ['outline', 'ghost'], color: 'action', className: 'text-content-action' },
+    { variant: ['outline', 'ghost'], color: 'danger', className: 'text-content-danger' },
+    { variant: ['outline', 'ghost'], color: 'warning', className: 'text-content-warning' },
+    { variant: ['outline', 'ghost'], color: 'success', className: 'text-content-success' },
+    { variant: ['outline', 'ghost'], color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-    size: 'md',
+    variant: 'strong',
+    color: 'action',
+    size: 'default',
   },
 });
 
 export const buttonSpinnerVariants = cva([], {
   variants: {
     variant: {
-      solid: 'accent-white',
-      subtle: [],
+      strong: [],
       outline: [],
       ghost: [],
     },
     color: {
-      primary: [],
-      secondary: [],
-      success: [],
+      action: [],
       danger: [],
+      warning: [],
+      success: [],
+      info: [],
     },
   },
   compoundVariants: [
+    // ── strong × color ───────────────────────────────────────────────
     {
-      variant: 'subtle',
-      color: 'primary',
-      className: 'accent-blue-950',
+      variant: 'strong',
+      color: 'action',
+      className: 'accent-[var(--color-content-action-on-strong)]',
     },
     {
-      variant: 'subtle',
-      color: 'secondary',
-      className: 'accent-amber-950',
+      variant: 'strong',
+      color: 'danger',
+      className: 'accent-[var(--color-content-danger-on-strong)]',
+    },
+    {
+      variant: 'strong',
+      color: 'warning',
+      className: 'accent-[var(--color-content-warning-on-strong)]',
     },
     {
-      variant: 'subtle',
+      variant: 'strong',
       color: 'success',
-      className: 'accent-green-950',
+      className: 'accent-[var(--color-content-success-on-strong)]',
     },
     {
-      variant: 'subtle',
-      color: 'danger',
-      className: 'accent-red-950',
+      variant: 'strong',
+      color: 'info',
+      className: 'accent-[var(--color-content-info-on-strong)]',
     },
+
+    // ── outline/ghost × color ────────────────────────────────────────
     {
       variant: ['outline', 'ghost'],
-      color: 'primary',
-      className: 'accent-blue-500',
+      color: 'action',
+      className: 'accent-[var(--color-content-action)]',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      color: 'danger',
+      className: 'accent-[var(--color-content-danger)]',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'secondary',
-      className: 'accent-amber-600',
+      color: 'warning',
+      className: 'accent-[var(--color-content-warning)]',
     },
     {
       variant: ['outline', 'ghost'],
       color: 'success',
-      className: 'accent-green-600',
+      className: 'accent-[var(--color-content-success)]',
     },
     {
       variant: ['outline', 'ghost'],
-      color: 'danger',
-      className: 'accent-red-500',
+      color: 'info',
+      className: 'accent-[var(--color-content-info)]',
     },
   ],
   defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
+    variant: 'strong',
+    color: 'action',
   },
 });
 
@@ -406,5 +349,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>;