@multiplatform.one/components 7.4.1 → 7.5.0

package/src/Badge/index.tsx

@@ -100,7 +100,9 @@ const BadgeIndicator = styled(View, {
 
 const BadgeText = styled(Text, {
   name: "BadgeText",
-  fontWeight: "600",
+  // 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",
   textAlign: "center",
   pointerEvents: "none",
 });
@@ -204,14 +206,16 @@ export function Badge({
         ...(overflowed ? { "data-overflow": "true" } : {}),
       } as Record<string, string>)}
     >
-      {/* body spread first so the intended 600 weight wins (SB-M-101) */}
+      {/* 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). */}
       {!dot && effectiveCount !== undefined && (
         <BadgeText
-          {...knobProps.body}
-          fontWeight="600"
           fontSize={geometry.font}
           lineHeight={Math.max(1, painted - CONTRAST_RING * 2)}
+          {...knobProps.body}
           color={colors.text as ColorTokens}
+          {...({ "data-body-font": knobProps.body.fontFamily } as Record<string, string>)}
         >
           {bidiIsolate(String(displayValue))}
         </BadgeText>

package/src/Card.spec.tsx

@@ -0,0 +1,125 @@
+import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { cleanup } from "@testing-library/react";
+import { Card as TamaguiCard } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Card, CardFooter, CardHeader } from "./Card";
+
+function readSibling(name: string) {
+  return readFileSync(join(import.meta.dirname, name), "utf8");
+}
+
+function DensityProbe() {
+  const { knobProps } = useResolvedKnobs();
+  return <span data-child-density={knobProps.density} />;
+}
+
+describe("Card named exports", () => {
+  it("barrel re-exports the themed surface, not the tamagui primitive", () => {
+    const index = readSibling("index.ts");
+    expect(index).toMatch(/export \{ Card, CardFooter, CardHeader \} from ["']\.\/Card["']/);
+    expect(Card).not.toBe(TamaguiCard);
+    expect(Card.Header).toBe(CardHeader);
+    expect(Card.Footer).toBe(CardFooter);
+  });
+});
+
+describe("Card R12 / LC-73 — NestedScale only, no Tint", () => {
+  it("source does not wrap Tint; NestedScale is the only nest dialect", () => {
+    const src = readSibling("Card.tsx");
+    expect(src).not.toMatch(/from ["'][^"']*Tint["']/);
+    expect(src).not.toMatch(/<[Tt]int[\s/>]/);
+    expect(src).toMatch(/function NestedScale/);
+  });
+});
+
+describe("Card host data attributes", () => {
+  afterEach(cleanup);
+
+  it("writes tier, density, nested-scale and nested-px onto the frame", () => {
+    const { container } = renderWithProviders(
+      <Card>
+        <span>body</span>
+      </Card>,
+    );
+    const frame = container.querySelector("[data-tier]") as HTMLElement;
+    expect(frame.getAttribute("data-tier")).toBe("content");
+    expect(frame.getAttribute("data-density")).toBe("comfortable");
+    expect(frame.getAttribute("data-nested-scale")).toBe("root");
+    expect(Number(frame.getAttribute("data-nested-px"))).toBeGreaterThan(0);
+  });
+
+  it("elevated and feature tiers stamp data-tier", () => {
+    const elevated = renderWithProviders(<Card tier="elevated" />);
+    expect(elevated.container.querySelector("[data-tier]")?.getAttribute("data-tier")).toBe(
+      "elevated",
+    );
+    cleanup();
+    const feature = renderWithProviders(<Card tier="feature" />);
+    expect(feature.container.querySelector("[data-tier]")?.getAttribute("data-tier")).toBe(
+      "feature",
+    );
+  });
+});
+
+describe("Card NestedScale (LC-73)", () => {
+  afterEach(cleanup);
+
+  it("steps nested Card and children to compact density", () => {
+    const { container } = renderWithProviders(
+      <Card>
+        <DensityProbe />
+        <Card>
+          <DensityProbe />
+        </Card>
+      </Card>,
+    );
+    const frames = container.querySelectorAll("[data-tier]");
+    expect(frames.length).toBe(2);
+    expect(frames[0].getAttribute("data-density")).toBe("comfortable");
+    expect(frames[0].getAttribute("data-nested-scale")).toBe("root");
+    expect(frames[1].getAttribute("data-density")).toBe("compact");
+    expect(frames[1].getAttribute("data-nested-scale")).toBe("nested");
+    const probes = container.querySelectorAll("[data-child-density]");
+    expect(probes[0].getAttribute("data-child-density")).toBe("compact");
+    expect(probes[1].getAttribute("data-child-density")).toBe("compact");
+  });
+
+  it("does not step up when the ancestor is already compact", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Card>
+          <DensityProbe />
+        </Card>
+      </Preset>,
+    );
+    const frame = container.querySelector("[data-tier]") as HTMLElement;
+    expect(frame.getAttribute("data-density")).toBe("compact");
+    expect(frame.getAttribute("data-nested-scale")).toBe("nested");
+    expect(
+      container.querySelector("[data-child-density]")?.getAttribute("data-child-density"),
+    ).toBe("compact");
+  });
+});
+
+describe("Card header / footer (LC-09)", () => {
+  afterEach(cleanup);
+
+  it("header and footer are zero-padding slots on the shared Card surface", () => {
+    const src = readSibling("Card.tsx");
+    expect(src).toMatch(/TamaguiCard\.Header[\s\S]*padding=\{0\}/);
+    expect(src).toMatch(/TamaguiCard\.Footer[\s\S]*padding=\{0\}/);
+
+    const { container } = renderWithProviders(
+      <Card>
+        <Card.Header>Title</Card.Header>
+        <span>body</span>
+        <Card.Footer>Actions</Card.Footer>
+      </Card>,
+    );
+    expect(container.querySelector('[data-slot="header"]')?.textContent).toContain("Title");
+    expect(container.querySelector('[data-slot="footer"]')?.textContent).toContain("Actions");
+  });
+});

package/src/Card.stories.tsx

@@ -1,18 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
+import { Preset } from "@multiplatform.one/theme";
 import { Paragraph, SizableText, XStack, YStack } from "tamagui";
-import { Card } from "./surfaces";
+import { Card } from "./Card";
 
 const meta: Meta<typeof Card> = {
   title: "Components/Card",
   component: Card,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Knob-aware Card wrapper applying the surface-tier recipes (content/elevated/feature) plus panelPadding and gap by default.",
+          "Knob-aware Card (shared surface with Card.Header / Card.Footer). NestedScale steps density (LC-73); nested hue is opt-in — Card does not wrap Tint (R12).",
       },
     },
   },
@@ -32,7 +33,7 @@ export const Default: Story = {
   name: "Main",
   render: (args) => (
     <Card {...args} maxWidth={420}>
-      <SizableText fontWeight="600">Card content</SizableText>
+      <SizableText fontWeight="700">Card content</SizableText>
       <Paragraph>Body copy inside the knob-aware card surface.</Paragraph>
     </Card>
   ),
@@ -43,7 +44,7 @@ export const Tiers: Story = {
     <XStack gap="$4" flexWrap="wrap">
       {(["content", "elevated", "feature"] as const).map((tier) => (
         <Card key={tier} tier={tier} width={220}>
-          <SizableText fontWeight="600">{tier}</SizableText>
+          <SizableText fontWeight="700">{tier}</SizableText>
           <Paragraph>Tier surface.</Paragraph>
         </Card>
       ))}
@@ -55,7 +56,7 @@ export const WithHeaderFooter: Story = {
   render: (args) => (
     <Card {...args} maxWidth={420}>
       <Card.Header>
-        <SizableText fontWeight="600">Header title</SizableText>
+        <SizableText fontWeight="700">Header title</SizableText>
       </Card.Header>
       <Paragraph>Main content between header and footer.</Paragraph>
       <Card.Footer>
@@ -75,14 +76,29 @@ export const Empty: Story = {
 export const Nested: Story = {
   render: (args) => (
     <Card {...args} maxWidth={480}>
-      <SizableText fontWeight="600">Outer card</SizableText>
+      <SizableText fontWeight="700">Outer card</SizableText>
       <Card {...args}>
-        <Paragraph>Inner nested card — padding should not compound unexpectedly.</Paragraph>
+        <Paragraph>
+          Inner nested card — NestedScale steps density; hue does not auto-tint.
+        </Paragraph>
       </Card>
     </Card>
   ),
 };
 
+export const CompactDensity: Story = {
+  render: (args) => (
+    <Preset overrides={{ density: "compact" }}>
+      <Card {...args} maxWidth={420}>
+        <Card.Header>
+          <SizableText fontWeight="700">Compact density</SizableText>
+        </Card.Header>
+        <Paragraph>Ancestor compact — NestedScale does not step density up.</Paragraph>
+      </Card>
+    </Preset>
+  ),
+};
+
 export const LongContent: Story = {
   render: (args) => (
     <Card {...args} maxWidth={420}>

package/src/Card.tsx

@@ -0,0 +1,121 @@
+import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import {
+  Card as TamaguiCard,
+  type CardProps as TamaguiCardProps,
+  type ViewProps,
+  withStaticProperties,
+} from "tamagui";
+
+/**
+ * Knob-aware Card (+ Header / Footer).
+ *
+ * Nested hue is opt-in (R12): this module does not wrap a tint surface.
+ * NestedScale steps density only (LC-73) so nested chrome goes tighter, never
+ * larger.
+ *
+ * Bento surface tiers:
+ * - `content` (default): padded frame, bg only — no border, no shadow.
+ * - `elevated`: bordered + elevated (overlay grammar — popovers, dropdowns).
+ * - `feature`: big radius + ultra-soft wide shadow (marketing/auth cards).
+ *
+ * Padding contract: Card owns the inset (knob `panelPadding`) on every tier —
+ * Header/Footer are zero-padding rows (LC-09); vertical rhythm is the Card gap.
+ */
+
+export type SurfaceTier = "content" | "elevated" | "feature";
+
+export interface CardProps extends TamaguiCardProps {
+  tier?: SurfaceTier;
+}
+
+export type CardHeaderProps = ViewProps & { children?: ReactNode };
+export type CardFooterProps = ViewProps & { children?: ReactNode };
+
+function NestedScale({ density, children }: { density: string; children: ReactNode }) {
+  if (density === "compact") return children;
+  return <Preset overrides={{ density: "compact" }}>{children}</Preset>;
+}
+
+/**
+ * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
+ * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ */
+function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  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 };
+}
+
+function CardRoot({ children, tier = "content", ...props }: CardProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  // Axiom 1 child-clip cap: the padded container's radius may not exceed its
+  // own inset. cardSurface carries the cap already; the elevated tier layers
+  // containerRadius over elevatedSurface. The feature tier is a fixed Bento
+  // recipe (radius is not knob-driven), so the knob cap does not apply.
+  const tierProps =
+    tier === "elevated"
+      ? { ...knobProps.elevatedSurface, ...knobProps.containerRadius }
+      : tier === "feature"
+        ? knobProps.featureSurface
+        : knobProps.cardSurface;
+  const nested = knobProps.density === "compact";
+  // panelPadding first so tier recipes may override (feature uses a larger
+  // inset); elevatedSurface carries no padding of its own.
+  return (
+    <TamaguiCard
+      {...knobProps.panelPadding}
+      {...tierProps}
+      {...knobProps.gap}
+      {...hostData({
+        "data-tier": tier,
+        "data-density": knobProps.density,
+        "data-nested-scale": nested ? "nested" : "root",
+        "data-nested-px": String(knobProps.nestedControl.px),
+      })}
+      {...props}
+    >
+      <NestedScale density={knobProps.density}>{children}</NestedScale>
+    </TamaguiCard>
+  );
+}
+
+// padding={0} kills the tamagui size-variant default padding — the Card
+// frame already owns the inset (LC-09). heading/body/gap ride NestedScale.
+export function CardHeader({ children, ...props }: CardHeaderProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  return (
+    <TamaguiCard.Header
+      padding={0}
+      {...knobProps.heading}
+      {...knobProps.gap}
+      {...hostData({ "data-slot": "header" })}
+      {...props}
+    >
+      {children}
+    </TamaguiCard.Header>
+  );
+}
+
+export function CardFooter({ children, ...props }: CardFooterProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  return (
+    <TamaguiCard.Footer
+      padding={0}
+      {...knobProps.body}
+      {...knobProps.gap}
+      {...hostData({ "data-slot": "footer" })}
+      {...props}
+    >
+      {children}
+    </TamaguiCard.Footer>
+  );
+}
+
+export const Card = withStaticProperties(CardRoot, {
+  Header: CardHeader,
+  Footer: CardFooter,
+});

package/src/CardFooter.spec.tsx

@@ -0,0 +1,149 @@
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Card } from "./surfaces";
+import { CardFooter } from "./CardFooter";
+
+function readSibling(name: string) {
+  return readFileSync(join(import.meta.dirname, name), "utf8");
+}
+
+function atoms(el: Element | null, prefixes: string[]): string[] {
+  if (!el) return [];
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function captionText(container: HTMLElement, label: string): HTMLElement {
+  return (container.querySelector("[data-body-font]") ?? screen.getByText(label)) as HTMLElement;
+}
+
+describe("CardFooter named exports", () => {
+  it("is the Card.Footer static and has no default export", async () => {
+    expect(Card.Footer).toBe(CardFooter);
+    const mod = await import("./CardFooter");
+    expect(mod.CardFooter).toBe(CardFooter);
+    expect(mod.default).toBeUndefined();
+  });
+});
+
+describe("CardFooter R12 — no Tint wrap", () => {
+  it("source does not wrap Tint; NestedScale stays on Card", () => {
+    const src = readSibling("CardFooter.tsx");
+    expect(src).not.toMatch(/from ["'][^"']*Tint["']/);
+    expect(src).not.toMatch(/<[Tt]int[\s/>]/);
+    expect(src).not.toMatch(/function NestedScale/);
+    expect(src).toMatch(/padding=\{0\}/);
+  });
+});
+
+describe("CardFooter design-law — T-BODY text node (R7 / LC-82)", () => {
+  afterEach(cleanup);
+
+  it("wraps bare strings so the caption is not a DIV (LC-82)", () => {
+    renderWithProviders(
+      <Card>
+        <Card.Footer>Ready to submit</Card.Footer>
+      </Card>,
+    );
+    const caption = screen.getByText("Ready to submit");
+    expect(caption.tagName).not.toBe("DIV");
+    expect(caption.getAttribute("data-body-font")).toBeTruthy();
+  });
+
+  it("coalesces array-of-strings children into one wrapped label", () => {
+    renderWithProviders(
+      <Card>
+        <Card.Footer>
+          {"Last saved"}
+          {" just now"}
+        </Card.Footer>
+      </Card>,
+    );
+    const caption = screen.getByText("Last saved just now");
+    expect(caption.tagName).not.toBe("DIV");
+  });
+
+  it("keeps caption text on the 400/700 weight ladder, never 600", () => {
+    const { container } = renderWithProviders(
+      <Card>
+        <Card.Footer>Ready to submit</Card.Footer>
+      </Card>,
+    );
+    const weight = atoms(captionText(container, "Ready to submit"), ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+
+  it("lets the fontWeight knob restyle the caption text node", () => {
+    const regular = renderWithProviders(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Card>
+          <Card.Footer>Ready to submit</Card.Footer>
+        </Card>
+      </Preset>,
+    );
+    const regularWeight = atoms(captionText(regular.container, "Ready to submit"), ["_fow-"]).join(
+      " ",
+    );
+    cleanup();
+
+    const bold = renderWithProviders(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Card>
+          <Card.Footer>Ready to submit</Card.Footer>
+        </Card>
+      </Preset>,
+    );
+    const boldWeight = atoms(captionText(bold.container, "Ready to submit"), ["_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/);
+  });
+
+  it("lets the bodyFont knob restyle the caption text node", () => {
+    const sans = renderWithProviders(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Card>
+          <Card.Footer>Ready to submit</Card.Footer>
+        </Card>
+      </Preset>,
+    );
+    const sansFamily = captionText(sans.container, "Ready to submit").getAttribute(
+      "data-body-font",
+    );
+    cleanup();
+
+    const mono = renderWithProviders(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Card>
+          <Card.Footer>Ready to submit</Card.Footer>
+        </Card>
+      </Preset>,
+    );
+    expect(sansFamily).toBeTruthy();
+    expect(captionText(mono.container, "Ready to submit").getAttribute("data-body-font")).toBe(
+      "$mono",
+    );
+    expect(captionText(mono.container, "Ready to submit").getAttribute("data-body-font")).not.toBe(
+      sansFamily,
+    );
+  });
+
+  it("stamps data-slot=footer and stays a zero-padding LC-09 slot", () => {
+    const src = readSibling("CardFooter.tsx");
+    expect(src).toMatch(/padding=\{0\}/);
+    const { container } = renderWithProviders(
+      <Card>
+        <Card.Footer>Actions</Card.Footer>
+      </Card>,
+    );
+    expect(container.querySelector('[data-slot="footer"]')?.textContent).toContain("Actions");
+  });
+});

package/src/CardFooter.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
 import { Paragraph, XStack, YStack } from "tamagui";
-import { Card } from "./surfaces";
+import { Card } from "./Card";
 
 const CardFooter = Card.Footer;
 
@@ -10,11 +10,11 @@ const meta: Meta<typeof CardFooter> = {
   title: "Components/CardFooter",
   component: CardFooter,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Card.Footer action row — zero padding of its own; the Card frame owns the inset.",
+          "Card.Footer action row — zero padding of its own (LC-09); the Card frame owns the inset. Bare captions ride T-BODY (LC-82). Nested hue is opt-in on Card — this part does not wrap Tint (R12).",
       },
     },
   },
@@ -29,6 +29,7 @@ export const Default: Story = {
     <Card maxWidth={420}>
       <Paragraph>Card body content.</Paragraph>
       <Card.Footer>
+        Ready to submit
         <XStack gap="$2">
           <Button variant="outlined">Cancel</Button>
           <Button>Confirm</Button>

package/src/CardFooter.tsx

@@ -0,0 +1,49 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { Card as TamaguiCard, SizableText, type ViewProps } from "tamagui";
+import { wrapBareTextChildren } from "./shared/textRidesText";
+
+/**
+ * Card.Footer action/caption row.
+ *
+ * Nested hue is opt-in on the Card frame (R12) — this part does not wrap Tint.
+ * NestedScale stays on Card (LC-73). This host is a zero-padding slot
+ * (LC-09); T-BODY rides caption TEXT nodes (LC-82 / R7), never the View.
+ */
+
+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.
+ */
+function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  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 };
+}
+
+export function CardFooter({ children, ...props }: CardFooterProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  return (
+    <TamaguiCard.Footer
+      padding={0}
+      {...knobProps.gap}
+      {...hostData({ "data-slot": "footer" })}
+      {...props}
+    >
+      {wrapBareTextChildren(children, (label, key) => (
+        <SizableText
+          key={key}
+          {...knobProps.body}
+          {...hostData({ "data-body-font": String(knobProps.body.fontFamily) })}
+        >
+          {label}
+        </SizableText>
+      ))}
+    </TamaguiCard.Footer>
+  );
+}