@cdx-ui/components 0.0.1-beta.17 → 0.0.1-beta.171

package/src/components/Form/index.tsx

@@ -1,31 +1,35 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
-import { createForm } from '@cdx-ui/primitives';
+import {
+  FormRoot as FormRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  type FormRootProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
-import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
 import { formRootVariants } from './styles';
 
-// =============================================================================
-// PRIMITIVE
-// =============================================================================
-
-const FormPrimitive = createForm({ Root: BaseFormRoot });
-
-FormPrimitive.displayName = 'FormPrimitive';
-
 // =============================================================================
 // FORM ROOT (container — <form> on web, <View> on RN)
 // =============================================================================
 
-export interface FormProps extends BaseFormRootProps {}
+export interface FormProps extends FormRootProps {
+  className?: string;
+}
 
 const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
   const computedClassName = cn(formRootVariants(), className);
 
   return (
-    <FormPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+    <FormRootPrimitive
+      ref={ref}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'form' }))}
+    >
       {children}
-    </FormPrimitive>
+    </FormRootPrimitive>
   );
 });
 

package/src/components/Form/styles.ts

@@ -1,3 +1,3 @@
-import { cva } from 'class-variance-authority';
+import { cva } from '@cdx-ui/utils';
 
 export const formRootVariants = cva(['flex-col gap-4']);

package/src/components/Heading/styles.ts

@@ -1,11 +1,11 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const headingStyle = cva(
   [
     `text-content-primary my-0`,
     Platform.select({
-      web: 'bg-transparent display-inline no-underline',
+      web: 'bg-transparent no-underline',
       default: '',
     }),
   ],

package/src/components/Icon/index.tsx

@@ -1,18 +1,24 @@
 import { withUniwind } from 'uniwind';
 import { cn } from '@cdx-ui/utils';
-import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
-import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
+import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
 
-export type IconProps = CdxIconProps & {
+export type IconProps = ForgeIconProps & {
   className?: string; // TODO: Why does this need to specified manually?
-  as: CdxIcon;
+  as: ForgeIcon;
 };
 
 function IconImpl({ as: IconComponent, ...props }: IconProps) {
   return <IconComponent {...props} />;
 }
 
-const StyledIcon = withUniwind(IconImpl, {
+// Double-wrap: the inner `withUniwind` (auto mapping) resolves general
+// `className` utilities (margin, padding, positioning, etc.) into the `style`
+// prop so they reach the SVG on native. The outer `withUniwind` (custom mapping)
+// extracts `size` and `color` from the same `className`. Without the inner
+// wrapper, a custom mapping alone skips the `className` → `style` merge, so
+// layout classes like `mt-3` are dropped on native (they still apply on web,
+// where RNW keeps `className` as a real CSS class).
+const StyledIcon = withUniwind(withUniwind(IconImpl), {
   size: {
     fromClassName: 'className',
     styleProperty: 'width',
@@ -38,16 +44,16 @@ const StyledIcon = withUniwind(IconImpl, {
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
  * ```
  *
- * @param {CdxIcon} as - The CDX icon component to render.
+ * @param {ForgeIcon} as - The Forge icon component to render.
  * @param {string} className - Utility classes to style the icon using Uniwind.
  * @param {number} size - Icon size (overrides the size class).
- * @param {...CdxIconProps} ...props - Additional icon props passed to the "as" icon.
+ * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.
  */
 export function Icon({ as: IconComponent, className, ...props }: IconProps) {
   return (
     <StyledIcon
       as={IconComponent}
-      className={cn(COLOR_TEXT_PRIMARY, 'size-5', className)}
+      className={cn('text-content-primary size-5', className)}
       {...props}
     />
   );

package/src/components/IconButton/index.tsx

@@ -1,12 +1,12 @@
-import { forwardRef } from 'react';
-import { ActivityIndicator, Pressable, Text, View, type PressableProps } from 'react-native';
+import { forwardRef, useEffect } from 'react';
+import { View, type PressableProps } from 'react-native';
 import {
-  createButton,
+  ButtonRoot,
   dataAttributes,
+  mergeDataAttributes,
   type IButtonProps,
-  useButtonContext,
 } from '@cdx-ui/primitives';
-import type { CdxIcon } from '@cdx-ui/icons';
+import type { ForgeIcon } from '@cdx-ui/icons';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
 import {
@@ -16,35 +16,26 @@ import {
   iconButtonRootVariants,
 } from './styles';
 
-const IconButtonPrimitive = createButton({
-  Root: Pressable,
-  Text,
-  Group: View,
-  Spinner: ActivityIndicator,
-  Icon: View,
-});
+export type IconButtonVariant = 'solid' | 'subtle' | 'ghost';
 
-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,
-      })}
-    />
-  );
-}
+/** @deprecated Use {@link IconButtonVariant} (`'subtle'`) instead. */
+export type IconButtonVariantTint = 'tint';
+
+let hasWarnedIconButtonTintVariant = false;
 
-export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
+export interface IconButtonProps
+  extends PressableProps, IButtonProps, Omit<IconButtonVariantProps, 'variant'> {
+  /**
+   * Visual style variant.
+   * @default 'solid'
+   */
+  variant?:
+    | IconButtonVariant
+    /** @deprecated Use `'subtle'` instead. */
+    | 'tint';
   className?: string;
-  /** CDX icon component to render (icon-only control). */
-  as: CdxIcon;
+  /** Forge icon component to render (icon-only control). */
+  as: ForgeIcon;
   /** Passed through to the underlying `Icon`. */
   iconClassName?: IconProps['className'];
 }
@@ -52,7 +43,8 @@ export interface IconButtonProps extends PressableProps, IButtonProps, IconButto
 const IconButtonRoot = forwardRef<View, IconButtonProps>(
   (
     {
-      variant = 'solid',
+      variant: variantProp = 'solid',
+      color = 'neutral',
       size = 'default',
       className,
       style,
@@ -63,24 +55,40 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
-    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
+    useEffect(() => {
+      if (__DEV__ && variantProp === 'tint' && !hasWarnedIconButtonTintVariant) {
+        hasWarnedIconButtonTintVariant = true;
+        console.warn(
+          '[IconButton] The `tint` variant is deprecated and will be removed in a future major release. Use `subtle` instead.',
+        );
+      }
+    }, [variantProp]);
+
+    const variant = variantProp === 'tint' ? 'subtle' : variantProp;
+
+    const rootClassName = cn(iconButtonRootVariants({ variant, color, size }), className);
 
     const glyphClassName = cn(
       iconButtonGlyphVariants({ size }),
-      iconButtonIconColorVariants(),
+      iconButtonIconColorVariants({ variant, color }),
       iconClassName,
     );
 
     return (
-      <IconButtonPrimitive
+      <ButtonRoot
         ref={ref}
         accessibilityRole={accessibilityRole}
         className={rootClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(
+          dataAttributes({ slot: 'icon-button' }),
+          // Consumer/parent compound slots (e.g. carousel-prev-button) win over the default.
+          props,
+        )}
       >
-        <IconButtonGlyph as={IconComponent} className={glyphClassName} />
-      </IconButtonPrimitive>
+        <Icon as={IconComponent} className={glyphClassName} />
+      </ButtonRoot>
     );
   },
 );

package/src/components/IconButton/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const iconButtonRootVariants = cva(
   [
@@ -10,33 +10,131 @@ export const iconButtonRootVariants = cva(
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [
+        solid: [],
+        subtle: [],
+        ghost: ['bg-transparent'],
+      },
+      color: {
+        neutral: [],
+        action: [],
+        danger: [],
+      },
+      size: {
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      },
+    },
+    compoundVariants: [
+      // ── solid × color ───────────────────────────────────────────────────
+      {
+        variant: 'solid',
+        color: 'neutral',
+        className: [
           'bg-surface-primary border border-stroke-secondary',
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
-        ghost: [
-          'bg-transparent',
+      },
+      {
+        variant: 'solid',
+        color: 'action',
+        className: [
+          'bg-surface-action-strong',
+          Platform.select({
+            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: 'danger',
+        className: [
+          'bg-surface-danger-strong',
+          Platform.select({
+            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',
+          }),
+        ],
+      },
+
+      // ── subtle × color ─────────────────────────────────────────────────
+      {
+        variant: 'subtle',
+        color: 'neutral',
+        className: [
+          'bg-surface-neutral-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-subtle-active',
+            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'action',
+        className: [
+          'bg-surface-action-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
+          }),
+        ],
+      },
+      {
+        variant: 'subtle',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-subtle',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
+          }),
+        ],
+      },
+
+      // ── ghost × color ──────────────────────────────────────────────────
+      {
+        variant: 'ghost',
+        color: 'neutral',
+        className: [
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
       },
-      size: {
-        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
-        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      {
+        variant: 'ghost',
+        color: 'action',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
+          }),
+        ],
       },
-    },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
       variant: 'solid',
+      color: 'neutral',
       size: 'default',
     },
   },
@@ -54,6 +152,34 @@ export const iconButtonGlyphVariants = cva([], {
   },
 });
 
-export const iconButtonIconColorVariants = cva(['text-content-primary']);
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      subtle: [],
+      ghost: [],
+    },
+    color: {
+      neutral: [],
+      action: [],
+      danger: [],
+    },
+  },
+  compoundVariants: [
+    { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'subtle', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'subtle', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'subtle', color: 'danger', className: 'text-content-danger-on-subtle' },
+    { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'ghost', color: 'action', className: 'text-content-action' },
+    { variant: 'ghost', color: 'danger', className: 'text-content-danger' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'neutral',
+  },
+});
 
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/src/components/Input/index.tsx

@@ -1,14 +1,17 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, useMemo, type ReactNode } from 'react';
 import { type TextInput, View, type ViewProps } from 'react-native';
 import {
-  createInput,
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
   type IInputFieldProps,
   type IInputProps,
   type IInputSlotProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { Icon, IconProps } from '../Icon';
-import { BaseInput } from './BaseInput';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
 import {
   type InputVariantProps,
   inputFieldPlaceholderVariants,
@@ -20,39 +23,54 @@ import {
 
 const SCOPE = 'INPUT';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
-const InputPrimitive = createInput({
-  Root,
-  Slot: View,
-  Field: BaseInput,
-});
-
 // =============================================================================
 // INPUT (ROOT)
 // =============================================================================
 
-export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
+export interface InputProps extends ViewProps, IInputFieldProps {
+  /** Render the consumer's child element in place of the default `View` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the shell's own styles. */
   className?: string;
+  /** Shell content — typically `Input.Field` plus optional `Input.Slot`/`Input.Icon`. */
   children?: ReactNode;
+  /**
+   * Visual style variant.
+   * @default 'outline'
+   */
+  variant?: 'outline';
+  /**
+   * Height and padding scale.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
 }
 
 const InputRoot = forwardRef<View, InputProps>(
-  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
+  (
+    { asChild, variant = 'outline', size = 'default', className, children, style, ...props },
+    ref,
+  ) => {
     const computedClassName = cn(inputRootVariants({ variant, size }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
     return (
-      <InputPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ variant, size }}
-        {...props}
-      >
-        {children}
-      </InputPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <InputRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'input' }))}
+        >
+          {children}
+        </InputRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -64,7 +82,9 @@ InputRoot.displayName = 'Input';
 // =============================================================================
 
 export type InputFieldProps = IInputProps & {
+  /** Additional Uniwind/Tailwind classes, merged after the field's own styles. */
   className?: string;
+  /** Uniwind class applied to the placeholder text color (native `placeholderTextColor`). */
   placeholderTextColorClassName?: string;
 };
 
@@ -79,12 +99,13 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
     );
 
     return (
-      <InputPrimitive.Field
+      <InputFieldPrimitive
         ref={ref}
         className={computedClassName}
         placeholderTextColorClassName={computedPlaceholderColorClassName}
         style={style}
         {...rest}
+        {...mergeDataAttributes(rest, dataAttributes({ slot: 'input-field' }))}
       />
     );
   },
@@ -93,22 +114,33 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
 InputField.displayName = 'Input.Field';
 
 // =============================================================================
-// INPUT SLOT
+// INPUT SLOT — styled-only (Standard 3: no behavior beyond layout)
 // =============================================================================
 
 export interface InputSlotProps extends ViewProps, IInputSlotProps {
+  /** Render the consumer's child element in place of the default `View` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the slot's own styles. */
   className?: string;
+  /** Adornment content (icons, buttons, or adornment text). */
   children?: ReactNode;
 }
 
 const InputSlot = forwardRef<View, InputSlotProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(inputSlotVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-slot' }))}
+      >
         {children}
-      </InputPrimitive.Slot>
+      </Comp>
     );
   },
 );
@@ -119,14 +151,44 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends Omit<IconProps, 'children'> {}
+export interface InputIconProps 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'];
+}
 
-const InputIcon = ({ className, style, as, ...props }: InputIconProps) => {
+const InputIcon = ({ asChild, className, style, as, ...props }: InputIconProps) => {
   const { size } = useInputStyleContext();
-
   const computedClassName = cn(inputIconVariants({ size }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+    />
+  );
 };
 
 InputIcon.displayName = 'Input.Icon';