@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.181

package/src/list-item/createListItemTitle.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemTitleProps } from './types';
-
-export const createListItemTitle = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(({ children, style, ...props }: IListItemTitleProps, ref: React.Ref<unknown>) => (
-    <Base
-      {...(props as T)}
-      {...dataAttributes({
-        slot: 'list-item-title',
-      })}
-      ref={ref as React.Ref<T>}
-      style={style}
-    >
-      {children}
-    </Base>
-  ));

package/src/list-item/createListItemTrailingSlot.tsx

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import type { IListItemTrailingSlotProps } from './types';
-
-const shrinkZero = { flexShrink: 0 as const };
-
-export const createListItemTrailingSlot = <T,>(Base: React.ComponentType<T>) =>
-  forwardRef(
-    ({ children, style, ...props }: IListItemTrailingSlotProps, ref: React.Ref<unknown>) => (
-      <Base
-        {...(props as T)}
-        {...dataAttributes({
-          slot: 'list-item-trailing',
-        })}
-        ref={ref as React.Ref<T>}
-        style={[shrinkZero, style]}
-      >
-        {children}
-      </Base>
-    ),
-  );

package/src/otp-input/createOtpInputCell.tsx

@@ -1,22 +0,0 @@
-import type React from 'react';
-import type { PropsWithChildren } from 'react';
-import { forwardRef } from 'react';
-import { useOtpInputContext } from './context';
-import type { IOtpInputCellProps } from './types';
-
-export const createOtpInputCell = <T,>(BaseCell: React.ComponentType<T>) =>
-  forwardRef<unknown, PropsWithChildren<IOtpInputCellProps & T>>(({ children, ...props }, ref) => {
-    const { isDisabled, isInvalid, isReadOnly } = useOtpInputContext();
-
-    return (
-      <BaseCell
-        ref={ref}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        {...(props as T)}
-      >
-        {children}
-      </BaseCell>
-    );
-  });

package/src/otp-input/createOtpInputField.tsx

@@ -1,98 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo } from 'react';
-import { Platform, type TextInput, type TextInputKeyPressEvent } from 'react-native';
-import { mergeRefs } from '@cdx-ui/utils';
-import { useOtpCellIndexContext, useOtpInputContext } from './context';
-import type { IOtpInputFieldProps } from './types';
-
-export const createOtpInputField = <T,>(BaseField: React.ComponentType<T>) =>
-  forwardRef<TextInput, IOtpInputFieldProps & Omit<T, keyof IOtpInputFieldProps>>((props, ref) => {
-    const { cellIndex } = useOtpCellIndexContext();
-    const {
-      value,
-      cellCount,
-      isDisabled,
-      isReadOnly,
-      smsOtpAutofill,
-      getCellProps,
-      cellTestIdPrefix,
-      rootAccessibilityLabel,
-      setFieldRef,
-      handleFieldChange,
-      handleFieldKeyPress,
-    } = useOtpInputContext();
-
-    const char = cellIndex < value.length ? (value[cellIndex] ?? '') : '';
-    const extra = getCellProps?.(cellIndex) ?? {};
-
-    const accessibilityLabel = useMemo(() => {
-      const fromExtra = extra.accessibilityLabel;
-      if (typeof fromExtra === 'string' && fromExtra !== '') {
-        return fromExtra;
-      }
-      if (rootAccessibilityLabel) {
-        return `${rootAccessibilityLabel}, ${String(cellIndex + 1)} of ${String(cellCount)}`;
-      }
-      return `OTP digit ${String(cellIndex + 1)} of ${String(cellCount)}`;
-    }, [cellCount, cellIndex, extra.accessibilityLabel, rootAccessibilityLabel]);
-
-    const autofillProps = useMemo(() => {
-      if (!smsOtpAutofill || cellIndex !== 0) {
-        return {};
-      }
-      return Platform.select<Record<string, unknown>>({
-        web: { autoComplete: 'one-time-code' },
-        ios: { textContentType: 'oneTimeCode' },
-        android: { autoComplete: 'sms-otp' },
-        default: {},
-      });
-    }, [cellIndex, smsOtpAutofill]);
-
-    const editable = !(isDisabled || isReadOnly);
-
-    const { style: extraStyle, accessibilityLabel: _omitExtraA11y, ...extraRest } = extra;
-    void _omitExtraA11y;
-    const {
-      style: incomingStyle,
-      value: _omitValue,
-      defaultValue: _omitDefault,
-      onChangeText: _omitOnChange,
-      ...incomingRest
-    } = props as IOtpInputFieldProps;
-    void _omitValue;
-    void _omitDefault;
-    void _omitOnChange;
-
-    // Default digit OTP (`number-pad`). Root `getCellProps` is spread after and may override `keyboardType`.
-    return (
-      <BaseField
-        ref={mergeRefs(ref, (el: TextInput | null) => {
-          setFieldRef(cellIndex, el);
-        })}
-        accessibilityLabel={accessibilityLabel}
-        aria-label={accessibilityLabel}
-        accessible
-        autoFocus={cellIndex === 0 && editable && value.length === 0}
-        editable={editable}
-        keyboardType="number-pad"
-        returnKeyType="done"
-        selectTextOnFocus
-        testID={
-          cellTestIdPrefix
-            ? `${cellTestIdPrefix}:${String(cellIndex)}:textField:changeText`
-            : undefined
-        }
-        value={char}
-        onChangeText={(text: string) => {
-          handleFieldChange(cellIndex, text);
-        }}
-        onKeyPress={(e: TextInputKeyPressEvent) => {
-          handleFieldKeyPress(cellIndex, e.nativeEvent.key);
-        }}
-        {...autofillProps}
-        {...(extraRest as object)}
-        {...(incomingRest as T)}
-        style={[extraStyle, incomingStyle]}
-      />
-    );
-  });

package/src/otp-input/createOtpInputRoot.tsx

@@ -1,179 +0,0 @@
-import type React from 'react';
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import type { TextInput } from 'react-native';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { applyOtpInputChange } from './utils/applyValueChange';
-import { OtpCellIndexProvider, OtpInputProvider } from './context';
-import { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
-import type { IOtpInputRootProps } from './types';
-
-export const createOtpInputRoot = <RootProps,>(
-  BaseRoot: React.ComponentType<RootProps>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- slot components are generic across design systems
-  OtpCell: React.ComponentType<any>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  OtpField: React.ComponentType<any>,
-) =>
-  forwardRef<unknown, IOtpInputRootProps & RootProps>(
-    (
-      {
-        cellCount,
-        value,
-        onChangeText,
-        onComplete,
-        isDisabled: isDisabledProp,
-        isInvalid: isInvalidProp,
-        isReadOnly: isReadOnlyProp,
-        smsOtpAutofill = true,
-        filterInput,
-        allowedCharacters,
-        characterPattern,
-        getCellProps,
-        cellTestIdPrefix,
-        accessibilityLabel: rootAccessibilityLabel,
-        ...rest
-      },
-      ref,
-    ) => {
-      const form = useFormControlContext();
-      const isDisabled = isDisabledProp ?? form.isDisabled ?? false;
-      const isInvalid = isInvalidProp ?? form.isInvalid ?? false;
-      const isReadOnly = isReadOnlyProp ?? form.isReadOnly ?? false;
-
-      const fieldRefs = useRef<(TextInput | null)[]>([]);
-      const focusAfterApply = useRef<number | null>(null);
-      const prevLenRef = useRef(value.length);
-      const prevValueRef = useRef(value);
-
-      const filter = useMemo(() => {
-        if (filterInput) {
-          return filterInput;
-        }
-        if (allowedCharacters !== undefined) {
-          return filterAllowedCharacters(allowedCharacters);
-        }
-        if (characterPattern !== undefined) {
-          return filterByRegExp(characterPattern);
-        }
-        return filterDigits;
-      }, [filterInput, allowedCharacters, characterPattern]);
-
-      const setFieldRef = useCallback((index: number, el: TextInput | null) => {
-        fieldRefs.current[index] = el;
-      }, []);
-
-      const focusCell = useCallback(
-        (index: number) => {
-          const safe = Math.max(0, Math.min(index, cellCount - 1));
-          fieldRefs.current[safe]?.focus();
-        },
-        [cellCount],
-      );
-
-      const handleFieldChange = useCallback(
-        (index: number, text: string) => {
-          const { nextValue, focusIndex } = applyOtpInputChange(
-            value,
-            index,
-            text,
-            cellCount,
-            filter,
-          );
-          if (nextValue !== value) {
-            onChangeText(nextValue);
-          }
-          focusAfterApply.current = focusIndex;
-        },
-        [cellCount, filter, onChangeText, value],
-      );
-
-      const handleFieldKeyPress = useCallback(
-        (index: number, key: string) => {
-          if (key !== 'Backspace') {
-            return;
-          }
-          const char = index < value.length ? value[index] : '';
-          if (!char && index > 0) {
-            focusCell(index - 1);
-          }
-        },
-        [focusCell, value],
-      );
-
-      useLayoutEffect(() => {
-        if (focusAfterApply.current !== null) {
-          const i = focusAfterApply.current;
-          focusAfterApply.current = null;
-          fieldRefs.current[i]?.focus();
-        }
-      });
-
-      useEffect(() => {
-        const prevLen = prevLenRef.current;
-        const prevVal = prevValueRef.current;
-        const isFull = value.length === cellCount;
-        const becameFullByLength = isFull && prevLen < cellCount;
-        const correctedWhileFull = isFull && prevLen === cellCount && prevVal !== value;
-
-        if (becameFullByLength || correctedWhileFull) {
-          onComplete?.();
-        }
-        prevLenRef.current = value.length;
-        prevValueRef.current = value;
-      }, [cellCount, onComplete, value]);
-
-      const contextValue = useMemo(
-        () => ({
-          cellCount,
-          value,
-          isDisabled,
-          isInvalid,
-          isReadOnly,
-          smsOtpAutofill,
-          filter,
-          getCellProps,
-          cellTestIdPrefix,
-          rootAccessibilityLabel,
-          setFieldRef,
-          handleFieldChange,
-          handleFieldKeyPress,
-        }),
-        [
-          cellCount,
-          value,
-          isDisabled,
-          isInvalid,
-          isReadOnly,
-          smsOtpAutofill,
-          filter,
-          getCellProps,
-          cellTestIdPrefix,
-          rootAccessibilityLabel,
-          setFieldRef,
-          handleFieldChange,
-          handleFieldKeyPress,
-        ],
-      );
-
-      // Hermes drops outer-scope closure vars from its environment record when
-      // they are only referenced inside a nested callback (Array.from). Using a
-      // for-loop keeps OtpCell/OtpField references in the render function's own
-      // scope, avoiding the Hermes closure-capture bug.
-      const cells: React.ReactElement[] = [];
-      for (let i = 0; i < cellCount; i++) {
-        cells.push(
-          <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
-            <OtpCell>
-              <OtpField />
-            </OtpCell>
-          </OtpCellIndexProvider>,
-        );
-      }
-
-      return (
-        <BaseRoot ref={ref as React.Ref<unknown>} {...(rest as RootProps)}>
-          <OtpInputProvider value={contextValue}>{cells}</OtpInputProvider>
-        </BaseRoot>
-      );
-    },
-  );

package/src/otp-input/index.tsx

@@ -1,34 +0,0 @@
-import type React from 'react';
-import { createOtpInputCell } from './createOtpInputCell';
-import { createOtpInputField } from './createOtpInputField';
-import { createOtpInputRoot } from './createOtpInputRoot';
-import type { IOtpInputComponentType } from './types';
-
-export { applyOtpInputChange } from './utils/applyValueChange';
-export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
-export type * from './types';
-
-export function createOtpInput<
-  RootProps,
-  CellProps,
-  FieldProps,
-  RootRef = unknown,
-  FieldRef = unknown,
->(BaseComponents: {
-  Root: React.ComponentType<RootProps>;
-  Cell: React.ComponentType<CellProps>;
-  Field: React.ComponentType<FieldProps>;
-}) {
-  const Cell = createOtpInputCell(BaseComponents.Cell);
-  const Field = createOtpInputField(BaseComponents.Field);
-  const Root = createOtpInputRoot(BaseComponents.Root, Cell, Field);
-
-  Root.displayName = 'OtpInputPrimitive';
-  Cell.displayName = 'OtpInputPrimitive.Cell';
-  Field.displayName = 'OtpInputPrimitive.Field';
-
-  return Object.assign(Root, {
-    Cell,
-    Field,
-  }) as IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
-}

package/src/progress/createProgressIndicator.tsx

@@ -1,35 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
-import type { ViewStyle } from 'react-native';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useProgressContext } from './context';
-
-type PercentString = `${number}%`;
-
-export const createProgressIndicator = <T, R = unknown>(BaseIndicator: React.ComponentType<T>) =>
-  forwardRef<R, PropsWithoutRef<T>>((props, ref) => {
-    const { style, ...rest } = props as PropsWithoutRef<T> & { style?: object };
-    const { percent, state, max, value } = useProgressContext();
-
-    const filledStyle = useMemo((): ViewStyle => {
-      const pct = `${String(percent)}%` as PercentString;
-      return { width: pct, height: '100%' };
-    }, [percent]);
-
-    const dataAttrs = dataAttributes({
-      state,
-      value: value === null ? undefined : String(value),
-      max: String(max),
-    });
-
-    return (
-      <BaseIndicator
-        ref={ref as React.Ref<R>}
-        {...({
-          ...rest,
-          ...dataAttrs,
-          style: [filledStyle, style],
-        } as T)}
-      />
-    );
-  });

package/src/progress/createProgressRoot.tsx

@@ -1,109 +0,0 @@
-import type React from 'react';
-import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { ProgressProvider } from './context';
-import type { InterfaceProgressProps, ProgressDataState } from './types';
-
-function clamp(n: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, n));
-}
-
-function resolveState(
-  value: number | null,
-  max: number,
-  clamped: number | null,
-): ProgressDataState {
-  if (value === null) {
-    return 'indeterminate';
-  }
-  if (max <= 0) {
-    return 'complete';
-  }
-  if (clamped !== null && clamped >= max) {
-    return 'complete';
-  }
-  return 'loading';
-}
-
-function defaultGetValueLabel(value: number, max: number): string {
-  if (max <= 0) {
-    return '0%';
-  }
-  return `${String(Math.round((value / max) * 100))}%`;
-}
-
-export const createProgressRoot = <T, R = unknown>(BaseRoot: React.ComponentType<T>) =>
-  forwardRef<R, PropsWithoutRef<T> & InterfaceProgressProps>((props, ref) => {
-    const {
-      value: valueProp = 0,
-      max: maxProp = 100,
-      getValueLabel = defaultGetValueLabel,
-      children,
-      accessibilityRole = 'progressbar',
-      accessibilityValue: accessibilityValueProp,
-      role = 'progressbar',
-      ...restProps
-    } = props;
-    const max = maxProp > 0 ? maxProp : 0;
-    const isIndeterminate = valueProp === null;
-    const clampedValue =
-      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
-
-    const percent = useMemo(() => {
-      if (clampedValue === null || max <= 0) {
-        return 0;
-      }
-      return (clampedValue / max) * 100;
-    }, [clampedValue, max]);
-
-    const state = useMemo(
-      () => resolveState(valueProp, max, clampedValue),
-      [valueProp, max, clampedValue],
-    );
-
-    const contextValue = useMemo(
-      () => ({
-        value: clampedValue,
-        max,
-        percent,
-        state,
-      }),
-      [clampedValue, max, percent, state],
-    );
-
-    const dataAttrs = dataAttributes({
-      state,
-      value: clampedValue === null ? undefined : String(clampedValue),
-      max: String(max),
-    });
-
-    const accessibilityValue = useMemo(() => {
-      if (accessibilityValueProp !== undefined) {
-        return accessibilityValueProp;
-      }
-      if (isIndeterminate || clampedValue === null) {
-        return { min: 0, max, text: 'Indeterminate' };
-      }
-      return {
-        min: 0,
-        max,
-        now: clampedValue,
-        text: getValueLabel(clampedValue, max),
-      };
-    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
-
-    return (
-      <ProgressProvider value={contextValue}>
-        <BaseRoot
-          ref={ref as React.Ref<R>}
-          {...(restProps as T)}
-          role={role}
-          accessibilityRole={accessibilityRole}
-          accessibilityValue={accessibilityValue}
-          {...dataAttrs}
-        >
-          {children}
-        </BaseRoot>
-      </ProgressProvider>
-    );
-  });

package/src/progress/index.ts

@@ -1,28 +0,0 @@
-import type React from 'react';
-import { createProgressIndicator } from './createProgressIndicator';
-import { createProgressRoot } from './createProgressRoot';
-import type { IProgressComponentType } from './types';
-
-export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
-export type { ProgressContextValue } from './context';
-export { useProgressContext } from './context';
-
-export function createProgress<
-  RootProps,
-  IndicatorProps,
-  RootRef = unknown,
-  IndicatorRef = unknown,
->(components: {
-  Root: React.ComponentType<RootProps>;
-  Indicator: React.ComponentType<IndicatorProps>;
-}) {
-  const Progress = createProgressRoot<RootProps, RootRef>(components.Root);
-  const Indicator = createProgressIndicator<IndicatorProps, IndicatorRef>(components.Indicator);
-
-  Progress.displayName = 'ProgressPrimitive';
-  Indicator.displayName = 'ProgressPrimitive.Indicator';
-
-  return Object.assign(Progress, {
-    Indicator,
-  }) as IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
-}

package/src/progress/types.ts

@@ -1,37 +0,0 @@
-import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-import type { ViewProps } from 'react-native';
-
-export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
-
-export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
-  /**
-   * Current value in the range [0, max], or `null` for indeterminate progress.
-   * Omit or use a number for determinate progress; default is `0`.
-   */
-  readonly value?: number | null;
-  /**
-   * Maximum value (minimum is always 0).
-   * @default 100
-   */
-  readonly max?: number;
-  /**
-   * Optional label for `accessibilityValue.text` when determinate.
-   */
-  readonly getValueLabel?: (value: number, max: number) => string;
-  readonly children?: ReactNode;
-}
-
-export type IProgressComponentType<
-  RootProps,
-  IndicatorProps,
-  RootRef = unknown,
-  IndicatorRef = unknown,
-> = ForwardRefExoticComponent<
-  PropsWithoutRef<RootProps & InterfaceProgressProps> & RefAttributes<RootRef>
-> & {
-  Indicator: ForwardRefExoticComponent<
-    PropsWithoutRef<IndicatorProps> & RefAttributes<IndicatorRef>
-  >;
-};
-
-export type IProgressProps = InterfaceProgressProps;

package/src/radio/createRadioGroup.tsx

@@ -1,67 +0,0 @@
-import { forwardRef } from 'react';
-import { useFormControlContext } from '@cdx-ui/utils';
-import { useRadioGroup } from '@react-native-aria/radio';
-import { useRadioGroupState } from '@react-stately/radio';
-import { dataAttributes } from '../utils/dataAttributes';
-import { RadioGroupContext } from './context';
-import type { IRadioGroupProps } from './types';
-
-export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
-  forwardRef(({ children, ...props }: IRadioGroupProps, ref?: React.Ref<T>) => {
-    const formControlContext = useFormControlContext();
-
-    const combinedProps = {
-      ...formControlContext,
-      ...props,
-    };
-
-    const radioGroupState = useRadioGroupState({
-      ...combinedProps,
-      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
-    });
-
-    const { radioGroupProps } = useRadioGroup(
-      {
-        ...combinedProps,
-        'aria-label': combinedProps['aria-label'],
-      },
-      radioGroupState,
-    );
-
-    const isDisabled = combinedProps.isDisabled ?? false;
-    const isInvalid = combinedProps.isInvalid ?? false;
-    const isRequired = combinedProps.isRequired ?? false;
-    const isReadOnly = combinedProps.isReadOnly ?? false;
-
-    return (
-      <RadioGroupContext.Provider
-        value={{
-          state: {
-            isDisabled,
-            isInvalid,
-            isRequired,
-            isReadOnly,
-            isSelected: (value: string) => radioGroupState.selectedValue === value,
-            selectValue: (value: string) => radioGroupState.setSelectedValue(value),
-          },
-          radioGroupState,
-          name: combinedProps.name,
-        }}
-      >
-        <BaseRadioGroup
-          {...radioGroupProps}
-          {...(combinedProps as unknown as T)}
-          ref={ref}
-          aria-required={isRequired || undefined}
-          aria-readonly={isReadOnly || undefined}
-          {...dataAttributes({
-            slot: 'radio-group',
-            disabled: isDisabled,
-            invalid: isInvalid,
-          })}
-        >
-          {children}
-        </BaseRadioGroup>
-      </RadioGroupContext.Provider>
-    );
-  });

package/src/radio/createRadioIndicator.tsx

@@ -1,32 +0,0 @@
-import { forwardRef } from 'react';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useRadioContext } from './context';
-import type { IRadioIndicatorProps } from './types';
-
-export const createRadioIndicator = <T,>(BaseRadioIndicator: React.ComponentType<T>) =>
-  forwardRef<unknown, IRadioIndicatorProps & { className?: string }>(
-    ({ children, className, ...props }, ref) => {
-      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
-        useRadioContext();
-
-      return (
-        <BaseRadioIndicator
-          className={className}
-          {...dataAttributes({
-            slot: 'radio-indicator',
-            hover: isHovered,
-            checked: isChecked,
-            disabled: isDisabled,
-            focusVisible: isFocusVisible,
-            invalid: isInvalid,
-            readonly: isReadOnly,
-            active: isPressed,
-          })}
-          {...(props as T)}
-          ref={ref}
-        >
-          {children}
-        </BaseRadioIndicator>
-      );
-    },
-  );