@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.71

package/src/components/Field/index.tsx

@@ -1,44 +1,32 @@
-import { forwardRef } from 'react';
-import { Text, View } from 'react-native';
+import { forwardRef, useEffect, type ReactNode } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
 import { ErrorIcon } from '@cdx-ui/icons';
 import {
-  createField,
-  IFieldErrorProps,
-  IFieldHelperProps,
-  IFieldLabelProps,
-  type IFieldRootProps,
+  FieldLabel as FieldLabelPrimitive,
+  FieldRoot as FieldRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useFormControlContext,
+  type FieldLabelProps as FieldLabelPrimitiveProps,
+  type FieldRootProps as FieldRootPrimitiveProps,
 } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon } from '../Icon';
-import { BaseFieldLabel } from './FieldLabel';
 import {
   fieldErrorIconVariants,
   fieldErrorTextVariants,
   fieldErrorVariants,
-  fieldHelperVariants,
   fieldHelperTextVariants,
+  fieldHelperVariants,
   fieldLabelVariants,
   fieldRootVariants,
-  type FieldRootVariantProps,
-  type FieldLabelVariantProps,
-  type FieldHelperVariantProps,
   type FieldErrorVariantProps,
+  type FieldHelperVariantProps,
+  type FieldLabelVariantProps,
+  type FieldRootVariantProps,
 } from './styles';
 
-// =============================================================================
-// PRIMITIVE
-// =============================================================================
-
-const FieldPrimitive = createField({
-  Root: View,
-  Label: BaseFieldLabel,
-  Helper: View,
-  HelperText: Text,
-  Error: View,
-  ErrorText: Text,
-  ErrorIcon: View,
-});
-
 // =============================================================================
 // FIELD ROOT
 // =============================================================================
@@ -46,16 +34,22 @@ const FieldPrimitive = createField({
 /**
  * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
  */
-export interface FieldRootProps extends IFieldRootProps, FieldRootVariantProps {}
+export interface FieldRootProps extends FieldRootPrimitiveProps, FieldRootVariantProps {}
 
 const FieldRoot = forwardRef<View, FieldRootProps>(
   ({ className, children, style, ...props }, ref) => {
     const computedClassName = cn(fieldRootVariants(), className);
 
     return (
-      <FieldPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+      <FieldRootPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'field' }))}
+      >
         {children}
-      </FieldPrimitive>
+      </FieldRootPrimitive>
     );
   },
 );
@@ -66,27 +60,35 @@ FieldRoot.displayName = 'Field';
 // FIELD LABEL
 // =============================================================================
 
-export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProps {}
+export interface FieldLabelProps extends FieldLabelPrimitiveProps, FieldLabelVariantProps {}
 
 const FieldLabel = forwardRef<View, FieldLabelProps>(
   ({ className, children, style, htmlFor, ...props }, ref) => {
-    const labelClassName = cn(fieldLabelVariants(), className);
+    const { isLabelFocused, isInvalid } = useFormControlContext();
+    // Native: inject text-content-action via context (group-has CSS handles web).
+    // native: prefix keeps this class inert on web so it never conflicts with text-content-primary.
+    const labelClassName = cn(
+      fieldLabelVariants(),
+      isLabelFocused && !isInvalid && 'native:text-content-action',
+      className,
+    );
 
     return (
-      <FieldPrimitive.Label
+      <FieldLabelPrimitive
         ref={ref}
         className={labelClassName}
         style={style}
         htmlFor={htmlFor}
         requiredIndicator={
-          <Text className="text-red-500" aria-hidden>
+          <Text className="text-content-danger" aria-hidden>
             {' *'}
           </Text>
         }
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'field-label' }))}
       >
         {children}
-      </FieldPrimitive.Label>
+      </FieldLabelPrimitive>
     );
   },
 );
@@ -94,20 +96,50 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
 FieldLabel.displayName = 'Field.Label';
 
 // =============================================================================
-// FIELD HELPER
+// FIELD HELPER (styled-only — reads form context directly)
 // =============================================================================
 
-export interface FieldHelperProps extends IFieldHelperProps, FieldHelperVariantProps {}
+export interface FieldHelperProps extends ViewProps, FieldHelperVariantProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
 
 const FieldHelper = forwardRef<View, FieldHelperProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
+
+    useEffect(() => {
+      if (isInvalid) {
+        setHasHelpText?.(false);
+        return undefined;
+      }
+      setHasHelpText?.(true);
+      return () => {
+        setHasHelpText?.(false);
+      };
+    }, [setHasHelpText, isInvalid]);
+
+    if (isInvalid) {
+      return null;
+    }
+
     const containerClassName = cn(fieldHelperVariants(), className);
     const textClassName = cn(fieldHelperTextVariants());
+    const Comp = asChild ? Slot : View;
 
     return (
-      <FieldPrimitive.Helper ref={ref} className={containerClassName} style={style} {...props}>
-        <FieldPrimitive.HelperText className={textClassName}>{children}</FieldPrimitive.HelperText>
-      </FieldPrimitive.Helper>
+      <Comp
+        ref={ref}
+        className={containerClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'field-helper' }))}
+      >
+        <Text id={helpTextId} className={textClassName}>
+          {children}
+        </Text>
+      </Comp>
     );
   },
 );
@@ -115,10 +147,17 @@ const FieldHelper = forwardRef<View, FieldHelperProps>(
 FieldHelper.displayName = 'Field.Helper';
 
 // =============================================================================
-// FIELD ERROR (internal icon + text composition)
+// FIELD ERROR (styled-only — reads form context directly)
 // =============================================================================
 
-const FieldErrorIcon = ({ className, style, ...props }: { className?: string; style?: any }) => {
+const FieldErrorIcon = ({
+  className,
+  style,
+  ...props
+}: {
+  className?: string;
+  style?: TextProps['style'];
+}) => {
   const computedClassName = cn(fieldErrorIconVariants(), className);
 
   return (
@@ -128,26 +167,58 @@ const FieldErrorIcon = ({ className, style, ...props }: { className?: string; st
       style={style}
       aria-hidden={true}
       {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'field-error-icon' }))}
     />
   );
 };
 
 FieldErrorIcon.displayName = 'Field.ErrorIcon';
 
-export interface FieldErrorProps extends IFieldErrorProps, FieldErrorVariantProps {}
+export interface FieldErrorProps extends ViewProps, FieldErrorVariantProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
 
 const FieldError = forwardRef<View, FieldErrorProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
+
+    const visible = Boolean(isInvalid && children);
+
+    useEffect(() => {
+      if (!visible) {
+        setHasFeedbackText?.(false);
+        return undefined;
+      }
+      setHasFeedbackText?.(true);
+      return () => {
+        setHasFeedbackText?.(false);
+      };
+    }, [setHasFeedbackText, visible]);
+
+    if (!visible) {
+      return null;
+    }
+
     const containerClassName = cn(fieldErrorVariants(), className);
     const textClassName = cn(fieldErrorTextVariants());
+    const Comp = asChild ? Slot : View;
 
     return (
-      <FieldPrimitive.Error ref={ref} className={containerClassName} style={style} {...props}>
-        <FieldPrimitive.ErrorIcon>
-          <FieldErrorIcon />
-        </FieldPrimitive.ErrorIcon>
-        <FieldPrimitive.ErrorText className={textClassName}>{children}</FieldPrimitive.ErrorText>
-      </FieldPrimitive.Error>
+      <Comp
+        ref={ref}
+        id={feedbackId}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="assertive"
+        className={containerClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'field-error' }))}
+      >
+        <FieldErrorIcon />
+        <Text className={textClassName}>{children}</Text>
+      </Comp>
     );
   },
 );

package/src/components/Field/styles.ts

@@ -1,23 +1,24 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { DISABLED_OPACITY } from '../../styles/primitives';
 
-export const fieldRootVariants = cva(['flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
+export const fieldRootVariants = cva(['group flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
 
 export const fieldLabelVariants = cva([
   'body-md',
   'font-medium',
   'text-content-primary',
   'flex-row items-center',
-  DISABLED_OPACITY,
+  'overflow-hidden',
   'web:cursor-pointer',
+  'web:group-has-[[data-focus=true]]:data-[invalid=false]:text-content-action',
   'data-[invalid=true]:text-content-danger',
 ]);
 
-export const fieldHelperVariants = cva(['flex-row items-center']);
+export const fieldHelperVariants = cva(['flex-row items-center min-h-4']);
 
 export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
 
-export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
+export const fieldErrorVariants = cva(['flex-row items-center gap-0.5 min-h-4']);
 
 export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
 

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/Heading/styles.ts

@@ -5,7 +5,7 @@ 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,11 +1,10 @@
 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) {
@@ -38,16 +37,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 { 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,10 @@ import {
   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;
+  /** Forge icon component to render (icon-only control). */
+  as: ForgeIcon;
   /** Passed through to the underlying `Icon`. */
   iconClassName?: IconProps['className'];
 }
@@ -53,6 +28,7 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
   (
     {
       variant = 'solid',
+      color = 'neutral',
       size = 'default',
       className,
       style,
@@ -63,24 +39,25 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
-    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
+    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(props, dataAttributes({ slot: 'icon-button' }))}
       >
-        <IconButtonGlyph as={IconComponent} className={glyphClassName} />
-      </IconButtonPrimitive>
+        <Icon as={IconComponent} className={glyphClassName} />
+      </ButtonRoot>
     );
   },
 );

package/src/components/IconButton/styles.ts

@@ -8,35 +8,133 @@ export const iconButtonRootVariants = cva(
     'rounded-[var(--border-radius-round)]',
     '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-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: [],
+        tint: [],
+        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',
+          }),
+        ],
+      },
+
+      // ── tint × color ─────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'neutral',
+        className: [
+          'bg-surface-neutral-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint-active',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'action',
+        className: [
+          'bg-surface-action-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-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-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
       },
-    },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-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: [],
+      tint: [],
+      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: 'tint', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'tint', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'tint', 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>;