@cdx-ui/components 0.0.1-beta.65 → 0.0.1-beta.67

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, useFormControlContext } from '@cdx-ui/utils';
+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,7 +60,7 @@ 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) => {
@@ -80,7 +74,7 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
     );
 
     return (
-      <FieldPrimitive.Label
+      <FieldLabelPrimitive
         ref={ref}
         className={labelClassName}
         style={style}
@@ -91,9 +85,10 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
           </Text>
         }
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'field-label' }))}
       >
         {children}
-      </FieldPrimitive.Label>
+      </FieldLabelPrimitive>
     );
   },
 );
@@ -101,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>
     );
   },
 );
@@ -122,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 (
@@ -135,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/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/IconButton/index.tsx

@@ -1,10 +1,10 @@
 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 { ForgeIcon } from '@cdx-ui/icons';
 import { cn } from '@cdx-ui/utils';
@@ -16,31 +16,6 @@ import {
   iconButtonRootVariants,
 } from './styles';
 
-const IconButtonPrimitive = createButton({
-  Root: Pressable,
-  Text,
-  Group: View,
-  Spinner: ActivityIndicator,
-  Icon: View,
-});
-
-function IconButtonGlyph({ as: IconComponent, className }: { as: ForgeIcon; 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;
   /** Forge icon component to render (icon-only control). */
@@ -73,15 +48,16 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     );
 
     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/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,41 @@ 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 {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 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>
     );
   },
 );
@@ -79,12 +84,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 +99,30 @@ 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 {
+  asChild?: boolean;
   className?: string;
   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 +133,43 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends Omit<IconProps, 'children'> {}
+export interface InputIconProps 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'];
+}
 
-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';

package/src/components/Link/index.tsx

@@ -1,6 +1,13 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Platform, Pressable, Text, View, type TextProps } from 'react-native';
-import { createLink, useLinkInteractionContext, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Text, View, type TextProps } from 'react-native';
+import {
+  LinkRoot as LinkRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useLinkInteractionContext,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
 import {
@@ -12,25 +19,28 @@ import {
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
-const LinkPrimitive = createLink({
-  Root: Pressable,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
 export interface LinkProps extends ILinkProps {
   className?: string;
+  children?: ReactNode;
 }
 
 const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
-    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+    <LinkRootPrimitive
+      ref={ref}
+      className={rootClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link' }))}
+    >
       {children}
-    </LinkPrimitive>
+    </LinkRootPrimitive>
   );
 });
 
@@ -41,19 +51,27 @@ LinkRoot.displayName = 'Link';
 // =============================================================================
 
 export interface LinkLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const LinkLabel = forwardRef<Text, LinkLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { visited } = useLinkInteractionContext();
     const computedClassName = cn(linkLabelVariants({ visited }), className);
+    const Comp = asChild ? Slot : Text;
 
     const textElement = (
-      <Text ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'link-label' }))}
+      >
         {children}
-      </Text>
+      </Comp>
     );
 
     if (Platform.OS === 'web') {
@@ -76,7 +94,15 @@ const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
   const { visited } = useLinkInteractionContext();
   const computedClassName = cn(linkIconVariants({ visited }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link-icon' }))}
+    />
+  );
 };
 
 LinkIcon.displayName = 'Link.Icon';