@multiplatform.one/components 7.4.1 → 7.5.0

package/src/Chip/Chip.stories.tsx

@@ -55,7 +55,7 @@ export const Colors: Story = {
       <YStack gap="$4">
         {(["ghost", "outlined", "filled"] as ChipVariant[]).map((variant) => (
           <YStack key={variant} gap="$2">
-            <Text fontWeight="600" fontSize="$2">
+            <Text fontWeight="400" fontSize="$2">
               {variant}
             </Text>
             <XStack gap="$2" flexWrap="wrap">
@@ -236,7 +236,7 @@ export const AllStates: Story = {
   render: () => (
     <YStack gap="$6">
       <YStack gap="$2">
-        <Text fontWeight="600">Variants</Text>
+        <Text fontWeight="400">Variants</Text>
         <XStack gap="$2" flexWrap="wrap">
           <Chip variant="filled">Filled</Chip>
           <Chip variant="ghost">Ghost</Chip>
@@ -245,7 +245,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Colors (ghost)</Text>
+        <Text fontWeight="400">Colors (ghost)</Text>
         <XStack gap="$2" flexWrap="wrap">
           <Chip color="gray">Gray</Chip>
           <Chip color="red">Red</Chip>
@@ -258,7 +258,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Sizes</Text>
+        <Text fontWeight="400">Sizes</Text>
         <XStack gap="$2" alignItems="center">
           <Chip size="$2">$2</Chip>
           <Chip size="$3">$3</Chip>
@@ -268,7 +268,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Selected</Text>
+        <Text fontWeight="400">Selected</Text>
         <XStack gap="$2" flexWrap="wrap">
           <Chip variant="outlined" selected={false} onPress={() => {}}>
             Idle
@@ -283,7 +283,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Icon</Text>
+        <Text fontWeight="400">Icon</Text>
         <XStack gap="$2" flexWrap="wrap">
           <Chip icon={<TagIcon />}>Tagged</Chip>
           <Chip icon={<LightningIcon />} color="yellow" variant="filled">
@@ -296,7 +296,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Dismissible</Text>
+        <Text fontWeight="400">Dismissible</Text>
         <XStack gap="$2">
           <Chip onDismiss={() => action("dismiss")()}>Dismissible</Chip>
           <Chip onDismiss={() => action("dismiss")()} color="blue">
@@ -306,7 +306,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Disabled</Text>
+        <Text fontWeight="400">Disabled</Text>
         <XStack gap="$2">
           <Chip disabled>Disabled</Chip>
           <Chip disabled onDismiss={() => {}}>

package/src/Chip/index.tsx

@@ -177,6 +177,15 @@ export const ChipFrame = styled(View, {
   flexDirection: "row",
   alignItems: "center",
   ...chipFrameVariants.$3,
+  // Every variant carries the same 1px border and only the colour changes.
+  // Giving the border to `outline` alone made an outlined chip 2px taller
+  // than a solid/subtle one at the same size token, so the moment the two
+  // were composed side by side -- the Tags field puts its outlined "add"
+  // trigger in the same row as its subtle tag chips -- their heights and
+  // baselines came apart. The chip hugs its label, so nothing else pins the
+  // box height back.
+  borderWidth: 1,
+  borderColor: "transparent",
   outlineWidth: 0,
   focusStyle: { outlineWidth: 0 },
 
@@ -190,20 +199,21 @@ export const ChipFrame = styled(View, {
       filled: {},
       subtle: {},
       ghost: {},
-      outline: { borderWidth: 1 },
-      outlined: { borderWidth: 1 },
+      outline: {},
+      outlined: {},
     },
   } as const,
 
   defaultVariants: {
-    variant: "subtle",
+    variant: "ghost",
     size: "$3",
   },
 });
 
 export const ChipText = styled(Text, {
   name: "ChipText",
-  fontWeight: "500",
+  // §6.1 / design-laws: label weight is 400. Never 500, never 600.
+  fontWeight: "400",
   numberOfLines: 1,
   userSelect: "none",
   flexShrink: 1,
@@ -232,6 +242,18 @@ export function chipIconSize(size: ChipSize): number {
   return sizeRecipeForToken(size, { family: CHIP_RECIPE_FAMILY }).iconSize;
 }
 
+/**
+ * Label size that pairs with each chip size — the generated recipe's font
+ * channel, the same one `ChipText` rides.
+ *
+ * Exported for chip-scale companions that are not chips: the Tags field puts
+ * a bare text input in the same row as its chips, and typing into it has to
+ * land on the same optical line as the chip labels beside it.
+ */
+export function chipTextSize(size: ChipSize): number {
+  return sizeRecipeForToken(size, { family: CHIP_RECIPE_FAMILY }).fontSize;
+}
+
 // LC-54: this box is the grown transparent press target (pressTargetStyle +
 // compensating negative outsets + hitSlop at the call site). It stays
 // UNPAINTED — hover/press feedback here is subtree opacity only.
@@ -285,7 +307,7 @@ function normalizeIcon(icon: ReactNode, size: number): ReactNode {
 export function Chip({
   children,
   size,
-  variant = "subtle",
+  variant = "ghost",
   color = "gray",
   icon,
   selected,
@@ -295,7 +317,7 @@ export function Chip({
   maxWidth,
 }: ChipProps) {
   const { t } = useTranslation();
-  const { knobProps, disabledState } = useResolvedKnobs({ component: "Chip" });
+  const { knobProps, control, disabledState } = useResolvedKnobs({ component: "Chip" });
   const colors = colorMap[color] ?? colorMap.gray;
   const tone = chipTone(variant);
   const resolvedSize = size ?? (knobProps.sizeToken as ChipSize);
@@ -368,9 +390,12 @@ export function Chip({
       // Icon↔label gap is control-INTERNAL (LC-79): it rides the recipe's gap
       // channel via the size variants above, not the layout space knob.
       borderColor={borderColor}
-      borderWidth={
-        isSelected ? 0 : tone === "outlined" ? Math.max(knobProps.borderRadius.borderWidth, 1) : 0
-      }
+      // One box for every tone: the border is always painted and only its
+      // colour changes. Giving the width to outlined chips alone made them
+      // 2px taller than filled/subtle ones at the same size token, which is
+      // visible the moment two tones share a row -- the Tags field puts its
+      // outlined "add" trigger beside subtle tag chips.
+      borderWidth={Math.max(knobProps.borderRadius.borderWidth, 1)}
       transition={knobProps.transition}
       maxWidth={maxWidth}
       overflow="visible"
@@ -393,9 +418,25 @@ export function Chip({
             ...disabledState.assemblyKnobProps,
           }
         : undefined)}
-      hoverStyle={hoverBackground != null ? { backgroundColor: hoverBackground } : undefined}
-      pressStyle={interactive ? { backgroundColor: hoverBackground, opacity: 0.92 } : undefined}
-      focusVisibleStyle={interactive ? ensureFocusVisibleRing() : { outlineWidth: 0 }}
+      hoverStyle={
+        interactive
+          ? {
+              ...control.hoverKnobProps,
+              ...(hoverBackground != null ? { backgroundColor: hoverBackground } : undefined),
+            }
+          : undefined
+      }
+      pressStyle={
+        interactive
+          ? {
+              ...control.pressKnobProps,
+              ...(hoverBackground != null ? { backgroundColor: hoverBackground } : undefined),
+            }
+          : undefined
+      }
+      focusVisibleStyle={
+        interactive ? ensureFocusVisibleRing(control.focusVisibleKnobProps) : { outlineWidth: 0 }
+      }
       onPress={interactive ? activate : undefined}
       {...(interactive && isWeb
         ? { onKeyDown: handleKeyDown as unknown as () => void }
@@ -409,7 +450,8 @@ export function Chip({
       <ChipText
         size={resolvedSize}
         {...knobProps.body}
-        fontWeight="500"
+        // Boards measure ink.weight on the TEXT NODE. Label is 400.
+        fontWeight="400"
         color={textColor as ColorTokens}
         {...(disabled ? disabledState.textKnobProps : undefined)}
       >

package/src/Collapsible.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Button } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
+import { Collapsible } from "./tamagui";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Raw open/close primitive (MPO-21 G1). Accordion and Fold compose this — the " +
+          "compound is the substrate, not a painted section. Trigger/Content are statics. " +
+          "Knob-immune: the composing surface owns chrome.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={420} gap="$3">
+      <Collapsible defaultOpen>
+        <Collapsible.Trigger asChild>
+          <Button chromeless>Toggle section</Button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <Text>
+            Fold's substrate. The raw primitive opens and closes; Accordion (and Fold) paint the
+            row.
+          </Text>
+        </Collapsible.Content>
+      </Collapsible>
+    </YStack>
+  ),
+};

package/src/ContextMenu/ContextMenu.spec.tsx

@@ -0,0 +1,141 @@
+import { fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "@multiplatform.one/forms";
+import { ContextMenu } from "./index";
+
+function renderOpen(onSelect = vi.fn()) {
+  return renderWithProviders(
+    <ContextMenu
+      defaultOpen
+      items={[
+        { label: "Copy", onSelect },
+        { label: "Rename", checked: true },
+        { separator: true },
+        { label: "Delete", destructive: true },
+      ]}
+    >
+      <Button>Target</Button>
+    </ContextMenu>,
+  );
+}
+
+describe("ContextMenu", () => {
+  it("opens on contextmenu and not on a primary click", async () => {
+    const { getByText } = renderWithProviders(
+      <ContextMenu items={[{ label: "Copy" }]}>
+        <Button>Target</Button>
+      </ContextMenu>,
+    );
+    const trigger = getByText("Target");
+    fireEvent.click(trigger);
+    expect(document.querySelector('[role="menu"]')).toBeFalsy();
+
+    fireEvent.contextMenu(trigger);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[role="menuitem"]')?.textContent).toContain("Copy");
+  });
+
+  it("renders the same row grammar as DropdownMenu when open", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const copy = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (el) => el.textContent?.includes("Copy"),
+    ) as HTMLElement;
+    const selected = document.querySelector<HTMLElement>('[role="menuitemcheckbox"]');
+    expect(copy).toBeTruthy();
+    expect(selected).toBeTruthy();
+    expect(selected?.getAttribute("aria-checked")).toBe("true");
+
+    // 44 tall ($4), padX 13 (`$3` → space-3), weight 400 — LC-16 menuRowFrame.
+    expect(copy.className).toMatch(/_pl-t-space-3/);
+    expect(copy.className).toMatch(/_pr-t-space-3/);
+    expect(copy.getAttribute("data-mp-pad-x")).toBe("13");
+    expect(copy.getAttribute("data-mp-row-height")).toBe("44");
+    expect(copy.getAttribute("data-mp-font-weight")).toBe("400");
+    expect(copy.className).toMatch(/_btlr-0px/);
+
+    // Selected fill is $color2; hover is $color3; check trails the label.
+    expect(selected?.getAttribute("data-mp-selected-fill")).toBe("$color2");
+    expect(copy.getAttribute("data-mp-hover-fill")).toBe("$color3");
+    const check = selected?.querySelector("[data-mp-check]");
+    expect(check?.getAttribute("data-mp-check")).toBe("trailing");
+    expect(selected?.lastElementChild).toBe(check);
+  });
+
+  it("selects a plain item and closes (LC-21 COMMIT)", async () => {
+    const onSelect = vi.fn();
+    renderOpen(onSelect);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const copy = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (el) => el.textContent?.includes("Copy"),
+    ) as HTMLElement;
+    fireEvent.click(copy);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+  });
+
+  it("keeps a checkable item open (LC-21 COMPOSE)", async () => {
+    const onCheckedChange = vi.fn();
+    renderWithProviders(
+      <ContextMenu defaultOpen items={[{ label: "Pinned", checked: false, onCheckedChange }]}>
+        <Button>Target</Button>
+      </ContextMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menuitemcheckbox"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitemcheckbox"]') as HTMLElement);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(document.querySelector('[role="menu"]')).toBeTruthy();
+  });
+
+  it("uses FloatingPanel, not a second overlay stack", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeTruthy();
+    expect(document.querySelector("[data-mp-tint]")).toBeNull();
+  });
+
+  it("opens as a sheet at the overlay breakpoint (≤640)", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 500 });
+    renderWithProviders(
+      <ContextMenu defaultOpen items={[{ label: "Copy" }]}>
+        <Button>Target</Button>
+      </ContextMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeFalsy();
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: width,
+    });
+  });
+
+  it("paints the keyboard ring at 2px offset 0 on keyboard focus", async () => {
+    renderOpen();
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    const copy = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (el) => el.textContent?.includes("Copy"),
+    ) as HTMLElement;
+    fireEvent.focus(copy);
+    expect(copy.getAttribute("data-highlighted")).toBe("true");
+    expect(copy.getAttribute("data-mp-ring-offset")).toBe("0");
+  });
+});

package/src/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import {
+  CopyIcon,
+  DotsThreeVerticalIcon,
+  PencilSimpleIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import { Button } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
+import { ContextMenu, type ContextMenuEntry } from "./index";
+
+const meta: Meta<typeof ContextMenu> = {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Right-click (web) or long-press (native) action menu. Same FloatingPanel overlay stack as Select/Combobox — cover contract, at-least-trigger, sheet at ≤640. Rows share DropdownMenu grammar.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ContextMenu>;
+
+const basicItems: ContextMenuEntry[] = [
+  { label: "Copy" },
+  { label: "Duplicate" },
+  { separator: true },
+  { label: "Delete", destructive: true },
+];
+
+export const Default: Story = {
+  name: "Main",
+  args: { defaultOpen: true },
+  render: (args) => (
+    <YStack minHeight={340} paddingTop="$4" alignItems="center">
+      <ContextMenu {...args} items={basicItems}>
+        <Button>Right-click or long-press</Button>
+      </ContextMenu>
+    </YStack>
+  ),
+};
+
+export const IconsAndShortcuts: Story = {
+  args: { defaultOpen: true },
+  render: (args) => (
+    <YStack minHeight={380} paddingTop="$4" alignItems="center">
+      <ContextMenu {...args}>
+        <ContextMenu.Trigger>
+          <Button icon={<DotsThreeVerticalIcon size={16} />}>Canvas</Button>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content>
+          <ContextMenu.Item icon={<PencilSimpleIcon size={16} />} shortcut="⌘E">
+            Edit
+          </ContextMenu.Item>
+          <ContextMenu.Item icon={<CopyIcon size={16} />} shortcut="⌘C">
+            Copy
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item icon={<TrashIcon size={16} />} shortcut="⌫" destructive>
+            Delete
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu>
+    </YStack>
+  ),
+};
+
+export const Checkable: Story = {
+  args: { defaultOpen: true },
+  render: (args) => {
+    const [pinned, setPinned] = useState(true);
+    const [hidden, setHidden] = useState(false);
+    return (
+      <YStack minHeight={340} paddingTop="$4" alignItems="center">
+        <ContextMenu {...args}>
+          <ContextMenu.Trigger>
+            <Button>Row</Button>
+          </ContextMenu.Trigger>
+          <ContextMenu.Content>
+            <ContextMenu.Label>View</ContextMenu.Label>
+            <ContextMenu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>
+              Pinned
+            </ContextMenu.CheckboxItem>
+            <ContextMenu.CheckboxItem checked={hidden} onCheckedChange={setHidden}>
+              Hidden
+            </ContextMenu.CheckboxItem>
+          </ContextMenu.Content>
+        </ContextMenu>
+      </YStack>
+    );
+  },
+};
+
+export const Closed: Story = {
+  render: () => (
+    <YStack minHeight={200} paddingTop="$4" alignItems="center" gap="$3">
+      <ContextMenu items={basicItems}>
+        <Button>Right-click me</Button>
+      </ContextMenu>
+      <Text color="$color11" fontSize="$2">
+        Web: right-click. Native: long-press. Same menu.
+      </Text>
+    </YStack>
+  ),
+};