@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

package/src/components/Button/index.tsx

@@ -1,7 +1,6 @@
-import { forwardRef, type ReactElement, type ReactNode } from 'react';
+import React, { forwardRef, useEffect, useMemo, type ReactElement, type ReactNode } from 'react';
 import {
   ActivityIndicator,
-  Pressable,
   Text,
   View,
   type ActivityIndicatorProps,
@@ -9,38 +8,60 @@ import {
   type ViewProps,
   type TextProps,
 } from 'react-native';
-import { createButton, type IButtonProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  ButtonRoot as ButtonRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IButtonProps,
+} from '@cdx-ui/primitives';
+import {
+  cn,
+  flattenChildren,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type ButtonGroupVariantProps,
   type ButtonVariantProps,
   buttonGroupVariants,
   buttonIconVariants,
   buttonRootVariants,
+  buttonSpinnerColorVariants,
   buttonSpinnerVariants,
   buttonTextVariants,
 } from './styles';
 
 const SCOPE = 'BUTTON';
 
-const Root = withStyleContext(Pressable, SCOPE);
-
 const useButtonStyleContext = () => useStyleContext(SCOPE) as ButtonVariantProps;
 
-const ButtonPrimitive = createButton({
-  Root,
-  Text,
-  Group: View,
-  Spinner: ActivityIndicator,
-  Icon: View,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
-export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariantProps {
+export type ButtonVariant = 'solid' | 'outline' | 'ghost';
+
+/** @deprecated Use {@link ButtonVariant} (`'solid'`) instead. */
+export type ButtonVariantStrong = 'strong';
+
+let hasWarnedStrongButtonVariant = false;
+
+export interface ButtonProps
+  extends PressableProps, IButtonProps, Omit<ButtonVariantProps, 'variant'> {
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   */
+  variant?:
+    | ButtonVariant
+    /**
+     * @deprecated Use `'solid'` instead.
+     */
+    | 'strong';
   className?: string;
   children?: ReactNode;
 }
@@ -48,7 +69,7 @@ export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariant
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'strong',
+      variant: variantProp = 'solid',
       color = 'action',
       size = 'default',
       fullWidth = false,
@@ -59,21 +80,40 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
+    // TODO: Remove this once the `strong` variant is removed.
+    useEffect(() => {
+      if (__DEV__ && variantProp === 'strong' && !hasWarnedStrongButtonVariant) {
+        hasWarnedStrongButtonVariant = true;
+        console.warn(
+          '[Button] The `strong` variant is deprecated and will be removed in a future major release. Use `solid` instead.',
+        );
+      }
+    }, [variantProp]);
+
+    const variant = variantProp === 'strong' ? 'solid' : variantProp;
     const computedClassName = cn(
       buttonRootVariants({ variant, color, size, fullWidth }),
       className,
     );
 
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, color, size, fullWidth } }),
+      [parent, variant, color, size, fullWidth],
+    );
+
     return (
-      <ButtonPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ variant, color, size, fullWidth }}
-        {...props}
-      >
-        {children}
-      </ButtonPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <ButtonRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'button' }))}
+        >
+          {children}
+        </ButtonRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -81,92 +121,253 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
 ButtonRoot.displayName = 'Button';
 
 // =============================================================================
-// STYLED TEXT COMPONENT
+// STYLED LABEL COMPONENT
 // =============================================================================
 
-export interface ButtonTextProps extends TextProps {
+export interface ButtonLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const ButtonLabel = forwardRef<Text, ButtonTextProps>(
-  ({ className, children, style, ...props }, ref) => {
+const ButtonLabel = forwardRef<Text, ButtonLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { variant, color, size } = useButtonStyleContext();
-
     const computedClassName = cn(buttonTextVariants({ variant, color, size }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <ButtonPrimitive.Text ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'button-label' }))}
+      >
         {children}
-      </ButtonPrimitive.Text>
+      </Comp>
     );
   },
 );
 
 ButtonLabel.displayName = 'Button.Label';
 
+// =============================================================================
+// STYLED GROUP COMPONENT
+// =============================================================================
+
 // TODO: Use ButtonGroupVariantProps
 export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
   className?: string;
   children: ReactElement | ReactElement[];
   flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
   isDisabled?: boolean;
   isAttached?: boolean;
   reversed?: boolean;
+  isReversed?: boolean;
 }
 
 const ButtonGroup = forwardRef<View, ButtonGroupProps>(
-  ({ className, children, style, flexDirection = 'row', isAttached, ...props }, ref) => {
+  (
+    {
+      asChild,
+      className,
+      children,
+      style,
+      flexDirection = 'row',
+      isAttached,
+      isDisabled,
+      isReversed,
+      reversed,
+      ...props
+    },
+    ref,
+  ) => {
+    const direction = flexDirection.includes('reverse')
+      ? flexDirection === 'column-reverse'
+        ? 'column'
+        : 'row'
+      : flexDirection;
+
+    let childrenArray = React.Children.toArray(flattenChildren(children));
+    childrenArray = isReversed || reversed ? [...childrenArray].reverse() : childrenArray;
+
+    const computedChildren = childrenArray.map((child: any, index: number) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return child;
+      }
+
+      const attachedStyles: Record<string, number> = {};
+
+      if (index === 0) {
+        if (direction === 'column') {
+          attachedStyles.borderBottomLeftRadius = 0;
+          attachedStyles.borderBottomRightRadius = 0;
+        } else {
+          attachedStyles.borderTopRightRadius = 0;
+          attachedStyles.borderBottomRightRadius = 0;
+        }
+      } else if (index === childrenArray.length - 1) {
+        if (direction === 'column') {
+          attachedStyles.borderTopLeftRadius = 0;
+          attachedStyles.borderTopRightRadius = 0;
+        } else {
+          attachedStyles.borderTopLeftRadius = 0;
+          attachedStyles.borderBottomLeftRadius = 0;
+        }
+      } else {
+        attachedStyles.borderRadius = 0;
+      }
+
+      const childProps = {
+        isDisabled,
+        ...child.props,
+        style: {
+          ...(isAttached ? attachedStyles : {}),
+          ...child.props.style,
+        },
+      };
+
+      return (
+        <React.Fragment key={child.key ?? `spaced-child-${index.toString()}`}>
+          {React.cloneElement(child, childProps)}
+        </React.Fragment>
+      );
+    });
+
     const groupClassName = cn(
       buttonGroupVariants({ flexDirection, isAttached: !!isAttached }),
       className,
     );
+    const Comp = asChild ? Slot : View;
+    const gapProp = isAttached ? { gap: 0 } : {};
 
     return (
-      <ButtonPrimitive.Group
+      <Comp
         ref={ref}
         className={groupClassName}
-        style={[{ flexDirection }, style]}
-        isAttached={isAttached}
+        style={[{ flexDirection }, style, gapProp]}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'button-group' }))}
       >
-        {children}
-      </ButtonPrimitive.Group>
+        {computedChildren}
+      </Comp>
     );
   },
 );
 
 ButtonGroup.displayName = 'Button.Group';
 
-export interface ButtonIconProps extends Omit<IconProps, 'children'> {}
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
 
-const ButtonIcon = ({ className, style, as, ...props }: ButtonIconProps) => {
-  const { size } = useButtonStyleContext();
+export interface ButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
+}
 
-  const computedClassName = cn(buttonIconVariants({ size }), className);
+const ButtonIcon = ({ asChild, className, style, as, position, ...props }: ButtonIconProps) => {
+  const { variant, color, size } = useButtonStyleContext();
+  const computedClassName = cn(buttonIconVariants({ variant, color, size }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'button-icon' }),
+          positionToDataIcon(position),
+        )}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(
+        props,
+        dataAttributes({ slot: 'button-icon' }),
+        positionToDataIcon(position),
+      )}
+    />
+  );
 };
 
 ButtonIcon.displayName = 'Button.Icon';
 
+// =============================================================================
+// STYLED SPINNER COMPONENT
+// =============================================================================
+
 export interface ButtonSpinnerProps extends ActivityIndicatorProps {
+  asChild?: boolean;
   className?: string;
   colorClassName?: string;
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
 }
 
 const ButtonSpinner = forwardRef<ActivityIndicator, ButtonSpinnerProps>(
-  ({ className, colorClassName, style, ...props }, ref) => {
+  (
+    {
+      asChild,
+      className,
+      colorClassName,
+      style,
+      position,
+      accessibilityLabel = 'Loading',
+      ...props
+    },
+    ref,
+  ) => {
     const { variant, color } = useButtonStyleContext();
-    const computedColorClassName = cn(buttonSpinnerVariants({ variant, color }), colorClassName);
+    const computedClassName = cn(buttonSpinnerVariants(), className);
+    const computedColorClassName = cn(
+      buttonSpinnerColorVariants({ variant, color }),
+      colorClassName,
+    );
+    const Comp = asChild ? Slot : ActivityIndicator;
 
     return (
-      <ButtonPrimitive.Spinner
+      <Comp
         ref={ref}
-        className={className}
+        className={computedClassName}
         colorClassName={computedColorClassName}
         style={style}
+        accessibilityLabel={accessibilityLabel}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'button-spinner' }),
+          positionToDataIcon(position),
+        )}
       />
     );
   },

package/src/components/Button/styles.ts

@@ -10,14 +10,14 @@ export const buttonRootVariants = cva(
     '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]',
+    'data-[disabled=true]:opacity-[var(--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',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        strong: ['border-b-1 border-black/75'], // TODO: Replace with token
+        solid: ['border-b-1 border-black/75'], // TODO: Replace with token
         outline: ['bg-transparent', 'border border-stroke-primary'],
         ghost: ['bg-transparent'],
       },
@@ -29,7 +29,7 @@ export const buttonRootVariants = cva(
         info: [],
       },
       size: {
-        default: 'h-10 px-4 gap-2',
+        default: 'h-11 px-4 gap-2',
         small: 'h-8 px-3 gap-1.5',
       },
       fullWidth: {
@@ -38,9 +38,9 @@ export const buttonRootVariants = cva(
       },
     },
     compoundVariants: [
-      // ── strong × color (filled surface) ──────────────────────────────
+      // ── solid × color (filled surface) ──────────────────────────────
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'action',
         className: [
           'bg-surface-action-strong',
@@ -51,7 +51,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'danger',
         className: [
           'bg-surface-danger-strong',
@@ -62,7 +62,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'warning',
         className: [
           'bg-surface-warning-strong',
@@ -73,7 +73,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'success',
         className: [
           'bg-surface-success-strong',
@@ -84,7 +84,7 @@ export const buttonRootVariants = cva(
         ],
       },
       {
-        variant: 'strong',
+        variant: 'solid',
         color: 'info',
         className: [
           'bg-surface-info-strong',
@@ -205,7 +205,7 @@ export const buttonRootVariants = cva(
       },
     ],
     defaultVariants: {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       size: 'default',
       fullWidth: false,
@@ -216,7 +216,7 @@ export const buttonRootVariants = cva(
 export const buttonTextVariants = cva(['font-medium', 'text-center'], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -233,12 +233,12 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     },
   },
   compoundVariants: [
-    // ── 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' },
+    // ── solid × color (filled foreground text) ──────────────────────
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
 
     // ── outline/ghost × color (transparent foreground text) ──────────
     { variant: ['outline', 'ghost'], color: 'action', className: 'text-content-action' },
@@ -248,16 +248,25 @@ export const buttonTextVariants = cva(['font-medium', 'text-center'], {
     { variant: ['outline', 'ghost'], color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
     size: 'default',
   },
 });
 
-export const buttonSpinnerVariants = cva([], {
+export const buttonSpinnerVariants = cva([
+  'data-[icon=inline-start]:me-1.5',
+  'data-[icon=inline-end]:ms-1.5',
+]);
+
+// Spinner color is set via Uniwind's `colorClassName` prop (maps to the native
+// `color` prop on `ActivityIndicator`). `accent-*` utilities ONLY take effect
+// when passed through `colorClassName` — putting them on `className` is a no-op
+// because the underlying `color` prop is not part of the `style` object.
+export const buttonSpinnerColorVariants = cva([], {
   variants: {
     variant: {
-      strong: [],
+      solid: [],
       outline: [],
       ghost: [],
     },
@@ -270,29 +279,29 @@ export const buttonSpinnerVariants = cva([], {
     },
   },
   compoundVariants: [
-    // ── strong × color ───────────────────────────────────────────────
+    // ── solid × color ───────────────────────────────────────────────
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'action',
       className: 'accent-[var(--color-content-action-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'danger',
       className: 'accent-[var(--color-content-danger-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'warning',
       className: 'accent-[var(--color-content-warning-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'success',
       className: 'accent-[var(--color-content-success-on-strong)]',
     },
     {
-      variant: 'strong',
+      variant: 'solid',
       color: 'info',
       className: 'accent-[var(--color-content-info-on-strong)]',
     },
@@ -325,7 +334,7 @@ export const buttonSpinnerVariants = cva([], {
     },
   ],
   defaultVariants: {
-    variant: 'strong',
+    variant: 'solid',
     color: 'action',
   },
 });
@@ -349,17 +358,49 @@ export const buttonGroupVariants = cva([], {
   },
 });
 
-export const buttonIconVariants = cva([], {
-  variants: {
-    size: {
-      default: 'size-5',
-      small: 'size-4',
+export const buttonIconVariants = cva(
+  ['data-[icon=inline-start]:me-1.5', 'data-[icon=inline-end]:ms-1.5'],
+  {
+    variants: {
+      variant: {
+        solid: [],
+        outline: [],
+        ghost: [],
+      },
+      color: {
+        action: [],
+        danger: [],
+        warning: [],
+        success: [],
+        info: [],
+      },
+      size: {
+        default: 'size-5',
+        small: 'size-4',
+      },
+    },
+    compoundVariants: [
+      // ── solid × color (filled foreground icon) ──────────────────────
+      { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+      { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+      { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+      { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+      { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
+
+      // ── outline/ghost × color (transparent foreground icon) ──────────
+      { 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: 'action',
+      size: 'default',
     },
   },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+);
 
 export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;
 export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;