@hzblj/kara-components 0.3.0 → 0.4.1

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/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/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.3.0",
+  "version": "0.4.1",
   "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,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.3.0",
-    "@hzblj/kara-sx": "^0.3.0",
-    "@hzblj/kara-theme": "^0.3.0",
+    "@hzblj/kara-native": "^0.4.1",
+    "@hzblj/kara-sx": "^0.4.1",
+    "@hzblj/kara-theme": "^0.4.1",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

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

package/src/molecules/rn-list-item/index.ts

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

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

@@ -0,0 +1,48 @@
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {Platform, Pressable, type PressableStateCallbackType} from 'react-native'
+
+import {Box} from '../../atoms/box'
+import {RnIcon} from '../../atoms/rn-icon'
+import {RnText} from '../../atoms/rn-text'
+import {RnGlyph} from '../../glyph'
+import type {RnListItemComponent, RnListItemProps} from './rn-list-item.types'
+
+export const RnListItem: RnListItemComponent = ({icon, onPress, px, subtitle, testID, title}: RnListItemProps) => {
+  const theme = useAppTheme()
+  const pressedColor = theme.color('fill.tertiary')
+
+  const ripple = useMemo(() => ({color: pressedColor}), [pressedColor])
+  const highlight = useMemo(
+    () =>
+      Platform.OS === 'ios'
+        ? ({pressed}: PressableStateCallbackType) => (pressed ? {backgroundColor: pressedColor} : null)
+        : undefined,
+    [pressedColor]
+  )
+
+  const row = (
+    <Box align="center" flexDirection="row" gap="s12" px={px} py="s12">
+      {icon ? <RnIcon color="content.secondary" name={icon} size="s20" /> : null}
+      <Box flex={1} gap="s2">
+        <RnText variant="body">{title}</RnText>
+        {subtitle ? (
+          <RnText color="content.secondary" variant="footnote">
+            {subtitle}
+          </RnText>
+        ) : null}
+      </Box>
+      {onPress ? <RnGlyph color="content.quaternary" name="chevronRight" size="s16" /> : null}
+    </Box>
+  )
+
+  if (!onPress) {
+    return <Box testID={testID}>{row}</Box>
+  }
+
+  return (
+    <Pressable accessibilityRole="button" android_ripple={ripple} onPress={onPress} style={highlight} testID={testID}>
+      {row}
+    </Pressable>
+  )
+}

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

@@ -0,0 +1,13 @@
+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/src/organisms/context-menu/context-menu.android.tsx

@@ -1,17 +1,20 @@
 import {Text as ComposeText, DropdownMenu, DropdownMenuItem, Host} from '@expo/ui/jetpack-compose'
 import {useSx} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback, useState} from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import * as Haptics from 'expo-haptics'
+import {useCallback, useMemo, useRef, useState} from 'react'
+import {type GestureResponderEvent, Pressable, StyleSheet, View} from 'react-native'
+import {Icon} from '../../atoms/icon'
+import {HostBoundary} from '../../host-context'
+import {splitForRipple} from '../../ripple-clip'
 import type {MenuAction} from '../menu'
 import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps} from './context-menu.types'
 
-/**
- * The menu's anchor: a point at the trigger's bottom start, so the dropdown opens just under it. The host lies outside
- * the touch path — the dropdown is a popup window of its own, which takes its touches regardless.
- */
+type Point = {x: number; y: number}
+
 const styles = StyleSheet.create({
-  anchor: {bottom: 0, height: 1, left: 0, position: 'absolute', width: 1},
+  /** A point under the finger: the dropdown opens from it. The menu is a popup window, so nothing clips it. */
+  anchor: {height: 1, position: 'absolute', width: 1},
 })
 
 type MenuRowProps = {
@@ -22,6 +25,7 @@ type MenuRowProps = {
 /** A row's `onClick` closes over its own action, so memoising it needs a component per row. */
 const MenuRow = ({action, onDismiss}: MenuRowProps) => {
   const theme = useAppTheme()
+  const color = action.destructive ? 'content.destructive' : 'content.primary'
 
   const onClick = useCallback(() => {
     onDismiss()
@@ -31,56 +35,77 @@ const MenuRow = ({action, onDismiss}: MenuRowProps) => {
   return (
     <DropdownMenuItem onClick={onClick}>
       <DropdownMenuItem.Text>
-        <ComposeText
-          color={theme.colorString(action.destructive ? 'content.destructive' : 'content.primary')}
-          style={theme.typography.body}
-        >
+        <ComposeText color={theme.colorString(color)} style={theme.typography.body}>
           {action.label}
         </ComposeText>
       </DropdownMenuItem.Text>
+      {action.icon ? (
+        <DropdownMenuItem.LeadingIcon>
+          <Icon color={color} name={action.icon} size="s20" />
+        </DropdownMenuItem.LeadingIcon>
+      ) : null}
     </DropdownMenuItem>
   )
 }
 
 /**
- * The trigger stays a plain React Native subtree; a long press on it expands a Compose `DropdownMenu` anchored under
- * it. The host behind the menu mounts on the first long press and stays — a list of triggers that are only scrolled
- * past never builds one. `preview` and `onPreviewPress` are iOS-only: Material has no lifted preview.
+ * Android's own take on a context menu, since Material has no lifted preview: a long press ripples the trigger, ticks
+ * the long-press haptic, and opens a Material dropdown where the finger is — the trigger stays highlighted while the
+ * menu is up. The host behind the menu mounts on the first long press and stays, so a list of triggers that are only
+ * scrolled past never builds one. `preview` and `onPreviewPress` are iOS-only.
  */
 const ContextMenuRoot = ({actions, children, testID, ...props}: ContextMenuProps) => {
   const {onPreviewPress: _onPreviewPress, preview: _preview, ...sx} = props
   const theme = useAppTheme()
-  const style = useSx(sx)
-  const [isHostMounted, setIsHostMounted] = useState(false)
+  const resolved = useSx(sx)
+  const trigger = useRef<View>(null)
+  const [anchor, setAnchor] = useState<Point | null>(null)
   const [expanded, setExpanded] = useState(false)
 
-  const open = useCallback(() => {
-    setIsHostMounted(true)
-    setExpanded(true)
+  // The shape clips on an outer view, so the ripple and the highlight follow the trigger's rounded corners.
+  const {inner, outer} = useMemo(() => splitForRipple(resolved), [resolved])
+  const ripple = useMemo(() => ({color: theme.color('fill.tertiary')}), [theme])
+  const highlight = useMemo(() => ({backgroundColor: theme.color('fill.tertiary')}), [theme])
+
+  const open = useCallback((event: GestureResponderEvent) => {
+    const {pageX, pageY} = event.nativeEvent
+
+    Haptics.performAndroidHapticsAsync(Haptics.AndroidHaptics.Long_Press).catch(() => undefined)
+    // The touch in the trigger's own coordinates: `locationX/Y` are relative to whichever child was touched.
+    trigger.current?.measure((_x, _y, _width, _height, left, top) => {
+      setAnchor({x: pageX - left, y: pageY - top})
+      setExpanded(true)
+    })
   }, [])
 
   const dismiss = useCallback(() => setExpanded(false), [])
 
   return (
-    <Pressable onLongPress={open} style={style} testID={testID}>
-      {children}
-      {isHostMounted ? (
-        <Host
-          colorScheme={theme.dark ? 'dark' : 'light'}
-          pointerEvents="none"
-          seedColor={theme.materialSeed}
-          style={styles.anchor}
-        >
-          <DropdownMenu expanded={expanded} onDismissRequest={dismiss}>
-            <DropdownMenu.Items>
-              {actions.map(action => (
-                <MenuRow action={action} key={action.label} onDismiss={dismiss} />
-              ))}
-            </DropdownMenu.Items>
-          </DropdownMenu>
-        </Host>
-      ) : null}
-    </Pressable>
+    <View style={outer}>
+      <Pressable android_ripple={ripple} onLongPress={open} ref={trigger} style={inner} testID={testID}>
+        {/* Under the content, over the trigger's own background: the card tints, its text stays. */}
+        {expanded ? <View pointerEvents="none" style={[StyleSheet.absoluteFill, highlight]} /> : null}
+        {children}
+        {anchor ? (
+          <Host
+            colorScheme={theme.dark ? 'dark' : 'light'}
+            pointerEvents="none"
+            seedColor={theme.materialSeed}
+            style={[styles.anchor, {left: anchor.x, top: anchor.y}]}
+          >
+            <HostBoundary>
+              <DropdownMenu color={theme.color('surface.primary')} expanded={expanded} onDismissRequest={dismiss}>
+                <DropdownMenu.Items>
+                  {actions.map(action => (
+                    <MenuRow action={action} key={action.label} onDismiss={dismiss} />
+                  ))}
+                </DropdownMenu.Items>
+              </DropdownMenu>
+            </HostBoundary>
+          </Host>
+        ) : null}
+      </Pressable>
+    </View>
   )
 }
 

package/src/organisms/context-menu/context-menu.types.ts

@@ -5,7 +5,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/src/ripple-clip.ts

@@ -0,0 +1,47 @@
+import {StyleSheet, type ViewStyle} from 'react-native'
+
+/** What lays out a view's children — it goes on the pressable inside, so the content sits where the caller put it. */
+const CONTENT_KEYS = new Set<string>([
+  'alignContent',
+  'alignItems',
+  'columnGap',
+  'flexDirection',
+  'flexWrap',
+  'gap',
+  'justifyContent',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'rowGap',
+])
+
+const FILL: ViewStyle = {flexGrow: 1}
+
+/**
+ * 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 const splitForRipple = (style: ViewStyle | undefined): {inner: ViewStyle[]; outer: ViewStyle} => {
+  const flat = StyleSheet.flatten(style) ?? {}
+  const outer: Record<string, unknown> = {overflow: 'hidden'}
+  const inner: Record<string, unknown> = {}
+
+  for (const [key, value] of Object.entries(flat)) {
+    if (CONTENT_KEYS.has(key)) {
+      inner[key] = value
+    } else if (key !== 'overflow') {
+      outer[key] = value
+    }
+  }
+
+  return {inner: [FILL, inner as ViewStyle], outer: outer as ViewStyle}
+}

package/src/use-stack-modifiers.ts

@@ -0,0 +1,24 @@
+import {clickable, type ModifierConfig, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {type ResponsiveSx, 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: ResponsiveSx, onPress?: () => void, testID?: string): ModifierConfig[] => {
+  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]
+  )
+}