@multiplatform.one/components 6.7.0 → 7.1.0

package/src/Badge/index.tsx

@@ -1,9 +1,12 @@
 import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
-import type { ColorTokens, GetProps } from "tamagui";
-import { Text, View, styled } from "tamagui";
+import type { ColorTokens, FontSizeTokens, GetProps } from "tamagui";
+import { Text, View, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors";
+import { useDirection } from "../hooks/useDirection";
 import { useAsyncBoundary } from "../layouts/AsyncBoundary";
+import { bidiIsolate } from "../shared/t";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -12,24 +15,31 @@ export type BadgeColor = "red" | "blue" | "green" | "orange" | "gray";
 export type BadgePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 
 export interface BadgeProps {
-  /** The element to wrap with a badge */
-  children: ReactNode;
-  /** The count to display. If provided, shows count badge. If 0 or undefined with showZero=false, badge is hidden */
+  /** Host to overlay. Omit for a Primer CounterLabel-style standalone pill. */
+  children?: ReactNode;
+  /** Count to display. Hidden when 0/undefined unless `showZero` or `dot`. */
   count?: number;
-  /** Maximum count to display. Numbers above this show as "max+" (e.g., "99+") */
+  /** Overflow cap. Counts above this render as `max+` (Primer/Carbon). */
   max?: number;
-  /** Show badge even when count is 0 */
+  /** Show the pill when `count` is 0. */
   showZero?: boolean;
-  /** Show as a dot instead of count */
+  /** Ambient presence mark (Ant/Carbon: low-weight signal, not a precise count). */
   dot?: boolean;
   /** Badge color */
   color?: BadgeColor;
-  /** Position of the badge */
+  /** Corner the overlay hangs from. Logicalized in RTL (end/start). */
   position?: BadgePosition;
-  /** Offset from the corner [x, y] in pixels */
+  /** Extra outward offset from the hung corner `[x, y]` in pixels. */
   offset?: [number, number];
   /** Whether the badge is visible */
   visible?: boolean;
+  /** Compact density override (wins over the density knob). */
+  compact?: boolean;
+  /**
+   * Accessible name. Overflowed counts default to the exact number (Carbon
+   * tooltip / Primer accessible name), not the visible `max+` string.
+   */
+  accessibilityLabel?: string;
 }
 
 // ── Color mappings ────────────────────────────────────────────
@@ -46,68 +56,87 @@ const colorMap: Record<BadgeColor, { bg: ColorTokens; text: ColorTokens }> = {
 
 // ── Size mappings ─────────────────────────────────────────────
 
-// R-PILL stays a pill, but capsule/dot geometry scales with the size knob
-// (spec:483-486); medium keeps the previous 18/11/8 geometry.
-const badgeGeometryMap: Record<string, { capsule: number; font: number; dot: number }> = {
-  $3: { capsule: 16, font: 10, dot: 6 },
-  $4: { capsule: 18, font: 11, dot: 8 },
-  $5: { capsule: 22, font: 13, dot: 10 },
-};
-
-// ── Position mappings ─────────────────────────────────────────
-
-const positionMap: Record<
-  BadgePosition,
-  { top?: number; right?: number; bottom?: number; left?: number }
+// R-PILL: size knob moves diameter, padding, and type — never shape.
+// Capsule stays well below the 44px control floor (ornamental overlay, not a
+// press target — same contract as DotIndicator). Compact/density steps
+// `sizeToken` down via useResolvedKnobs, so this table only ever shrinks.
+const badgeGeometryMap: Record<
+  string,
+  { capsule: number; font: FontSizeTokens; pad: number; dot: number }
 > = {
-  "top-right": { top: 0, right: 0 },
-  "top-left": { top: 0, left: 0 },
-  "bottom-right": { bottom: 0, right: 0 },
-  "bottom-left": { bottom: 0, left: 0 },
+  $3: { capsule: 16, font: "$1", pad: 4, dot: 6 },
+  $4: { capsule: 18, font: "$1", pad: 5, dot: 8 },
+  $5: { capsule: 22, font: "$2", pad: 6, dot: 10 },
 };
 
+/** Primer Counter / Carbon notification: canvas hairline so the fill separates from any host. */
+const CONTRAST_RING = 2;
+
 // ── Styled components ─────────────────────────────────────────
 
 const BadgeWrapper = styled(View, {
   name: "BadgeWrapper",
   position: "relative",
   display: "inline-flex",
+  alignSelf: "flex-start",
+  overflow: "visible",
 });
 
 const BadgeIndicator = styled(View, {
   name: "BadgeIndicator",
-  // R-PILL (D-09 / LC-60): the count/dot indicator is a pill at every radius
-  // value; the knob moves its size and padding, never its shape.
+  // R-PILL (D-09 / LC-60): the count/dot is a pill at every radius value;
+  // the knob moves its size and padding, never its shape.
   ...radiusClassProps("R-PILL", "Badge count/dot"),
-  position: "absolute",
   alignItems: "center",
   justifyContent: "center",
   borderRadius: 1000,
-  minWidth: 18,
-  height: 18,
-  paddingHorizontal: "$1",
+  borderWidth: CONTRAST_RING,
+  borderColor: "$color1",
+  borderStyle: "solid",
   zIndex: 1,
-
-  variants: {
-    dot: {
-      true: {
-        minWidth: 8,
-        width: 8,
-        height: 8,
-        paddingHorizontal: 0,
-      },
-    },
-  } as const,
+  // Orbit/Primer: badges are not actionable — clicks hit the host.
+  pointerEvents: "none",
 });
 
 const BadgeText = styled(Text, {
   name: "BadgeText",
-  fontSize: 11,
   fontWeight: "600",
-  lineHeight: 18,
   textAlign: "center",
+  pointerEvents: "none",
 });
 
+// ── Helpers ───────────────────────────────────────────────────
+
+function normalizeCount(count: number | undefined): number | undefined {
+  if (count === undefined || !Number.isFinite(count)) return undefined;
+  return Math.max(0, Math.floor(count));
+}
+
+function normalizeMax(max: number): number {
+  if (!Number.isFinite(max) || max < 0) return 99;
+  return Math.floor(max);
+}
+
+function indicatorPlacement(
+  position: BadgePosition,
+  isRTL: boolean,
+  overlap: number,
+  offset: [number, number],
+) {
+  const atEnd = position.includes("right");
+  const atTop = position.includes("top");
+  const [ox, oy] = offset;
+  const inlineProp = atEnd === !isRTL ? "right" : "left";
+  const dirX = inlineProp === "right" ? 1 : -1;
+  const dirY = atTop ? -1 : 1;
+  return {
+    position: "absolute" as const,
+    [atTop ? "top" : "bottom"]: 0,
+    [inlineProp]: 0,
+    transform: [{ translateX: dirX * (overlap + ox) }, { translateY: dirY * (overlap + oy) }],
+  };
+}
+
 // ── Badge Component ───────────────────────────────────────────
 
 export function Badge({
@@ -120,59 +149,84 @@ export function Badge({
   position = "top-right",
   offset = [0, 0],
   visible = true,
+  compact,
+  accessibilityLabel,
 }: BadgeProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation();
+  const isRTL = useDirection() === "rtl";
+  const { knobProps } = useResolvedKnobs({ component: "Badge", compact });
   const colors = colorMap[color];
   const geometry = badgeGeometryMap[knobProps.sizeToken] ?? badgeGeometryMap.$4;
-  const posStyles = positionMap[position];
   // DG-ST-04: degrade — hide counts/badges when a parent AsyncBoundary failed.
   const asyncCtx = useAsyncBoundary();
   const effectiveVisible = visible && !asyncCtx?.hideBadges;
-  const effectiveCount = asyncCtx?.hideBadges ? undefined : count;
+  const effectiveCount = asyncCtx?.hideBadges ? undefined : normalizeCount(count);
+  const cap = normalizeMax(max);
+  const standalone = children == null;
 
-  // Determine if badge should be shown
   const shouldShow =
     effectiveVisible && (dot || (effectiveCount !== undefined && (effectiveCount > 0 || showZero)));
 
-  // Format display value
-  const displayValue =
-    effectiveCount !== undefined && effectiveCount > max ? `${max}+` : effectiveCount;
+  const overflowed = effectiveCount !== undefined && effectiveCount > cap;
+  const displayValue = overflowed ? `${cap}+` : effectiveCount;
+  const painted = dot ? geometry.dot : geometry.capsule;
+  // Material/Ant overlay: hang 50% off the corner. Standalone CounterLabel sits in flow.
+  const overlap = standalone ? 0 : painted / 2;
+
+  const a11yLabel =
+    accessibilityLabel ??
+    (dot
+      ? t("New activity")
+      : overflowed && effectiveCount !== undefined
+        ? String(effectiveCount)
+        : undefined);
+
+  if (!shouldShow) {
+    return standalone ? null : <BadgeWrapper>{children}</BadgeWrapper>;
+  }
+
+  const indicator = (
+    <BadgeIndicator
+      backgroundColor={colors.bg}
+      minWidth={painted}
+      height={painted}
+      {...(dot ? { width: painted, paddingHorizontal: 0 } : { paddingHorizontal: geometry.pad })}
+      {...(standalone ? undefined : indicatorPlacement(position, isRTL, overlap, offset))}
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-label={a11yLabel}
+      {...(isWeb && overflowed && effectiveCount !== undefined
+        ? { title: String(effectiveCount) }
+        : undefined)}
+      {...({
+        "data-badge": dot ? "dot" : "count",
+        ...(overflowed ? { "data-overflow": "true" } : {}),
+      } as Record<string, string>)}
+    >
+      {/* body spread first so the intended 600 weight wins (SB-M-101) */}
+      {!dot && effectiveCount !== undefined && (
+        <BadgeText
+          {...knobProps.body}
+          fontWeight="600"
+          fontSize={geometry.font}
+          lineHeight={Math.max(1, painted - CONTRAST_RING * 2)}
+          color={colors.text as ColorTokens}
+        >
+          {bidiIsolate(String(displayValue))}
+        </BadgeText>
+      )}
+    </BadgeIndicator>
+  );
 
-  // Calculate offset transforms
-  const [offsetX, offsetY] = offset;
+  if (standalone) {
+    return indicator;
+  }
 
   return (
     <BadgeWrapper>
       {children}
-      {shouldShow && (
-        <BadgeIndicator
-          dot={dot}
-          backgroundColor={colors.bg}
-          {...(dot
-            ? { minWidth: geometry.dot, width: geometry.dot, height: geometry.dot }
-            : { minWidth: geometry.capsule, height: geometry.capsule })}
-          style={{
-            ...posStyles,
-            transform: [
-              { translateX: position.includes("right") ? offsetX : -offsetX },
-              { translateY: position.includes("top") ? -offsetY : offsetY },
-            ],
-          }}
-        >
-          {/* body spread first so the intended 600 weight wins (SB-M-101) */}
-          {!dot && effectiveCount !== undefined && (
-            <BadgeText
-              {...knobProps.body}
-              fontWeight="600"
-              fontSize={geometry.font}
-              lineHeight={geometry.capsule}
-              color={colors.text as any}
-            >
-              {displayValue}
-            </BadgeText>
-          )}
-        </BadgeIndicator>
-      )}
+      {indicator}
     </BadgeWrapper>
   );
 }

package/src/Button.spec.tsx

@@ -0,0 +1,181 @@
+/**
+ * House Button shadow (LC-18 KNOB-TOTALITY, curated-surface arm).
+ *
+ * The curated ./tamagui.ts used to re-export `Button` raw, so every
+ * components-imported Button was knob-dead (9px radius survivors at
+ * `borderRadius: none` — p-results/fix-button-knob-totality.md). The bare
+ * name now rides ./Button.tsx (thin prop-compat shim over the knob-correct
+ * forms Button). This spec locks:
+ *
+ *  1. knob fragments reach the frame through the components export —
+ *     radius none → 0 token / full → 12 token, elevation none → flat —
+ *     for default + chromeless, while `circular` stays the consumer SHAPE
+ *     eject (keeps its 100000px circle at `none`, owner ruling 2026-08-13);
+ *  2. raw-tamagui prop-compat: `variant="outlined"` renders identically to
+ *     the house `outlined` prop (pre-shadow consumers keep their look);
+ *  3. pass-through sanity: consumer props still eject last, presses fire,
+ *     and the Button.Text / Button.Icon statics stay available.
+ *
+ * happy-dom cannot cascade tamagui's class CSS, so assertions read the
+ * atomic classes the knob emits (`_btlr-*` radius, `_bxsh-*` shadow,
+ * `_h-t-size-*` height) — the Button.lc18.spec.tsx technique.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { Button as TamaguiButton } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./Button";
+import * as pkg from "./index";
+
+afterEach(cleanup);
+
+function frameRadiusClasses(): string[] {
+  const frame = screen.getByRole("button");
+  return String(frame.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_btlr-"));
+}
+
+describe("components Button export identity", () => {
+  it("the barrel serves the house shadow, not the raw tamagui primitive", () => {
+    expect(pkg.Button).toBe(Button);
+    expect(pkg.Button).not.toBe(TamaguiButton);
+    expect(pkg.TamaguiButton).toBe(TamaguiButton);
+  });
+
+  it("keeps the Button.Text / Button.Icon statics", () => {
+    expect(Button.Text).toBeDefined();
+    expect(Button.Icon).toBeDefined();
+  });
+});
+
+describe("components Button — borderRadius knob reaches the frame", () => {
+  it("default squares at none and follows the scale to full", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-0"]);
+    expect(screen.getByRole("button").getAttribute("data-radius-class")).toBeNull();
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-12"]);
+  });
+
+  it("chromeless squares at none (chrome removed, knobs still tracked)", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button chromeless>Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-0"]);
+  });
+
+  it("circular stays the consumer shape eject: round even at none, no inline override", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button circular icon={<span>x</span>} aria-label="favorite" />
+      </Preset>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frameRadiusClasses()).toEqual(["_btlr-100000px"]);
+    expect((frame as HTMLElement).style.borderRadius).toBe("");
+    expect(frame.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+    expect(frame.getAttribute("data-radius-part")).toBe("circular Button");
+  });
+
+  it("consumer borderRadius prop wins last over the knob fragment", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Button borderRadius="$6">Save</Button>
+      </Preset>,
+    );
+    expect(frameRadiusClasses()).toEqual(["_btlr-t-radius-6"]);
+  });
+});
+
+describe("components Button — elevation and size knobs reach the frame", () => {
+  it("elevation none renders flat; large casts a shadow", () => {
+    renderWithProviders(
+      <Preset overrides={{ elevation: "none" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).not.toMatch(/_bxsh-/);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ elevation: "large" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).toMatch(/_bxsh-/);
+  });
+
+  it("size knob drives the frame height token", () => {
+    renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).toContain("_h-t-size-3");
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Button>Save</Button>
+      </Preset>,
+    );
+    expect(screen.getByRole("button").className).toContain("_h-t-size-5");
+  });
+});
+
+describe("components Button — raw-tamagui prop-compat", () => {
+  it('variant="outlined" renders the same frame as the house outlined prop', () => {
+    renderWithProviders(<Button variant="outlined">Compat</Button>);
+    const viaVariant = screen.getByRole("button").className;
+    cleanup();
+
+    renderWithProviders(<Button outlined>Compat</Button>);
+    const viaHouse = screen.getByRole("button").className;
+    expect(viaVariant).toBe(viaHouse);
+  });
+
+  it("an explicit outlined={false} beats variant (explicit house prop wins)", () => {
+    renderWithProviders(
+      <Button variant="outlined" outlined={false}>
+        Compat
+      </Button>,
+    );
+    const withEject = screen.getByRole("button").className;
+    cleanup();
+
+    renderWithProviders(<Button>Compat</Button>);
+    expect(withEject).toBe(screen.getByRole("button").className);
+  });
+
+  it("presses fire through the shim", () => {
+    const onPress = vi.fn();
+    renderWithProviders(<Button onPress={onPress}>Go</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("testID and aria pass through to the frame", () => {
+    renderWithProviders(
+      <Button testID="shadow-btn" aria-label="shadow">
+        Go
+      </Button>,
+    );
+    const frame = screen.getByRole("button");
+    expect(frame.getAttribute("data-testid")).toBe("shadow-btn");
+    expect(frame.getAttribute("aria-label")).toBe("shadow");
+  });
+});

package/src/Button.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { XStack } from "tamagui";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "House Button served by @multiplatform.one/components — a thin prop-compat shim over the knob-correct forms Button (radius/elevation/size knobs, LC-54 press floor, LC-53 icon slot). Raw tamagui stays reachable as TamaguiButton. `circular` is a consumer shape eject and stays round at borderRadius none (R-IDENTITY).",
+      },
+    },
+  },
+  argTypes: {
+    children: { control: "text", description: "Button label" },
+    outlined: { control: "boolean", description: "House outlined channel" },
+    variant: {
+      control: "select",
+      options: [undefined, "outlined"],
+      description: "Raw-tamagui prop-compat; outlined maps onto the house outlined prop",
+    },
+    circular: {
+      control: "boolean",
+      description: "Consumer shape eject (stays round at radius none)",
+    },
+    chromeless: { control: "boolean" },
+    accent: { control: "boolean" },
+    error: { control: "boolean" },
+    warning: { control: "boolean" },
+    success: { control: "boolean" },
+    disabled: { control: "boolean" },
+    loading: { control: "boolean" },
+    skeleton: { control: "boolean" },
+  },
+  args: { children: "Button" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  name: "Main",
+};
+
+export const Outlined: Story = {
+  args: { outlined: true },
+};
+
+/** Pre-shadow consumers pass tamagui's `variant="outlined"`; the shim maps it to `outlined`. */
+export const VariantCompat: Story = {
+  args: { variant: "outlined", children: "variant=\u201coutlined\u201d" },
+};
+
+export const Intents: Story = {
+  render: () => (
+    <XStack gap="$3" flexWrap="wrap">
+      <Button accent>Accent</Button>
+      <Button error>Error</Button>
+      <Button warning>Warning</Button>
+      <Button success>Success</Button>
+    </XStack>
+  ),
+};
+
+export const IconSlots: Story = {
+  render: () => (
+    <XStack gap="$3" alignItems="center" flexWrap="wrap">
+      <Button icon={<PlusIcon size={16} />}>Leading</Button>
+      <Button iconAfter={<TrashIcon size={16} />} error>
+        Trailing
+      </Button>
+      <Button circular icon={<PlusIcon size={16} />} aria-label="Add" />
+      <Button chromeless icon={<PlusIcon size={16} />} aria-label="Add row" />
+    </XStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <XStack gap="$3" alignItems="center" flexWrap="wrap">
+      <Button loading>Loading</Button>
+      <Button disabled disabledReason="Select a row first">
+        Delete
+      </Button>
+      <Button skeleton />
+    </XStack>
+  ),
+};

package/src/Button.tsx

@@ -0,0 +1,43 @@
+/**
+ * House Button for the components catalog — closes the LC-18 KNOB-TOTALITY
+ * hole where `./tamagui.ts` re-exported `Button` STRAIGHT from tamagui, so
+ * every `import { Button } from "@multiplatform.one/components"` consumer
+ * (pokemon header actions, backoffice DeskShell chrome, wallet/auth CTAs)
+ * rendered the raw primitive: no knob fragments (radius stuck at the size
+ * variant's 9px/7px under `borderRadius: "none"`), no LC-54 press-floor
+ * channel, no LC-53 icon-slot discipline
+ * (`p-results/fix-button-knob-totality.md`).
+ *
+ * ARCHITECTURE (decided from the dependency graph, not copied styling):
+ * `@multiplatform.one/components` already depends on `@multiplatform.one/forms`
+ * (package.json dependency, consumed by Pagination, toolbar, ConfirmDialog,
+ * and the `Fieldset` shadow in index.ts) while forms does NOT depend on
+ * components — so re-exporting the knob-correct forms Button is legal and
+ * cycle-free. A second local knob-consuming implementation would duplicate
+ * the forms Button against LC-16 SINGLE-IMPLEMENTATION; a bare re-export
+ * would silently drop the raw-tamagui `variant="outlined"` API that ~10
+ * consumer sites pass. This module is therefore the thinnest legal shape: a
+ * prop-compat shim that maps tamagui's `variant="outlined"` onto the house
+ * `outlined` prop and forwards everything else (STD-EJECT-LAST is the forms
+ * Button's own contract; knob fragments land there).
+ *
+ * Raw tamagui Button stays reachable as `TamaguiButton` (./tamagui.ts escape
+ * hatch, same precedent as TamaguiCheckbox/TamaguiToast).
+ */
+import {
+  Button as FormsButton,
+  type ButtonProps as FormsButtonProps,
+} from "@multiplatform.one/forms";
+
+/** House Button API — the forms Button contract (raw `variant` included via TamaguiButtonProps). */
+export type ButtonProps = FormsButtonProps;
+
+export function Button({ variant, outlined, ...props }: ButtonProps) {
+  // Raw-tamagui prop-compat: `variant="outlined"` is tamagui Button API that
+  // pre-shadow consumers pass; the house channel is the `outlined` boolean.
+  // An explicit `outlined` wins; with neither, the knob decides downstream.
+  return <FormsButton outlined={outlined ?? (variant === "outlined" || undefined)} {...props} />;
+}
+
+Button.Text = FormsButton.Text;
+Button.Icon = FormsButton.Icon;