@cdx-ui/components 0.0.1-alpha.26 → 0.0.1-alpha.27

package/src/components/Button/buttonSharedVariants.ts

@@ -0,0 +1,281 @@
+/**
+ * Neutral compound-variant **slices** shared by Button and IconButton (no consumer `variant` keys).
+ *
+ * Each consumer maps these into its own CVA, e.g. filled surface → Button `strong` or IconButton `solid`;
+ * ghost surface / outline+ghost foreground → attach the appropriate `variant` / tuple for that component.
+ *
+ * Button-only outline **surface** (borders) stays in `Button/styles.ts`.
+ */
+import { Platform } from 'react-native';
+import { SEMANTIC_COLORS } from '../../styles/primitives';
+
+export type SharedButtonSemanticColor = 'action' | 'danger' | 'warning' | 'success' | 'info';
+
+/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      SEMANTIC_COLORS.action.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      SEMANTIC_COLORS.danger.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-red-800',
+        web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      SEMANTIC_COLORS.warning.bg,
+      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',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      SEMANTIC_COLORS.success.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-green-800',
+        web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      SEMANTIC_COLORS.info.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-700',
+        web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'bg-slate-200',
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-400',
+        web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
+      }),
+    ],
+  },
+];
+
+/** Root surface: ghost hover/active fills (maps to `variant: 'ghost'` on Button and IconButton). */
+export const sharedGhostSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'danger',
+    className: [
+      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',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      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',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      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',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-100',
+        web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-red-950',
+        web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-950',
+        web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-green-950',
+        web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-950',
+        web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
+      }),
+    ],
+  },
+];
+
+/** Foreground on filled controls (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  { color: 'action', className: 'text-white' },
+  { color: 'danger', className: 'text-white' },
+  { color: 'warning', className: 'text-white' },
+  { color: 'success', className: 'text-white' },
+  { color: 'info', className: 'text-white' },
+  { color: 'action', mode: 'dark', className: 'text-slate-900' },
+];
+
+/**
+ * Foreground for transparent controls: same class names for Button `outline` and `ghost`, and for IconButton `ghost`.
+ * Consumers attach their own `variant` key(s).
+ */
+export const sharedOutlineGhostForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      'text-slate-900',
+      Platform.select({
+        default: 'data-[active=true]:text-slate-700',
+        web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      'text-red-600',
+      Platform.select({
+        default: 'data-[active=true]:text-red-800',
+        web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    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',
+      }),
+    ],
+  },
+  {
+    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',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      'text-sky-600',
+      Platform.select({
+        default: 'data-[active=true]:text-sky-800',
+        web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'text-white',
+      Platform.select({
+        default: 'data-[active=true]:text-white',
+        web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: 'text-red-400',
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: 'text-amber-400',
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: 'text-green-400',
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: 'text-sky-400',
+  },
+];

package/src/components/Button/styles.ts

@@ -5,9 +5,36 @@ import {
   DISABLED_CURSOR,
   DISABLED_OPACITY,
   RADIUS_SM,
-  SEMANTIC_COLORS,
   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
@@ -59,76 +86,7 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
-      // --- strong × color (light mode) ---
-      {
-        variant: 'strong',
-        color: 'action',
-        className: [
-          SEMANTIC_COLORS.action.bg,
-          Platform.select({
-            default: 'data-[active=true]:bg-slate-700',
-            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
-          }),
-        ],
-      },
-      {
-        variant: 'strong',
-        color: 'danger',
-        className: [
-          SEMANTIC_COLORS.danger.bg,
-          Platform.select({
-            default: 'data-[active=true]:bg-red-800',
-            web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
-          }),
-        ],
-      },
-      {
-        variant: 'strong',
-        color: 'warning',
-        className: [
-          SEMANTIC_COLORS.warning.bg,
-          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: 'strong',
-        color: 'success',
-        className: [
-          SEMANTIC_COLORS.success.bg,
-          Platform.select({
-            default: 'data-[active=true]:bg-green-800',
-            web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
-          }),
-        ],
-      },
-      {
-        variant: 'strong',
-        color: 'info',
-        className: [
-          SEMANTIC_COLORS.info.bg,
-          Platform.select({
-            default: 'data-[active=true]:bg-sky-700',
-            web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
-          }),
-        ],
-      },
-
-      // --- strong × action × mode: dark ---
-      {
-        variant: 'strong',
-        color: 'action',
-        mode: 'dark',
-        className: [
-          'bg-slate-200',
-          Platform.select({
-            default: 'data-[active=true]:bg-slate-400',
-            web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
-          }),
-        ],
-      },
+      ...buttonStrongSurfaceCompounds,
 
       // --- outline × color (light mode) ---
       {
@@ -250,105 +208,7 @@ export const buttonRootVariants = cva(
         ],
       },
 
-      // --- ghost × color (light mode, non-action) ---
-      {
-        variant: 'ghost',
-        color: 'danger',
-        className: [
-          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',
-          }),
-        ],
-      },
-      {
-        variant: 'ghost',
-        color: 'warning',
-        className: [
-          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',
-          }),
-        ],
-      },
-      {
-        variant: 'ghost',
-        color: 'success',
-        className: [
-          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',
-          }),
-        ],
-      },
-      {
-        variant: 'ghost',
-        color: 'info',
-        className: [
-          Platform.select({
-            default: 'data-[active=true]:bg-sky-100',
-            web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
-          }),
-        ],
-      },
-
-      // --- ghost × action × mode: dark ---
-      {
-        variant: 'ghost',
-        color: 'action',
-        mode: 'dark',
-        className: [
-          Platform.select({
-            default: 'data-[active=true]:bg-slate-700',
-            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
-          }),
-        ],
-      },
-      // --- ghost × semantic colors × mode: dark ---
-      {
-        variant: 'ghost',
-        color: 'danger',
-        mode: 'dark',
-        className: [
-          Platform.select({
-            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: 'warning',
-        mode: 'dark',
-        className: [
-          Platform.select({
-            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',
-        color: 'success',
-        mode: 'dark',
-        className: [
-          Platform.select({
-            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: 'info',
-        mode: 'dark',
-        className: [
-          Platform.select({
-            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: 'strong',
@@ -384,111 +244,8 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     },
   },
   compoundVariants: [
-    // --- strong × color (light mode) — always white text ---
-    { variant: 'strong', color: 'action', className: 'text-white' },
-    { variant: 'strong', color: 'danger', className: 'text-white' },
-    { variant: 'strong', color: 'warning', className: 'text-white' },
-    { variant: 'strong', color: 'success', className: 'text-white' },
-    { variant: 'strong', color: 'info', className: 'text-white' },
-
-    // --- strong × action × mode: dark ---
-    { variant: 'strong', color: 'action', mode: 'dark', className: 'text-slate-900' },
-
-    // --- outline/ghost × color (light mode text) ---
-    {
-      variant: ['outline', 'ghost'],
-      color: 'action',
-      className: [
-        'text-slate-900',
-        Platform.select({
-          default: 'data-[active=true]:text-slate-700',
-          web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
-        }),
-      ],
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'danger',
-      className: [
-        'text-red-600',
-        Platform.select({
-          default: 'data-[active=true]:text-red-800',
-          web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
-        }),
-      ],
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'warning',
-      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: 'info',
-      className: [
-        'text-sky-600',
-        Platform.select({
-          default: 'data-[active=true]:text-sky-800',
-          web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
-        }),
-      ],
-    },
-
-    // --- outline/ghost × action × mode: dark ---
-    {
-      variant: ['outline', 'ghost'],
-      color: 'action',
-      mode: 'dark',
-      className: [
-        'text-white',
-        Platform.select({
-          default: 'data-[active=true]:text-white',
-          web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
-        }),
-      ],
-    },
-    // --- outline/ghost × semantic colors × mode: dark ---
-    {
-      variant: ['outline', 'ghost'],
-      color: 'danger',
-      mode: 'dark',
-      className: 'text-red-400',
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'warning',
-      mode: 'dark',
-      className: 'text-amber-400',
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'success',
-      mode: 'dark',
-      className: 'text-green-400',
-    },
-    {
-      variant: ['outline', 'ghost'],
-      color: 'info',
-      mode: 'dark',
-      className: 'text-sky-400',
-    },
+    ...buttonStrongForegroundTextCompounds,
+    ...buttonOutlineGhostForegroundTextCompounds,
   ],
   defaultVariants: {
     variant: 'strong',

package/src/components/IconButton/index.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import { ActivityIndicator, Pressable, Text, View, type PressableProps } from 'react-native';
+import {
+  createButton,
+  dataAttributes,
+  type IButtonProps,
+  useButtonContext,
+} from '@cdx-ui/primitives';
+import type { CdxIcon } from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  type IconButtonVariantProps,
+  iconButtonGlyphVariants,
+  iconButtonIconColorVariants,
+  iconButtonRootVariants,
+} from './styles';
+
+const IconButtonPrimitive = createButton({
+  Root: Pressable,
+  Text,
+  Group: View,
+  Spinner: ActivityIndicator,
+  Icon: View,
+});
+
+function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; className: string }) {
+  const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+  return (
+    <Icon
+      as={IconComponent}
+      className={className}
+      {...dataAttributes({
+        hover,
+        focus,
+        active,
+        disabled,
+        focusVisible,
+      })}
+    />
+  );
+}
+
+export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
+  className?: string;
+  /** CDX icon component to render (icon-only control). */
+  as: CdxIcon;
+  /** Passed through to the underlying `Icon`. */
+  iconClassName?: IconProps['className'];
+}
+
+const IconButtonRoot = forwardRef<View, IconButtonProps>(
+  (
+    {
+      variant = 'solid',
+      size = 'default',
+      mode = 'light',
+      className,
+      style,
+      as: IconComponent,
+      iconClassName,
+      accessibilityRole = 'button',
+      ...props
+    },
+    ref,
+  ) => {
+    const rootClassName = cn(iconButtonRootVariants({ variant, size, mode }), className);
+
+    const glyphClassName = cn(
+      iconButtonGlyphVariants({ size }),
+      iconButtonIconColorVariants({ variant, mode }),
+      iconClassName,
+    );
+
+    return (
+      <IconButtonPrimitive
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+        className={rootClassName}
+        style={style}
+        {...props}
+      >
+        <IconButtonGlyph as={IconComponent} className={glyphClassName} />
+      </IconButtonPrimitive>
+    );
+  },
+);
+
+IconButtonRoot.displayName = 'IconButton';
+
+export const IconButton = IconButtonRoot;
+
+export type { IconButtonVariantProps };