@cdx-ui/primitives 0.0.1-alpha.3 → 0.0.1-alpha.30

package/src/dialog/createDialogHeader.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogHeaderProps } from './types';
+
+export const createDialogHeader = <T,>(BaseHeader: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogHeaderProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseHeader ref={ref} {...(props as T)}>
+        {children}
+      </BaseHeader>
+    );
+  });

package/src/dialog/createDialogRoot.tsx

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { useControllableState } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { DialogProvider } from './context';
+import type { IDialogRootProps } from './types';
+
+export const createDialogRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        open: openProp,
+        onOpenChange,
+        defaultOpen = false,
+        closeOnBackdropPress = true,
+        closeOnEscKey = true,
+        role = 'dialog',
+        children,
+        ...props
+      }: IDialogRootProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const [open, setOpenState] = useControllableState<boolean>({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+      });
+
+      const setOpen = useCallback(
+        (newOpen: boolean) => {
+          setOpenState(newOpen);
+        },
+        [setOpenState],
+      );
+
+      const id = useId();
+      const nativeID = `dialog-${id}`;
+
+      const contextValue = useMemo(
+        () => ({
+          open: open ?? false,
+          onOpenChange: setOpen,
+          closeOnBackdropPress,
+          closeOnEscKey,
+          nativeID,
+          role,
+        }),
+        [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
+      );
+
+      return (
+        <DialogProvider value={contextValue}>
+          <BaseRoot
+            ref={ref}
+            {...(props as T)}
+            {...dataAttributes({
+              slot: 'dialog',
+              state: open ? 'open' : 'closed',
+            })}
+          >
+            {children}
+          </BaseRoot>
+        </DialogProvider>
+      );
+    },
+  );

package/src/dialog/createDialogTitle.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTitleProps } from './types';
+
+export const createDialogTitle = <T,>(BaseTitle: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogTitleProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseTitle ref={ref} {...(props as T)}>
+        {children}
+      </BaseTitle>
+    );
+  });

package/src/dialog/createDialogTrigger.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTriggerProps } from './types';
+import { useDialog } from './context';
+
+export const createDialogTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
+  forwardRef(
+    ({ asChild = false, children, onPress, ...props }: IDialogTriggerProps, ref?: React.Ref<T>) => {
+      const { onOpenChange } = useDialog();
+
+      const handlePress = (e?: any) => {
+        onPress?.(e);
+        onOpenChange(true);
+      };
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          onPress: handlePress,
+        });
+      }
+
+      return (
+        <BaseTrigger ref={ref} {...(props as T)} onPress={handlePress}>
+          {children}
+        </BaseTrigger>
+      );
+    },
+  );

package/src/dialog/index.tsx

@@ -0,0 +1,93 @@
+import type React from 'react';
+import { createDialogRoot } from './createDialogRoot';
+import { createDialogTrigger } from './createDialogTrigger';
+import { createDialogContent } from './createDialogContent';
+import { createDialogHeader } from './createDialogHeader';
+import { createDialogTitle } from './createDialogTitle';
+import { createDialogDescription } from './createDialogDescription';
+import { createDialogBody } from './createDialogBody';
+import { createDialogFooter } from './createDialogFooter';
+import { createDialogClose } from './createDialogClose';
+import { DialogProvider, useDialog } from './context';
+import type { IDialogComponentType } from './types';
+
+export { DialogProvider, useDialog };
+export type {
+  IDialogContextType,
+  IDialogRootProps,
+  IDialogTriggerProps,
+  IDialogContentProps,
+  IDialogOverlayProps,
+  IDialogHeaderProps,
+  IDialogTitleProps,
+  IDialogDescriptionProps,
+  IDialogBodyProps,
+  IDialogFooterProps,
+  IDialogCloseProps,
+} from './types';
+
+export function createDialog<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  OverlayProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Trigger: React.ComponentType<TriggerProps>;
+  Content: React.ComponentType<ContentProps>;
+  Overlay: React.ComponentType<OverlayProps>;
+  Header: React.ComponentType<HeaderProps>;
+  Title: React.ComponentType<TitleProps>;
+  Description: React.ComponentType<DescriptionProps>;
+  Body: React.ComponentType<BodyProps>;
+  Footer: React.ComponentType<FooterProps>;
+  Close: React.ComponentType<CloseProps>;
+}) {
+  const Root = createDialogRoot(BaseComponents.Root);
+  const Trigger = createDialogTrigger(BaseComponents.Trigger);
+  const Content = createDialogContent(BaseComponents.Content, BaseComponents.Overlay);
+  const Header = createDialogHeader(BaseComponents.Header);
+  const Title = createDialogTitle(BaseComponents.Title);
+  const Description = createDialogDescription(BaseComponents.Description);
+  const Body = createDialogBody(BaseComponents.Body);
+  const Footer = createDialogFooter(BaseComponents.Footer);
+  const Close = createDialogClose(BaseComponents.Close);
+
+  Root.displayName = 'DialogPrimitive.Root';
+  Trigger.displayName = 'DialogPrimitive.Trigger';
+  Content.displayName = 'DialogPrimitive.Content';
+  Header.displayName = 'DialogPrimitive.Header';
+  Title.displayName = 'DialogPrimitive.Title';
+  Description.displayName = 'DialogPrimitive.Description';
+  Body.displayName = 'DialogPrimitive.Body';
+  Footer.displayName = 'DialogPrimitive.Footer';
+  Close.displayName = 'DialogPrimitive.Close';
+
+  return Object.assign(Root, {
+    Root,
+    Trigger,
+    Content,
+    Header,
+    Title,
+    Description,
+    Body,
+    Footer,
+    Close,
+  }) as IDialogComponentType<
+    RootProps,
+    TriggerProps,
+    ContentProps,
+    HeaderProps,
+    TitleProps,
+    DescriptionProps,
+    BodyProps,
+    FooterProps,
+    CloseProps
+  >;
+}

package/src/dialog/types.ts

@@ -0,0 +1,88 @@
+import type { PropsWithoutRef, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+
+export interface IDialogContextType {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly closeOnBackdropPress: boolean;
+  readonly closeOnEscKey: boolean;
+  readonly nativeID: string;
+  readonly role: 'dialog' | 'alertdialog';
+}
+
+export interface IDialogRootProps {
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly defaultOpen?: boolean;
+  readonly closeOnBackdropPress?: boolean;
+  readonly closeOnEscKey?: boolean;
+  readonly role?: 'dialog' | 'alertdialog';
+  readonly children: React.ReactNode;
+}
+
+export interface IDialogTriggerProps extends PressableProps {
+  readonly asChild?: boolean;
+}
+
+export interface IDialogContentProps extends ViewProps {
+  readonly forceMount?: boolean;
+}
+
+export interface IDialogOverlayProps extends PressableProps {}
+
+export interface IDialogHeaderProps extends ViewProps {}
+
+export interface IDialogTitleProps extends TextProps {}
+
+export interface IDialogDescriptionProps extends TextProps {}
+
+export interface IDialogBodyProps extends ViewProps {}
+
+export interface IDialogFooterProps extends ViewProps {}
+
+export interface IDialogCloseProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly accessibilityLabel?: string;
+}
+
+export type IDialogComponentType<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+  ContentRef = unknown,
+  TriggerRef = unknown,
+  CloseRef = unknown,
+> = React.ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & IDialogRootProps> & RefAttributes<unknown>
+> & {
+  Trigger: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TriggerProps & IDialogTriggerProps> & RefAttributes<TriggerRef>
+  >;
+  Content: React.ForwardRefExoticComponent<
+    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<ContentRef>
+  >;
+  Header: React.ForwardRefExoticComponent<
+    PropsWithoutRef<HeaderProps & IDialogHeaderProps> & RefAttributes<unknown>
+  >;
+  Title: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TitleProps & IDialogTitleProps> & RefAttributes<unknown>
+  >;
+  Description: React.ForwardRefExoticComponent<
+    PropsWithoutRef<DescriptionProps & IDialogDescriptionProps> & RefAttributes<unknown>
+  >;
+  Body: React.ForwardRefExoticComponent<
+    PropsWithoutRef<BodyProps & IDialogBodyProps> & RefAttributes<unknown>
+  >;
+  Footer: React.ForwardRefExoticComponent<
+    PropsWithoutRef<FooterProps & IDialogFooterProps> & RefAttributes<unknown>
+  >;
+  Close: React.ForwardRefExoticComponent<
+    PropsWithoutRef<CloseProps & IDialogCloseProps> & RefAttributes<CloseRef>
+  >;
+};

package/src/form-control/createFormError.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFormError = <T,>(BaseFormError: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
+
+    const visible = Boolean(isInvalid && children);
+
+    React.useEffect(() => {
+      if (!visible) {
+        setHasFeedbackText?.(false);
+        return undefined;
+      }
+      setHasFeedbackText?.(true);
+      return () => {
+        setHasFeedbackText?.(false);
+      };
+    }, [setHasFeedbackText, visible]);
+
+    return visible ? (
+      <BaseFormError
+        ref={ref}
+        {...(props as T)}
+        id={feedbackId}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="assertive"
+      >
+        {children}
+      </BaseFormError>
+    ) : null;
+  });

package/src/form-control/createFormErrorIcon.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormErrorIcon ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormErrorIcon>
+  ));

package/src/form-control/createFormErrorText.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormErrorText ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormErrorText>
+  ));

package/src/form-control/createFormField.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFormFieldProps } from './types';
+
+export const createFormField = <T,>(BaseFormField: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFormFieldProps & { children?: React.ReactNode }, ref?: unknown) => {
+      const { htmlProps, ...context } = useFormControlRoot(props);
+
+      return (
+        <FormControlContext.Provider value={context}>
+          <BaseFormField
+            ref={ref}
+            {...(htmlProps as T)}
+            {...dataAttributes({
+              disabled: context.isDisabled,
+              invalid: context.isInvalid,
+              required: context.isRequired,
+            })}
+          >
+            {children}
+          </BaseFormField>
+        </FormControlContext.Provider>
+      );
+    },
+  );

package/src/form-control/createFormHelper.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFormHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
+
+    React.useEffect(() => {
+      if (isInvalid) {
+        setHasHelpText?.(false);
+        return undefined;
+      }
+      setHasHelpText?.(true);
+      return () => {
+        setHasHelpText?.(false);
+      };
+    }, [setHasHelpText, isInvalid]);
+
+    if (isInvalid) {
+      return null;
+    }
+
+    return (
+      <BaseFormHelper ref={ref} {...(props as T)} id={helpTextId}>
+        {children}
+      </BaseFormHelper>
+    );
+  });

package/src/form-control/createFormHelperText.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+
+export const createFormHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
+    <BaseFormHelperText ref={ref} {...(props as T)}>
+      {children}
+    </BaseFormHelperText>
+  ));

package/src/form-control/createFormLabel.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFormLabelProps } from './types';
+
+export const createFormLabel = <T,>({ Label: BaseFormLabel }: { Label: React.ComponentType<T> }) =>
+  forwardRef<unknown, IFormLabelProps & { children?: React.ReactNode }>(
+    ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
+      const field = useFormControlContext();
+      const fieldId = field.id;
+      const labelId = field.labelId;
+
+      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
+      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+
+      return (
+        <BaseFormLabel
+          ref={ref}
+          {...(props as T)}
+          id={labelId}
+          htmlFor={htmlFor}
+          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+        >
+          {children}
+          {field.isRequired ? requiredIndicator : null}
+        </BaseFormLabel>
+      );
+    },
+  );

package/src/form-control/createFormRoot.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import type { IFormProps } from './types';
+
+// TODO: Handle web submission (button type submit)
+
+export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFormProps & { children?: React.ReactNode }, ref?: unknown) => (
+      <BaseFormRoot ref={ref} {...(props as T)}>
+        {children}
+      </BaseFormRoot>
+    ),
+  );

package/src/form-control/index.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import { createFormError } from './createFormError';
+import { createFormErrorText } from './createFormErrorText';
+import { createFormErrorIcon } from './createFormErrorIcon';
+import { createFormField } from './createFormField';
+import { createFormHelper } from './createFormHelper';
+import { createFormHelperText } from './createFormHelperText';
+import { createFormLabel } from './createFormLabel';
+import { createFormRoot } from './createFormRoot';
+import type { IFormComponentType } from './types';
+
+export type {
+  IFormProps,
+  IFormFieldProps,
+  IFormLabelProps,
+  IFormHelperProps,
+  IFormHelperTextProps,
+  IFormErrorProps,
+  IFormErrorTextProps,
+  IFormErrorIconProps,
+  IFormComponentType,
+} from './types';
+
+export function createForm<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>({
+  Root,
+  Field,
+  Error,
+  ErrorText,
+  ErrorIcon,
+  Label,
+  Helper,
+  HelperText,
+}: {
+  Root: React.ComponentType<Root>;
+  Field: React.ComponentType<Field>;
+  Error: React.ComponentType<Error>;
+  ErrorText: React.ComponentType<ErrorText>;
+  ErrorIcon: React.ComponentType<ErrorIcon>;
+  Label: React.ComponentType<Label>;
+  Helper: React.ComponentType<Helper>;
+  HelperText: React.ComponentType<HelperText>;
+}) {
+  const FormRoot = createFormRoot(Root);
+  FormRoot.displayName = 'FormPrimitive';
+
+  const FormField = createFormField(Field);
+  FormField.displayName = 'FormPrimitive.Field';
+  const FormLabel = createFormLabel({ Label });
+  const FormHelper = createFormHelper(Helper);
+  const FormHelperText = createFormHelperText(HelperText);
+  const FormError = createFormError(Error);
+  const FormErrorText = createFormErrorText(ErrorText);
+  const FormErrorIcon = createFormErrorIcon(ErrorIcon);
+
+  FormLabel.displayName = 'FormPrimitive.Label';
+  FormHelper.displayName = 'FormPrimitive.Helper';
+  FormHelperText.displayName = 'FormPrimitive.HelperText';
+  FormError.displayName = 'FormPrimitive.Error';
+  FormErrorText.displayName = 'FormPrimitive.ErrorText';
+  FormErrorIcon.displayName = 'FormPrimitive.ErrorIcon';
+
+  return Object.assign(FormRoot, {
+    Field: FormField,
+    Label: FormLabel,
+    Helper: FormHelper,
+    HelperText: FormHelperText,
+    Error: FormError,
+    ErrorText: FormErrorText,
+    ErrorIcon: FormErrorIcon,
+  }) as IFormComponentType<Root, Field, Error, ErrorText, ErrorIcon, Label, Helper, HelperText>;
+}

package/src/form-control/types.tsx

@@ -0,0 +1,92 @@
+import type React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+/**
+ * Props for the Form container (`<form>` on web, `<View>` on RN).
+ * Does NOT provide field-level context — use `Form.Field` for that.
+ *
+ * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
+ * platform-specific base component (`FormRoot.web.tsx`), not here.
+ */
+export interface IFormProps {}
+
+/**
+ * Props for a single form field (`Form.Field`).
+ * Provides field-level context (name, validation state, ids) to children.
+ *
+ * **Initial focus:** use `autoFocus` on `Input.Field` (or your control). `TextInput` / DOM
+ * inputs support it natively. Do not rely on `Form.Field` for autofocus — it does not forward
+ * to a single child.
+ *
+ * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
+ */
+export interface IFormFieldProps extends ViewProps {
+  /** Unique id for this field. Auto-generated if not provided. */
+  readonly id?: string;
+  /**
+   * Field name for form submission. Passed through context so child inputs
+   * automatically receive it as their `name` attribute for `FormData` support.
+   */
+  readonly name?: string;
+  /** If true, the field is marked as invalid. Controls error visibility. */
+  readonly isInvalid?: boolean;
+  /** If true, the field is marked as required. Shows asterisk on label. */
+  readonly isRequired?: boolean;
+  /** If true, the field is disabled. */
+  readonly isDisabled?: boolean;
+  /** If true, the field is read-only. */
+  readonly isReadOnly?: boolean;
+}
+
+export interface IFormLabelProps extends TextProps {
+  /**
+   * Associates the label with a control `id` on web (`<label htmlFor>`).
+   * If omitted, defaults to the same id `Input.Field` gets from form context: `fieldId + "-input"`.
+   */
+  readonly htmlFor?: string;
+  /**
+   * Element to render after the label text when the field is required.
+   * Rendered by the primitive (which owns the form-control context) so the
+   * styled layer never needs to read `FormControlContext` across packages.
+   */
+  readonly requiredIndicator?: React.ReactNode;
+}
+
+export interface IFormHelperProps extends ViewProps {}
+
+export interface IFormHelperTextProps extends TextProps {}
+
+export interface IFormErrorProps extends ViewProps {}
+
+export interface IFormErrorTextProps extends TextProps {}
+
+export interface IFormErrorIconProps extends ViewProps {}
+
+export type IFormComponentType<
+  Root,
+  Field,
+  Error,
+  ErrorText,
+  ErrorIcon,
+  Label,
+  Helper,
+  HelperText,
+> = React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFormProps> & {
+  Field: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Field> & IFormFieldProps>;
+  Label: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Label> & IFormLabelProps>;
+  Helper: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<Helper> & IFormHelperProps
+  >;
+  HelperText: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<HelperText> & IFormHelperTextProps
+  >;
+  Error: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Error> & IFormErrorProps>;
+  ErrorText: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<ErrorText> & IFormErrorTextProps
+  >;
+  ErrorIcon: React.ForwardRefExoticComponent<
+    InnerForwardRefExoticComponent<ErrorIcon> & IFormErrorIconProps
+  >;
+};
+
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/index.ts

@@ -1,4 +1,12 @@
+export * from './avatar';
 export * from './button';
+export * from './checkbox';
+export * from './dialog';
+export * from './form-control';
 export * from './input';
+export * from './link';
+export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
-export { OverlayInsetsProvider, type EdgeInsets } from './overlay';
+export * from './switch';
+export type { InteractionState } from './types';
+export { dataAttributes } from './utils/dataAttributes';