@hzblj/kara-components 0.2.1 → 0.4.0

package/lib/module/use-stack-modifiers.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { clickable, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useSxModifiers } from '@hzblj/kara-sx';
+import { useMemo } from 'react';
+
+/**
+ * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press,
+ * then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple would stop
+ * at the padding and a row pressed by its edge would light up only in the middle.
+ */
+export const useStackModifiers = (sx, onPress, testID) => {
+  const {
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    px,
+    py,
+    ...frame
+  } = sx;
+  const frameModifiers = useSxModifiers(frame);
+  const paddingModifiers = useSxModifiers({
+    p,
+    pb,
+    pl,
+    pr,
+    pt,
+    px,
+    py
+  });
+  return useMemo(() => [...frameModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : []), ...paddingModifiers], [frameModifiers, onPress, paddingModifiers, testID]);
+};
+//# sourceMappingURL=use-stack-modifiers.js.map

package/lib/module/use-stack-modifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clickable","testID","testIdModifier","useSxModifiers","useMemo","useStackModifiers","sx","onPress","p","pb","pl","pr","pt","px","py","frame","frameModifiers","paddingModifiers"],"sourceRoot":"../../src","sources":["use-stack-modifiers.ts"],"mappings":";;AAAA,SAAQA,SAAS,EAAuBC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3G,SAA2BC,cAAc,QAAO,gBAAgB;AAChE,SAAQC,OAAO,QAAO,OAAO;;AAE7B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,EAAgB,EAAEC,OAAoB,EAAEN,MAAe,KAAuB;EAC9G,MAAM;IAACO,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAE,GAAGC;EAAK,CAAC,GAAGT,EAAE;EAChD,MAAMU,cAAc,GAAGb,cAAc,CAACY,KAAK,CAAC;EAC5C,MAAME,gBAAgB,GAAGd,cAAc,CAAC;IAACK,CAAC;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAE,CAAC,CAAC;EAEpE,OAAOV,OAAO,CACZ,MAAM,CACJ,GAAGY,cAAc,EACjB,IAAIf,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAC3C,IAAIM,OAAO,GAAG,CAACP,SAAS,CAACO,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EACxC,GAAGU,gBAAgB,CACpB,EACD,CAACD,cAAc,EAAET,OAAO,EAAEU,gBAAgB,EAAEhB,MAAM,CACpD,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/typescript/molecules/index.d.ts

@@ -7,6 +7,7 @@ export * from './list-item';
 export * from './navigation-bar';
 export * from './pager';
 export * from './radio-group';
+export * from './rn-list-item';
 export * from './rn-tooltip';
 export * from './scroll-edge-container';
 export * from './search-bar';

package/lib/typescript/molecules/labeled-content/labeled-content.types.d.ts

@@ -1,3 +1,4 @@
+import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { IconName } from '../../atoms/icon';
 /**
@@ -9,6 +10,8 @@ export type LabeledContentProps = {
     icon?: IconName;
     label: string;
     onPress?: () => void;
+    /** Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. */
+    px?: SpaceSize;
     testID?: string;
     value?: string;
 };

package/lib/typescript/molecules/list-item/list-item.types.d.ts

@@ -1,8 +1,14 @@
+import type { SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { IconName } from '../../atoms/icon';
 export type ListItemProps = {
     icon?: IconName;
     onPress?: () => void;
+    /**
+     * Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. For
+     * rows in a card of your own; a `List` insets its rows by itself.
+     */
+    px?: SpaceSize;
     subtitle?: string;
     testID?: string;
     title: string;

package/lib/typescript/molecules/navigation-bar/navigation-bar.types.d.ts

@@ -1,24 +1,63 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, Ref } from 'react';
+import type { IconName } from '../../atoms/icon';
+type NavigationBarItemBase = {
+    onPress: () => void;
+    /**
+     * iOS 26: neighbouring items on one side share a glass capsule; this gives the item its own. A close next to
+     * actions usually wants it. Material has no grouped capsules, so Android ignores it.
+     */
+    separated?: boolean;
+    /** iOS: the item's accessibility identifier; Android: its test tag. */
+    testID?: string;
+};
+/**
+ * One item of the bar. `back` and `close` are the platform's own — a chevron and the system close item on iOS, the
+ * Material arrow and cross on Android — with `Back` / `Close` as their labels unless given others. `icon` is one of the
+ * app's icons and names itself for VoiceOver and TalkBack.
+ */
+export type NavigationBarItem = (NavigationBarItemBase & {
+    label?: string;
+    type: 'back' | 'close';
+}) | (NavigationBarItemBase & {
+    icon: IconName;
+    label: string;
+    type: 'icon';
+});
+export type NavigationBarSearchRef = {
+    /** Empties the field and ends editing. */
+    clear: () => void;
+};
+/** A search field in place of the title — iOS only for now; Android keeps the title. */
+export type NavigationBarSearch = {
+    onChangeText: (text: string) => void;
+    onFocusChange?: (focused: boolean) => void;
+    placeholder: string;
+    ref?: Ref<NavigationBarSearchRef>;
+    testID?: string;
+};
+export type NavigationBarTitleAlignment = 'center' | 'leading';
 /**
- * A title with back and close items, for a sheet that is not a navigation screen. On iOS a standalone
- * `UINavigationBar`, so the items press and render exactly like a native-stack header's — on iOS 26 they share the
- * bar's glass instead of swelling as standalone glass buttons do. On Android a Material row of icon buttons. The React
- * Native tier: it needs no host.
+ * A title with items on either side, for a header that is not a navigation screen's — `Sheet.Header` is built on it.
+ * On iOS a standalone `UINavigationBar`, so the items press and render exactly like a native-stack header's: on iOS 26
+ * neighbours share a glass capsule instead of swelling as standalone glass buttons do. On Android Material's top app
+ * bar. Where an item goes is the caller's choice — the bar places nothing by itself, so a close can sit on either side.
+ * The React Native tier: it needs no host.
  */
 export type NavigationBarProps = {
-    /** The back item's accessibility label. `Back` by default. */
-    backLabel?: string;
-    /** iOS: the back item's accessibility identifier. */
-    backTestID?: string;
-    /** The close item's accessibility label. `Close` by default. */
-    closeLabel?: string;
-    /** iOS: the close item's accessibility identifier. */
-    closeTestID?: string;
-    /** Shows the back item. */
-    onBack?: () => void;
-    /** Shows the close item. */
-    onClose?: () => void;
+    /** Light items and title, for a bar laid over an image or a dark hero. */
+    inverted?: boolean;
+    /** In screen order, from the leading edge. */
+    leadingItems?: NavigationBarItem[];
+    /** Replaces the title with a search field (iOS). */
+    search?: NavigationBarSearch;
     testID?: string;
     title?: string;
+    /** `center` by default — iOS's own; `leading` is Material's top app bar. */
+    titleAlignment?: NavigationBarTitleAlignment;
+    /** Fades the title out and in without moving the items — for a large title that scrolls under the bar. */
+    titleVisible?: boolean;
+    /** In screen order, toward the trailing edge. */
+    trailingItems?: NavigationBarItem[];
 };
 export type NavigationBarComponent = (props: NavigationBarProps) => ReactNode;
+export {};

package/lib/typescript/molecules/rn-list-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rn-list-item';
+export * from './rn-list-item.types';

package/lib/typescript/molecules/rn-list-item/rn-list-item.d.ts

@@ -0,0 +1,2 @@
+import type { RnListItemComponent } from './rn-list-item.types';
+export declare const RnListItem: RnListItemComponent;

package/lib/typescript/molecules/rn-list-item/rn-list-item.types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ListItemProps } from '../list-item';
+/**
+ * `ListItem`'s row in the React Native tier — plain views, no host. For lists long enough that a native host per row
+ * would cost too much to mount (a navigation list, a FlashList of rows), with the platform's own press feedback: a
+ * ripple across the whole row on Android, a highlight on iOS. In a rounded card, give the card `overflow="hidden"`:
+ * Android draws the ripple as the row's foreground, which only a parent's clip keeps inside rounded corners.
+ */
+export type RnListItemProps = ListItemProps;
+export type RnListItemComponent = (props: RnListItemProps) => ReactNode;

package/lib/typescript/organisms/context-menu/context-menu.types.d.ts

@@ -4,7 +4,8 @@ import type { MenuAction } from '../menu';
 /**
  * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
  * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
- * a tap on it. Android: a Material dropdown under the subtree. The trigger is ordinary React Native layout, so it
+ * a tap on it. Android, where Material has no lifted preview: a ripple and the long-press haptic, then a Material
+ * dropdown where the finger is, with the trigger highlighted while it is open. The trigger is ordinary React Native layout, so it
  * needs no `Screen` or `Island`.
  */
 export type ContextMenuProps = ResponsiveViewSx & {

package/lib/typescript/organisms/sheet/index.d.ts

@@ -1,2 +1,3 @@
 export * from './sheet';
 export * from './sheet.types';
+export { useSheetScroll } from './sheet-scroll';

package/lib/typescript/organisms/sheet/sheet-header.d.ts

@@ -0,0 +1,3 @@
+import type { SheetHeaderProps } from './sheet.types';
+/** A slot, never rendered: `Sheet` reads its props and builds the header into the native sheet's own header area. */
+export declare const SheetHeader: (_props: SheetHeaderProps) => never;

package/lib/typescript/organisms/sheet/sheet-scroll.d.ts

@@ -0,0 +1,9 @@
+import type { SheetScrollContextValue, SheetScrollViewProps } from './sheet.types';
+export declare const SheetScrollContext: import("react").Context<SheetScrollContextValue | null>;
+/**
+ * For a scroll view of your own inside a sheet (a `RnFlatList`, say): pad its content by `topInset`, render
+ * `largeTitle` first, and forward `onScroll` — which is what `<Sheet.ScrollView>` does.
+ */
+export declare const useSheetScroll: () => SheetScrollContextValue;
+/** The sheet's scrolling body: starts below the header on iOS 26, carries a large title, and reports its scroll. */
+export declare const SheetScrollView: ({ children, content, keyboardShouldPersistTaps, onScroll, testID, }: SheetScrollViewProps) => import("react").JSX.Element;

package/lib/typescript/organisms/sheet/sheet.d.ts

@@ -1 +1,7 @@
-export * from './sheet.ios';
+import type { SheetComponent } from './sheet.types';
+/**
+ * A native sheet with an optional native header. `visible` presents and dismisses it; a swipe or a tap outside calls
+ * `onDismiss`, which should set `visible` back. `<Sheet.Header>` (a direct child) gives it a bar with a title and
+ * items; `<Sheet.ScrollView>` is the body of a `scrollable` sheet.
+ */
+export declare const Sheet: SheetComponent;

package/lib/typescript/organisms/sheet/sheet.types.d.ts

@@ -1,8 +1,91 @@
-import type { ReactNode } from 'react';
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { ColorToken } from '@hzblj/kara-theme';
+import type { ReactElement, ReactNode, Ref } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps } from 'react-native';
+import type { NavigationBarItem, NavigationBarSearch } from '../../molecules/navigation-bar';
+/** `auto` fits the content; a number is a fraction of the screen's height. */
+export type SheetDetent = 'auto' | number;
+/**
+ * `center` is iOS's own, `leading` Material's. `large` puts the title above the content in a large face, and once
+ * that scrolls under the bar the bar's own title fades in — centred on iOS, leading on Android.
+ */
+export type SheetTitleStyle = 'center' | 'large' | 'leading';
+/**
+ * The sheet's header: a `NavigationBar` with the title and items, and anything else that should stay put above the
+ * content (`children` — a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
+ * with the system's scroll edge effect; elsewhere it sits above the content.
+ */
+export type SheetHeaderProps = {
+    /** Pinned under the bar. */
+    children?: ReactNode;
+    /** Light items and title, for a sheet with a dark or image background. */
+    inverted?: boolean;
+    /** In screen order, from the leading edge. */
+    leadingItems?: NavigationBarItem[];
+    /** A search field in place of the title (iOS). */
+    search?: NavigationBarSearch;
+    title?: string;
+    /** `center` by default. */
+    titleStyle?: SheetTitleStyle;
+    /** In screen order, toward the trailing edge — the close item, by convention. */
+    trailingItems?: NavigationBarItem[];
+};
+export type SheetRef = {
+    dismiss: () => Promise<void>;
+    /** Presents at a detent — the first by default. */
+    present: (detentIndex?: number) => Promise<void>;
+    /** Moves to another detent. */
+    resize: (detentIndex: number) => Promise<void>;
+};
+/**
+ * A native sheet — `UISheetPresentationController` on iOS, Material's bottom sheet on Android — with an optional
+ * native header (`<Sheet.Header>` as a direct child). The React Native tier: it needs no host, and must not sit inside
+ * one; native atoms in its content go in an `Island`.
+ */
 export type SheetProps = {
+    /** The sheet's colour. `surface.primary` by default. */
+    bg?: ColorToken;
     children: ReactNode;
-    fitToContents?: boolean;
+    /** Where the sheet can rest, smallest first. `['auto']` — fit the content — by default. */
+    detents?: SheetDetent[];
+    /** Dims what is behind. On by default. */
+    dimmed?: boolean;
+    /** A swipe down or a tap outside closes it. On by default. */
+    dismissible?: boolean;
+    /** It follows the finger between detents. On by default. */
+    draggable?: boolean;
+    /** Pinned to the bottom, above the content and the keyboard. */
+    footer?: ReactElement;
+    /** The drag handle. On by default. */
+    grabber?: boolean;
+    /** The user dismissed it — `visible` going false does not call this. */
     onDismiss: () => void;
+    onDetentChange?: (detentIndex: number) => void;
+    onPresent?: () => void;
+    ref?: Ref<SheetRef>;
+    /**
+     * The content is a scroll view (`<Sheet.ScrollView>`) the sheet drives: dragging past its top resizes the sheet,
+     * and a header scrolls with the iOS 26 edge effect. Off by default — set it with a scrolling body.
+     */
+    scrollable?: boolean;
+    testID?: string;
     visible: boolean;
 };
-export type SheetComponent = (props: SheetProps) => ReactNode;
+export type SheetScrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+/** What a scroll view inside a sheet needs: the room the header takes, the large title, the scroll listener. */
+export type SheetScrollContextValue = {
+    largeTitle: ReactNode;
+    onScroll?: SheetScrollHandler;
+    topInset: number;
+};
+export type SheetScrollViewProps = Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> & {
+    children: ReactNode;
+    /** Styles the scrolling content — padding and gap belong here, as with `RnScrollView`. */
+    content?: ResponsiveViewSx;
+    onScroll?: SheetScrollHandler;
+    testID?: string;
+};
+export type SheetComponent = ((props: SheetProps) => ReactNode) & {
+    Header: (props: SheetHeaderProps) => ReactNode;
+    ScrollView: (props: SheetScrollViewProps) => ReactNode;
+};

package/lib/typescript/organisms/sheet/split-sheet-children.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { SheetHeaderProps } from './sheet.types';
+type SheetChildren = {
+    content: ReactNode;
+    header?: SheetHeaderProps;
+};
+/** Takes `<Sheet.Header>` out of the children: its props become the native header, the rest is the content. */
+export declare const splitSheetChildren: (children: ReactNode) => SheetChildren;
+export {};

package/lib/typescript/organisms/sheet/use-sheet-header.d.ts

@@ -0,0 +1,24 @@
+import { type ViewStyle } from 'react-native';
+import type { SheetHeaderProps, SheetScrollContextValue } from './sheet.types';
+type UseSheetHeaderParams = {
+    header?: SheetHeaderProps;
+    scrollable: boolean;
+};
+/**
+ * Turns `<Sheet.Header>`'s props into what the native sheet takes: its header element, how that is laid out, the scroll
+ * edge effects, and the context a `<Sheet.ScrollView>` reads. On iOS 26 a scrollable sheet's header is laid over the
+ * content (which is then inset by the header's measured height) so the system's soft edge blurs what scrolls under it;
+ * everywhere else the header simply sits above the content.
+ */
+export declare const useSheetHeader: ({ header: headerProps, scrollable }: UseSheetHeaderParams) => {
+    header: import("react").JSX.Element | undefined;
+    headerStyle: ViewStyle | undefined;
+    scrollableOptions: {
+        readonly bottomScrollEdgeEffect: 'soft';
+        readonly topScrollEdgeEffect: 'soft';
+    } | undefined;
+    scrollContext: SheetScrollContextValue;
+    /** Without a scroll view to carry it, a large title simply leads the content. */
+    staticLargeTitle: import("react").JSX.Element | null;
+};
+export {};

package/lib/typescript/ripple-clip.d.ts

@@ -0,0 +1,12 @@
+import { type ViewStyle } from 'react-native';
+/**
+ * Splits a resolved style for a pressable with an Android ripple. The ripple is drawn as the pressable's foreground,
+ * which its own `overflow: hidden` does not clip — so it would spill past rounded corners. A parent clips its
+ * children's foregrounds, though: the outer view takes the shape, background, border and outer layout and clips; the
+ * pressable inside takes the padding and the content layout and fills it, so the ripple covers the whole card and
+ * stops at its corners.
+ */
+export declare const splitForRipple: (style: ViewStyle | undefined) => {
+    inner: ViewStyle[];
+    outer: ViewStyle;
+};

package/lib/typescript/use-stack-modifiers.d.ts

@@ -0,0 +1,8 @@
+import { type ModifierConfig } from '@expo/ui/jetpack-compose/modifiers';
+import { type ResponsiveSx } from '@hzblj/kara-sx';
+/**
+ * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press,
+ * then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple would stop
+ * at the padding and a row pressed by its edge would light up only in the middle.
+ */
+export declare const useStackModifiers: (sx: ResponsiveSx, onPress?: () => void, testID?: string) => ModifierConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,13 +59,14 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.2.1",
-    "@hzblj/kara-sx": "^0.2.1",
-    "@hzblj/kara-theme": "^0.2.1",
+    "@hzblj/kara-native": "^0.4.0",
+    "@hzblj/kara-sx": "^0.4.0",
+    "@hzblj/kara-theme": "^0.4.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {
     "@expo/ui": "~57.0.0",
+    "@lodev09/react-native-true-sheet": ">=3.11.0",
     "@shopify/flash-list": ">=2.0.0",
     "expo": "~57.0.0",
     "expo-haptics": "*",
@@ -76,6 +77,7 @@
   },
   "devDependencies": {
     "@expo/ui": "~57.0.18",
+    "@lodev09/react-native-true-sheet": "3.11.18",
     "@shopify/flash-list": "^2.3.2",
     "@storybook/react-native": "^10.6.0",
     "@types/react": "~19.2.18",

package/src/atoms/h-stack/h-stack.android.tsx

@@ -1,9 +1,7 @@
 import {Row} from '@expo/ui/jetpack-compose'
-import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
-import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
+import {useStackModifiers} from '../../use-stack-modifiers'
 import type {HStackAlign, HStackComponent, HStackProps} from './h-stack.types'
 
 const ALIGNMENT = {
@@ -21,11 +19,7 @@ export const HStack: HStackComponent = ({
   ...sx
 }: HStackProps) => {
   useHostGuard('HStack')
-  const sxModifiers = useSxModifiers(sx)
-  const modifiers = useMemo(
-    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
-    [onPress, sxModifiers, testID]
-  )
+  const modifiers = useStackModifiers(sx, onPress, testID)
 
   return (
     <Row

package/src/atoms/v-stack/v-stack.android.tsx

@@ -1,9 +1,7 @@
 import {Column} from '@expo/ui/jetpack-compose'
-import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
-import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
+import {useStackModifiers} from '../../use-stack-modifiers'
 import type {VStackAlign, VStackComponent, VStackProps} from './v-stack.types'
 
 const ALIGNMENT = {
@@ -21,11 +19,7 @@ export const VStack: VStackComponent = ({
   ...sx
 }: VStackProps) => {
   useHostGuard('VStack')
-  const sxModifiers = useSxModifiers(sx)
-  const modifiers = useMemo(
-    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
-    [onPress, sxModifiers, testID]
-  )
+  const modifiers = useStackModifiers(sx, onPress, testID)
 
   return (
     <Column

package/src/atoms/z-stack/z-stack.android.tsx

@@ -1,8 +1,6 @@
 import {Box} from '@expo/ui/jetpack-compose'
-import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
-import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
+import {useStackModifiers} from '../../use-stack-modifiers'
 import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
 
 const ALIGNMENT = {
@@ -13,11 +11,7 @@ const ALIGNMENT = {
 
 export const ZStack: ZStackComponent = ({align = 'center', children, onPress, testID, ...sx}: ZStackProps) => {
   useHostGuard('ZStack')
-  const sxModifiers = useSxModifiers(sx)
-  const modifiers = useMemo(
-    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
-    [onPress, sxModifiers, testID]
-  )
+  const modifiers = useStackModifiers(sx, onPress, testID)
 
   return (
     <Box contentAlignment={ALIGNMENT[align]} modifiers={modifiers}>

package/src/molecules/index.ts

@@ -7,6 +7,7 @@ export * from './list-item'
 export * from './navigation-bar'
 export * from './pager'
 export * from './radio-group'
+export * from './rn-list-item'
 export * from './rn-tooltip'
 export * from './scroll-edge-container'
 export * from './search-bar'

package/src/molecules/labeled-content/labeled-content.tsx

@@ -16,10 +16,11 @@ export const LabeledContent: LabeledContentComponent = ({
   icon,
   label,
   onPress,
+  px,
   testID,
   value,
 }: LabeledContentProps) => (
-  <HStack align="center" onPress={onPress} py="s8" spacing="s12" testID={testID} wide>
+  <HStack align="center" onPress={onPress} px={px} py="s8" spacing="s12" testID={testID} wide>
     {icon ? <Icon color="content.secondary" name={icon} size="s20" /> : null}
     <Text variant="body">{label}</Text>
     <Spacer />

package/src/molecules/labeled-content/labeled-content.types.ts

@@ -1,3 +1,4 @@
+import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 import type {IconName} from '../../atoms/icon'
 
@@ -10,6 +11,8 @@ export type LabeledContentProps = {
   icon?: IconName
   label: string
   onPress?: () => void
+  /** Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. */
+  px?: SpaceSize
   testID?: string
   value?: string
 }

package/src/molecules/list-item/list-item.tsx

@@ -1,3 +1,5 @@
+import {Platform} from 'react-native'
+
 import {HStack} from '../../atoms/h-stack'
 import {Icon} from '../../atoms/icon'
 import {Spacer} from '../../atoms/spacer'
@@ -6,10 +8,16 @@ import {VStack} from '../../atoms/v-stack'
 import {Glyph} from '../../glyph'
 import type {ListItemComponent, ListItemProps} from './list-item.types'
 
-export const ListItem: ListItemComponent = ({icon, onPress, subtitle, testID, title}: ListItemProps) => (
-  <HStack align="center" onPress={onPress} py="s8" spacing="s12" testID={testID} wide>
+/**
+ * Compose measures a row's children in order, so a text column that fills the line leaves the chevron no room. With a
+ * weight it is measured last and takes only what is left; SwiftUI shares the line by itself, with a `Spacer`.
+ */
+const TEXT_FILLS_ROW = {weight: 1}
+
+export const ListItem: ListItemComponent = ({icon, onPress, px, subtitle, testID, title}: ListItemProps) => (
+  <HStack align="center" onPress={onPress} px={px} py="s8" spacing="s12" testID={testID} wide>
     {icon ? <Icon color="content.secondary" name={icon} size="s20" /> : null}
-    <VStack spacing="s2">
+    <VStack android={TEXT_FILLS_ROW} spacing="s2">
       <Text variant="body">{title}</Text>
       {subtitle ? (
         <Text color="content.secondary" variant="footnote">
@@ -17,7 +25,7 @@ export const ListItem: ListItemComponent = ({icon, onPress, subtitle, testID, ti
         </Text>
       ) : null}
     </VStack>
-    <Spacer />
+    {Platform.OS === 'ios' ? <Spacer /> : null}
     {onPress ? <Glyph color="content.quaternary" name="chevronRight" size="s16" /> : null}
   </HStack>
 )

package/src/molecules/list-item/list-item.types.ts

@@ -1,3 +1,4 @@
+import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 import type {IconName} from '../../atoms/icon'
@@ -5,6 +6,11 @@ import type {IconName} from '../../atoms/icon'
 export type ListItemProps = {
   icon?: IconName
   onPress?: () => void
+  /**
+   * Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. For
+   * rows in a card of your own; a `List` insets its rows by itself.
+   */
+  px?: SpaceSize
   subtitle?: string
   testID?: string
   title: string