@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

package/src/components/ListItem/index.tsx

@@ -0,0 +1,355 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  ListItemRoot as ListItemRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IListItemProps,
+  type ListItemCrossAlign,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  listItemContentVariants,
+  listItemDescriptionVariants,
+  listItemLeadingSlotVariants,
+  listItemMetaVariants,
+  listItemRootVariants,
+  listItemSectionHeaderLabelVariants,
+  listItemSectionHeaderVariants,
+  listItemTitleVariants,
+  listItemTrailingSlotVariants,
+  type ListItemVariantProps,
+} from './styles';
+
+const SCOPE = 'LIST_ITEM';
+
+const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> => {
+  const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
+  return { crossAlign: ctx?.crossAlign ?? 'center' };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface ListItemProps extends Omit<IListItemProps, 'crossAlign'>, ListItemVariantProps {
+  className?: string;
+}
+
+const ListItemRoot = forwardRef<View, ListItemProps>(
+  (
+    {
+      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 (
+      <ParentContext.Provider value={ctx}>
+        <ListItemRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          crossAlign={crossAlign}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item' }))}
+        />
+      </ParentContext.Provider>
+    );
+  },
+);
+
+ListItemRoot.displayName = 'ListItem';
+
+// =============================================================================
+// SLOTS & TEXT
+// =============================================================================
+
+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>(
+  ({ 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>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(listItemContentVariants({ crossAlign }), className)}
+        style={[contentStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-content' }))}
+      />
+    );
+  },
+);
+
+ListItemContent.displayName = 'ListItem.Content';
+
+export interface ListItemTitleProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(listItemTitleVariants(), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-title' }))}
+      />
+    );
+  },
+);
+
+ListItemTitle.displayName = 'ListItem.Title';
+
+export interface ListItemDescriptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(listItemDescriptionVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-description' }))}
+      />
+    );
+  },
+);
+
+ListItemDescription.displayName = 'ListItem.Description';
+
+export interface ListItemMetaProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(listItemMetaVariants(), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-meta' }))}
+      />
+    );
+  },
+);
+
+ListItemMeta.displayName = 'ListItem.Meta';
+
+export interface ListItemTrailingSlotProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+const ListItemTrailingSlot = forwardRef<View, ListItemTrailingSlotProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(listItemTrailingSlotVariants({ crossAlign }), className)}
+        style={[{ flexShrink: 0 }, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-trailing' }))}
+      />
+    );
+  },
+);
+
+ListItemTrailingSlot.displayName = 'ListItem.TrailingSlot';
+
+const wrapSectionHeaderLabel = (children: ReactNode): ReactNode => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return <Text className={cn(listItemSectionHeaderLabelVariants())}>{children}</Text>;
+  }
+  return children;
+};
+
+// =============================================================================
+// SECTION HEADER
+// =============================================================================
+
+// 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, 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';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type ListItemCompound = typeof ListItemRoot & {
+  LeadingSlot: typeof ListItemLeadingSlot;
+  Content: typeof ListItemContent;
+  Title: typeof ListItemTitle;
+  Description: typeof ListItemDescription;
+  Meta: typeof ListItemMeta;
+  TrailingSlot: typeof ListItemTrailingSlot;
+  SectionHeader: typeof ListItemSectionHeader;
+};
+
+export const ListItem = Object.assign(ListItemRoot, {
+  LeadingSlot: ListItemLeadingSlot,
+  Content: ListItemContent,
+  Title: ListItemTitle,
+  Description: ListItemDescription,
+  Meta: ListItemMeta,
+  TrailingSlot: ListItemTrailingSlot,
+  SectionHeader: ListItemSectionHeader,
+}) as ListItemCompound;
+
+export type { ListItemCrossAlign, ListItemVariantProps };
+export {
+  listItemContentVariants,
+  listItemDescriptionVariants,
+  listItemLeadingSlotVariants,
+  listItemMetaVariants,
+  listItemRootVariants,
+  listItemSectionHeaderLabelVariants,
+  listItemSectionHeaderVariants,
+  listItemTitleVariants,
+  listItemTrailingSlotVariants,
+} from './styles';

package/src/components/ListItem/styles.ts

@@ -0,0 +1,129 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+// ── Root (row): density, separator, interactive feedback ───────────────────
+//
+// Web hover/active/focus paint an absolutely positioned bg-content-primary overlay at
+// --opacity-hover (8%) / --opacity-hover-overlay (20%) / --opacity-selected (12%), plus a focus
+// ring on focus-visible. State is driven by the data attributes the primitive root emits
+// (data-hover / data-active / data-focus-visible) — or by the composed child on `asChild`
+// (e.g. Link emits the same attributes). Native active uses a flat tint because ::before
+// pseudo-elements are web-only.
+//
+// TODO: Handle native background color hover/focus transitions
+
+export const listItemRootVariants = cva(
+  [
+    'relative flex-row self-stretch w-full overflow-clip px-5 bg-transparent',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:pointer-events-none',
+    TRANSITION_COLORS,
+    Platform.select({
+      web: [
+        'outline-none',
+        'before:pointer-events-none before:absolute before:inset-0 before:bg-content-primary before:opacity-0 before:content-[""]',
+        'before:transition-opacity before:duration-150 before:ease-out',
+        'data-[hover=true]:before:opacity-[var(--opacity-hover)]',
+        // Pressed wins over hover via the compound selector (higher specificity), mirroring Button.
+        'data-[active=true]:data-[hover=true]:before:opacity-[var(--opacity-hover-overlay)]',
+        'data-[focus-visible=true]:before:opacity-[var(--opacity-selected)]',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
+      ].join(' '),
+      default: 'data-[active=true]:bg-surface-primary-hover',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        default: 'gap-3 py-3 min-h-16',
+        compact: 'gap-3 py-2 min-h-12',
+      },
+      showSeparator: {
+        true: [
+          'border-b border-solid border-stroke-secondary',
+          Platform.select({ web: 'before:-bottom-px', default: '' }),
+        ].join(' '),
+        false: 'border-b-0',
+      },
+      crossAlign: {
+        center: 'items-center',
+        start: 'items-start',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      showSeparator: true,
+      crossAlign: 'center',
+    },
+  },
+);
+
+// ── Leading / trailing slots ─────────────────────────────────────────────────
+
+export const listItemLeadingSlotVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center',
+]);
+
+export const listItemTrailingSlotVariants = cva(
+  ['relative z-10 flex shrink-0 flex-row justify-end gap-2'],
+  {
+    variants: {
+      crossAlign: {
+        center: 'items-center',
+        start: 'items-start self-start',
+      },
+    },
+    defaultVariants: {
+      crossAlign: 'center',
+    },
+  },
+);
+
+// ── Content stack (title / description / meta) ───────────────────────────────
+
+export const listItemContentVariants = cva('relative z-10 flex min-w-0 flex-1 flex-col gap-1', {
+  variants: {
+    crossAlign: {
+      center: 'justify-center',
+      start: 'justify-start',
+    },
+  },
+  defaultVariants: {
+    crossAlign: 'center',
+  },
+});
+
+// ── Typography ───────────────────────────────────────────────────────────────
+
+export const listItemTitleVariants = cva('body-md font-medium text-content-primary');
+
+export const listItemDescriptionVariants = cva('body-sm text-content-secondary');
+
+export const listItemMetaVariants = cva('body-sm text-content-tertiary');
+
+// ── Section header (group label row inside lists / cards) ───────────────────
+
+export const listItemSectionHeaderVariants = cva(
+  [
+    'flex-row items-center justify-between gap-2 border-b border-solid px-4 py-3',
+    'border-stroke-secondary',
+  ],
+  {
+    variants: {
+      showDivider: {
+        true: ['border-t-4 border-solid border-t-surface-brand-strong/40', 'border-x-0'],
+        false: 'border-t-0',
+      },
+    },
+    defaultVariants: {
+      showDivider: true,
+    },
+  },
+);
+
+/** Default section-title typography; applied by `ListItem.SectionHeader` for string/number children. Exported for rare custom composition. */
+export const listItemSectionHeaderLabelVariants = cva(
+  'text-xs font-semibold uppercase tracking-wide text-content-secondary',
+);
+
+export type ListItemVariantProps = VariantProps<typeof listItemRootVariants>;

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,13 +24,24 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as Partial<InputVariantProps>;
 
-const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+export interface OtpInputCellProps extends ViewProps, InputVariantProps {
+  className?: string;
+  children?: React.ReactNode;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+const OtpStyledCell = forwardRef<View, OtpInputCellProps>(
+  (
+    { className, children, variant: variantProp, size: sizeProp, ...props },
+    ref: ForwardedRef<View>,
+  ) => {
+    const context = useOtpInputStyleContext();
+    const variant = variantProp ?? context.variant ?? 'outline';
+    const size = sizeProp ?? context.size ?? 'default';
     return (
       <Input
         ref={ref}
@@ -38,42 +58,137 @@ const OtpStyledCell = forwardRef<View, InputProps>(
 
 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} />;
+export type OtpInputFieldStyledProps = OtpInputFieldProps & { className?: string };
+
+/**
+ * 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, OtpInputFieldStyledProps>((props, ref) => {
+  const { setIsFocused } = useInputContext();
+  return (
+    <OtpInputField
+      ref={ref}
+      {...props}
+      onFocus={(e) => {
+        setIsFocused?.(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused?.(false);
+        props.onBlur?.(e);
+      }}
+    />
+  );
 });
 
 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']>;
   className?: string;
 }
 
-export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+const OtpInputRoot = forwardRef<View, OtpInputProps>(
+  (
+    {
+      variant = 'outline',
+      size,
+      fullWidth,
+      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 {
+      isDisabled: resolvedDisabled,
+      isInvalid: resolvedInvalid,
+      isReadOnly: resolvedReadOnly,
+    } = otpContext;
+
+    const cells: React.ReactElement[] = [];
+    for (let i = 0; i < cellCount; i++) {
+      cells.push(
+        <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+          <OtpStyledCell
+            isDisabled={resolvedDisabled}
+            isInvalid={resolvedInvalid}
+            isReadOnly={resolvedReadOnly}
+          >
+            <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>
     );
   },
 );
 
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+
+type OtpInputCompoundComponent = typeof OtpInputRoot & {
+  Cell: typeof OtpStyledCell;
+  Field: typeof OtpStyledField;
+};
+
+export const OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+}) as OtpInputCompoundComponent;