@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.160

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,46 +8,91 @@ 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 {
+  /**
+   * Render the consumer's child element in place of the default `Pressable` host —
+   * merges Button's props onto the child instead of wrapping it (e.g. `<Button asChild><Link /></Button>`).
+   */
+  asChild?: boolean;
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   * @remarks `'solid' | 'outline' | 'ghost'`
+   * @fumadocsType `'solid' | 'outline' | 'ghost'`
+   */
+  variant?:
+    | ButtonVariant
+    /**
+     * @deprecated Use `'solid'` instead.
+     */
+    | 'strong';
+  /**
+   * Color theme applied to the button surface and content.
+   * @default 'action'
+   */
+  color?: 'action' | 'danger' | 'warning' | 'success' | 'info';
+  /**
+   * Height and horizontal padding scale.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
+  /**
+   * Stretch the button to fill the width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the button's own styles. */
   className?: string;
+  /** Button content — typically `Button.Label`, `Button.Icon`, and/or `Button.Spinner`. */
   children?: ReactNode;
 }
 
 const ButtonRoot = forwardRef<View, ButtonProps>(
   (
     {
-      variant = 'strong',
+      variant: variantProp = 'solid',
       color = 'action',
       size = 'default',
       fullWidth = false,
@@ -59,21 +103,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 +144,271 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
 ButtonRoot.displayName = 'Button';
 
 // =============================================================================
-// STYLED TEXT COMPONENT
+// STYLED LABEL COMPONENT
 // =============================================================================
 
-export interface ButtonTextProps extends TextProps {
+export interface ButtonLabelProps extends TextProps {
+  /** Render the consumer's child element in place of the default `Text` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the label's own styles. */
   className?: string;
+  /** Label content (or a custom element when `asChild` is set). */
   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'> {
+  /** Render the consumer's child element in place of the default `View` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the group's own styles. */
   className?: string;
+  /** The buttons to group together. */
   children: ReactElement | ReactElement[];
+  /**
+   * Layout direction of the grouped buttons.
+   * @default 'row'
+   */
   flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /** Disable every button in the group. */
   isDisabled?: boolean;
+  /** Remove the gap between buttons and merge their adjoining borders. */
   isAttached?: boolean;
+  /** Reverse the visual order of the buttons. */
   reversed?: boolean;
+  /** Alias of `reversed`. */
+  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'> {
+  /** Render the consumer's child element in place of the default icon host. */
+  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 {
+  /** Render the consumer's child element in place of the default `ActivityIndicator` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes for the spinner container. */
   className?: string;
+  /** Uniwind `accent-*` color class override for the spinner. */
   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),
+        )}
       />
     );
   },