@oxy.so/bloom 4.20.0 → 4.21.0

package/src/button/Button.tsx

@@ -4,6 +4,7 @@ import { resolveIconSlot } from '../icons/render-icon';
 import {
   ActivityIndicator,
   Linking,
+  Platform,
   Pressable,
   StyleSheet,
   View,
@@ -80,6 +81,42 @@ const SQUARE_HIT_SLOP = {
   lg: { top: 0, bottom: 0, left: 0, right: 0 },
 } as const satisfies Record<ButtonResolvedSize, NonNullable<ButtonProps['hitSlop']>>;
 
+type HitSlop = { top: number; bottom: number; left: number; right: number };
+
+/**
+ * Android's floor is 48dp (Material), 4dp above the 44 the tables above reach —
+ * so on Android every target grows 2dp at its top and bottom: `lg` (44dp tall,
+ * no slack) reaches 48, and every smaller size clears 48 the same way. Squares
+ * also grow 2dp at the sides, since they already take all-round slack; row
+ * buttons and links do not, because side slack steals presses from a
+ * neighbour. Two stacked buttons keep 4dp of every 8dp gap between them.
+ */
+const ANDROID_TARGET_EXTRA = 2;
+
+function growVertical(slop: HitSlop): HitSlop {
+  return { ...slop, top: slop.top + ANDROID_TARGET_EXTRA, bottom: slop.bottom + ANDROID_TARGET_EXTRA };
+}
+
+function growAllRound(slop: HitSlop): HitSlop {
+  return {
+    top: slop.top + ANDROID_TARGET_EXTRA,
+    bottom: slop.bottom + ANDROID_TARGET_EXTRA,
+    left: slop.left + ANDROID_TARGET_EXTRA,
+    right: slop.right + ANDROID_TARGET_EXTRA,
+  };
+}
+
+function mapSizes(
+  table: Record<ButtonResolvedSize, HitSlop>,
+  grow: (slop: HitSlop) => HitSlop,
+): Record<ButtonResolvedSize, HitSlop> {
+  return { xs: grow(table.xs), sm: grow(table.sm), md: grow(table.md), lg: grow(table.lg) };
+}
+
+const ANDROID_SIZE_HIT_SLOP = mapSizes(SIZE_HIT_SLOP, growVertical);
+const ANDROID_SQUARE_HIT_SLOP = mapSizes(SQUARE_HIT_SLOP, growAllRound);
+const ANDROID_LINK_HIT_SLOP = growVertical(LINK_HIT_SLOP);
+
 // ---------------------------------------------------------------------------
 //  The button renders ONE node — the same shape the web fork renders (one
 //  `<button>`), so a caller's layout `className` lands on the box its parent
@@ -286,11 +323,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     [geometry, paint.foreground, isLink, underlineMode, hovered, disabled],
   );
 
+  const android = Platform.OS === 'android';
   const defaultHitSlop = isSquare
-    ? SQUARE_HIT_SLOP[size]
+    ? (android ? ANDROID_SQUARE_HIT_SLOP : SQUARE_HIT_SLOP)[size]
     : isLink
-      ? LINK_HIT_SLOP
-      : SIZE_HIT_SLOP[size];
+      ? (android ? ANDROID_LINK_HIT_SLOP : LINK_HIT_SLOP)
+      : (android ? ANDROID_SIZE_HIT_SLOP : SIZE_HIT_SLOP)[size];
 
   const IconFromProp = icon != null && isIconComponent(icon) ? icon : null;
   const iconNode = IconFromProp ? (

package/src/design-tokens/theme-css.ts

@@ -35,6 +35,17 @@ import {
 } from './scales';
 import { SHADOW_BOX } from './shadows';
 
+/**
+ * A px line-height as the unitless ratio of its font-size, spelled the way
+ * Tailwind spells its own type scale: `lineHeightRatio(22, 15)` → `calc(22 / 15)`.
+ * Exact on both platforms (no rounded decimal), and the only form
+ * react-native-css resolves correctly through `var()` — it multiplies any
+ * number by the font-size.
+ */
+export function lineHeightRatio(lineHeightPx: number, fontSizePx: number): string {
+  return `calc(${lineHeightPx} / ${fontSizePx})`;
+}
+
 /**
  * Produce the BODY of a Tailwind v4 `@theme` block (no surrounding braces) that
  * registers the full Bloom semantic vocabulary.
@@ -42,7 +53,7 @@ import { SHADOW_BOX } from './shadows';
  * - Colors → `--color-<role>: var(--canonical);`
  * - Spacing → `--spacing-<key>: <px>;`
  * - Radius  → `--radius-<key>: <px>;`
- * - Type    → `--text-<role>: <size>; --text-<role>--line-height: <lh>;`
+ * - Type    → `--text-<role>: <size>; --text-<role>--line-height: calc(<lh> / <size>);`
  *             `--font-<role>: var(--bloom-font-*);` (+ weight via utility doc)
  * - Shadow  → `--shadow-<s|m>: <box-shadow>;`
  */
@@ -94,10 +105,20 @@ export function bloomThemeCss(): string {
   }
 
   // Typography: size + line-height + family per role.
+  //
+  // The line-height is a UNITLESS ratio (`calc(22 / 15)`), the form Tailwind's
+  // own `--text-sm--line-height: calc(1.25 / 0.875)` takes — never px. On the
+  // web the two are identical (a unitless line-height is a multiple of the
+  // font-size: 15px × 22/15 = 22px). On native they are not: Tailwind v4 emits
+  // `line-height: var(--tw-leading, var(--text-body--line-height))`,
+  // react-native-css compiles that to `lineHeight(var(…, 22))`, and its runtime
+  // `lineHeight` resolver treats EVERY number as an em multiplier — so a px
+  // token rendered `text-body` at 22 × 15 = 330dp line-height on Android and
+  // iOS. See `lineHeightRatio` and `docs/typography.mdx`.
   for (const name of Object.keys(TYPOGRAPHY) as TypeRoleName[]) {
     const role = TYPOGRAPHY[name];
     lines.push(`  --text-${name}: ${role.size}px;`);
-    lines.push(`  --text-${name}--line-height: ${role.lineHeight}px;`);
+    lines.push(`  --text-${name}--line-height: ${lineHeightRatio(role.lineHeight, role.size)};`);
     lines.push(`  --text-${name}--font-weight: ${role.weight};`);
     lines.push(`  --font-${name}: ${FONT_FAMILY_VARS[role.family]};`);
   }

package/src/design-tokens/theme.css

@@ -124,35 +124,35 @@
   --radius-radius-max: 9999px;
   --border-width-hairline: 0.5px;
   --text-caption: 11px;
-  --text-caption--line-height: 14px;
+  --text-caption--line-height: calc(14 / 11);
   --text-caption--font-weight: 400;
   --font-caption: var(--bloom-font-sans);
   --text-bodySmall: 13px;
-  --text-bodySmall--line-height: 18px;
+  --text-bodySmall--line-height: calc(18 / 13);
   --text-bodySmall--font-weight: 400;
   --font-bodySmall: var(--bloom-font-sans);
   --text-bodyTitleSmall: 13px;
-  --text-bodyTitleSmall--line-height: 18px;
+  --text-bodyTitleSmall--line-height: calc(18 / 13);
   --text-bodyTitleSmall--font-weight: 600;
   --font-bodyTitleSmall: var(--bloom-font-sans);
   --text-body: 15px;
-  --text-body--line-height: 22px;
+  --text-body--line-height: calc(22 / 15);
   --text-body--font-weight: 400;
   --font-body: var(--bloom-font-sans);
   --text-subtitle: 17px;
-  --text-subtitle--line-height: 24px;
+  --text-subtitle--line-height: calc(24 / 17);
   --text-subtitle--font-weight: 500;
   --font-subtitle: var(--bloom-font-sans);
   --text-sectionTitle: 20px;
-  --text-sectionTitle--line-height: 26px;
+  --text-sectionTitle--line-height: calc(26 / 20);
   --text-sectionTitle--font-weight: 600;
   --font-sectionTitle: var(--bloom-font-sans);
   --text-headerBold: 28px;
-  --text-headerBold--line-height: 34px;
+  --text-headerBold--line-height: calc(34 / 28);
   --text-headerBold--font-weight: 700;
   --font-headerBold: var(--bloom-font-display);
   --text-buttonLarge: 17px;
-  --text-buttonLarge--line-height: 22px;
+  --text-buttonLarge--line-height: calc(22 / 17);
   --text-buttonLarge--font-weight: 600;
   --font-buttonLarge: var(--bloom-font-sans);
   --font-bloom-sans: var(--bloom-font-sans);

package/src/dialog/DialogBottomSheet.tsx

@@ -13,6 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { type AnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
@@ -86,6 +87,11 @@ export function DialogBottomSheet({
   const titleId = useId();
   const descriptionId = useId();
   const headerController = useDialogHeaderController();
+  // The sheet is flush with the bottom of the window (a `<Modal>` drawn
+  // edge-to-edge on Android, and under the home indicator on iOS), and
+  // `BottomSheet` deliberately leaves the safe area to its content. This Dialog
+  // IS the content's chrome, so it owns the inset (the spacer after the body).
+  const { bottom: bottomInset } = useSafeAreaInsets();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -325,12 +331,27 @@ export function DialogBottomSheet({
           <DialogMorphContent morph={morphState} style={scrollableResolved ? undefined : FILL_BOUNDED}>
             {header ? headerBody : dialogBody}
           </DialogMorphContent>
+          {/* The bottom safe area, INSIDE the scroll content. Without it the
+              last row of every bottom-placement Dialog was painted under the
+              Android gesture bar / iOS home indicator (a 2400px Pixel put a
+              "Having trouble?" link at 2297–2356px), and a body that outgrew
+              the sheet could not scroll its last rows out from under the bar —
+              the scroll range ended exactly where the bar began. A spacer
+              rather than a padding: the content box keeps the caller's
+              `padding`/`contentPadding` untouched on both platforms, and the
+              morph layer above still measures the content alone. */}
+          {bottomInset > 0 ? (
+            <View testID={SAFE_AREA_SPACER_TESTID} style={{ height: bottomInset }} />
+          ) : null}
         </StyledView>
       </Context.Provider>
     </BottomSheet>
   );
 }
 
+/** Test handle for the bottom safe-area spacer. */
+const SAFE_AREA_SPACER_TESTID = 'dialog-sheet-safe-area';
+
 /** Passes a bounded height down to a `scrollable={false}` body. */
 const FILL_BOUNDED = { flex: 1, minHeight: 0 } as const;
 

package/src/dialog/DialogHeader.tsx

@@ -83,6 +83,52 @@ const HEADER_H_PADDING = 20;
 /** Circular icon-button diameter for the default back / close affordances. */
 const NAV_BUTTON_SIZE = 36;
 
+/** The large title's line box (px) — `styles.largeTitle.lineHeight`. */
+const LARGE_TITLE_LINE_HEIGHT = 38;
+
+/**
+ * Content top inset (px) for an INLINE-CLOSE header (see {@link isInlineCloseHeader}):
+ * the large title's first line is centred on the nav row, level with the ✕,
+ * instead of starting below the whole bar.
+ */
+export const DIALOG_HEADER_INLINE_CONTENT_TOP = (DIALOG_NAV_BAR_HEIGHT - LARGE_TITLE_LINE_HEIGHT) / 2;
+
+/**
+ * Space (px) the large title's first line keeps clear at its trailing edge for
+ * the ✕ it shares a row with: the nav row's gutter + the button + an 8px gap,
+ * less the title block's own gutter.
+ */
+const INLINE_CLOSE_TITLE_RESERVE = HEADER_H_PADDING - 4 + NAV_BUTTON_SIZE + 8 - HEADER_H_PADDING;
+
+/** Scroll distance (px) over which the bar's scrim fades in on an inline-close header. */
+const INLINE_SCRIM_FADE_DISTANCE = 16;
+
+/**
+ * Whether a large-title header puts its title IN the nav row, beside the ✕,
+ * rather than in a band below the bar.
+ *
+ * The nav row exists for its controls. When it would hold nothing but the
+ * default close — no back, no leading slot, no trailing actions, no custom
+ * trailing node — a full 72px row above the title is an empty band on every
+ * entry view of a flow (an account dialog's first screen, a one-page sheet).
+ * The title then starts level with the ✕ and wraps before it; the bar's scrim
+ * and the small collapsed title still arrive once the title scrolls under it.
+ *
+ * Anything that gives the row content of its own keeps the stacked layout: a
+ * back button (the title would sit between two buttons), rich trailing actions
+ * or a custom `right` (unknown width), a branded `titleContent` (no large title
+ * at all), and `tone: 'onImage'` (the scrim is what makes the chrome legible
+ * over media, so it cannot start hidden).
+ */
+export function isInlineCloseHeader(config: DialogHeaderConfig): boolean {
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  if (!hasLargeTitle) return false;
+  if (config.tone === 'onImage') return false;
+  if (config.left || config.onBack || config.right) return false;
+  if (config.actions?.length || config.primaryAction) return false;
+  return true;
+}
+
 /**
  * Trailing icon `actions` shown inline before they collapse into a "more"
  * overflow menu (Material overflow pattern). Kept small so the nav row never
@@ -473,6 +519,17 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   // so there is nothing to collapse and no large in-content title to collapse under.
   const hasLargeTitle =
     collapse && !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  // The large title shares the nav row with the ✕ at rest (`isInlineCloseHeader`),
+  // so the scrim — opaque at the top — must not paint over it until content
+  // actually scrolls under the bar. Only a collapsing bar has an in-content title.
+  const inlineClose = collapse && isInlineCloseHeader(config);
+
+  const scrimStyle = useAnimatedStyle(() => {
+    if (!inlineClose) return { opacity: 1 };
+    return {
+      opacity: interpolate(scrollY.value, [0, INLINE_SCRIM_FADE_DISTANCE], [0, 1], Extrapolation.CLAMP),
+    };
+  }, [scrollY, inlineClose]);
 
   const titleStyle = useAnimatedStyle(() => {
     // When there is no large title to collapse under, the bar title is always
@@ -548,14 +605,23 @@ export const DialogNavHeader = memo(function DialogNavHeader({
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
           content fades out under the bar. `onImage` swaps to a dark scrim so the
           chrome reads over media. Pure NativeWind — no SVG dependency. */}
-      <View
-        className={
-          onImage
-            ? 'bg-gradient-to-b from-black/60 to-transparent'
-            : 'bg-gradient-to-b from-bg to-transparent'
-        }
-        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
-      />
+      <Animated.View
+        testID="dialog-nav-scrim"
+        style={[
+          StyleSheet.absoluteFill,
+          { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' },
+          scrimStyle,
+        ]}
+      >
+        <View
+          className={
+            onImage
+              ? 'bg-gradient-to-b from-black/60 to-transparent'
+              : 'bg-gradient-to-b from-bg to-transparent'
+          }
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
       <View pointerEvents="box-none" style={styles.navRow}>
         <View style={styles.side}>{left}</View>
         <Animated.View
@@ -625,14 +691,31 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
     return onImage ? null : <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
   }
 
+  // Title level with the ✕ when the nav row would hold nothing else.
+  const inlineClose = isInlineCloseHeader(config);
+
   return (
     <>
-      {/* Clear the whole gradient overlay so the block starts below the bar. */}
-      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      {/* Clear the whole gradient overlay so the block starts below the bar —
+          or, inline with the ✕, just centre the first line on the nav row. */}
+      <View
+        testID="dialog-large-title-inset"
+        style={{ height: inlineClose ? DIALOG_HEADER_INLINE_CONTENT_TOP : DIALOG_HEADER_CONTENT_TOP }}
+      />
       <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
         {hasLargeTitle ? (
           <>
-            <H1 style={[styles.largeTitle, { color: onImage ? ON_IMAGE_TEXT : theme.colors.text }]}>
+            <H1
+              style={[
+                styles.largeTitle,
+                { color: onImage ? ON_IMAGE_TEXT : theme.colors.text },
+                // Wrap before the ✕ it shares the row with. A logical inset, so
+                // it follows the ✕ to the left edge in a right-to-left layout.
+                inlineClose && config.showClose !== false
+                  ? { marginInlineEnd: INLINE_CLOSE_TITLE_RESERVE }
+                  : null,
+              ]}
+            >
               {config.title}
             </H1>
             {config.subtitle ? (