@cdx-ui/primitives 0.0.1-beta.4 → 0.0.1-beta.5

package/src/list-item/types.ts

@@ -0,0 +1,122 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+
+export type ListItemSize = 'default' | 'compact';
+
+export type ListItemSurface = 'default' | 'negative';
+
+/**
+ * Cross-axis alignment for the row (`flex-direction: row`).
+ * - **center**: Leading, content, and trailing are vertically centered (typical transactions).
+ * - **start**: Top-aligned — use when trailing text should align with the title row (e.g. branch distance “2.04 mi”) or status chips sit above a tall content stack.
+ */
+export type ListItemCrossAlign = 'center' | 'start';
+
+export type IListItemPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface IListItemProps extends ViewProps, IListItemPressablePassthrough {
+  /**
+   * Disables press handling when the root is pressable (maps to Pressable `disabled`).
+   */
+  disabled?: boolean;
+  /**
+   * When set (and `asChild` is not used), root renders as pressable with interaction props.
+   */
+  onPress?: PressableProps['onPress'];
+  /**
+   * Vertical density; mapped at styled layer via `data-size`.
+   * @default 'default'
+   */
+  size?: ListItemSize;
+  /**
+   * Semantic row surface (e.g. canceled transaction); mapped via `data-surface`.
+   * @default 'default'
+   */
+  surface?: ListItemSurface;
+  /**
+   * Whether the row shows a bottom separator; mapped via `data-separator`.
+   * @default true
+   */
+  showSeparator?: boolean;
+  /**
+   * Vertical alignment of leading / content / trailing along the row cross axis.
+   * @default 'center'
+   */
+  crossAlign?: ListItemCrossAlign;
+  /**
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
+   * Intended for use with `onPress`.
+   */
+  asChild?: boolean;
+}
+
+export interface IListItemContextValue {
+  isPressed: boolean;
+  isHovered: boolean;
+  isDisabled: boolean;
+  crossAlign: ListItemCrossAlign;
+}
+
+export interface IListItemLeadingSlotProps extends ViewProps {
+  /**
+   * 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;
+}
+
+export type IListItemContentProps = ViewProps;
+
+export type IListItemTitleProps = TextProps;
+
+export type IListItemDescriptionProps = TextProps;
+
+export type IListItemMetaProps = TextProps;
+
+export type IListItemTrailingSlotProps = ViewProps;
+
+export interface IListItemSectionHeaderProps extends ViewProps {
+  /** 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 (`data-divider`).
+   * @default true
+   */
+  showDivider?: boolean;
+}
+
+export type IListItemComponentType<
+  RootRef,
+  LeadingSlot,
+  Content,
+  Title,
+  Description,
+  Meta,
+  TrailingSlot,
+  SectionHeader,
+> = ForwardRefExoticComponent<RefAttributes<RootRef> & IListItemProps> & {
+  LeadingSlot: ForwardRefExoticComponent<
+    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & IListItemLeadingSlotProps
+  >;
+  Content: ForwardRefExoticComponent<
+    RefAttributes<Content> & PropsWithoutRef<Content> & IListItemContentProps
+  >;
+  Title: ForwardRefExoticComponent<
+    RefAttributes<Title> & PropsWithoutRef<Title> & IListItemTitleProps
+  >;
+  Description: ForwardRefExoticComponent<
+    RefAttributes<Description> & PropsWithoutRef<Description> & IListItemDescriptionProps
+  >;
+  Meta: ForwardRefExoticComponent<RefAttributes<Meta> & PropsWithoutRef<Meta> & IListItemMetaProps>;
+  TrailingSlot: ForwardRefExoticComponent<
+    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & IListItemTrailingSlotProps
+  >;
+  SectionHeader: ForwardRefExoticComponent<
+    RefAttributes<SectionHeader> & PropsWithoutRef<SectionHeader> & IListItemSectionHeaderProps
+  >;
+};