@cdx-ui/components 0.0.1-beta.2 → 0.0.1-beta.20

package/lib/typescript/styles/primitives.d.ts

@@ -1,22 +1,53 @@
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export declare const COLOR_BG_PRIMARY = "bg-white";
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export declare const COLOR_BG_SUBTLE = "bg-slate-50";
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export declare const COLOR_BG_MUTED = "bg-slate-100";
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export declare const COLOR_BG_INVERSE = "bg-slate-900";
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export declare const COLOR_BORDER_STRONG = "border-slate-300";
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export declare const COLOR_BORDER_FOCUS = "border-slate-900";
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export declare const COLOR_BORDER_INVALID = "border-red-500";
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_MUTED = "text-slate-400";
+/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
 export declare const COLOR_TEXT_INVERSE = "text-white";
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export declare const COLOR_TEXT_INVALID = "text-red-600";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export declare const COLOR_BRAND_HOVER = "bg-slate-800";
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export declare const COLOR_ACCENT_BORDER = "border-slate-900";
+/**
+ * @deprecated Use semantic token classes directly instead. Map each color key to its
+ * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
+ * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
+ * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
+ * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
+ * - `border` → `border-stroke-{color}` (--color-stroke-{color})
+ * - `text` → `text-content-{color}` (--color-content-{color})
+ * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
+ *
+ * See Button/styles.ts for a complete migration example.
+ */
 export declare const SEMANTIC_COLORS: {
     readonly action: {
         readonly bg: "bg-slate-900";
@@ -59,12 +90,16 @@ export declare const SEMANTIC_COLORS: {
         readonly ring: "ring-sky-400/50";
     };
 };
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
 export declare const RADIUS_SM = "rounded-lg";
 export declare const RADIUS_MD = "rounded-xl";
 export declare const RADIUS_FULL = "rounded-full";
+/** @deprecated Use `shadow-sm` directly instead */
 export declare const SHADOW_SM = "shadow-sm";
+/** @deprecated Use `shadow-md` directly instead */
 export declare const SHADOW_MD = "shadow-md";
+/** @deprecated */
 export declare const SIZE_SCALE: {
     readonly default: {
         readonly height: "h-10";

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAG1C,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.20",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -25,7 +25,7 @@
   "files": [
     "lib",
     "src",
-    "!src/**/*.figma.ts"
+    "!src/figma"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.2",
-    "@cdx-ui/utils": "0.0.1-beta.2",
-    "@cdx-ui/icons": "0.0.1-beta.2"
+    "@cdx-ui/primitives": "0.0.1-beta.20",
+    "@cdx-ui/utils": "0.0.1-beta.20",
+    "@cdx-ui/icons": "0.0.1-beta.20"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Button/styles.ts

@@ -10,7 +10,7 @@ export const buttonRootVariants = cva(
     'rounded-[var(--border-radius-button)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
   ],

package/src/components/Card/index.tsx

@@ -1,31 +1,47 @@
 import { forwardRef, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
 import {
   cardContentVariants,
   cardFooterVariants,
   cardHeaderVariants,
   cardRootVariants,
+  type CardVariantProps,
+  type CardContentVariantProps,
 } from './styles';
 
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
-export interface CardProps extends ViewProps {
+const SCOPE = 'CARD';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useCardStyleContext = () => useStyleContext(SCOPE) as CardVariantProps;
+
+export interface CardProps extends ViewProps, CardVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
-const CardRoot = forwardRef<View, CardProps>(({ className, children, style, ...props }, ref) => {
-  const computedClassName = cn(cardRootVariants(), className);
+const CardRoot = forwardRef<View, CardProps>(
+  ({ className, children, style, fullBleed, ...props }, ref) => {
+    const computedClassName = cn(cardRootVariants(), className);
 
-  return (
-    <View ref={ref} className={computedClassName} style={style} {...props}>
-      {children}
-    </View>
-  );
-});
+    return (
+      <Root
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        context={{ fullBleed }}
+        {...props}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
 
 CardRoot.displayName = 'Card';
 
@@ -56,14 +72,18 @@ CardHeader.displayName = 'Card.Header';
 // STYLED CONTENT COMPONENT
 // =============================================================================
 
-export interface CardContentProps extends ViewProps {
+export interface CardContentProps extends ViewProps, CardContentVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
 const CardContent = forwardRef<View, CardContentProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(cardContentVariants(), className);
+  ({ className, children, style, fullBleed, ...props }, ref) => {
+    const { fullBleed: fullBleedFromContext } = useCardStyleContext();
+    const computedClassName = cn(
+      cardContentVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
+      className,
+    );
 
     return (
       <View ref={ref} className={computedClassName} style={style} {...props}>

package/src/components/Card/styles.ts

@@ -1,27 +1,30 @@
-import { cva } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_PRIMARY,
-  RADIUS_SM,
-  SHADOW_SM,
-} from '../../styles/primitives';
+import { cva, VariantProps } from 'class-variance-authority';
 
 // ── Root ────────────────────────────────────────────────────
 
-export const cardRootVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
-  RADIUS_SM,
-  SHADOW_SM,
-  'overflow-hidden',
-]);
+export const cardRootVariants = cva(
+  [
+    'bg-surface-primary',
+    'border border-stroke-secondary',
+    'rounded-[var(--border-radius-default)]',
+    'overflow-hidden',
+  ],
+  {
+    variants: {
+      fullBleed: {
+        true: '',
+        false: '',
+      },
+    },
+  },
+);
 
 // ── Header ──────────────────────────────────────────────────
 
 export const cardHeaderVariants = cva([
-  'flex-row items-center justify-between p-4 border-b border-t-8',
-  COLOR_BORDER_DEFAULT,
+  'flex-row items-center justify-between px-5 py-3',
+  'border-t-8 border-t-surface-brand-strong',
+  'border-b border-b-solid border-b-stroke-secondary',
 ]);
 
 // ── Title ───────────────────────────────────────────────────
@@ -30,12 +33,17 @@ export const cardTitleVariants = cva(['flex-1']);
 
 // ── Content ─────────────────────────────────────────────────
 
-export const cardContentVariants = cva([COLOR_TEXT_PRIMARY, 'p-4']);
+export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
+  variants: {
+    fullBleed: {
+      true: 'p-0',
+    },
+  },
+});
 
 // ── Footer ──────────────────────────────────────────────────
 
-export const cardFooterVariants = cva([
-  'p-4 border-t',
-  COLOR_BORDER_DEFAULT,
-  'flex-row items-center gap-2',
-]);
+export const cardFooterVariants = cva(['p-5 pt-0', 'flex-row items-center gap-2']);
+
+export type CardVariantProps = VariantProps<typeof cardRootVariants>;
+export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;

package/src/components/Checkbox/styles.ts

@@ -1,8 +1,6 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_STRONG,
   COLOR_TEXT_PRIMARY,
   DISABLED_CURSOR,
   DISABLED_OPACITY,
@@ -29,14 +27,14 @@ export const checkboxIndicatorVariants = cva(
     'items-center justify-center',
     'rounded',
     'border-2',
-    COLOR_BORDER_STRONG,
-    COLOR_BG_PRIMARY,
-    'data-[checked=true]:bg-slate-900 data-[checked=true]:border-slate-900',
-    'data-[indeterminate=true]:bg-slate-900 data-[indeterminate=true]:border-slate-900',
+    'border-stroke-secondary',
+    'bg-surface-primary',
+    'data-[checked=true]:bg-surface-action-strong data-[checked=true]:border-stroke-action',
+    'data-[indeterminate=true]:bg-surface-action-strong data-[indeterminate=true]:border-stroke-action',
     'data-[disabled=true]:opacity-50',
-    'data-[invalid=true]:border-red-500',
-    'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
-    'data-[indeterminate=true]:data-[invalid=true]:bg-red-500 data-[indeterminate=true]:data-[invalid=true]:border-red-500',
+    'data-[invalid=true]:border-stroke-danger',
+    'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong data-[checked=true]:data-[invalid=true]:border-stroke-danger',
+    'data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong data-[indeterminate=true]:data-[invalid=true]:border-stroke-danger',
     Platform.select({
       web: [
         TRANSITION_COLORS,

package/src/components/IconButton/styles.ts

@@ -8,7 +8,7 @@ export const iconButtonRootVariants = cva(
     'rounded-[var(--border-radius-round)]',
     'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
     TRANSITION_COLORS,
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
   ],

package/src/components/Input/styles.ts

@@ -9,7 +9,7 @@ export const inputRootVariants = cva(
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',

package/src/components/ListItem/index.tsx

@@ -0,0 +1,285 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  createListItem,
+  type IListItemLeadingSlotProps,
+  type IListItemProps,
+  type IListItemSectionHeaderProps,
+  type ListItemCrossAlign,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext, type WithStyleContextProps } from '@cdx-ui/utils';
+import {
+  listItemContentVariants,
+  listItemDescriptionVariants,
+  listItemLeadingSlotVariants,
+  listItemMetaVariants,
+  listItemRootVariants,
+  listItemSectionHeaderLabelVariants,
+  listItemSectionHeaderVariants,
+  listItemTitleVariants,
+  listItemTrailingSlotVariants,
+  type ListItemVariantProps,
+} from './styles';
+
+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 ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
+  return { size: ctx?.size ?? 'default', crossAlign: ctx?.crossAlign ?? 'center' };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface ListItemProps extends IListItemProps, WithStyleContextProps {
+  className?: string;
+}
+
+const ListItemRoot = forwardRef<View, ListItemProps>(
+  (
+    {
+      size = 'default',
+      surface = 'default',
+      showSeparator = true,
+      crossAlign = 'center',
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(
+      listItemRootVariants({ size, surface, 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}
+      />
+    );
+  },
+);
+
+ListItemRoot.displayName = 'ListItem';
+
+// =============================================================================
+// SLOTS & TEXT
+// =============================================================================
+
+export interface ListItemLeadingSlotProps extends IListItemLeadingSlotProps {
+  className?: string;
+}
+
+const ListItemLeadingSlot = forwardRef<View, ListItemLeadingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <ListItemPrimitive.LeadingSlot
+      ref={ref as never}
+      className={cn(listItemLeadingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+ListItemLeadingSlot.displayName = 'ListItem.LeadingSlot';
+
+export interface ListItemContentProps extends ViewProps {
+  className?: string;
+}
+
+const ListItemContent = forwardRef<View, ListItemContentProps>(
+  ({ className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Content
+        ref={ref as never}
+        className={cn(listItemContentVariants({ crossAlign }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemContent.displayName = 'ListItem.Content';
+
+export interface ListItemTitleProps extends TextProps {
+  className?: string;
+}
+
+const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
+  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Title
+        ref={ref as never}
+        className={cn(listItemTitleVariants({ size }), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemTitle.displayName = 'ListItem.Title';
+
+export interface ListItemDescriptionProps extends TextProps {
+  className?: string;
+}
+
+const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
+  ({ className, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Description
+        ref={ref as never}
+        className={cn(listItemDescriptionVariants({ size }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemDescription.displayName = 'ListItem.Description';
+
+export interface ListItemMetaProps extends TextProps {
+  className?: string;
+}
+
+const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
+  ({ className, numberOfLines = 1, style, ...props }, ref) => {
+    const { size } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.Meta
+        ref={ref as never}
+        className={cn(listItemMetaVariants({ size }), className)}
+        numberOfLines={numberOfLines}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+ListItemMeta.displayName = 'ListItem.Meta';
+
+export interface ListItemTrailingSlotProps extends ViewProps {
+  className?: string;
+}
+
+const ListItemTrailingSlot = forwardRef<View, ListItemTrailingSlotProps>(
+  ({ className, style, ...props }, ref) => {
+    const { crossAlign } = useListItemStyleContext();
+
+    return (
+      <ListItemPrimitive.TrailingSlot
+        ref={ref as never}
+        className={cn(listItemTrailingSlotVariants({ crossAlign }), className)}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+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
+// =============================================================================
+
+export interface ListItemSectionHeaderComponentProps extends IListItemSectionHeaderProps {
+  className?: string;
+}
+
+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>
+  ),
+);
+
+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';