@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/components/Button/styles.ts

@@ -1,44 +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',
+    'rounded-[var(--border-radius-button)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
-    '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',
-    'web:data-[focus-visible=true]:ring-3',
+    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-neutral-border-strong',
-          'data-[hover=true]:bg-neutral-background',
-          'data-[active=true]:bg-neutral-border',
-        ],
-        ghost: [
-          'bg-transparent',
-          'data-[hover=true]:bg-neutral-background',
-          'data-[active=true]:bg-neutral-border',
-        ],
+        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        outline: ['bg-transparent', 'border border-stroke-primary'],
+        ghost: ['bg-transparent'],
       },
       color: {
-        primary: 'web:data-[focus-visible=true]:ring-blue-300/50',
-        secondary: 'web:data-[focus-visible=true]:ring-amber-300/50',
-        success: 'web:data-[focus-visible=true]:ring-green-300/50',
-        danger: 'web:data-[focus-visible=true]:ring-red-300/50',
+        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',
@@ -46,161 +38,148 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
+      // ── strong × color (filled surface) ──────────────────────────────
       {
-        variant: 'solid',
-        color: 'primary',
+        variant: 'strong',
+        color: 'action',
         className: [
-          'bg-blue-500',
+          'bg-surface-action-strong',
           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',
+            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: '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: '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',
-          'data-[focus-visible=true]: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',
-          'data-[focus-visible=true]: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',
-          'data-[focus-visible=true]: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',
-          'data-[focus-visible=true]: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',
           }),
         ],
       },
@@ -208,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,
     },
   },
@@ -239,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: 'subtle',
+      variant: 'strong',
+      color: 'warning',
+      className: 'accent-[var(--color-content-warning-on-strong)]',
+    },
+    {
+      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: 'secondary',
-      className: 'accent-amber-600',
+      color: 'danger',
+      className: 'accent-[var(--color-content-danger)]',
+    },
+    {
+      variant: ['outline', 'ghost'],
+      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',
   },
 });
 
@@ -411,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>;

package/src/components/Card/index.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  cardContentVariants,
+  cardFooterVariants,
+  cardHeaderVariants,
+  cardRootVariants,
+} from './styles';
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface CardProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardRoot = forwardRef<View, CardProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(cardRootVariants(), className);
+
+  return (
+    <View ref={ref} className={computedClassName} style={style} {...props}>
+      {children}
+    </View>
+  );
+});
+
+CardRoot.displayName = 'Card';
+
+// =============================================================================
+// STYLED HEADER COMPONENT
+// =============================================================================
+
+export interface CardHeaderProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardHeader = forwardRef<View, CardHeaderProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardHeaderVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardHeader.displayName = 'Card.Header';
+
+// =============================================================================
+// STYLED CONTENT COMPONENT
+// =============================================================================
+
+export interface CardContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardContent = forwardRef<View, CardContentProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardContentVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardContent.displayName = 'Card.Content';
+
+// =============================================================================
+// STYLED FOOTER COMPONENT
+// =============================================================================
+
+export interface CardFooterProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardFooter = forwardRef<View, CardFooterProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardFooterVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardFooter.displayName = 'Card.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type CardCompoundComponent = typeof CardRoot & {
+  Header: typeof CardHeader;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+};
+
+export const Card = CardRoot as CardCompoundComponent;
+
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Footer = CardFooter;