@multiplatform.one/components 7.6.3 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.6.3",
+  "version": "7.7.0",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -75,11 +75,11 @@
     "link": "^2.1.2",
     "shiki": "^4.0.2",
     "tamagui": "2.7.6",
-    "@multiplatform.one/forms": "7.6.3",
-    "@multiplatform.one/i18n": "7.6.3",
-    "@multiplatform.one/platform": "7.6.3",
-    "@multiplatform.one/router": "7.6.3",
-    "@multiplatform.one/theme": "7.6.3"
+    "@multiplatform.one/forms": "7.7.0",
+    "@multiplatform.one/i18n": "7.7.0",
+    "@multiplatform.one/platform": "7.7.0",
+    "@multiplatform.one/router": "7.7.0",
+    "@multiplatform.one/theme": "7.7.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -99,9 +99,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.3",
-    "@multiplatform.one/storybook": "7.6.3",
-    "@multiplatform.one/test-utils": "7.6.3"
+    "@multiplatform.one/config": "7.7.0",
+    "@multiplatform.one/storybook": "7.7.0",
+    "@multiplatform.one/test-utils": "7.7.0"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3.1.1",

package/src/Badge/Badge.spec.tsx

@@ -127,14 +127,14 @@ describe("Badge named exports", () => {
 describe("Badge design-law — T-BODY count text (SB-M-101)", () => {
   afterEach(cleanup);
 
-  it("keeps count text on the 400/700 weight ladder, never 600", () => {
+  it("pins count text at the badge-owned 600", () => {
     const { container } = renderWithProviders(<Badge count={5} />);
     const weight = atoms(countText(container), ["_fow-"]);
     expect(weight.length).toBeGreaterThan(0);
-    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+    expect(weight.join(" ")).toMatch(/600|weight-6|fow-6/);
   });
 
-  it("lets the fontWeight knob restyle the count text node", () => {
+  it("ignores the fontWeight knob so count text stays at 600 (SB-M-101)", () => {
     const regular = renderWithProviders(
       <Preset overrides={{ fontWeight: "regular" }}>
         <Badge count={5} />
@@ -149,10 +149,9 @@ describe("Badge design-law — T-BODY count text (SB-M-101)", () => {
       </Preset>,
     );
     const boldWeight = atoms(countText(bold.container), ["_fow-"]).join(" ");
-    expect(regularWeight).not.toMatch(/600|weight-6|fow-6/);
-    expect(boldWeight).not.toMatch(/600|weight-6|fow-6/);
-    expect(boldWeight).not.toEqual(regularWeight);
-    expect(boldWeight).toMatch(/700|weight-7|fow-7/);
+    expect(regularWeight).toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).toEqual(regularWeight);
   });
 
   it("lets the bodyFont knob restyle the count text node", () => {
@@ -162,6 +161,7 @@ describe("Badge design-law — T-BODY count text (SB-M-101)", () => {
       </Preset>,
     );
     const sansFamily = atoms(countText(sans.container), ["_ff-"]);
+    const sansBodyFont = countText(sans.container).getAttribute("data-body-font");
     cleanup();
 
     const mono = renderWithProviders(
@@ -169,11 +169,10 @@ describe("Badge design-law — T-BODY count text (SB-M-101)", () => {
         <Badge count={5} />
       </Preset>,
     );
+    const monoBodyFont = countText(mono.container).getAttribute("data-body-font");
     expect(sansFamily.length).toBeGreaterThan(0);
-    expect(countText(sans.container).getAttribute("data-body-font")).not.toBe(
-      countText(mono.container).getAttribute("data-body-font"),
-    );
-    expect(countText(mono.container).getAttribute("data-body-font")).toBe("$mono");
+    expect(sansBodyFont).not.toBe(monoBodyFont);
+    expect(monoBodyFont).toBe("$mono");
   });
 });
 

package/src/Badge/index.tsx

@@ -100,9 +100,9 @@ const BadgeIndicator = styled(View, {
 
 const BadgeText = styled(Text, {
   name: "BadgeText",
-  // T-BODY / design-audit: 400 or 700 only. The fontWeight knob supplies the
-  // live value via `{...knobProps.body}` — never pin 600 (SB-M-101).
-  fontWeight: "400",
+  // SB-M-101: Badge owns weight 600. bodyFont may restyle family; fontWeight
+  // is re-pinned after `{...knobProps.body}` so the knob cannot leak.
+  fontWeight: "600",
   textAlign: "center",
   pointerEvents: "none",
 });
@@ -206,14 +206,15 @@ export function Badge({
         ...(overflowed ? { "data-overflow": "true" } : {}),
       } as Record<string, string>)}
     >
-      {/* T-BODY: body family + weight last among type props so the knobs
-          restyle the count (SB-M-101). Size token still owns fontSize;
-          the badge palette owns color (textAccent has no target). */}
+      {/* T-BODY family from the body knob; weight re-pinned at 600 so the
+          fontWeight knob cannot leak over the badge-owned weight (SB-M-101).
+          Size token still owns fontSize; the badge palette owns color. */}
       {!dot && effectiveCount !== undefined && (
         <BadgeText
           fontSize={geometry.font}
           lineHeight={Math.max(1, painted - CONTRAST_RING * 2)}
           {...knobProps.body}
+          fontWeight="600"
           color={colors.text as ColorTokens}
           {...({ "data-body-font": knobProps.body.fontFamily } as Record<string, string>)}
         >

package/src/Card.tsx

@@ -39,16 +39,21 @@ function NestedScale({ density, children }: { density: string; children: ReactNo
 }
 
 /**
- * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
- * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ * Tamagui styled hosts drop JSX `data-*` on native (Toast gallery hole), so
+ * native needs the RN `dataSet` map. On web, spreading `dataSet` onto a DOM
+ * host is a React invalid-prop warning (`dataSet` → `dataset`) and is what
+ * the knob-fuzz harness recorded as a probe/console failure on every Card
+ * consumer. jsdom and Storybook both keep kebab `data-*`, so web writes
+ * those only.
  */
 function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  if (process.env.TAMAGUI_TARGET !== "native") return attrs;
   const dataSet: Record<string, string> = {};
   for (const [key, value] of Object.entries(attrs)) {
     const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
     dataSet[camel] = value;
   }
-  return { ...attrs, dataSet };
+  return { dataSet };
 }
 
 function CardRoot({ children, tier = "content", ...props }: CardProps) {

package/src/CardFooter.spec.tsx

@@ -28,7 +28,7 @@ describe("CardFooter named exports", () => {
     expect(Card.Footer).toBe(CardFooter);
     const mod = await import("./CardFooter");
     expect(mod.CardFooter).toBe(CardFooter);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 });
 

package/src/CardFooter.tsx

@@ -14,16 +14,19 @@ import { wrapBareTextChildren } from "./shared/textRidesText";
 export type CardFooterProps = ViewProps & { children?: ReactNode };
 
 /**
- * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
- * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ * Tamagui styled hosts drop JSX `data-*` on native (Toast gallery hole), so
+ * native needs the RN `dataSet` map. On web, spreading `dataSet` onto a DOM
+ * host is a React invalid-prop warning (`dataSet` → `dataset`). jsdom and
+ * Storybook keep kebab `data-*`, so web writes those only.
  */
 function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  if (process.env.TAMAGUI_TARGET !== "native") return attrs;
   const dataSet: Record<string, string> = {};
   for (const [key, value] of Object.entries(attrs)) {
     const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
     dataSet[camel] = value;
   }
-  return { ...attrs, dataSet };
+  return { dataSet };
 }
 
 export function CardFooter({ children, ...props }: CardFooterProps) {

package/src/CardHeader.spec.tsx

@@ -28,7 +28,7 @@ describe("CardHeader named exports", () => {
     expect(Card.Header).toBe(CardHeader);
     const mod = await import("./CardHeader");
     expect(mod.CardHeader).toBe(CardHeader);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 });
 

package/src/CardHeader.tsx

@@ -14,16 +14,19 @@ import { wrapBareTextChildren } from "./shared/textRidesText";
 export type CardHeaderProps = ViewProps & { children?: ReactNode };
 
 /**
- * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
- * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ * Tamagui styled hosts drop JSX `data-*` on native (Toast gallery hole), so
+ * native needs the RN `dataSet` map. On web, spreading `dataSet` onto a DOM
+ * host is a React invalid-prop warning (`dataSet` → `dataset`). jsdom and
+ * Storybook keep kebab `data-*`, so web writes those only.
  */
 function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  if (process.env.TAMAGUI_TARGET !== "native") return attrs;
   const dataSet: Record<string, string> = {};
   for (const [key, value] of Object.entries(attrs)) {
     const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
     dataSet[camel] = value;
   }
-  return { ...attrs, dataSet };
+  return { dataSet };
 }
 
 export function CardHeader({ children, ...props }: CardHeaderProps) {

package/src/Chip/Chip.spec.tsx

@@ -150,7 +150,7 @@ describe("Chip", () => {
     expect(mod.chipTone).toBe(chipTone);
     expect(typeof mod.chipIconSize).toBe("function");
     expect(chipIconSize("$3")).toBeGreaterThan(0);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("label TEXT NODE weight is 400, never 500/600", () => {

package/src/Pagination.spec.tsx

@@ -163,7 +163,7 @@ describe("Pagination design-law (MPO-60)", () => {
     const mod = await import("./Pagination");
     expect(mod.Pagination).toBe(Pagination);
     expect(mod.getPaginationItems).toBeTypeOf("function");
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("LC-68: animation none publishes data-animation=none (no quick fallback)", () => {

package/src/ProgressSteps/ProgressSteps.spec.tsx

@@ -52,6 +52,18 @@ describe("ProgressSteps", () => {
     expect(current.className).toContain("_bg-accentBackg");
   });
 
+  it("walks the current fill off the dark mid-solid so the numeral can clear 4.5", () => {
+    const { container } = render(
+      <TamaguiProvider config={houseConfig} defaultTheme="dark" disableInjectCSS>
+        <ProgressSteps steps={steps} current={1} />
+      </TamaguiProvider>,
+    );
+    const current = container.querySelector('[aria-current="step"]') as HTMLElement;
+    expect(current).toBeTruthy();
+    expect(current.className).toMatch(/_bg-accent/);
+    expect(current.className).not.toContain("_bg-accentBackg");
+  });
+
   it("calls onStepChange when jumping back to a completed step", () => {
     const onStepChange = vi.fn();
     const { container } = renderWithProviders(
@@ -110,10 +122,25 @@ describe("ProgressSteps", () => {
     expect(target.getAttribute("data-press-min")).toBe("44");
   });
 
-  it("steps nested marker size down under compact density", () => {
+  it("declares the marker R-PILL and tracks the borderWidth knob for the ring", () => {
+    const { container } = renderWithProviders(<ProgressSteps steps={steps} current={1} />);
+    const marker = container.querySelector("[data-nested-px]") as HTMLElement;
+    expect(marker.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(marker.getAttribute("data-radius-part")).toBe("ProgressSteps marker");
+    // Default knobs: borderWidth medium = 1. The previous 2px pin is gone.
+    const upcoming = container.querySelector('[data-step-state="upcoming"]') as HTMLElement;
+    expect(upcoming.getAttribute("data-marker-ring")).toBe("1");
+    const current = container.querySelector('[data-step-state="current"]') as HTMLElement;
+    expect(current.getAttribute("data-marker-ring")).toBe("1");
+  });
+
+  it("keeps nested marker size on the size channel under compact (LC-76)", () => {
     const { container } = renderWithProviders(<ProgressSteps steps={steps} current={0} compact />);
+    const root = container.querySelector('[role="list"]') as HTMLElement;
+    expect(root.getAttribute("data-density")).toBe("compact");
     const marker = container.querySelector("[data-nested-px]") as HTMLElement;
-    expect(marker.getAttribute("data-nested-px")).toBe("28");
+    // Compact steps space only — nestedControl follows size (medium = 32).
+    expect(marker.getAttribute("data-nested-px")).toBe("32");
   });
 
   it("hides visible step labels when labels is hidden", () => {

package/src/ProgressSteps/index.tsx

@@ -3,6 +3,8 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   pressTargetHitSlop,
+  radiusClassProps,
+  useAaSolidFill,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -76,8 +78,11 @@ const Marker = styled(View, {
   name: "ProgressStepMarker",
   alignItems: "center",
   justifyContent: "center",
-  borderWidth: 2,
   flexShrink: 0,
+  // R-PILL (D-09 / LC-60): the numbered disc is a circle at every radius
+  // stop — the knob moves size, never shape. Not K1 (Progress/Meter rails).
+  ...radiusClassProps("R-PILL", "ProgressSteps marker"),
+  borderRadius: 1000,
 });
 
 const StepButton = styled(View, {
@@ -148,14 +153,18 @@ export function ProgressSteps({
   );
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
-  // LC-05: current marker rides the accent fill; completed/error fills pick
-  // paper/ink from luminance rather than an assumed white glyph.
-  const onSelected = useReadableTextOn(componentColors.indicator.selected);
+  // LC-05: current marker rides an accent solid; completed/error fills pick
+  // paper/ink from luminance rather than an assumed white glyph. The stock
+  // dark `$accentBackground` tops out at 4.02:1 against either scheme
+  // anchor, under the in-repo 4.5 text floor, so the current fill walks to
+  // the nearest accent solid that can carry the numeral.
+  const currentFill = useAaSolidFill(componentColors.indicator.selected);
+  const onSelected = useReadableTextOn(currentFill);
   const onCompleted = useReadableTextOn(componentColors.indicator.completed);
   const onError = useReadableTextOn("$red9");
   const { px: markerPx, hitSlop, box: nestedBox } = splitNestedControl(knobProps.nestedControl);
   const markerIconSize = Math.max(12, Math.round(markerPx * 0.45));
-  const markerRadius = knobProps.pointy ? 0 : 1000;
+  const ringWidth = knobProps.borderRadius.borderWidth ?? 0;
   const connectorThickness = 2;
   const pressOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - markerPx) / 2));
   const interactive = !!onStepChange && allowJump;
@@ -192,7 +201,7 @@ export function ProgressSteps({
               : kind === "completed"
                 ? componentColors.indicator.completed
                 : kind === "current"
-                  ? componentColors.indicator.selected
+                  ? currentFill
                   : "transparent";
           const markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg =
@@ -207,15 +216,20 @@ export function ProgressSteps({
             step.description ?? (step.optional && kind !== "error" ? t("Optional") : null);
           const connectorFill =
             index < current ? componentColors.indicator.completed : componentColors.indicator.track;
+          // Upcoming is outlined-by-state: chromeless `borderWidth:none` would
+          // erase the empty disc, so it keeps the OUTLINED-HAIRLINE floor.
+          const markerRing = kind === "upcoming" ? Math.max(ringWidth, 0.5) : ringWidth;
 
           const marker = (
             <Marker
               {...nestedBox}
-              borderRadius={markerRadius}
+              borderRadius={1000}
+              borderWidth={markerRing}
               backgroundColor={markerBg}
               borderColor={markerBorder}
               data-nested-px={markerPx}
               data-step-state={kind}
+              data-marker-ring={markerRing}
               transition={knobProps.transition}
               {...(state === "current"
                 ? ({ "aria-current": "step" } as Record<string, unknown>)

package/src/SheetModal/SheetModal.spec.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { mediumDetent, minSheetHeight, resolveSheetDetents } from "./detents";
+
+/*
+ * MPO-68 AC-4 — "SheetModal's snapPoint prop either drives a detent or is
+ * removed". It drives one. These lock that in, because it has already been
+ * lost once: 184746910 (MPO-71) rewrote the detents block from a pre-MPO-68
+ * copy and dropped the snapPoint push, leaving the prop declared, documented
+ * and passed by four callers while doing nothing on device.
+ *
+ * Geometry under test is a pure height list, largest first. The component's
+ * PanResponder turns each height h into a resting translate of `travel - h`.
+ */
+
+const travel = 600;
+
+describe("resolveSheetDetents", () => {
+  it("a plain sheet has exactly one rest: fully expanded", () => {
+    expect(resolveSheetDetents({ travel })).toEqual([600]);
+  });
+
+  it("REGRESSION: snapPoint creates a detent instead of being ignored", () => {
+    // The bug this spec exists for: main returned [600] here.
+    expect(resolveSheetDetents({ travel, snapPoint: 85 })).toEqual([600, 510]);
+  });
+
+  it("reads snapPoint as a percent of the full height, matching the web Sheet", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 50 })).toEqual([600, 300]);
+    expect(resolveSheetDetents({ travel, snapPoint: 60 })).toEqual([600, 360]);
+    expect(resolveSheetDetents({ travel, snapPoint: 92 })).toEqual([600, 552]);
+  });
+
+  it("honours the four heights real callers pass", () => {
+    // CommandPalette 92, list-tools-sheet 85, ListThemePlayground 85,
+    // Toast.stories 70 — every one of these was a no-op on device.
+    for (const snapPoint of [92, 85, 70]) {
+      const detents = resolveSheetDetents({ travel, snapPoint });
+      expect(detents).toContain(Math.round(travel * (snapPoint / 100)));
+      expect(detents.length).toBeGreaterThan(1);
+    }
+  });
+
+  it("a scrollable sheet keeps its half-open detent", () => {
+    expect(resolveSheetDetents({ travel, scrollable: true })).toEqual([
+      600,
+      Math.round(travel * mediumDetent),
+    ]);
+  });
+
+  it("scrollable and snapPoint stack, largest first, no duplicates", () => {
+    // 600 expanded, 330 medium, 510 from snapPoint.
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 85 })).toEqual([
+      600, 510, 330,
+    ]);
+  });
+
+  it("dedupes a snapPoint that lands on a detent already present", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 100 })).toEqual([600]);
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 55 })).toEqual([600, 330]);
+  });
+
+  it("clamps a snapPoint above 100 to fully expanded", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 140 })).toEqual([600]);
+  });
+
+  it("drops a detent shorter than the floor rather than resting near-dismissed", () => {
+    // 600 * 0.10 = 60, well under minSheetHeight.
+    expect(resolveSheetDetents({ travel, snapPoint: 10 })).toEqual([600]);
+    expect(minSheetHeight).toBe(180);
+  });
+
+  it("a sheet shorter than the floor still keeps its own full height", () => {
+    expect(resolveSheetDetents({ travel: 120, scrollable: true, snapPoint: 85 })).toEqual([120]);
+  });
+
+  it("ignores a snapPoint that is not a usable number", () => {
+    for (const snapPoint of [0, -20, Number.NaN, Number.POSITIVE_INFINITY]) {
+      expect(resolveSheetDetents({ travel, snapPoint })).toEqual([600]);
+    }
+    expect(resolveSheetDetents({ travel, snapPoint: undefined })).toEqual([600]);
+  });
+
+  it("always returns descending heights, so the pan release can scan in order", () => {
+    const detents = resolveSheetDetents({ travel, scrollable: true, snapPoint: 40 });
+    expect(detents).toEqual([...detents].sort((a, b) => b - a));
+    expect(new Set(detents).size).toBe(detents.length);
+  });
+});

package/src/SheetModal/detents.ts

@@ -0,0 +1,55 @@
+/**
+ * SheetModal detent geometry — the pure half, split out so it can be specced
+ * without standing up a React Native renderer.
+ *
+ * A detent is a VISIBLE HEIGHT in points. The native sheet's `translateY`
+ * measures DOWN from fully-expanded, so a detent of `h` rests at `travel - h`,
+ * and `travel` itself is the fully-expanded sheet.
+ */
+
+/** Smallest height a native sheet is ever laid out at. */
+export const minSheetHeight = 180;
+
+/**
+ * Half-open detent for a sheet that owns a scrollport, as a fraction of its
+ * full height. Mirrors FloatingPanel so both native sheets drag alike.
+ */
+export const mediumDetent = 0.55;
+
+export interface ResolveSheetDetentsOptions {
+  /** Full (expanded) height of the sheet, in points. */
+  travel: number;
+  /** The sheet owns a scrollport, so a half-open rest is meaningful. */
+  scrollable?: boolean;
+  /** Percent detent from the caller — the same prop the web Sheet takes. */
+  snapPoint?: number;
+}
+
+/**
+ * The heights the sheet is allowed to rest at, largest first.
+ *
+ * MPO-68: `snapPoint` is a percent on the web Sheet (`snapPoints={[snapPoint]}`).
+ * Native honours the same prop by turning that percent into a detent, so a
+ * caller that writes `snapPoint={85}` gets an 85%-height rest on both twins
+ * rather than the prop being silently dropped on device.
+ *
+ * Anything shorter than `minSheetHeight` is discarded, because a sheet that
+ * rests below that is indistinguishable from a dismissed one. A sheet whose
+ * full height is already under the floor keeps its own height, otherwise it
+ * would have no detents at all.
+ */
+export function resolveSheetDetents({
+  travel,
+  scrollable,
+  snapPoint,
+}: ResolveSheetDetentsOptions): number[] {
+  const points = [travel];
+  if (scrollable) {
+    points.push(Math.round(travel * mediumDetent));
+  }
+  if (typeof snapPoint === "number" && Number.isFinite(snapPoint) && snapPoint > 0) {
+    points.push(Math.round(travel * (Math.min(snapPoint, 100) / 100)));
+  }
+  const floor = Math.min(minSheetHeight, travel);
+  return Array.from(new Set(points.filter((h) => h >= floor))).sort((a, b) => b - a);
+}

package/src/SheetModal/index.native.tsx

@@ -24,6 +24,7 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { View, YStack } from "tamagui";
@@ -36,10 +37,6 @@ const sheetMaxHeightRatio = 0.85;
 const bottomInset = Platform.OS === "ios" ? 24 : 16;
 // Backdrop left visible above the sheet, so the scrim stays tappable.
 const backdropStrip = 48;
-const minSheetHeight = 180;
-// Half-open detent for a sheet that owns a scrollport, as a fraction of its
-// full height. Mirrors FloatingPanel so both native sheets drag alike.
-const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
 const IN_DIALOG_REGION = { inDialogRegion: true } as const;
@@ -49,7 +46,7 @@ export function SheetModal({
   onOpenChange,
   children,
   header,
-  snapPoint: _snapPoint,
+  snapPoint,
   scrollable,
 }: SheetModalProps) {
   const { t } = useTranslation();
@@ -95,16 +92,20 @@ export function SheetModal({
    *
    * translateY measures DOWN from fully-expanded: 0 is the sheet at full
    * height, `travel` is fully off-screen.
+   *
+   * The detent heights themselves live in ./detents.ts, pure, so the geometry
+   * is specced without a native renderer. 184746910 (MPO-71) rewrote this
+   * block from a pre-MPO-68 copy and silently dropped the `snapPoint` push,
+   * leaving the prop declared, documented and passed by four callers while
+   * doing nothing on device. Keep the math in one place so a rewrite of the
+   * animation cannot take the geometry with it again.
    */
   const [measuredHeight, setMeasuredHeight] = useState(0);
   const travel = measuredHeight || maxHeight;
-  const detents = useMemo(() => {
-    if (!scrollable) return [travel];
-    const points = [travel, Math.round(travel * mediumDetent)].filter(
-      (h) => h >= Math.min(minSheetHeight, travel),
-    );
-    return Array.from(new Set(points)).sort((a, b) => b - a);
-  }, [scrollable, travel]);
+  const detents = useMemo(
+    () => resolveSheetDetents({ travel, scrollable, snapPoint }),
+    [travel, scrollable, snapPoint],
+  );
 
   /*
    * MPO-71 — park the sheet OFF-SCREEN before the modal ever presents.

package/src/SheetModal/index.tsx

@@ -21,7 +21,7 @@ export interface SheetModalProps {
   children?: ReactNode;
   /** Fixed content above the (scrollable) body, e.g. the sheet title. */
   header?: ReactNode;
-  /** Percent snap point for the web Sheet (native sizes to content). */
+  /** Percent snap point. Web: the Sheet's snap point. Native: a drag detent. */
   snapPoint?: number;
   /** Wrap children in the sheet's scroll container. */
   scrollable?: boolean;
@@ -59,7 +59,10 @@ function useSheetFrameFocus(open: boolean, frameRef: RefObject<HTMLElement | nul
       if (!target || !target.isConnected) return;
       const ae = document.activeElement;
       const dropped =
-        !ae || ae === document.body || ae === document.documentElement || !!frameRef.current?.contains(ae);
+        !ae ||
+        ae === document.body ||
+        ae === document.documentElement ||
+        !!frameRef.current?.contains(ae);
       if (dropped) {
         target.focus({
           preventScroll: true,

package/src/Skeleton/Skeleton.spec.tsx

@@ -22,7 +22,7 @@ function radiusClasses(el: Element): string[] {
 
 describe("Skeleton named exports", () => {
   it("serves named exports only (no default) and keeps the namespace statics", () => {
-    expect(SkeletonExports.default).toBeUndefined();
+    expect("default" in SkeletonExports).toBe(false);
     expect(SkeletonExports.Skeleton).toBe(Skeleton);
     expect(SkeletonExports.SkeletonText).toBe(SkeletonText);
     expect(SkeletonExports.SkeletonCircle).toBe(SkeletonCircle);