@cdx-ui/components 0.0.1-beta.9 → 0.0.1-beta.91

package/src/components/Divider/index.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Text, type TextProps } from '../Text';
+import { dividerLabelVariants, dividerLineVariants, dividerRootVariants } from './styles';
+
+const lineA11yProps = {
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants' as const,
+  'aria-hidden': true,
+};
+
+export interface DividerProps extends ViewProps {
+  className?: string;
+  /** Renders a vertical divider instead of the default horizontal orientation. */
+  vertical?: boolean;
+  children?: ReactNode;
+}
+
+export interface DividerLabelProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const DividerLine = ({ vertical, flex }: { vertical: boolean; flex: boolean }) => (
+  <View className={dividerLineVariants({ vertical, flex })} {...lineA11yProps} />
+);
+
+const DividerRoot = forwardRef<View, DividerProps>(
+  ({ vertical = false, className, style, children, ...props }, ref) => {
+    const hasLabel = !!children;
+    const computedClassName = cn(dividerRootVariants({ vertical, hasLabel }), className);
+
+    if (!hasLabel) {
+      return (
+        <View
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'divider' }))}
+          {...lineA11yProps}
+        >
+          <DividerLine vertical={vertical} flex={false} />
+        </View>
+      );
+    }
+
+    return (
+      <View
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'divider' }))}
+      >
+        <DividerLine vertical={vertical} flex />
+        {children}
+        <DividerLine vertical={vertical} flex />
+      </View>
+    );
+  },
+);
+
+DividerRoot.displayName = 'Divider';
+
+const DividerLabel = forwardRef<Text, DividerLabelProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(dividerLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'divider-label' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DividerLabel.displayName = 'Divider.Label';
+
+type DividerCompoundComponent = typeof DividerRoot & {
+  Label: typeof DividerLabel;
+};
+
+export const Divider = Object.assign(DividerRoot, {
+  Label: DividerLabel,
+}) as DividerCompoundComponent;

package/src/components/Divider/styles.ts

@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const dividerRootVariants = cva('relative', {
+  variants: {
+    vertical: {
+      true: '',
+      false: '',
+    },
+    hasLabel: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      vertical: false,
+      hasLabel: false,
+      class: 'self-stretch w-full max-h-px min-h-px',
+    },
+    {
+      vertical: false,
+      hasLabel: true,
+      class: 'flex-row items-center gap-1.5 self-stretch w-full min-h-px',
+    },
+    {
+      vertical: true,
+      hasLabel: false,
+      class: 'self-stretch h-full max-w-px min-w-px',
+    },
+    {
+      vertical: true,
+      hasLabel: true,
+      class: 'flex-col items-center gap-1.5 self-stretch h-full min-w-px',
+    },
+  ],
+  defaultVariants: {
+    vertical: false,
+    hasLabel: false,
+  },
+});
+
+export const dividerLineVariants = cva('shrink-0 bg-stroke-secondary', {
+  variants: {
+    vertical: {
+      true: 'w-px',
+      false: 'h-px',
+    },
+    flex: {
+      true: 'flex-1',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      vertical: false,
+      flex: false,
+      class: 'w-full',
+    },
+    {
+      vertical: false,
+      flex: true,
+      class: 'min-w-0',
+    },
+    {
+      vertical: true,
+      flex: false,
+      class: 'h-full',
+    },
+    {
+      vertical: true,
+      flex: true,
+      class: 'min-h-0',
+    },
+  ],
+  defaultVariants: {
+    vertical: false,
+    flex: false,
+  },
+});
+
+export const dividerLabelVariants = cva('body-xs shrink-0 text-content-tertiary');
+
+export type DividerVariantProps = Pick<
+  VariantProps<typeof dividerRootVariants>,
+  'vertical' | 'hasLabel'
+>;

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,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 { 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>
     );
   },
 );