@cdx-ui/components 0.0.1-beta.9 → 0.0.1-beta.91

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,31 +24,16 @@ 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, 'size' | 'crossAlign'> => {
+const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> => {
   const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
-  return { size: ctx?.size ?? 'default', crossAlign: ctx?.crossAlign ?? 'center' };
+  return { crossAlign: ctx?.crossAlign ?? 'center' };
 };
 
 // =============================================================================
 // ROOT
 // =============================================================================
 
-export interface ListItemProps extends IListItemProps, WithStyleContextProps {
+export interface ListItemProps extends Omit<IListItemProps, 'crossAlign'>, ListItemVariantProps {
   className?: string;
 }
 
@@ -55,32 +41,34 @@ const ListItemRoot = forwardRef<View, ListItemProps>(
   (
     {
       size = 'default',
-      surface = 'default',
       showSeparator = true,
-      crossAlign = 'center',
+      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, surface, showSeparator, crossAlign }),
+      listItemRootVariants({ size, showSeparator, crossAlign }),
       className,
     );
 
     return (
-      <ListItemPrimitive
-        ref={ref as never}
-        className={computedClassName}
-        context={{ size, surface, showSeparator, crossAlign }}
-        crossAlign={crossAlign}
-        showSeparator={showSeparator}
-        size={size}
-        style={style}
-        surface={surface}
-        {...props}
-      />
+      <ParentContext.Provider value={ctx}>
+        <ListItemRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          crossAlign={crossAlign}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item' }))}
+        />
+      </ParentContext.Provider>
     );
   },
 );
@@ -91,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' }))}
       />
     );
   },
@@ -130,20 +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) => {
-    const { size } = useListItemStyleContext();
-
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Title
-        ref={ref as never}
-        className={cn(listItemTitleVariants({ size }), className)}
+      <Comp
+        ref={ref}
+        className={cn(listItemTitleVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-title' }))}
       />
     );
   },
@@ -152,19 +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) => {
-    const { size } = useListItemStyleContext();
-
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Description
-        ref={ref as never}
-        className={cn(listItemDescriptionVariants({ size }), className)}
+      <Comp
+        ref={ref}
+        className={cn(listItemDescriptionVariants(), className)}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-description' }))}
       />
     );
   },
@@ -173,20 +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) => {
-    const { size } = useListItemStyleContext();
-
+  ({ asChild, className, numberOfLines = 1, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
     return (
-      <ListItemPrimitive.Meta
-        ref={ref as never}
-        className={cn(listItemMetaVariants({ size }), className)}
+      <Comp
+        ref={ref}
+        className={cn(listItemMetaVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'list-item-meta' }))}
       />
     );
   },
@@ -195,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' }))}
       />
     );
   },
@@ -226,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/ListItem/styles.ts

@@ -1,43 +1,48 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  COLOR_TEXT_SECONDARY,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// ── Root (row): density, surface, separator, interactive feedback ──────────
+// ── 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(
   [
-    'flex-row self-stretch w-full px-4',
-    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[active=true]:opacity-70',
+    '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',
-        'web:data-[hovered=true]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:ring-2 web:focus-visible:data-[disabled=false]:ring-slate-400/40 web:focus-visible:data-[disabled=false]:ring-offset-2',
+        '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: '',
+      default: 'data-[active=true]:bg-surface-primary-hover',
     }),
   ],
   {
     variants: {
       size: {
-        default: 'gap-3 py-4',
-        compact: 'gap-2 py-3',
-      },
-      surface: {
-        default: 'bg-white',
-        negative: 'bg-red-50',
+        default: 'gap-3 py-3 min-h-16',
+        compact: 'gap-3 py-2 min-h-12',
       },
       showSeparator: {
-        true: ['border-b border-solid', COLOR_BORDER_DEFAULT],
+        true: [
+          'border-b border-solid border-stroke-secondary',
+          Platform.select({ web: 'before:-bottom-px', default: '' }),
+        ].join(' '),
         false: 'border-b-0',
       },
       crossAlign: {
@@ -45,18 +50,8 @@ export const listItemRootVariants = cva(
         start: 'items-start',
       },
     },
-    compoundVariants: [
-      {
-        surface: 'negative',
-        className: Platform.select({
-          web: 'web:data-[hovered=true]:bg-red-100/90',
-          default: '',
-        }),
-      },
-    ],
     defaultVariants: {
       size: 'default',
-      surface: 'default',
       showSeparator: true,
       crossAlign: 'center',
     },
@@ -65,23 +60,28 @@ export const listItemRootVariants = cva(
 
 // ── Leading / trailing slots ─────────────────────────────────────────────────
 
-export const listItemLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+export const listItemLeadingSlotVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center',
+]);
 
-export const listItemTrailingSlotVariants = cva(['flex shrink-0 flex-row justify-end gap-2'], {
-  variants: {
-    crossAlign: {
-      center: 'items-center',
-      start: 'items-start self-start',
+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',
     },
   },
-  defaultVariants: {
-    crossAlign: 'center',
-  },
-});
+);
 
 // ── Content stack (title / description / meta) ───────────────────────────────
 
-export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'], {
+export const listItemContentVariants = cva('relative z-10 flex min-w-0 flex-1 flex-col gap-1', {
   variants: {
     crossAlign: {
       center: 'justify-center',
@@ -95,48 +95,18 @@ export const listItemContentVariants = cva(['flex min-w-0 flex-1 flex-col gap-1'
 
 // ── Typography ───────────────────────────────────────────────────────────────
 
-export const listItemTitleVariants = cva([COLOR_TEXT_PRIMARY, 'font-medium'], {
-  variants: {
-    size: {
-      default: 'text-base leading-snug',
-      compact: 'text-sm leading-snug',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemTitleVariants = cva('body-md font-medium text-content-primary');
 
-export const listItemDescriptionVariants = cva([COLOR_TEXT_SECONDARY], {
-  variants: {
-    size: {
-      default: 'text-sm leading-normal',
-      compact: 'text-xs leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemDescriptionVariants = cva('body-sm text-content-secondary');
 
-export const listItemMetaVariants = cva([COLOR_TEXT_MUTED], {
-  variants: {
-    size: {
-      default: 'text-xs leading-normal',
-      compact: 'text-[11px] leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+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',
-    COLOR_BORDER_DEFAULT,
+    'border-stroke-secondary',
   ],
   {
     variants: {
@@ -152,9 +122,8 @@ export const listItemSectionHeaderVariants = cva(
 );
 
 /** 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',
-  COLOR_TEXT_SECONDARY,
-]);
+export const listItemSectionHeaderLabelVariants = cva(
+  'text-xs font-semibold uppercase tracking-wide text-content-secondary',
+);
 
 export type ListItemVariantProps = VariantProps<typeof listItemRootVariants>;