@multiplatform.one/components 6.7.0 → 7.0.0

package/src/Chip/index.tsx

@@ -1,11 +1,452 @@
-export {
-  Chip,
-  ChipFrame,
-  ChipText,
-  chipIconSize,
-  type ChipProps,
-  type ChipVariant,
-  type ChipColor,
-  type ChipSize,
-  type ChipFrameProps,
-} from "@multiplatform.one/forms";
+import { isWeb } from "@multiplatform.one/platform";
+import {
+  MIN_PRESS_TARGET,
+  ensureCompositeFocusRing,
+  ensureFocusVisibleRing,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  sizeRecipeForToken,
+  useAccentTintedSurface,
+  useReadableTextOn,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
+import type { ColorTokens, GetProps } from "tamagui";
+import { Text, View, styled } from "tamagui";
+
+// ── Types ─────────────────────────────────────────────────────
+
+/** Canonical tones. `solid`/`subtle`/`outline` stay as aliases (Tags, older call sites). */
+export type ChipTone = "filled" | "outlined" | "ghost";
+export type ChipVariant = ChipTone | "solid" | "subtle" | "outline";
+export type ChipColor = "gray" | "red" | "green" | "blue" | "yellow" | "orange" | "purple";
+export type ChipSize = "$2" | "$3" | "$4" | "$5";
+
+export interface ChipProps {
+  children: ReactNode;
+  size?: ChipSize;
+  variant?: ChipVariant;
+  color?: ChipColor;
+  /** Leading glyph (assist / input). Sized to the chip; omit to get a check when selected. */
+  icon?: ReactNode;
+  /** Selected/filter-on. LC-71: fill, never a selection border. */
+  selected?: boolean;
+  /** Press the pill (filter / assist). Makes the pill a keyboard stop. */
+  onPress?: () => void;
+  onDismiss?: () => void;
+  disabled?: boolean;
+  /** Cap the pill; the label ellipsizes. */
+  maxWidth?: number | string;
+}
+
+// ── Color mappings ────────────────────────────────────────────
+
+// Ghost/outlined text is small (12px) and must clear ≥4.5:1 on its own tint.
+// Step-12 on step-4 is the pairing that clears AA in both schemes (DF-04).
+// Filled uses the Badge pairing: step-11 surface + `$color1` (≥4.5:1).
+type ChipSwatch = {
+  tint: ColorTokens;
+  hoverTint: ColorTokens;
+  fill: ColorTokens;
+  fillText: ColorTokens;
+  text: ColorTokens;
+  border: ColorTokens;
+};
+
+const colorMap: Record<ChipColor, ChipSwatch> = {
+  gray: {
+    tint: "$color4",
+    hoverTint: "$color5",
+    fill: "$color11",
+    fillText: "$color1",
+    text: "$color12",
+    border: "$color7",
+  },
+  red: {
+    tint: "$red4",
+    hoverTint: "$red5",
+    fill: "$red11",
+    fillText: "$color1",
+    text: "$red12",
+    border: "$red7",
+  },
+  green: {
+    tint: "$green4",
+    hoverTint: "$green5",
+    fill: "$green11",
+    fillText: "$color1",
+    text: "$green12",
+    border: "$green7",
+  },
+  blue: {
+    tint: "$blue4",
+    hoverTint: "$blue5",
+    fill: "$blue11",
+    fillText: "$color1",
+    text: "$blue12",
+    border: "$blue7",
+  },
+  yellow: {
+    tint: "$yellow4",
+    hoverTint: "$yellow5",
+    fill: "$yellow11",
+    fillText: "$color1",
+    text: "$yellow12",
+    border: "$yellow7",
+  },
+  orange: {
+    tint: "$orange4",
+    hoverTint: "$orange5",
+    fill: "$orange11",
+    fillText: "$color1",
+    text: "$orange12",
+    border: "$orange7",
+  },
+  purple: {
+    tint: "$purple4",
+    hoverTint: "$purple5",
+    fill: "$purple11",
+    fillText: "$color1",
+    text: "$purple12",
+    border: "$purple7",
+  },
+};
+
+export function chipTone(variant: ChipVariant | undefined): ChipTone {
+  switch (variant) {
+    case "filled":
+    case "solid":
+      return "filled";
+    case "outlined":
+    case "outline":
+      return "outlined";
+    default:
+      return "ghost";
+  }
+}
+
+// ── Styled components ─────────────────────────────────────────
+
+/**
+ * Chip geometry rides the GENERATED `controlCompact` family (LC-75 / LC-80):
+ * padX / font / icon / inner gap come from the recipe table — no handwritten
+ * per-size px map. The pill has no recipe height: it hugs its label, and the
+ * vertical inset derives as a quarter of the recipe padX (preserves the
+ * audited $3/$4 pill height). Module-eval objects so styled() can flatten
+ * (pilot pattern: InputParts spreads `recipeFamilies.control.boxVariants`).
+ * Kept in lockstep with the forms Chip.
+ */
+const CHIP_RECIPE_FAMILY = "controlCompact" as const;
+const CHIP_SIZE_TOKENS = ["$2", "$3", "$4", "$5"] as const;
+
+function chipFrameGeometry(token: string) {
+  const recipe = sizeRecipeForToken(token, { family: CHIP_RECIPE_FAMILY });
+  return {
+    paddingHorizontal: recipe.paddingHorizontal,
+    paddingVertical: Math.round(recipe.paddingHorizontal * 0.25),
+    gap: recipe.gap,
+  };
+}
+
+const chipFrameVariants = Object.fromEntries(
+  CHIP_SIZE_TOKENS.map((token) => [token, chipFrameGeometry(token)]),
+);
+
+const chipTextVariants = Object.fromEntries(
+  CHIP_SIZE_TOKENS.map((token) => [
+    token,
+    { fontSize: sizeRecipeForToken(token, { family: CHIP_RECIPE_FAMILY }).fontSize },
+  ]),
+);
+
+/**
+ * Exported so chip-scale companions (e.g. the Tags "Add Tag" trigger) share
+ * the exact same size variants — padding/font stay in lockstep with Chip for
+ * every size token, all derived from `recipeFamilies.controlCompact`.
+ */
+export const ChipFrame = styled(View, {
+  name: "Chip",
+  flexDirection: "row",
+  alignItems: "center",
+  ...chipFrameVariants.$3,
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+
+  variants: {
+    size: {
+      ...chipFrameVariants,
+      "...size": (val: unknown) => chipFrameGeometry(String(val ?? "$3")),
+    },
+    variant: {
+      solid: {},
+      filled: {},
+      subtle: {},
+      ghost: {},
+      outline: { borderWidth: 1 },
+      outlined: { borderWidth: 1 },
+    },
+  } as const,
+
+  defaultVariants: {
+    variant: "subtle",
+    size: "$3",
+  },
+});
+
+export const ChipText = styled(Text, {
+  name: "ChipText",
+  fontWeight: "500",
+  numberOfLines: 1,
+  userSelect: "none",
+  flexShrink: 1,
+  minWidth: 0,
+  ...chipTextVariants.$3,
+
+  variants: {
+    size: {
+      ...chipTextVariants,
+      "...size": (val: unknown) => ({
+        fontSize: sizeRecipeForToken(String(val ?? "$3"), { family: CHIP_RECIPE_FAMILY }).fontSize,
+      }),
+    },
+  } as const,
+});
+
+const IconSlot = styled(View, {
+  name: "ChipIcon",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+});
+
+/** Icon size that pairs with each chip size — the generated recipe's icon channel. */
+export function chipIconSize(size: ChipSize): number {
+  return sizeRecipeForToken(size, { family: CHIP_RECIPE_FAMILY }).iconSize;
+}
+
+// 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.
+const DismissButton = styled(View, {
+  name: "ChipDismiss",
+  cursor: "pointer",
+  opacity: 0.7,
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1,
+  },
+  pressStyle: {
+    opacity: 0.9,
+  },
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: {
+    opacity: 1,
+    outlineWidth: 0,
+  },
+});
+
+// LC-71: the painted dismiss ring is glyph-scale. Keyboard outline rides
+// `.mp-chip-dismiss-ring` (theme composite sheet), never the 44px floor.
+const DismissRing = styled(View, {
+  name: "ChipDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$0.5",
+  hoverStyle: {
+    backgroundColor: "$color5",
+  },
+});
+
+function normalizeIcon(icon: ReactNode, size: number): ReactNode {
+  if (icon == null || icon === false) return null;
+  if (isValidElement(icon)) {
+    const props = icon.props as { size?: number };
+    return cloneElement(icon, { size: props.size ?? size } as object);
+  }
+  if (typeof icon === "function") {
+    return createElement(icon as ComponentType<{ size?: number }>, { size });
+  }
+  return icon;
+}
+
+// ── Chip Component ────────────────────────────────────────────
+
+export function Chip({
+  children,
+  size,
+  variant = "subtle",
+  color = "gray",
+  icon,
+  selected,
+  onPress,
+  onDismiss,
+  disabled,
+  maxWidth,
+}: ChipProps) {
+  const { t } = useTranslation();
+  const { knobProps, disabledState } = useResolvedKnobs({ component: "Chip" });
+  const colors = colorMap[color] ?? colorMap.gray;
+  const tone = chipTone(variant);
+  const resolvedSize = size ?? (knobProps.sizeToken as ChipSize);
+  const selectedTint = useAccentTintedSurface();
+  const selectedFill = selectedTint ?? colors.tint;
+  const onSelectedLabel = useReadableTextOn(selectedFill);
+  if (typeof document !== "undefined") ensureCompositeFocusRing();
+
+  const isSelected = Boolean(selected);
+  const interactive = Boolean(onPress) && !disabled;
+  const showDismiss = Boolean(onDismiss) && !disabled;
+  const iconSize = chipIconSize(resolvedSize);
+  const RING_INSET = 2;
+  const dismissVisual = iconSize + RING_INSET * 2;
+  const dismissOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - dismissVisual) / 2));
+
+  let backgroundColor: ColorTokens | "transparent" | string = colors.tint;
+  let textColor: ColorTokens | string = colors.text;
+  let borderColor: ColorTokens | "transparent" = "transparent";
+
+  if (isSelected) {
+    backgroundColor = selectedFill;
+    textColor = onSelectedLabel ?? colors.text;
+    borderColor = "transparent";
+  } else if (tone === "filled") {
+    backgroundColor = colors.fill;
+    textColor = colors.fillText;
+    borderColor = "transparent";
+  } else if (tone === "outlined") {
+    backgroundColor = "transparent";
+    textColor = colors.text;
+    borderColor = colors.border;
+  }
+
+  const hoverBackground = interactive
+    ? isSelected
+      ? selectedFill
+      : tone === "outlined"
+        ? colors.tint
+        : tone === "filled"
+          ? colors.fill
+          : colors.hoverTint
+    : undefined;
+
+  const leading =
+    icon != null
+      ? normalizeIcon(icon, iconSize)
+      : isSelected
+        ? createElement(CheckIcon, { size: iconSize, weight: "bold" })
+        : null;
+
+  const activate = () => {
+    if (!interactive) return;
+    onPress?.();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.defaultPrevented || e.repeat) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    activate();
+  };
+
+  return (
+    <ChipFrame
+      size={resolvedSize}
+      variant={variant}
+      backgroundColor={backgroundColor}
+      {...knobProps.borderRadius}
+      // 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
+      }
+      transition={knobProps.transition}
+      maxWidth={maxWidth}
+      overflow="visible"
+      cursor={disabled ? "not-allowed" : interactive ? "pointer" : "default"}
+      data-chip=""
+      data-selected={isSelected ? "true" : undefined}
+      {...(interactive
+        ? {
+            role: "button",
+            tabIndex: 0,
+            ...(selected != null ? { "aria-pressed": isSelected } : undefined),
+          }
+        : undefined)}
+      {...(disabled
+        ? {
+            "aria-disabled": true,
+            ...(isSelected
+              ? disabledState.selectedSurfaceKnobProps
+              : disabledState.surfaceKnobProps),
+            ...disabledState.assemblyKnobProps,
+          }
+        : undefined)}
+      hoverStyle={hoverBackground != null ? { backgroundColor: hoverBackground } : undefined}
+      pressStyle={interactive ? { backgroundColor: hoverBackground, opacity: 0.92 } : undefined}
+      focusVisibleStyle={interactive ? ensureFocusVisibleRing() : { outlineWidth: 0 }}
+      onPress={interactive ? activate : undefined}
+      {...(interactive && isWeb
+        ? { onKeyDown: handleKeyDown as unknown as () => void }
+        : undefined)}
+    >
+      {leading ? (
+        // IconSlot (styled View) has no `color`; Tamagui forwards it to set the
+        // icon's inherited color at runtime (house Record cast).
+        <IconSlot {...({ color: textColor } as Record<string, unknown>)}>{leading}</IconSlot>
+      ) : null}
+      <ChipText
+        size={resolvedSize}
+        {...knobProps.body}
+        fontWeight="500"
+        color={textColor as ColorTokens}
+        {...(disabled ? disabledState.textKnobProps : undefined)}
+      >
+        {children}
+      </ChipText>
+      {showDismiss ? (
+        <DismissButton
+          role="button"
+          aria-label={t("Remove")}
+          tabIndex={0}
+          className="mp-chip-dismiss"
+          borderRadius={knobProps.pointy ? 0 : 1000}
+          {...pressTargetStyle()}
+          marginVertical={-dismissOutset}
+          marginHorizontal={-dismissOutset}
+          hitSlop={pressTargetHitSlop(dismissVisual)}
+          onPress={(e) => {
+            e.stopPropagation?.();
+            onDismiss?.();
+          }}
+          onKeyDown={
+            ((e: KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onDismiss?.();
+              }
+            }) as unknown as () => void
+          }
+        >
+          <DismissRing className="mp-chip-dismiss-ring" borderRadius={knobProps.pointy ? 0 : 1000}>
+            <XIcon size={iconSize} />
+          </DismissRing>
+        </DismissButton>
+      ) : null}
+    </ChipFrame>
+  );
+}
+
+export type ChipFrameProps = GetProps<typeof ChipFrame>;

package/src/DialogContent.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-// Catalog Button (G-15 story honesty / LC-18, UX-P06).
+// Catalog Button (G-15 story honesty / LC-18, UX-P06). Close sits inside
+// DialogContent so it inherits the compact nested-scale step (LC-73); the
+// dialog frame itself does not ring (LC-71).
 import { Button } from "@multiplatform.one/forms";
-import { Dialog, Paragraph, Unspaced, YStack } from "tamagui";
+import { Dialog, Paragraph, XStack, YStack } from "tamagui";
 import { DialogContent, DialogOverlay } from "./surfaces";
 
 function DialogHarness({
@@ -33,11 +35,11 @@ function DialogHarness({
             ) : (
               <Paragraph>Short dialog body content.</Paragraph>
             )}
-            <Unspaced>
+            <XStack justifyContent="flex-end">
               <Dialog.Close asChild>
-                <Button alignSelf="flex-end">Close</Button>
+                <Button>Close</Button>
               </Dialog.Close>
-            </Unspaced>
+            </XStack>
           </DialogContent>
         </Dialog.Portal>
       </Dialog>
@@ -53,7 +55,7 @@ const meta: Meta<typeof DialogContent> = {
     docs: {
       description: {
         component:
-          "Dialog.Content wrapper applying surface, borderRadius, elevation, panelPadding and gap knob recipes.",
+          "Dialog.Content wrapper applying elevatedSurface, containerRadius, panelPadding and gap knob recipes. Nested chrome steps one density level down; the frame itself paints no focus ring.",
       },
     },
   },

package/src/DotIndicator/DotIndicator.stories.tsx

@@ -44,6 +44,20 @@ function ControlledDotIndicator(
   );
 }
 
+function WindowedDotIndicator() {
+  const [activeIndex, setActiveIndex] = useState(4);
+  return (
+    <DotIndicator
+      total={10}
+      activeIndex={activeIndex}
+      onChange={(index) => {
+        setActiveIndex(index);
+        action("onChange")(index);
+      }}
+    />
+  );
+}
+
 export const Default: Story = {
   name: "Main",
   render: () => <ControlledDotIndicator total={5} onChange={action("onChange")} />,
@@ -188,6 +202,10 @@ export const AllStates: Story = {
         <Text fontWeight="600">Disabled</Text>
         <ControlledDotIndicator total={5} disabled onChange={action("onChange")} />
       </YStack>
+      <YStack gap="$2">
+        <Text fontWeight="600">Many items</Text>
+        <WindowedDotIndicator />
+      </YStack>
     </YStack>
   ),
 };

package/src/DotIndicator/dotIndicator.spec.tsx

@@ -68,8 +68,6 @@ describe("DotIndicator", () => {
     expect(onChange).toHaveBeenCalledWith(1);
     fireEvent.keyDown(dots[0], { key: " " });
     expect(onChange).toHaveBeenCalledWith(0);
-    fireEvent.keyDown(dots[1], { key: "ArrowRight" });
-    expect(onChange).toHaveBeenCalledTimes(2);
   });
 
   it("keyboard-focusable dots carry tabIndex 0 when interactive", () => {
@@ -80,6 +78,63 @@ describe("DotIndicator", () => {
     expect(dots[0].getAttribute("tabindex")).toBe("0");
   });
 
+  it("activates a dot with arrows, Home and End", () => {
+    const onChange = vi.fn();
+    const { container } = renderWithProviders(
+      <DotIndicator total={5} activeIndex={2} onChange={onChange} />,
+    );
+    const dots = container.querySelectorAll("[role='button']");
+    fireEvent.keyDown(dots[2], { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalledWith(3);
+    fireEvent.keyDown(dots[2], { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenCalledWith(1);
+    fireEvent.keyDown(dots[2], { key: "Home" });
+    expect(onChange).toHaveBeenCalledWith(0);
+    fireEvent.keyDown(dots[2], { key: "End" });
+    expect(onChange).toHaveBeenCalledWith(4);
+  });
+
+  it("does not ring the 44px hit box on pointer focus (LC-71)", () => {
+    const { container } = renderWithProviders(
+      <DotIndicator total={2} activeIndex={0} onChange={() => {}} />,
+    );
+    const target = container.querySelector("[role='button']") as HTMLElement;
+    fireEvent.focus(target);
+    expect(container.querySelector("[data-dot-ring]")).toBeNull();
+  });
+
+  it("paints pills as idle capsules and dots as idle circles", () => {
+    const { container: dotsC } = renderWithProviders(
+      <DotIndicator total={3} activeIndex={0} variant="dots" />,
+    );
+    const { container: pillsC } = renderWithProviders(
+      <DotIndicator total={3} activeIndex={0} variant="pills" />,
+    );
+    const dotIdle = dotsC.querySelector('[data-dot-state="idle"]') as HTMLElement;
+    const pillIdle = pillsC.querySelector('[data-dot-state="idle"]') as HTMLElement;
+    expect(Number(pillIdle.getAttribute("data-mark-width"))).toBeGreaterThan(
+      Number(dotIdle.getAttribute("data-mark-width")),
+    );
+  });
+
+  it("paints bars as ticks wider than tall when unpinned", () => {
+    const { container } = renderWithProviders(
+      <DotIndicator total={3} activeIndex={0} variant="bars" />,
+    );
+    const idle = container.querySelector('[data-dot-state="idle"]') as HTMLElement;
+    expect(Number(idle.getAttribute("data-mark-width"))).toBeGreaterThan(
+      Number(idle.getAttribute("data-mark-height")),
+    );
+  });
+
+  it("windows long strips to five visible marks", () => {
+    const { container } = renderWithProviders(
+      <DotIndicator total={10} activeIndex={4} onChange={() => {}} />,
+    );
+    expect(container.querySelectorAll("[aria-label^='Go to item']")).toHaveLength(10);
+    expect(container.querySelectorAll("[data-dot-hidden='true']")).toHaveLength(5);
+  });
+
   it("is read-only (no button semantics) without an onChange", () => {
     const { container } = renderWithProviders(<DotIndicator total={3} activeIndex={0} />);
     expect(container.querySelectorAll("[role='button']")).toHaveLength(0);