@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/components/Hydrated.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useHydrated } from "../hooks/useHydrated.js";
+/**
+ * Hydrated
+ *
+ * Renders `fallback` on the server and through the hydration pass, then its
+ * children in the first client render — the gate for markup the server cannot
+ * reproduce. Under Expo Router's SSR the server renders the app inside
+ * `+html.tsx` while the client hydrates `#root`, so every `useId()` differs
+ * between the two trees; the kit defers its own ids, but a Radix-backed
+ * component (`Tabs`, `Accordion`, `Collapsible`, `Select`, `DropdownMenu`,
+ * `Popover`) emits ids on both sides and logs a hydration mismatch when it is
+ * part of a server-rendered route. Wrap that subtree, not the page: the rest of
+ * the screen keeps its server HTML. Give it a fallback that holds the layout
+ * (a placeholder the same height) so nothing shifts when the children mount.
+ *
+ * Do not use it for content that must be in the server HTML (a FAQ's questions,
+ * a product's description); accept the development-only log there instead. On
+ * native there is no hydration pass, so children render immediately.
+ *
+ * ```tsx
+ * <Hydrated fallback={<View style={{ height: 240 }} />}>
+ *   <Tabs defaultValue="day">…</Tabs>
+ * </Hydrated>
+ * ```
+ */
+export function Hydrated({ fallback = null, children }) {
+    const hydrated = useHydrated();
+    return _jsx(_Fragment, { children: hydrated ? children : fallback });
+}

package/dist/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { StyleProp, TextStyle, ViewProps, ViewStyle } from "react-native";
-import type { ThemeColors } from "../constants/colors";
-import { type IconName } from "./iconRegistry.generated";
+import { type StyleProp, type TextStyle, type ViewProps, type ViewStyle } from "react-native";
+import type { ThemeColors } from "../constants/colors.js";
+import { type IconName } from "./iconRegistry.generated.js";
 /**
  * Kebab-case Lucide icon names the package bundles, served from
  * `icon-names.json` through the generated registry. Add a name there and run
@@ -23,10 +23,22 @@ type IconBaseProps = {
     color?: string | ThemeColorName;
     /** Additional styles for positioning, transforms, etc. */
     style?: StyleProp<TextStyle>;
-    /** When true, hides the icon from the accessibility tree. @default false */
+    /**
+     * Hides the icon from the accessibility tree. An icon with no
+     * `accessibilityLabel` is already hidden (see below), so this is only
+     * needed to silence a labelled icon. @default false
+     */
     decorative?: boolean;
+    /**
+     * What the icon means, for an icon that stands alone (no visible label next
+     * to it): `role="img"` + `aria-label` on web, `accessible` +
+     * `accessibilityLabel` on native. Omit it when the icon sits beside text
+     * that already says it — an unlabeled icon is hidden from assistive tech,
+     * which would otherwise announce an unnamed image.
+     */
+    accessibilityLabel?: string;
 };
-type IconAccessibilityProps = Pick<ViewProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "aria-hidden">;
+type IconAccessibilityProps = Pick<ViewProps, "accessible" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLabel" | "aria-hidden" | "aria-label" | "role">;
 /**
  * Props handed to a `component`. Wide enough that any `lucide-react-native`
  * component type-checks as-is (`LucideProps` extends `SvgProps`, whose `style`

package/dist/components/Icon.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { ICONS } from "./iconRegistry.generated";
+import { ICONS } from "./iconRegistry.generated.js";
 /**
  * Resolve an icon color against the active theme.
  *
@@ -18,6 +19,33 @@ function resolveIconColor(color, themeColors) {
     }
     return color;
 }
+/**
+ * On web the SVG root is a DOM element and React forwards every prop to it,
+ * so the RN-only accessibility props (`accessible`,
+ * `importantForAccessibility`, `accessibilityElementsHidden`) surface as
+ * "unknown prop" warnings on every page. Web gets ARIA only; native keeps
+ * the RN props.
+ *
+ * Only a labelled icon is exposed. An icon without a label used to render as
+ * an unnamed `role="img"` (web) or an `accessible` element with nothing to
+ * say (native) — dozens per screen, each a WCAG 1.1.1 failure — so no label
+ * now means decorative.
+ */
+function iconAccessibilityProps(decorative, label) {
+    const hidden = decorative || label === undefined;
+    if (Platform.OS === "web") {
+        return hidden ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+    }
+    if (hidden) {
+        return {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            accessibilityElementsHidden: true,
+            "aria-hidden": true,
+        };
+    }
+    return { accessible: true, accessibilityLabel: label };
+}
 /**
  * Universal Icon Component
  * Renders `lucide-react-native` SVG icons with theme integration and style
@@ -41,18 +69,11 @@ function warnUnknownIconName(name) {
         "Add it to icon-names.json and run `bun run ui:icons`, or pass a Lucide component through `component`.");
 }
 export function Icon(props) {
-    const { size = 24, color, style, decorative = false } = props;
+    const { size = 24, color, style, decorative = false, accessibilityLabel } = props;
     const { theme } = useTheme();
     const iconColor = resolveIconColor(color, theme.colors);
     const CustomComponent = "component" in props ? props.component : undefined;
-    const accessibilityProps = decorative
-        ? {
-            accessible: false,
-            importantForAccessibility: "no-hide-descendants",
-            accessibilityElementsHidden: true,
-            "aria-hidden": true,
-        }
-        : { accessible: true };
+    const accessibilityProps = iconAccessibilityProps(decorative, accessibilityLabel);
     // `style` stays a text style on the public prop for source compatibility
     // with the font-icon era; SVG roots take a view style, and every layout
     // property callers actually pass (margins, transforms) belongs to both.

package/dist/components/InputOTP.js

@@ -2,9 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 const CELL_WIDTH = 36;
 const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;
@@ -84,16 +86,18 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
     // pass every frame. The 1↔2px and color changes read as instant for OTP
     // cells, so compute both during render.
     const borderWidth = isActive && !hasError ? 2 : 1;
+    // Host-app `setShape({ input })`: cells share the TextInput radius.
+    const inputShape = useShape("input");
     const borderColor = hasError
         ? theme.colors.destructive
         : isActive
             ? theme.colors.primary
             : theme.colors.border;
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(View, { style: [
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(View, { ...stateSurfaceProps(), style: [
                 {
                     width: CELL_WIDTH,
                     height: CELL_HEIGHT,
-                    borderRadius: spacing.radiusMd,
+                    borderRadius: inputShape?.borderRadius ?? spacing.radiusMd,
                     borderWidth,
                     justifyContent: "center",
                     alignItems: "center",
@@ -131,5 +135,5 @@ const createStyles = (theme) => StyleSheet.create({
         marginTop: spacing.xs,
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);
 export { InputOTP };

package/dist/components/Item.d.ts

@@ -1,14 +1,56 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { type TextProps } from "./StyledText";
-import { type IconName, type ThemeColorName } from "./Icon";
+import { type TextProps } from "./StyledText.js";
+import { type IconName, type ThemeColorName } from "./Icon.js";
+/**
+ * What a row tells the controls inside it: the title's text when it is a plain
+ * string (the accessible name on every platform), and — once ids can be
+ * trusted — the id its `ItemTitle` renders under (`nativeID`), so a composed
+ * title can still be linked with `aria-labelledby`.
+ *
+ * `titleId` is `undefined` during SSR and the hydration pass on web: `useId()`
+ * values do not survive Expo Router's streamed hydration (see `useHydrated`),
+ * so ids only appear in the first client render after it.
+ */
+export interface ItemLabel {
+    titleId: string | undefined;
+    title: string | undefined;
+}
+/**
+ * The row label a control inside an `Item` can borrow, or `null` outside a
+ * row. `Switch`, `Checkbox` and `Toggle` use it when they have no label of
+ * their own: `aria-labelledby={titleId}` on web, `accessibilityLabel={title}`
+ * on native. Apps composing their own controls can do the same.
+ */
+export declare function useItemLabel(): ItemLabel | null;
+type OwnLabelProps = {
+    accessibilityLabel?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    accessibilityLabelledBy?: string | string[];
+};
+/**
+ * Accessibility props a control inside an `Item` should spread when it has no
+ * label of its own — its own props always win, so this returns `{}` whenever
+ * any label prop is set, or outside a row. A plain-text title becomes the
+ * control's `accessibilityLabel` (`aria-label` on web) on every platform, in
+ * the server HTML too. A composed title has no text to copy, so the control
+ * points at the title's id instead — `aria-labelledby` on web,
+ * `accessibilityLabelledBy` on Android — once that id exists (after hydration
+ * on web; see `ItemLabel`).
+ */
+export declare function useItemControlLabel(own: OwnLabelProps): OwnLabelProps;
 export interface ItemProps {
     children?: React.ReactNode;
     /** Makes the row pressable with scale feedback (mirrors Card's pattern). */
     onPress?: () => void;
     /** Disables press handling when `onPress` is set. */
     disabled?: boolean;
-    /** Renders a hairline divider below the row, inset past the media slot. */
+    /**
+     * Renders a hairline divider below the row, starting under the title (past
+     * the `ItemMedia` slot when there is one). Inside an `ItemGroup` the group
+     * sets this for every row but the last; pass `false` to drop one row's line.
+     */
     separator?: boolean;
     /** Custom style override for the row. */
     style?: StyleProp<ViewStyle>;
@@ -20,7 +62,9 @@ export interface ItemProps {
  * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
  * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
- * `ItemActions`.
+ * `ItemActions`. Stack rows in an `ItemGroup`, which draws the separators;
+ * the row's own padding is the screen's only horizontal inset, so don't wrap
+ * rows in a padded or bordered container.
  *
  * @example
  * ```tsx
@@ -37,6 +81,60 @@ export interface ItemProps {
  * ```
  */
 export declare function Item({ children, onPress, disabled, separator, style }: ItemProps): React.JSX.Element;
+export interface ItemGroupProps {
+    /**
+     * Section label above the rows: an uppercase eyebrow in the muted color,
+     * announced as a header.
+     */
+    title?: string;
+    /** Supporting copy under the title. */
+    description?: string;
+    /** Helper text under the rows, e.g. what the settings above it do. */
+    footer?: string;
+    /**
+     * The rows: `Item`s, or components that render one. Each direct child is
+     * one row; the group draws the hairline under every row but the last.
+     */
+    children?: React.ReactNode;
+    /** Style override for the group container (outer margins, width). */
+    style?: StyleProp<ViewStyle>;
+    /** Test id for the group container. */
+    testID?: string;
+}
+/**
+ * ItemGroup
+ *
+ * A flat grouped list: an optional eyebrow title and description, full-width
+ * `Item` rows separated by inset hairlines, and optional footer text. No
+ * border, radius, shadow, or fill: the header and footer sit on the row
+ * padding (`spacing.rowPaddingX`), so the group needs no horizontal padding
+ * from its parent. Space groups apart with `spacing.sectionSpacing`.
+ *
+ * @example
+ * ```tsx
+ * <ItemGroup title="Account" footer="Signed in as jane@example.com">
+ *   <Item onPress={openProfile}>
+ *     <ItemMedia icon="user" />
+ *     <ItemContent>
+ *       <ItemTitle>Edit profile</ItemTitle>
+ *     </ItemContent>
+ *     <ItemActions>
+ *       <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *     </ItemActions>
+ *   </Item>
+ *   <Item>
+ *     <ItemMedia icon="bell" />
+ *     <ItemContent>
+ *       <ItemTitle>Notifications</ItemTitle>
+ *     </ItemContent>
+ *     <ItemActions>
+ *       <Switch checked={enabled} onCheckedChange={setEnabled} />
+ *     </ItemActions>
+ *   </Item>
+ * </ItemGroup>
+ * ```
+ */
+export declare function ItemGroup({ title, description, footer, children, style, testID }: ItemGroupProps): React.JSX.Element;
 export interface ItemMediaProps {
     /** Square size of the media slot in pixels. @default 40 */
     size?: number;
@@ -92,3 +190,4 @@ export interface ItemActionsProps {
  * icon, a `Switch`, value text, etc.).
  */
 export declare function ItemActions({ children, style }: ItemActionsProps): React.JSX.Element;
+export {};

package/dist/components/Item.js

@@ -1,14 +1,93 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Children, createContext, isValidElement, use, useId } from "react";
 import { View, Pressable, StyleSheet, Platform, Animated, } from "react-native";
-import { StyledText, CaptionText } from "./StyledText.js";
+import { StyledText, CaptionText, EyebrowText } from "./StyledText.js";
+import { useHydrated } from "../hooks/useHydrated.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
-// Default ItemMedia footprint (see ItemMedia's `size` prop) — used to inset
-// the optional separator past the media slot without needing a context.
+import { interaction } from "../constants/interaction.js";
+// Default ItemMedia footprint (see ItemMedia's `size` prop).
 const DEFAULT_MEDIA_SIZE = 40;
-const SEPARATOR_INSET = spacing.rowPaddingX + DEFAULT_MEDIA_SIZE + spacing.rowGap;
+const ItemGroupRowContext = createContext(null);
+const SEPARATED_ROW = { separator: true };
+const LAST_ROW = { separator: false };
+const ItemLabelContext = createContext(null);
+/** True inside `ItemContent`, where the row's title lives. */
+const ItemContentContext = createContext(false);
+/**
+ * The row's title, read synchronously from its element tree: the first
+ * `ItemTitle` directly inside a direct `ItemContent`. `found` is false when
+ * the row has no such title (a media-only or custom row), so controls in it
+ * borrow nothing. `text` is the title when its children are strings (or
+ * numbers); a composed title (`<ItemTitle>{name} <Badge/></ItemTitle>`) gives
+ * `undefined` — web still links by id, native then needs an explicit label.
+ */
+function scanTitle(children) {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        if (child.type === ItemContent) {
+            for (const inner of Children.toArray(child.props.children)) {
+                if (isValidElement(inner) && inner.type === ItemTitle) {
+                    const parts = Children.toArray(inner.props.children);
+                    const plain = parts.length > 0 && parts.every((part) => typeof part === "string" || typeof part === "number");
+                    return { found: true, text: plain ? parts.join("") : undefined };
+                }
+            }
+        }
+    }
+    return { found: false, text: undefined };
+}
+/**
+ * The row label a control inside an `Item` can borrow, or `null` outside a
+ * row. `Switch`, `Checkbox` and `Toggle` use it when they have no label of
+ * their own: `aria-labelledby={titleId}` on web, `accessibilityLabel={title}`
+ * on native. Apps composing their own controls can do the same.
+ */
+export function useItemLabel() {
+    return use(ItemLabelContext);
+}
+/**
+ * Accessibility props a control inside an `Item` should spread when it has no
+ * label of its own — its own props always win, so this returns `{}` whenever
+ * any label prop is set, or outside a row. A plain-text title becomes the
+ * control's `accessibilityLabel` (`aria-label` on web) on every platform, in
+ * the server HTML too. A composed title has no text to copy, so the control
+ * points at the title's id instead — `aria-labelledby` on web,
+ * `accessibilityLabelledBy` on Android — once that id exists (after hydration
+ * on web; see `ItemLabel`).
+ */
+export function useItemControlLabel(own) {
+    const label = use(ItemLabelContext);
+    if (!label ||
+        own.accessibilityLabel !== undefined ||
+        own["aria-label"] !== undefined ||
+        own["aria-labelledby"] !== undefined ||
+        own.accessibilityLabelledBy !== undefined) {
+        return {};
+    }
+    if (label.title !== undefined)
+        return { accessibilityLabel: label.title };
+    if (label.titleId === undefined)
+        return {};
+    return Platform.OS === "web" ? { "aria-labelledby": label.titleId } : { accessibilityLabelledBy: label.titleId };
+}
+/**
+ * Where a row's hairline starts: under the title when the row leads with an
+ * `ItemMedia` (row padding + media + gap, so a custom `size` lines up too),
+ * otherwise at the row padding.
+ */
+function separatorInset(children) {
+    for (const child of Children.toArray(children)) {
+        if (isValidElement(child) && child.type === ItemMedia) {
+            return spacing.rowPaddingX + (child.props.size ?? DEFAULT_MEDIA_SIZE) + spacing.rowGap;
+        }
+    }
+    return spacing.rowPaddingX;
+}
 /**
  * Item
  *
@@ -16,7 +95,9 @@ const SEPARATOR_INSET = spacing.rowPaddingX + DEFAULT_MEDIA_SIZE + spacing.rowGa
  * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
  * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
- * `ItemActions`.
+ * `ItemActions`. Stack rows in an `ItemGroup`, which draws the separators;
+ * the row's own padding is the screen's only horizontal inset, so don't wrap
+ * rows in a padded or bordered container.
  *
  * @example
  * ```tsx
@@ -32,20 +113,78 @@ const SEPARATOR_INSET = spacing.rowPaddingX + DEFAULT_MEDIA_SIZE + spacing.rowGa
  * </Item>
  * ```
  */
-export function Item({ children, onPress, disabled, separator = false, style }) {
-    const { theme } = useTheme();
+export function Item({ children, onPress, disabled, separator, style }) {
+    const { theme, getFocusRingStyle } = useTheme();
+    const groupRow = use(ItemGroupRowContext);
+    const showSeparator = separator ?? groupRow?.separator ?? false;
+    const reactId = useId();
+    const hydrated = useHydrated();
+    const { found: hasTitle, text: title } = scanTitle(children);
+    // Ids only after hydration on web (see ItemLabel); native has no hydration.
+    const titleId = Platform.OS !== "web" || hydrated ? reactId : undefined;
+    const label = React.useMemo(() => (hasTitle ? { titleId, title } : null), [hasTitle, titleId, title]);
     const { animatedStyle, pressHandlers } = useScalePress({
         disabled: !onPress || !!disabled,
         scaleTo: 0.98,
-        haptic: false,
     });
-    const row = (_jsx(View, { style: [styles.row, style], children: children }));
-    const content = separator ? (_jsxs(View, { children: [row, _jsx(View, { style: [styles.separator, { backgroundColor: theme.colors.border }] })] })) : (row);
+    const focus = useFocusVisible();
+    const row = (_jsx(View, { style: [styles.row, style], children: _jsx(ItemLabelContext.Provider, { value: label, children: children }) }));
+    const content = showSeparator ? (_jsxs(View, { children: [row, _jsx(View, { style: [
+                    styles.separator,
+                    { marginLeft: separatorInset(children), backgroundColor: theme.colors.border },
+                ] })] })) : (row);
     if (onPress) {
-        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, style: Platform.OS === "web" ? { cursor: "pointer" } : undefined, children: _jsx(Animated.View, { style: animatedStyle, children: content }) }));
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, onFocus: focus.onFocus, onBlur: focus.onBlur, style: ({ pressed }) => [
+                { borderRadius: spacing.radiusSm },
+                Platform.OS === "web" && { cursor: "pointer", outlineStyle: "none" },
+                pressed && { opacity: interaction.pressedOpacity },
+                focus.focused && !disabled && getFocusRingStyle(),
+            ], children: _jsx(Animated.View, { style: animatedStyle, children: content }) }));
     }
     return content;
 }
+/**
+ * ItemGroup
+ *
+ * A flat grouped list: an optional eyebrow title and description, full-width
+ * `Item` rows separated by inset hairlines, and optional footer text. No
+ * border, radius, shadow, or fill: the header and footer sit on the row
+ * padding (`spacing.rowPaddingX`), so the group needs no horizontal padding
+ * from its parent. Space groups apart with `spacing.sectionSpacing`.
+ *
+ * @example
+ * ```tsx
+ * <ItemGroup title="Account" footer="Signed in as jane@example.com">
+ *   <Item onPress={openProfile}>
+ *     <ItemMedia icon="user" />
+ *     <ItemContent>
+ *       <ItemTitle>Edit profile</ItemTitle>
+ *     </ItemContent>
+ *     <ItemActions>
+ *       <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *     </ItemActions>
+ *   </Item>
+ *   <Item>
+ *     <ItemMedia icon="bell" />
+ *     <ItemContent>
+ *       <ItemTitle>Notifications</ItemTitle>
+ *     </ItemContent>
+ *     <ItemActions>
+ *       <Switch checked={enabled} onCheckedChange={setEnabled} />
+ *     </ItemActions>
+ *   </Item>
+ * </ItemGroup>
+ * ```
+ */
+export function ItemGroup({ title, description, footer, children, style, testID }) {
+    const { theme } = useTheme();
+    const rows = Children.toArray(children);
+    // react-native-web renders an unlevelled header as h1; level the title as h2
+    // there. Native has no heading levels and takes the role alone. Read at render
+    // time (not module load) so tests can flip `Platform.OS`.
+    const headingLevel = Platform.OS === "web" ? { "aria-level": 2 } : undefined;
+    return (_jsxs(View, { style: style, testID: testID, children: [(!!title || !!description) && (_jsxs(View, { style: styles.groupHeader, children: [!!title && (_jsx(EyebrowText, { accessibilityRole: "header", ...headingLevel, style: { color: theme.colors.mutedForeground }, children: title })), !!description && (_jsx(CaptionText, { style: { color: theme.colors.textDim }, children: description }))] })), rows.map((row, index) => (_jsx(ItemGroupRowContext.Provider, { value: index < rows.length - 1 ? SEPARATED_ROW : LAST_ROW, children: row }, isValidElement(row) && row.key != null ? row.key : index))), !!footer && (_jsx(View, { style: styles.groupFooter, children: _jsx(CaptionText, { style: { color: theme.colors.mutedForeground }, children: footer }) }))] }));
+}
 /**
  * ItemMedia
  *
@@ -73,7 +212,7 @@ export function ItemMedia({ size = DEFAULT_MEDIA_SIZE, icon, iconColor = "mutedF
  * content). Sits between `ItemMedia` and `ItemActions`.
  */
 export function ItemContent({ children, style }) {
-    return _jsx(View, { style: [styles.content, style], children: children });
+    return (_jsx(View, { style: [styles.content, style], children: _jsx(ItemContentContext.Provider, { value: true, children: children }) }));
 }
 /**
  * ItemTitle
@@ -81,7 +220,13 @@ export function ItemContent({ children, style }) {
  * `Item` row title — label weight (medium) at body size.
  */
 export function ItemTitle({ children, style, ...props }) {
-    return (_jsx(StyledText, { size: "body", fontWeight: "medium", ...props, style: style, children: children }));
+    // The row's title (the one inside ItemContent) carries the id the row hands
+    // to its controls; titles used elsewhere (ItemMedia initials, a value in
+    // ItemActions) render without it.
+    const label = use(ItemLabelContext);
+    const inContent = use(ItemContentContext);
+    const nativeID = inContent ? label?.titleId : undefined;
+    return (_jsx(StyledText, { size: "body", fontWeight: "medium", nativeID: nativeID, ...props, style: style, children: children }));
 }
 /**
  * ItemDescription
@@ -101,7 +246,7 @@ export function ItemDescription({ children, style, ...props }) {
 export function ItemActions({ children, style }) {
     return _jsx(View, { style: [styles.actions, style], children: children });
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
@@ -122,6 +267,14 @@ const styles = StyleSheet.create({
     },
     separator: {
         height: StyleSheet.hairlineWidth,
-        marginLeft: SEPARATOR_INSET,
+    },
+    groupHeader: {
+        paddingHorizontal: spacing.rowPaddingX,
+        paddingBottom: spacing.xs,
+        gap: spacing.xxs,
+    },
+    groupFooter: {
+        paddingHorizontal: spacing.rowPaddingX,
+        paddingTop: spacing.xs,
     },
 });

package/dist/components/KeyboardAvoidingView.d.ts

@@ -18,5 +18,5 @@ export declare function useKeyboardAvoidance(): boolean;
  * so screens can avoid the soft keyboard with `automaticOffset`; web renders a
  * plain `View`.
  */
-export declare function KeyboardAvoidingView({ children, style, behavior, automaticOffset, contentContainerStyle, keyboardVerticalOffset, ...props }: KeyboardAvoidingViewProps): React.JSX.Element;
+export declare function KeyboardAvoidingView({ children, style, behavior: behaviorProp, automaticOffset, contentContainerStyle, keyboardVerticalOffset, ...props }: KeyboardAvoidingViewProps): React.JSX.Element;
 export {};

package/dist/components/KeyboardAvoidingView.js

@@ -14,7 +14,10 @@ export function useKeyboardAvoidance() {
  * so screens can avoid the soft keyboard with `automaticOffset`; web renders a
  * plain `View`.
  */
-export function KeyboardAvoidingView({ children, style, behavior = Platform.OS === "ios" ? "padding" : "height", automaticOffset = true, contentContainerStyle, keyboardVerticalOffset, ...props }) {
+export function KeyboardAvoidingView({ children, style, behavior: behaviorProp, automaticOffset = true, contentContainerStyle, keyboardVerticalOffset, ...props }) {
+    // Resolved in the body rather than as a default parameter: the React
+    // Compiler can't reorder a computed default, and skipped the component.
+    const behavior = behaviorProp === undefined ? (Platform.OS === "ios" ? "padding" : "height") : behaviorProp;
     if (Platform.OS === "web") {
         return (_jsx(KeyboardAvoidanceContext.Provider, { value: true, children: _jsx(View, { style: style, ...props, children: children }) }));
     }

package/dist/components/Label.js

@@ -4,6 +4,7 @@ import * as LabelPrimitive from "@rn-primitives/label";
 import { useTheme } from "../hooks/useTheme.js";
 import { useFontStyle } from "../hooks/useFontStyle.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { StyledText } from "./StyledText.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
 const SIZE_CONFIGS = {
@@ -85,7 +86,7 @@ const createStyles = (theme) => StyleSheet.create({
         color: theme.colors.destructive,
     },
     disabledLabel: {
-        opacity: 0.6,
+        opacity: interaction.disabledOpacity,
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);

package/dist/components/MaxWidthContainer.js

@@ -57,7 +57,7 @@ export function MaxWidthContainer({ children, maxWidth, preset = "2xl", style, c
             style,
         ], children: children }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
     container: {
         flex: 1,
     },