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

package/src/components/Dialog/styles.ts

@@ -1,36 +1,45 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_INVERSE,
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_PRIMARY,
-  COLOR_TEXT_SECONDARY,
-  RADIUS_MD,
-  SHADOW_MD,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+// ── Portal container ────────────────────────────────────────
+
+export const dialogPortalVariants = cva(['flex-1', 'absolute inset-0', 'web:fixed']);
 
 // ── Overlay ─────────────────────────────────────────────────
 
-export const dialogOverlayVariants = cva(['absolute inset-0', COLOR_BG_INVERSE, 'opacity-50']);
+export const dialogOverlayVariants = cva([
+  'absolute inset-0',
+  'bg-surface-backdrop',
+  'web:transition-opacity web:duration-200 web:ease-out',
+  'web:data-[state=entering]:opacity-0',
+  'web:data-[state=open]:opacity-100',
+  'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-150',
+  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+]);
 
-// ── Content ─────────────────────────────────────────────────
+// ── Popup (renamed from dialogContentVariants) ──────────────
 
-export const dialogContentVariants = cva(
+export const dialogPopupVariants = cva(
   [
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    RADIUS_MD,
-    Platform.select({ web: SHADOW_MD, default: '' }),
+    'bg-surface-primary',
+    'rounded-lg',
+    Platform.select({ web: 'shadow-lg', default: '' }),
     'max-h-[85vh] overflow-hidden',
+    'web:transition-[opacity,transform] web:duration-200 web:ease-out',
+    'web:data-[state=entering]:opacity-0 web:data-[state=entering]:scale-[0.96]',
+    'web:data-[state=open]:opacity-100 web:data-[state=open]:scale-100',
+    'web:data-[state=closed]:opacity-0 web:data-[state=closed]:scale-[0.96] web:data-[state=closed]:duration-150',
+    'web:motion-reduce:transition-none web:motion-reduce:duration-0',
   ],
   {
     variants: {
       size: {
+        xs: 'w-[90%] max-w-xs',
         sm: 'w-[90%] max-w-sm',
         md: 'w-[90%] max-w-md',
         lg: 'w-[90%] max-w-lg',
+        xl: 'w-[90%] max-w-xl',
         full: 'w-full mx-4',
       },
     },
@@ -43,46 +52,96 @@ export const dialogContentVariants = cva(
 // ── Header ──────────────────────────────────────────────────
 
 export const dialogHeaderVariants = cva([
-  'flex-row items-center justify-between shrink-0',
-  'px-6 pt-6 pb-2',
+  'flex-col items-start justify-between shrink-0',
+  'pl-6 pr-14 py-4',
 ]);
 
 // ── Title ───────────────────────────────────────────────────
 
-export const dialogTitleVariants = cva(['text-lg font-semibold', COLOR_TEXT_PRIMARY]);
+export const dialogTitleVariants = cva(['heading-sm', 'text-content-primary'], {
+  variants: {
+    severity: {
+      neutral: '',
+      danger: '',
+      warning: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    severity: 'neutral',
+  },
+});
+
+// ── Title Icon ──────────────────────────────────────────────
+
+export const dialogTitleIconVariants = cva(['size-5'], {
+  variants: {
+    severity: {
+      neutral: '',
+      danger: 'text-content-danger',
+      warning: 'text-content-warning',
+      success: 'text-content-success',
+    },
+  },
+  defaultVariants: {
+    severity: 'neutral',
+  },
+});
 
 // ── Description ─────────────────────────────────────────────
 
-export const dialogDescriptionVariants = cva(['text-sm mt-1', COLOR_TEXT_SECONDARY]);
+export const dialogDescriptionVariants = cva(['body-sm mt-1', 'text-content-secondary']);
 
-// ── Body ────────────────────────────────────────────────────
+// ── Content (renamed from dialogBodyVariants) ───────────────
 
-export const dialogBodyVariants = cva(['px-6 py-4 shrink min-h-0']);
+export const dialogContentVariants = cva(['px-6 py-0 gap-2 shrink min-h-0'], {
+  variants: {
+    fullBleed: {
+      true: 'px-0',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});
+
+// ── Text ────────────────────────────────────────────────────
+
+export const dialogTextVariants = cva(['body-md', 'text-content-primary']);
 
 // ── Footer ──────────────────────────────────────────────────
 
 export const dialogFooterVariants = cva([
   'flex-row items-center justify-end shrink-0',
-  'gap-3 px-6 pt-2 pb-6',
+  'gap-2 px-6 pt-4 pb-6',
 ]);
 
 // ── Close ───────────────────────────────────────────────────
 
 export const dialogCloseVariants = cva([
-  'p-1 -m-1 rounded-full',
+  'absolute right-[14px] top-[14px]',
+  'min-w-[32px] min-h-[32px] items-center justify-center',
+  'p-[6px] rounded-full',
   TRANSITION_COLORS,
   Platform.select({
     default: 'data-[active=true]:opacity-70',
     web: [
-      'data-[hover=true]:bg-slate-100',
-      'data-[active=true]:bg-slate-200',
-      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:bg-surface-primary-active',
+      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
   }),
 ]);
 
 // ── Close Icon ──────────────────────────────────────────────
 
-export const dialogCloseIconVariants = cva(['size-5 text-slate-500']);
+export const dialogCloseIconVariants = cva(['size-5 text-content-tertiary']);
+
+// ── Exported types ──────────────────────────────────────────
+
+export type DialogVariantProps = VariantProps<typeof dialogPopupVariants> & {
+  fullBleed?: boolean;
+};
 
-export type DialogVariantProps = VariantProps<typeof dialogContentVariants>;
+export type DialogTitleVariantProps = VariantProps<typeof dialogTitleVariants>;

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 '@cdx-ui/utils';
+
+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';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_OPACITY } from '../../styles/constants';
 
-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']);