@cdx-ui/components 0.0.1-beta.64 → 0.0.1-beta.66

package/src/components/ListItem/index.tsx

@@ -1,13 +1,14 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
 import {
-  createListItem,
-  type IListItemLeadingSlotProps,
+  ListItemRoot as ListItemRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
   type IListItemProps,
-  type IListItemSectionHeaderProps,
   type ListItemCrossAlign,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext, type WithStyleContextProps } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import {
   listItemContentVariants,
   listItemDescriptionVariants,
@@ -23,21 +24,6 @@ import {
 
 const SCOPE = 'LIST_ITEM';
 
-const RootView = withStyleContext(View, SCOPE);
-const RootPressable = withStyleContext(Pressable, SCOPE);
-
-const ListItemPrimitive = createListItem({
-  View: RootView,
-  Pressable: RootPressable,
-  LeadingSlot: View,
-  Content: View,
-  Title: Text,
-  Description: Text,
-  Meta: Text,
-  TrailingSlot: View,
-  SectionHeader: View,
-});
-
 const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> => {
   const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
   return { crossAlign: ctx?.crossAlign ?? 'center' };
@@ -47,31 +33,42 @@ const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> =>
 // ROOT
 // =============================================================================
 
-export interface ListItemProps extends IListItemProps, WithStyleContextProps {
+export interface ListItemProps extends Omit<IListItemProps, 'crossAlign'>, ListItemVariantProps {
   className?: string;
 }
 
 const ListItemRoot = forwardRef<View, ListItemProps>(
   (
-    { size = 'default', showSeparator = true, crossAlign = 'center', className, style, ...props },
+    {
+      size = 'default',
+      showSeparator = true,
+      crossAlign: crossAlignProp = 'center',
+      className,
+      style,
+      ...props
+    },
     ref,
   ) => {
+    const crossAlign: ListItemCrossAlign = crossAlignProp ?? 'center';
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { crossAlign } }), [parent, crossAlign]);
+
     const computedClassName = cn(
       listItemRootVariants({ size, showSeparator, crossAlign }),
       className,
     );
 
     return (
-      <ListItemPrimitive
-        ref={ref as never}
-        className={computedClassName}
-        context={{ crossAlign }}
-        crossAlign={crossAlign}
-        showSeparator={showSeparator}
-        size={size}
-        style={style}
-        {...props}
-      />
+      <ParentContext.Provider value={ctx}>
+        <ListItemRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          crossAlign={crossAlign}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item' }))}
+        />
+      </ParentContext.Provider>
     );
   },
 );
@@ -82,37 +79,62 @@ ListItemRoot.displayName = 'ListItem';
 // SLOTS & TEXT
 // =============================================================================
 
-export interface ListItemLeadingSlotProps extends IListItemLeadingSlotProps {
+const leadingSlotStyle = { flexShrink: 0 as const };
+
+export interface ListItemLeadingSlotProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
+  /**
+   * Decorative leading content defaults to hidden from the accessibility tree.
+   * Set to `false` when the leading region contains meaningful controls.
+   * @default true
+   */
+  'aria-hidden'?: boolean;
 }
 
 const ListItemLeadingSlot = forwardRef<View, ListItemLeadingSlotProps>(
-  ({ className, style, ...props }, ref) => (
-    <ListItemPrimitive.LeadingSlot
-      ref={ref as never}
-      className={cn(listItemLeadingSlotVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ asChild, className, style, 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const accessibilityElementsHidden = ariaHidden !== false;
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden={accessibilityElementsHidden}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(listItemLeadingSlotVariants(), className)}
+        style={[leadingSlotStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-leading' }))}
+      />
+    );
+  },
 );
 
 ListItemLeadingSlot.displayName = 'ListItem.LeadingSlot';
 
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column' as const,
+  minWidth: 0,
+};
+
 export interface ListItemContentProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const ListItemContent = forwardRef<View, ListItemContentProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const { crossAlign } = useListItemStyleContext();
+    const Comp = asChild ? Slot : View;
 
     return (
-      <ListItemPrimitive.Content
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={cn(listItemContentVariants({ crossAlign }), className)}
-        style={style}
+        style={[contentStyle, style]}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-content' }))}
       />
     );
   },
@@ -121,18 +143,21 @@ const ListItemContent = forwardRef<View, ListItemContentProps>(
 ListItemContent.displayName = 'ListItem.Content';
 
 export interface ListItemTitleProps extends TextProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
-  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Title
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={cn(listItemTitleVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-title' }))}
       />
     );
   },
@@ -141,17 +166,20 @@ const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
 ListItemTitle.displayName = 'ListItem.Title';
 
 export interface ListItemDescriptionProps extends TextProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Description
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={cn(listItemDescriptionVariants(), className)}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-description' }))}
       />
     );
   },
@@ -160,18 +188,21 @@ const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
 ListItemDescription.displayName = 'ListItem.Description';
 
 export interface ListItemMetaProps extends TextProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
-  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Meta
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={cn(listItemMetaVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-meta' }))}
       />
     );
   },
@@ -180,19 +211,22 @@ const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
 ListItemMeta.displayName = 'ListItem.Meta';
 
 export interface ListItemTrailingSlotProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const ListItemTrailingSlot = forwardRef<View, ListItemTrailingSlotProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const { crossAlign } = useListItemStyleContext();
+    const Comp = asChild ? Slot : View;
 
     return (
-      <ListItemPrimitive.TrailingSlot
-        ref={ref as never}
+      <Comp
+        ref={ref}
         className={cn(listItemTrailingSlotVariants({ crossAlign }), className)}
-        style={style}
+        style={[{ flexShrink: 0 }, style]}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-trailing' }))}
       />
     );
   },
@@ -211,23 +245,74 @@ const wrapSectionHeaderLabel = (children: ReactNode): ReactNode => {
 // SECTION HEADER
 // =============================================================================
 
-export interface ListItemSectionHeaderComponentProps extends IListItemSectionHeaderProps {
+// TODO: ListItem.SectionHeader doesn't follow composition patterns (composing text, trailing prop, etc).
+
+const sectionHeaderRow = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  justifyContent: 'space-between' as const,
+  gap: 8,
+};
+
+const sectionHeaderLabelCell = {
+  flex: 1,
+  minWidth: 0,
+  /** Keeps the label column from stretching to a taller trailing sibling (e.g. Chip). */
+  alignSelf: 'center' as const,
+};
+
+const sectionHeaderTrailingCell = {
+  flexShrink: 0,
+  /** Prevents the trailing slot from stretching vertically and “filling” the row. */
+  alignSelf: 'center' as const,
+};
+
+export interface ListItemSectionHeaderProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
+  /** Primary section label (e.g. date heading). */
+  children: ReactNode;
+  /** Optional right-aligned adornment (e.g. section Chip). */
+  trailing?: ReactNode;
+  /**
+   * Whether to expose the top divider marker for styling.
+   * @default true
+   */
+  showDivider?: boolean;
 }
 
-const ListItemSectionHeader = forwardRef<View, ListItemSectionHeaderComponentProps>(
-  ({ children, className, showDivider = true, style, trailing, ...props }, ref) => (
-    <ListItemPrimitive.SectionHeader
-      ref={ref as never}
-      className={cn(listItemSectionHeaderVariants({ showDivider }), className)}
-      showDivider={showDivider}
-      style={style}
-      trailing={trailing}
-      {...props}
-    >
-      {wrapSectionHeaderLabel(children)}
-    </ListItemPrimitive.SectionHeader>
-  ),
+const ListItemSectionHeader = forwardRef<View, ListItemSectionHeaderProps>(
+  (
+    {
+      asChild,
+      children,
+      className,
+      showDivider = true,
+      style,
+      trailing,
+      accessibilityRole = 'header',
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+        className={cn(listItemSectionHeaderVariants({ showDivider }), className)}
+        style={[sectionHeaderRow, style]}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'list-section-header', divider: showDivider }),
+        )}
+      >
+        <View style={sectionHeaderLabelCell}>{wrapSectionHeaderLabel(children)}</View>
+        {trailing ? <View style={sectionHeaderTrailingCell}>{trailing}</View> : null}
+      </Comp>
+    );
+  },
 );
 
 ListItemSectionHeader.displayName = 'ListItem.SectionHeader';

package/src/components/OtpInput/index.tsx

@@ -1,11 +1,20 @@
-import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
-import { forwardRef } from 'react';
-import type { View } from 'react-native';
-import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { HStack } from '../Stack/HStack';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { View, type TextInput, type ViewProps } from 'react-native';
+import {
+  OtpCellIndexProvider,
+  OtpInputField,
+  OtpInputProvider,
+  dataAttributes,
+  mergeDataAttributes,
+  useInputContext,
+  useOtpInput,
+  type IOtpInputRootProps,
+  type OtpInputFieldProps,
+} from '@cdx-ui/primitives';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Input, type InputProps } from '../Input';
-import type { InputVariantProps } from '../Input/styles';
+import { type InputVariantProps, inputFieldVariants } from '../Input/styles';
 import {
   otpCellVariants,
   otpFieldVariants,
@@ -15,45 +24,56 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
-
 const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+const OtpStyledCell = forwardRef<
+  View,
+  ViewProps & { className?: string; children?: React.ReactNode }
+>(({ className, children, ...props }, ref: ForwardedRef<View>) => {
+  const { size, variant } = useOtpInputStyleContext();
+  return (
+    <Input
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(otpCellVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </Input>
+  );
+});
+
+OtpStyledCell.displayName = 'OtpInput.Cell';
+
+/**
+ * Bridges OtpInputField focus/blur events to the parent Input's context so
+ * InputRoot emits `data-focus=true` and the `border-stroke-action` CSS activates.
+ * The primitive OtpInputField doesn't know about InputContext — that coupling
+ * belongs here in the styled layer.
+ */
+const OtpStyledField = forwardRef<TextInput, OtpInputFieldProps & { className?: string }>(
+  (props, ref) => {
+    const { setIsFocused } = useInputContext();
     return (
-      <Input
+      <OtpInputField
         ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(otpCellVariants({ size }), className)}
         {...props}
-      >
-        {children}
-      </Input>
+        onFocus={(e) => {
+          setIsFocused?.(true);
+          props.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused?.(false);
+          props.onBlur?.(e);
+        }}
+      />
     );
   },
 );
 
-OtpStyledCell.displayName = 'OtpInput.Cell';
-
-const OtpStyledField = forwardRef<
-  ComponentRef<typeof Input.Field>,
-  ComponentProps<typeof Input.Field>
->(({ className, ...props }, ref) => {
-  const { size } = useOtpInputStyleContext();
-  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
-});
-
 OtpStyledField.displayName = 'OtpInput.Field';
 
-const OtpPrimitive = createOtpInput({
-  Root: OtpRoot,
-  Cell: OtpStyledCell,
-  Field: OtpStyledField,
-});
-
 export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
   variant?: NonNullable<InputProps['variant']>;
   size?: NonNullable<InputProps['size']>;
@@ -61,17 +81,80 @@ export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInpu
 }
 
 export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+  (
+    {
+      variant = 'outline',
+      size = 'default',
+      fullWidth = true,
+      className,
+      style,
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const otpContext = useOtpInput({
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+    });
+
     const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
+    const fieldClassName = cn(inputFieldVariants({ size }), otpFieldVariants({ size }));
+
+    const cells: React.ReactElement[] = [];
+    for (let i = 0; i < cellCount; i++) {
+      cells.push(
+        <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+          <OtpStyledCell>
+            <OtpStyledField className={fieldClassName} />
+          </OtpStyledCell>
+        </OtpCellIndexProvider>,
+      );
+    }
+
     return (
-      <OtpPrimitive
-        ref={ref}
-        className={rootClassName}
-        style={style}
-        context={{ variant, size }}
-        {...rest}
-      />
+      <ParentContext.Provider value={ctx}>
+        <OtpInputProvider value={otpContext}>
+          <View
+            ref={ref}
+            className={rootClassName}
+            style={style}
+            {...rest}
+            {...mergeDataAttributes(rest, dataAttributes({ slot: 'otp-input' }))}
+          >
+            {cells}
+          </View>
+        </OtpInputProvider>
+      </ParentContext.Provider>
     );
   },
 );

package/src/components/ProgressBar/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import {
   progressBarIndicatorVariants,
@@ -8,11 +8,6 @@ import {
   type ProgressBarTrackVariantProps,
 } from './styles';
 
-const ProgressPrimitive = createProgress({
-  Root: View,
-  Indicator: View,
-});
-
 export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
   readonly className?: string;
 }
@@ -21,19 +16,19 @@ export interface ProgressBarIndicatorProps extends ViewProps {
   readonly className?: string;
 }
 
-const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
   ({ className, style, ...props }, ref) => {
     const trackClass = cn(progressBarTrackVariants(), className);
 
-    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
   },
 );
 
-ProgressBarRoot.displayName = 'ProgressBar';
+ProgressBarRootComponent.displayName = 'ProgressBar';
 
-const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
   ({ className, style, ...props }, ref) => (
-    <ProgressPrimitive.Indicator
+    <ProgressBarIndicator
       ref={ref}
       className={cn(progressBarIndicatorVariants(), className)}
       style={style}
@@ -42,12 +37,12 @@ const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
   ),
 );
 
-ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';
 
-type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
-  Indicator: typeof ProgressBarIndicator;
+type ProgressBarCompoundComponent = typeof ProgressBarRootComponent & {
+  Indicator: typeof ProgressBarIndicatorComponent;
 };
 
-export const ProgressBar = Object.assign(ProgressBarRoot, {
-  Indicator: ProgressBarIndicator,
+export const ProgressBar = Object.assign(ProgressBarRootComponent, {
+  Indicator: ProgressBarIndicatorComponent,
 }) as ProgressBarCompoundComponent;