@multiplatform.one/components 7.23.1 → 7.24.0

package/src/Avatar/index.tsx

@@ -20,6 +20,7 @@ import {
   View,
   XStack,
   getVariableValue,
+  styled,
   withStaticProperties,
 } from "tamagui";
 import { getSize } from "@tamagui/get-token";
@@ -347,6 +348,11 @@ function AvatarRoot({
   );
 }
 
+const AvatarGroupItem = styled(View, {
+  name: "AvatarGroupItem",
+  flexShrink: 0,
+});
+
 function AvatarGroup({
   children,
   max = 4,
@@ -378,9 +384,9 @@ function AvatarGroup({
           key={index}
           value={{ size, circular, nested, compact, overlap, index, count: total }}
         >
-          <View zIndex={index} marginStart={index > 0 ? -overlapPx : 0} flexShrink={0}>
+          <AvatarGroupItem zIndex={index} marginStart={index > 0 ? -overlapPx : 0}>
             {child}
-          </View>
+          </AvatarGroupItem>
         </GroupCtx.Provider>
       ))}
       {extra > 0 ? (
@@ -395,7 +401,7 @@ function AvatarGroup({
             count: total,
           }}
         >
-          <View zIndex={shown.length} marginStart={-overlapPx} flexShrink={0}>
+          <AvatarGroupItem zIndex={shown.length} marginStart={-overlapPx}>
             <AvatarRoot
               initials={overflowLabel}
               fallbackBackgroundColor="$color4"
@@ -405,7 +411,7 @@ function AvatarGroup({
               compact={compact}
               size={size}
             />
-          </View>
+          </AvatarGroupItem>
         </GroupCtx.Provider>
       ) : null}
     </XStack>

package/src/ContextMenu/index.tsx

@@ -530,7 +530,7 @@ const ContextMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(function C
           color={knobProps.textAccentColor}
           fontSize="$1"
           flexShrink={0}
-          marginInlineStart="$4"
+          paddingInlineStart="$4"
           opacity={0.9}
         >
           {shortcut}

package/src/DropdownMenu/index.tsx

@@ -765,7 +765,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
             color={knobProps.textAccentColor}
             fontSize="$1"
             flexShrink={0}
-            marginInlineStart="$4"
+            paddingInlineStart="$4"
             opacity={0.9}
           >
             {shortcut}

package/src/ProgressSteps/index.tsx

@@ -96,6 +96,10 @@ const StepButton = styled(View, {
   focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as any },
 });
 
+const StepMarkerTarget = styled(View, {
+  name: "ProgressStepMarkerTarget",
+});
+
 const Connector = styled(View, {
   name: "ProgressStepConnector",
   flexShrink: 0,
@@ -261,7 +265,7 @@ export function ProgressSteps({
           );
 
           const markerTarget = (
-            <View
+            <StepMarkerTarget
               width={MIN_PRESS_TARGET}
               height={MIN_PRESS_TARGET}
               minWidth={MIN_PRESS_TARGET}
@@ -274,7 +278,7 @@ export function ProgressSteps({
               hitSlop={hitSlop ?? pressTargetHitSlop(markerPx)}
             >
               {marker}
-            </View>
+            </StepMarkerTarget>
           );
 
           const labelBlock = (
@@ -282,7 +286,7 @@ export function ProgressSteps({
               gap="$0.5"
               flexShrink={1}
               {...(horizontal
-                ? { alignItems: "center", marginTop: gapToken, maxWidth: 160 }
+                ? { alignItems: "center", maxWidth: 160 }
                 : { flexGrow: 1, justifyContent: "center" })}
             >
               <SizableText
@@ -321,32 +325,35 @@ export function ProgressSteps({
               flexGrow={1}
               minHeight={16}
               backgroundColor={connectorFill}
-              marginTop={2}
               transition={knobProps.transition}
             />
           ) : null;
 
           const horizontalConnector = !isLast ? (
-            <Connector
+            <XStack
               flexGrow={1}
-              height={connectorThickness}
-              backgroundColor={connectorFill}
-              marginTop={(markerPx - connectorThickness) / 2}
-              marginHorizontal={gapToken}
-              minWidth={16}
-              transition={knobProps.transition}
-            />
+              paddingTop={(markerPx - connectorThickness) / 2}
+              paddingHorizontal={gapToken}
+            >
+              <Connector
+                flexGrow={1}
+                height={connectorThickness}
+                backgroundColor={connectorFill}
+                minWidth={16}
+                transition={knobProps.transition}
+              />
+            </XStack>
           ) : null;
 
           const showLabels = labels !== "hidden";
           const body = horizontal ? (
-            <YStack alignItems="center" flexShrink={0}>
+            <YStack alignItems="center" flexShrink={0} gap={gapToken}>
               {markerTarget}
               {showLabels ? labelBlock : null}
             </YStack>
           ) : (
             <XStack alignItems="stretch" gap={gapToken} minHeight={MIN_PRESS_TARGET}>
-              <YStack alignItems="center" width={MIN_PRESS_TARGET} flexShrink={0}>
+              <YStack alignItems="center" width={MIN_PRESS_TARGET} flexShrink={0} gap={2}>
                 {markerTarget}
                 {verticalConnector}
               </YStack>

package/src/SheetModal/SheetModal.touch.spec.tsx

@@ -6,9 +6,16 @@
  * responder claim (`onStartShouldSetResponder` returning true). A surface
  * holding that claim takes every touch that starts on plain content inside
  * it, and a responder ancestor stops the ScrollView's own pan.
+ *
+ * The sheet's RN Modal is its own native window, but its touch events still
+ * bubble through the React tree to whatever rendered it. A screen ScrollView
+ * up there saw onTouchStart, marked itself touching, took the responder on
+ * the first scroll event of a list in the sheet, and on release blurred the
+ * focused input: the keyboard dropped on the first scroll (MPO-299 AC3).
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup } from "@testing-library/react";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { View } from "react-native";
 import { afterEach, expect, it, vi } from "vitest";
 import { Text } from "tamagui";
 import { SheetModal } from "./index.native";
@@ -61,3 +68,37 @@ it("keeps every native sheet stack out of the touch responder", () => {
     stacks.clear();
   }
 });
+
+it("keeps touches inside the sheet from bubbling to React ancestors outside the modal", () => {
+  const outside = { start: vi.fn(), move: vi.fn(), end: vi.fn(), cancel: vi.fn() };
+  const inside = vi.fn();
+  for (const fill of [false, true]) {
+    const view = renderWithProviders(
+      <div
+        onTouchStart={outside.start}
+        onTouchMove={outside.move}
+        onTouchEnd={outside.end}
+        onTouchCancel={outside.cancel}
+      >
+        <SheetModal open onOpenChange={() => {}} fill={fill} scrollable>
+          <View onTouchStart={inside}>
+            <Text>row</Text>
+          </View>
+        </SheetModal>
+      </div>,
+    );
+    const row = view.getByText("row");
+    const touch = { identifier: 0, clientX: 10, clientY: 10, pageX: 10, pageY: 10, force: 1 };
+    const down = { touches: [touch], changedTouches: [touch] };
+    const up = { touches: [], changedTouches: [touch] };
+    fireEvent.touchStart(row, down);
+    fireEvent.touchMove(row, down);
+    fireEvent.touchEnd(row, up);
+    fireEvent.touchCancel(row, up);
+    cleanup();
+  }
+  expect(inside).toHaveBeenCalledTimes(2);
+  for (const [phase, handler] of Object.entries(outside)) {
+    expect(handler, phase).not.toHaveBeenCalled();
+  }
+});

package/src/SheetModal/index.native.tsx

@@ -30,6 +30,7 @@ import {
   StyleSheet,
   View as RNView,
   useWindowDimensions,
+  type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
@@ -57,6 +58,13 @@ const IN_DIALOG_REGION = { inDialogRegion: true } as const;
  */
 const fillSlot = { flex: 1, minHeight: 0 } as const;
 const nonShrinking = { flexShrink: 0 } as const;
+/*
+ * MPO-299: the Modal is its own native window, yet its touch events bubble
+ * through the React tree to whatever rendered it. A screen ScrollView there
+ * marks itself touching, takes the responder on the first scroll of a list
+ * in the sheet, and blurs the focused input on release.
+ */
+const stopAtModal = (event: GestureResponderEvent) => event.stopPropagation();
 
 export function SheetModal({
   open,
@@ -348,7 +356,13 @@ export function SheetModal({
       onRequestClose={close}
       onShow={enter}
     >
-      <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
+      <RNView
+        style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}
+        onTouchStart={stopAtModal}
+        onTouchMove={stopAtModal}
+        onTouchEnd={stopAtModal}
+        onTouchCancel={stopAtModal}
+      >
         <Pressable
           style={StyleSheet.absoluteFill}
           onPress={handleBackdropPress}

package/src/Tabs/index.tsx

@@ -236,6 +236,10 @@ const StripWrapper = styled(View, {
   position: "relative",
 });
 
+// A slot name for the spec's ## Slot margins table, not styled(): a styled
+// wrapper drops onScroll on native (MPO-368).
+const TabStripScroll = ScrollView;
+
 const TabsList = styled(TamaguiTabs.List, {
   name: "MpTabsList",
   unstyled: true,
@@ -732,7 +736,7 @@ function TabsRoot({
             {tabList}
           </View>
         ) : (
-          <ScrollView
+          <TabStripScroll
             ref={scrollRef}
             data-tabs-scroll="true"
             horizontal
@@ -755,7 +759,7 @@ function TabsRoot({
             }}
           >
             {tabList}
-          </ScrollView>
+          </TabStripScroll>
         )}
       </StripWrapper>
 

package/src/ThemePlayground/ThemePlayground.spec.tsx

@@ -0,0 +1,36 @@
+/**
+ * MPO-411. The theme playground is the catalog's: a palette toggle that opens
+ * the house ThemeDevtoolsPanel in a SheetModal, so a reader flips the scheme,
+ * the preset and the style knobs and watches the page restyle live. Web only;
+ * the native twin renders nothing because the panel draws raw DOM.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ThemePlayground } from "./index";
+import { ThemePlayground as NativeThemePlayground } from "./index.native";
+
+afterEach(cleanup);
+
+describe("ThemePlayground", () => {
+  it("offers a labelled palette toggle, closed until pressed", async () => {
+    renderWithProviders(<ThemePlayground testID="playground" />);
+    const toggle = await screen.findByTestId("playground", {}, { timeout: 10000 });
+    expect(toggle.getAttribute("aria-label")).toBe("Theme");
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("opens the playground sheet from the toggle", async () => {
+    renderWithProviders(<ThemePlayground testID="playground" />);
+    fireEvent.click(await screen.findByTestId("playground", {}, { timeout: 10000 }));
+    await waitFor(() =>
+      expect(screen.getByTestId("playground").getAttribute("aria-expanded")).toBe("true"),
+    );
+    expect(await screen.findByText("Theme playground", {}, { timeout: 10000 })).toBeTruthy();
+  });
+
+  it("renders nothing on native", () => {
+    const { container } = renderWithProviders(<NativeThemePlayground testID="playground" />);
+    expect(container.querySelector('[data-testid="playground"]')).toBeNull();
+  });
+});

package/src/ThemePlayground/index.native.tsx

@@ -0,0 +1,8 @@
+import type { ThemePlaygroundProps } from "./index";
+
+export type { ThemePlaygroundProps } from "./index";
+
+/** The panel draws raw DOM, so native offers no playground. */
+export function ThemePlayground(_props: ThemePlaygroundProps): null {
+  return null;
+}

package/src/ThemePlayground/index.tsx

@@ -0,0 +1,83 @@
+import { ThemeDevtoolsPanel } from "@multiplatform.one/theme";
+import { PaletteIcon } from "@phosphor-icons/react";
+import { Suspense, lazy, useState, type ComponentType } from "react";
+import { useTranslation } from "react-i18next";
+import { SizableText, Text, YStack } from "tamagui";
+import { Button } from "../Button";
+import { SheetModal } from "../SheetModal";
+import { Tooltip } from "../Tooltip";
+
+export interface ThemePlaygroundProps {
+  testID?: string;
+}
+
+/**
+ * The panel reads the reader's color scheme through `@vxrn/color-scheme`,
+ * an optional peer: without it the panel still opens, minus the scheme row.
+ */
+const ScopedPanel = lazy(async (): Promise<{ default: ComponentType<object> }> => {
+  const scheme = await import("@vxrn/color-scheme").catch(() => undefined);
+  const useUserScheme = scheme?.useUserScheme;
+  if (!useUserScheme) {
+    return { default: () => <ThemeDevtoolsPanel /> };
+  }
+  const Panel = () => (
+    <ThemeDevtoolsPanel useUserScheme={useUserScheme} devtoolsTheme={useUserScheme().value} />
+  );
+  return { default: Panel };
+});
+
+/**
+ * A palette toggle opening the house ThemeDevtoolsPanel in a sheet: scheme,
+ * preset and style knobs, restyling the page live (LC-18 as a reader-facing
+ * control). The panel stays mounted after the first open so closing the
+ * sheet does not blank it mid-slide.
+ */
+export function ThemePlayground({ testID }: ThemePlaygroundProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const change = (next: boolean) => {
+    setOpen(next);
+    if (next) setOpened(true);
+  };
+  return (
+    <>
+      <Tooltip content={t("Restyle the page live: scheme, preset and style knobs")}>
+        <Button
+          variant={open ? undefined : "outlined"}
+          theme={open ? "accent" : undefined}
+          minHeight={44}
+          minWidth={44}
+          onPress={() => change(true)}
+          icon={<PaletteIcon size={16} />}
+          aria-label={t("Theme")}
+          aria-expanded={open}
+          testID={testID}
+        />
+      </Tooltip>
+      <SheetModal
+        open={open}
+        onOpenChange={change}
+        snapPoint={85}
+        scrollable
+        header={
+          <YStack>
+            <SizableText size="$6" fontWeight="700">
+              {t("Theme playground")}
+            </SizableText>
+            <Text fontSize="$2" color="$color10">
+              {t("Changes restyle the page live")}
+            </Text>
+          </YStack>
+        }
+      >
+        {opened ? (
+          <Suspense fallback={null}>
+            <ScopedPanel />
+          </Suspense>
+        ) : null}
+      </SheetModal>
+    </>
+  );
+}

package/src/Toast/index.tsx

@@ -467,9 +467,9 @@ function ToastBody({
     <>
       <View
         flexShrink={0}
-        height={iconPx}
+        height={iconPx + 1}
         justifyContent="center"
-        marginTop={1}
+        paddingTop={1}
         accessible={false}
         accessibilityElementsHidden
         importantForAccessibility="no"

package/src/TreeSelect/index.tsx

@@ -254,13 +254,7 @@ function TreeSelectRows({
               {node.label}
             </Text>
             {hasChildren && childCount > 0 ? (
-              <Text
-                fontFamily="$mono"
-                fontSize={11}
-                lineHeight={21}
-                color="$color8"
-                marginLeft="auto"
-              >
+              <Text fontFamily="$mono" fontSize={11} lineHeight={21} color="$color8">
                 {childCount}
               </Text>
             ) : null}

package/src/Video/PlayerChrome.tsx

@@ -220,8 +220,8 @@ function SeekBar({
           left={`${ratio * 100}%`}
           width={hot ? 14 : 12}
           height={hot ? 14 : 12}
-          marginTop={hot ? -7 : -6}
-          marginLeft={hot ? -7 : -6}
+          x={hot ? -7 : -6}
+          y={hot ? -7 : -6}
           backgroundColor="$color12"
           borderRadius={radius}
           pointerEvents="none"

package/src/Wizard/index.tsx

@@ -518,6 +518,7 @@ function WizardRoot({
         ref={shellRef}
         data-wizard-status="ready"
         data-wizard-current={String(current)}
+        {...knobProps.gap}
         {...props}
       >
         <YStack data-wizard-rail="" width="100%">
@@ -532,7 +533,7 @@ function WizardRoot({
             }}
           />
         </YStack>
-        <YStack marginTop={knobProps.gap.gap} width="100%">
+        <YStack width="100%">
           <WizardRule />
         </YStack>
         {stepErrors.length > 0 ? (
@@ -542,7 +543,6 @@ function WizardRoot({
             {...knobProps.borderRadius}
             borderWidth={1}
             borderColor="$red9"
-            marginTop={knobProps.gap.gap}
             width="100%"
           >
             <ErrorSummary
@@ -553,42 +553,43 @@ function WizardRoot({
             />
           </YStack>
         ) : null}
-        <YStack marginTop={knobProps.gap.gap} width="100%">
-          {steps.map((step, index) => {
-            const legend = hideLabels ? stepCaption(t, index, steps) : step.label;
-            return (
-              <YStack
-                key={step.id || index}
-                ref={(node) => {
-                  panelRefs.current[index] = node as HTMLElement | null;
-                }}
-                data-wizard-panel=""
-                data-wizard-fields=""
-                data-wizard-step-caption={hideLabels ? "" : undefined}
-                data-active={index === current ? "true" : "false"}
-                data-step-id={step.id}
-                display={index === current ? "flex" : "none"}
-                aria-hidden={index !== current || undefined}
-                width="100%"
-                maxWidth={formReadableMaxWidth}
-                alignSelf="flex-start"
-                {...knobProps.gap}
-              >
-                <FormSection label={legend} compact={compact}>
-                  {panels[index]}
-                </FormSection>
-              </YStack>
-            );
-          })}
-        </YStack>
-        <YStack marginTop={knobProps.gapLg.gap} width="100%">
-          <WizardRule />
+        <YStack {...knobProps.gapLg} width="100%">
+          <YStack width="100%">
+            {steps.map((step, index) => {
+              const legend = hideLabels ? stepCaption(t, index, steps) : step.label;
+              return (
+                <YStack
+                  key={step.id || index}
+                  ref={(node) => {
+                    panelRefs.current[index] = node as HTMLElement | null;
+                  }}
+                  data-wizard-panel=""
+                  data-wizard-fields=""
+                  data-wizard-step-caption={hideLabels ? "" : undefined}
+                  data-active={index === current ? "true" : "false"}
+                  data-step-id={step.id}
+                  display={index === current ? "flex" : "none"}
+                  aria-hidden={index !== current || undefined}
+                  width="100%"
+                  maxWidth={formReadableMaxWidth}
+                  alignSelf="flex-start"
+                  {...knobProps.gap}
+                >
+                  <FormSection label={legend} compact={compact}>
+                    {panels[index]}
+                  </FormSection>
+                </YStack>
+              );
+            })}
+          </YStack>
+          <YStack width="100%">
+            <WizardRule />
+          </YStack>
         </YStack>
         <ActionBar
           id={`${reactId}-footer`}
           data-wizard-footer=""
           align={hasLeading ? "between" : "end"}
-          marginTop={knobProps.gap.gap}
           cancel={
             hasLeading ? (
               <XStack gap="$2" flexWrap="wrap" alignItems="center">

package/src/code/HighlightedCode/index.tsx

@@ -9,7 +9,7 @@
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { Text, isWeb } from "tamagui";
+import { Text, getTokenValue, isWeb } from "tamagui";
 import type { HighlightLine } from "../Highlighter";
 import { componentColors } from "../../componentColors";
 
@@ -50,6 +50,7 @@ export function HighlightedCode({
   // it (LC-18). $color8 line-number ink fails AA (SB-M-020); $color11
   // (text.secondary) is the lowest ramp that stays readable on code surfaces.
   const gutterWidth = lineNumberGutterBySize[String(resolvedFontSize)] ?? 40;
+  const gutterGap = getTokenValue("$2" as Parameters<typeof getTokenValue>[0], "space") as number;
   // While tokens are loading, show the raw children (plain text fallback)
   // — geometry rides the surrounding type scale, not a fixed catalog px.
   if (!tokens) {
@@ -79,12 +80,12 @@ export function HighlightedCode({
               <Text
                 color={knobProps.textAccentColor}
                 fontSize={resolvedFontSize}
-                width={gutterWidth}
+                width={gutterWidth + gutterGap}
+                paddingInlineEnd={gutterGap}
                 data-line-number=""
                 display="inline-flex"
                 // "end" is web-only CSS; native textAlign has no logical values
                 textAlign={(isWeb ? "end" : "right") as any}
-                marginInlineEnd="$2"
                 userSelect="none"
               >
                 {lineNumber}

package/src/index.ts

@@ -23,6 +23,7 @@ export * from "./Meter";
 export * from "./ProgressSteps";
 export * from "./TreeSelect";
 export * from "./Quote";
+export * from "./ThemePlayground";
 export * from "./Skeleton";
 export * from "./SkipLink";
 export * from "./Toast";

package/src/layouts/Timeline.stories.tsx

@@ -243,22 +243,23 @@ export const CustomEntryRenderer = () => (
   <Timeline
     entries={sampleEntries}
     renderEntry={(entry: TimelineEntry, defaultContent) => (
-      <YStack
-        key={entry.id}
-        padding="$3"
-        backgroundColor={entry.type === "comment" ? "$blue2" : "$gray2"}
-        borderRadius="$3"
-        marginBottom="$2"
-      >
-        <XStack justifyContent="space-between" marginBottom="$1">
-          <Text fontSize="$2" fontWeight="600">
-            {entry.author}
-          </Text>
-          <Text fontSize="$1" color="$gray10">
-            {entry.type}
-          </Text>
-        </XStack>
-        {defaultContent}
+      <YStack key={entry.id} paddingBottom="$2">
+        <YStack
+          padding="$3"
+          gap="$1"
+          backgroundColor={entry.type === "comment" ? "$blue2" : "$gray2"}
+          borderRadius="$3"
+        >
+          <XStack justifyContent="space-between">
+            <Text fontSize="$2" fontWeight="600">
+              {entry.author}
+            </Text>
+            <Text fontSize="$1" color="$gray10">
+              {entry.type}
+            </Text>
+          </XStack>
+          {defaultContent}
+        </YStack>
       </YStack>
     )}
   />

package/src/layouts/attachments.tsx

@@ -617,6 +617,7 @@ export function Attachments({
     <YStack
       {...(compact ? { padding: "$2" } : knobProps.panelPadding)}
       alignItems="center"
+      gap="$2"
       {...knobProps.borderRadius}
       borderWidth={canAdd ? 1 : 0}
       borderStyle={canAdd ? "dashed" : undefined}
@@ -629,7 +630,7 @@ export function Attachments({
       {...dropHandlers}
     >
       <PaperclipIcon size={compact ? 20 : 28} />
-      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : "$3"} marginTop="$2">
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : "$3"}>
         {noAttachmentsLabel}
       </Text>
     </YStack>