@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/src/fields/Date/typeParity.spec.tsx

@@ -5,16 +5,12 @@
  * The web field used to render ONE date-only calendar whatever the type
  * (SB-M-617): a `Datetime` dropped its time component from the picker, and a
  * `Time` rendered EMPTY, because the calendar adopts its value through
- * `coerceToDate` and `new Date("09:00")` is an Invalid Date. Native, meanwhile,
- * had just been activated with all three implemented. These cases pin the
- * three web controls — display, edit, and the exact wire string — and then
- * drive the SAME pick through both platform halves and assert the emitted
- * strings are byte-identical, which is the only reason one `wire.ts` body is
- * worth sharing.
- *
- * The suite runs on web, so the native half's two native-only edges are mocked
- * exactly as `nativePresentation.spec.tsx` mocks them: the OS picker (recorded
- * rather than rendered) and the platform flags. The web half imports neither.
+ * `coerceToDate` and `new Date("09:00")` is an Invalid Date. These cases pin
+ * the three web controls — display, edit, and the exact wire string — and
+ * then assert the moment an OS sheet commits on native serializes to the same
+ * bytes. Native has no fork of this field (FZ-8000): the same catalog field
+ * runs there, forms' pickers commit a `Date` from `OsDateTimeSheet`, and the
+ * catalog writes it through the one `wire.ts` body.
  */
 
 import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
@@ -23,38 +19,6 @@ import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
 // import transforms the whole fields graph.
 vi.setConfig({ testTimeout: 240_000 });
 
-const mockState = vi.hoisted(() => ({
-  isIos: true,
-  isAndroid: false,
-  /** Props of every mounted OS picker, newest last. */
-  picks: [] as Record<string, unknown>[],
-}));
-
-vi.mock("./dateTimePickerLoader", () => ({
-  loadDateTimePicker: () => (props: Record<string, unknown>) => {
-    mockState.picks.push(props);
-    return null;
-  },
-}));
-
-vi.mock("@multiplatform.one/platform", async (importOriginal) => {
-  const actual = (await importOriginal()) as Record<string, unknown>;
-  const real = actual.platform as Record<string, unknown>;
-  return {
-    ...actual,
-    platform: new Proxy(
-      {},
-      {
-        get(_target, prop) {
-          if (prop === "isIos") return mockState.isIos;
-          if (prop === "isAndroid") return mockState.isAndroid;
-          return real[prop as string];
-        },
-      },
-    ),
-  };
-});
-
 // Mock react-native-reanimated to prevent ESM module resolution failures
 // (same shim as tests/fieldRenderers.spec.tsx).
 vi.mock("react-native-reanimated", () => ({
@@ -95,9 +59,9 @@ vi.mock("react-native-reanimated", () => ({
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
+import { toFrappeDateValue } from "./wire";
 
 const loadWebDateField = async () => (await import(".")).Date;
-const loadNativeDateField = async () => (await import("./index.native")).Date;
 
 /** Intl puts a narrow no-break space before the meridiem; no test should care. */
 const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
@@ -155,10 +119,12 @@ async function pressText(root: ParentNode, text: string) {
   let target: Element | null = null;
   await waitFor(
     () => {
-      const node = Array.from(root.querySelectorAll("*")).find(
-        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
-      );
-      if (!node) throw new Error(`no element with text "${text}"`);
+      // LC-260: Next and Done are icon buttons, named by their label.
+      const node =
+        Array.from(root.querySelectorAll("*")).find(
+          (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
+        ) ?? root.querySelector(`[aria-label="${text}"]`);
+      if (!node) throw new Error(`no element with text or label "${text}"`);
       target = node;
     },
     { timeout: 30_000 },
@@ -180,16 +146,13 @@ async function selectPeriod(period: "AM" | "PM") {
 // (110-155s quiet, past 240s under load), and charging it to an assertion made
 // whichever case ran first time out.
 beforeAll(async () => {
-  await Promise.all([loadWebDateField(), loadNativeDateField()]);
+  await loadWebDateField();
 }, 900_000);
 
 beforeEach(() => {
   // Both halves portal their surfaces, so a previous case's chrome would
   // otherwise still be in the document when the next one queries it.
   cleanup();
-  mockState.picks.length = 0;
-  mockState.isIos = true;
-  mockState.isAndroid = false;
 });
 
 // ---------------------------------------------------------------------------
@@ -356,41 +319,14 @@ describe("web Date field — type=datetime renders date AND time", () => {
 // Cross-half parity — the reason one `wire.ts` body is shared
 // ---------------------------------------------------------------------------
 
-/** Drive the native half through a pick and return the single emitted string. */
-async function nativePick(
-  type: "date" | "datetime" | "time",
-  value: string,
-  triggerText: string,
-  steps: Date[],
-): Promise<string> {
-  const DateField = await loadNativeDateField();
-  const onChange = vi.fn();
-  const result = renderWithProviders(
-    <DateField label="Field" value={value} onChange={onChange} type={type} />,
-  );
-  await pressText(result.container, triggerText);
-  await waitFor(() => expect(mockState.picks.length).toBeGreaterThan(0), { timeout: 30_000 });
-
-  for (const [index, step] of steps.entries()) {
-    const onPickerChange = mockState.picks[mockState.picks.length - 1].onChange as (
-      event: unknown,
-      date?: Date,
-    ) => void;
-    await act(async () => {
-      onPickerChange({ type: "set" }, step);
-    });
-    // A datetime runs calendar → Next → wheel; the sheet's Next is the seam.
-    if (index === 0 && steps.length > 1) {
-      await pressText(document.body, "Next");
-      await waitFor(() => expect(mockState.picks[mockState.picks.length - 1].mode).toBe("time"), {
-        timeout: 30_000,
-      });
-    }
-  }
-  await pressText(document.body, "Done");
-
-  expect(onChange).toHaveBeenCalledTimes(1);
-  return onChange.mock.calls[0][0] as string;
+/**
+ * What the catalog writes for the moment an OS sheet commits on native: forms'
+ * native `DatePicker` and `DatetimePicker` hand the field a `Date`, and its
+ * `TimePicker` an `HH:mm:ss` string, through the same `onChange` the web
+ * pickers use.
+ */
+function nativeWrite(type: "date" | "datetime" | "time", committed: Date): string {
+  return toFrappeDateValue(committed, type);
 }
 
 /** Drive the web half through the equivalent pick and return the last string. */
@@ -419,9 +355,7 @@ describe("web and native persist byte-identical wire strings", () => {
         fireEvent.click(dayCell(15)!);
       });
     });
-    cleanup();
-    mockState.picks.length = 0;
-    const native = await nativePick("date", "2026-03-05", "Mar 5, 2026", [new Date(2026, 2, 15)]);
+    const native = nativeWrite("date", new Date(2026, 2, 15));
 
     expect({ web, native }).toEqual({ web: "2026-03-15", native: "2026-03-15" });
     expect(web).toBe(native);
@@ -431,11 +365,7 @@ describe("web and native persist byte-identical wire strings", () => {
     const web = await webPick("time", "09:00:00", async () => {
       await selectPeriod("PM");
     });
-    cleanup();
-    mockState.picks.length = 0;
-    const native = await nativePick("time", "09:00:00", "9:00 AM", [
-      new Date(2026, 2, 5, 21, 0, 0),
-    ]);
+    const native = nativeWrite("time", new Date(2026, 2, 5, 21, 0, 0));
 
     expect({ web, native }).toEqual({ web: "21:00:00", native: "21:00:00" });
     expect(web).toBe(native);
@@ -448,14 +378,8 @@ describe("web and native persist byte-identical wire strings", () => {
         fireEvent.click(dayCell(20)!);
       });
     });
-    cleanup();
-    mockState.picks.length = 0;
-    // The native two-step: the calendar commits the day (dropping the clock,
-    // which is why the wheel step re-supplies it), then the wheel commits it.
-    const native = await nativePick("datetime", "2026-03-05 14:30:00", "Mar 5, 2026, 2:30 PM", [
-      new Date(2026, 2, 20),
-      new Date(2026, 0, 1, 14, 30),
-    ]);
+    // The OS sheet's calendar-then-wheel commits one moment from both halves.
+    const native = nativeWrite("datetime", new Date(2026, 2, 20, 14, 30));
 
     expect({ web, native }).toEqual({
       web: "2026-03-20 14:30:00",

package/src/fields/FileUpload.spec.tsx

@@ -123,7 +123,7 @@ describe("FileUpload size gate", () => {
  * `aria-label` still fails. Recorded on MPO-123.
  */
 const buttonLabelled = (container: HTMLElement, prefix: string) =>
-  Array.from(container.querySelectorAll("button")).find((b) =>
+  Array.from(container.querySelectorAll('button, [role="button"]')).find((b) =>
     (b.getAttribute("aria-label") ?? "").startsWith(prefix),
   );
 
@@ -226,8 +226,9 @@ describe("FileUpload transfer", () => {
       /^Retry \S/,
     );
     expect(remove?.getAttribute("aria-label")).toMatch(/^Remove \S/);
-    // The visible text stays the short verb; the file name lives on the label.
-    expect(buttonLabelled(result.container, "Retry ")?.textContent).toContain("Retry");
+    // LC-260: the button shows only its glyph; the name lives on the label.
+    expect(buttonLabelled(result.container, "Retry ")?.textContent).toBe("");
+    expect(buttonLabelled(result.container, "Retry ")?.querySelector("svg")).toBeTruthy();
 
     await act(async () => {
       fireEvent.click(buttonLabelled(result.container, "Retry ") as Element);
@@ -292,6 +293,20 @@ describe("FileUpload with a value", () => {
     expect(onChange).toHaveBeenCalledWith("");
   });
 
+  it("an image's Replace and Remove are glyphs on the media plate over it (LC-260, LC-176)", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Photo" value="/files/sprite.png" isImage onChange={() => {}} />,
+    );
+    const actions = result.container.querySelector('[data-file-upload="preview-actions"]');
+    expect(actions).toBeTruthy();
+    const buttons = Array.from(actions!.querySelectorAll("[data-mp-action]"));
+    expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual(["Replace", "Remove"]);
+    for (const button of buttons) {
+      expect(button.getAttribute("data-mp-icon-button")).toBe("media");
+      expect(button.textContent).toBe("");
+    }
+  });
+
   it("readOnly hides Replace and Remove — the value is visible, not editable", () => {
     const result = renderWithProviders(
       <FileUpload label="Attachment" value="/files/report.pdf" readOnly onChange={() => {}} />,

package/src/fields/FileUpload.tsx

@@ -1,13 +1,13 @@
 import { useFrappeCollection } from "@multiplatform.one/frappe";
 import { Skeleton } from "@multiplatform.one/forms";
-import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import { FileIcon, UploadIcon } from "@phosphor-icons/react";
 import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Image, Label, Text as TamaguiText, XStack, YStack } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
-import { Text } from "@multiplatform.one/components";
+import { Text, ActionButton } from "@multiplatform.one/components";
 
 export type FrappeFileUploadHandler = (
   file: File,
@@ -291,6 +291,28 @@ export function FileUpload({
     );
   }
 
+  // LC-260 ICONS-OVER-WORDS: Replace and Remove are their symbols, floating
+  // over an image on the LC-176 media plate.
+  const fileActions =
+    !readOnly && !transfer
+      ? (overMedia: boolean) => (
+          <>
+            <ActionButton
+              kind="replace"
+              overMedia={overMedia}
+              disabled={isLocked}
+              onPress={handleClick}
+            />
+            <ActionButton
+              kind="remove"
+              overMedia={overMedia}
+              disabled={isLocked}
+              onPress={handleRemove}
+            />
+          </>
+        )
+      : undefined;
+
   return (
     <YStack {...knobProps.gap}>
       {label && (
@@ -325,17 +347,12 @@ export function FileUpload({
               </Text>
             </YStack>
             {transfer.status === "uploading" ? (
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={XIcon}
-                aria-label={t("Cancel {{name}}", { name: transfer.file.name })}
+              <ActionButton
+                kind="cancel"
+                label={t("Cancel {{name}}", { name: transfer.file.name })}
                 disabled={isLocked}
                 onPress={handleCancel}
-                {...knobProps.borderRadius}
-              >
-                {t("Cancel")}
-              </Button>
+              />
             ) : null}
           </XStack>
           {transfer.status === "uploading" ? (
@@ -364,27 +381,18 @@ export function FileUpload({
                 {transfer.action}
               </Text>
               <XStack {...knobProps.gap}>
-                <Button
-                  size="$2"
-                  variant="outlined"
-                  aria-label={t("Retry {{name}}", { name: transfer.file.name })}
+                <ActionButton
+                  kind="retry"
+                  label={t("Retry {{name}}", { name: transfer.file.name })}
                   disabled={isLocked}
                   onPress={handleRetry}
-                  {...knobProps.borderRadius}
-                >
-                  {t("Retry")}
-                </Button>
-                <Button
-                  size="$2"
-                  variant="outlined"
-                  icon={XIcon}
-                  aria-label={t("Remove {{name}}", { name: transfer.file.name })}
+                />
+                <ActionButton
+                  kind="remove"
+                  label={t("Remove {{name}}", { name: transfer.file.name })}
                   disabled={isLocked}
                   onPress={handleRemoveFailed}
-                  {...knobProps.borderRadius}
-                >
-                  {t("Remove")}
-                </Button>
+                />
               </XStack>
             </YStack>
           ) : null}
@@ -404,8 +412,8 @@ export function FileUpload({
       ) : null}
 
       {value ? (
-        <YStack {...knobProps.gap}>
-          {isImage ? (
+        isImage ? (
+          <YStack position="relative" alignSelf="flex-start">
             <Image
               // src (string), not source: the RN source object leaks onto the
               // DOM <img> as source="[object Object]" on web
@@ -416,45 +424,33 @@ export function FileUpload({
               {...knobProps.borderRadius}
               objectFit="cover"
             />
-          ) : (
-            <XStack
-              gap="$2"
-              alignItems="center"
-              {...knobProps.panelPadding}
-              {...{ backgroundColor: "$color2" }}
-            >
-              <FileIcon size={20} />
-              <Text flex={1} numberOfLines={1}>
-                {value.split("/").pop() || value}
-              </Text>
-            </XStack>
-          )}
-
-          {!readOnly && !transfer ? (
-            <XStack {...knobProps.gap}>
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={UploadIcon}
-                disabled={isLocked}
-                onPress={handleClick}
-                {...knobProps.borderRadius}
+            {fileActions ? (
+              <XStack
+                data-file-upload="preview-actions"
+                position="absolute"
+                top="$2"
+                right="$2"
+                zIndex={1}
+                {...knobProps.gap}
               >
-                {t("Replace")}
-              </Button>
-              <Button
-                size="$2"
-                variant="outlined"
-                icon={XIcon}
-                disabled={isLocked}
-                onPress={handleRemove}
-                {...knobProps.borderRadius}
-              >
-                {t("Remove")}
-              </Button>
-            </XStack>
-          ) : null}
-        </YStack>
+                {fileActions(true)}
+              </XStack>
+            ) : null}
+          </YStack>
+        ) : (
+          <XStack
+            gap="$2"
+            alignItems="center"
+            {...knobProps.panelPadding}
+            {...{ backgroundColor: "$color2" }}
+          >
+            <FileIcon size={20} />
+            <Text flex={1} numberOfLines={1}>
+              {value.split("/").pop() || value}
+            </Text>
+            {fileActions?.(false)}
+          </XStack>
+        )
       ) : null}
 
       {helperText && !error && !transfer ? (

package/src/frappeRemainder.designLaw.spec.ts

@@ -84,13 +84,14 @@ describe("Frappe remainder wrappers — design-law 100%", () => {
     expect(stories).toMatch(/from ["']\.\/ChartCard["']/);
   });
 
-  it("FrappeImageView uses catalog Card, controlIcon icons, and no media pip (R11/R12)", () => {
+  it("FrappeImageView is the MPO ImageGrid photos grid, controlIcon icons, and no media pip (R11/R12, LC-264)", () => {
     const source = read("FrappeImageView.tsx");
-    expect(source).toContain("Card");
+    expect(source).toMatch(/ImageGrid[\s\S]*from "@multiplatform.one\/components"/);
+    expect(source).toContain('variant="photos"');
     expect(source).toContain("controlIcon");
     expect(source).not.toMatch(/size=\{48\}/);
     expect(source).not.toContain("<Tint");
-    expect(source).toContain("No status pip");
+    expect(source).toMatch(/no pip/i);
   });
 
   it("FrappeTreeView uses label fragment and controlIcon, not 12/14px", () => {
@@ -156,10 +157,10 @@ describe("Frappe remainder wrappers — design-law 100%", () => {
     expect(list).toContain("formCommonColors.muted");
   });
 
-  it("native Date trigger/actions are house Button", () => {
-    const source = read("fields/Date/index.native.tsx");
-    expect(source).toMatch(/Button[\s\S]*from "@multiplatform.one\/forms"/);
-    expect(source).not.toMatch(/Button.*from "tamagui"/);
+  it("native Date is the catalog field on the forms pickers, not a fork (LC-175)", () => {
+    const source = read("fields/Date/catalog.tsx");
+    expect(source).toMatch(/DatePicker[\s\S]*from "@multiplatform.one\/forms"/);
+    expect(read("fields/Date/index.tsx")).toContain('export { Date } from "./catalog"');
   });
 
   it("fieldRegistry TextEditor fallback is Skeleton; SmallText/LongText use textAreaProps", () => {

package/src/insights/InsightsFacetTags.tsx

@@ -1,97 +1,7 @@
-import { Tags, Text, XStack, isWeb } from "@multiplatform.one/components";
-import {
-  ensureFocusVisibleRing,
-  ensureKeyboardModalityTracking,
-  keyboardFocusRingProps,
-  useResolvedKnobs,
-  wasKeyboardFocus,
-} from "@multiplatform.one/theme";
-import { useState } from "react";
+import { Chip, Tags } from "@multiplatform.one/components";
 import { useTranslation } from "react-i18next";
 import type { InsightsCount } from "./insightsData";
 
-const chipFocusRing = ensureFocusVisibleRing(keyboardFocusRingProps);
-
-interface FacetTagChipProps {
-  value: string;
-  count: number;
-  label: string;
-  tint?: string;
-  onPress: () => void;
-  testID?: string;
-}
-
-/**
- * A pressable facet value painted from its tint's ramp (DF-04), at the
- * compact nestedControl height with the press target restored by hitSlop
- * (LC-54, LC-73); the keyboard ring rides the whole chip (LC-71).
- */
-function FacetTagChip({ value, count, label, tint = "gray", onPress, testID }: FacetTagChipProps) {
-  const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
-  const nested = knobProps.nestedControl;
-  const [kbFocus, setKbFocus] = useState(false);
-  if (isWeb) ensureKeyboardModalityTracking();
-  return (
-    <XStack
-      {...knobProps.borderRadius}
-      role="button"
-      tabIndex={0}
-      aria-label={t("{{value}}, {{count}} records", { value: label, count })}
-      cursor="pointer"
-      alignItems="center"
-      gap="$1.5"
-      paddingHorizontal="$2"
-      minHeight={nested.px}
-      height={nested.px}
-      hitSlop={nested.hitSlop}
-      data-nested-px={nested.px}
-      backgroundColor={`$${tint}3` as never}
-      hoverStyle={{ backgroundColor: `$${tint}4` as never }}
-      pressStyle={{ backgroundColor: `$${tint}5` as never }}
-      outlineWidth={0}
-      focusStyle={{ outlineWidth: 0 }}
-      focusVisibleStyle={chipFocusRing}
-      {...(isWeb
-        ? {
-            onFocus: () => {
-              if (wasKeyboardFocus()) setKbFocus(true);
-            },
-            onBlur: () => setKbFocus(false),
-            onKeyDown: (event: { key?: string; preventDefault?: () => void }) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault?.();
-                onPress();
-              }
-            },
-          }
-        : undefined)}
-      {...(kbFocus ? keyboardFocusRingProps : undefined)}
-      onPress={onPress}
-      testID={testID ? `${testID}-${value}` : undefined}
-    >
-      <XStack
-        width="$1"
-        height="$1"
-        borderRadius={1000}
-        backgroundColor={`$${tint}9` as never}
-        flexShrink={0}
-      />
-      <Text
-        {...knobProps.label}
-        color={`$${tint}11` as never}
-        textTransform="capitalize"
-        userSelect="none"
-      >
-        {label}
-      </Text>
-      <Text {...knobProps.label} color={`$${tint}11` as never} opacity={0.7} userSelect="none">
-        {count}
-      </Text>
-    </XStack>
-  );
-}
-
 export interface InsightsFacetTagsProps {
   distribution: readonly InsightsCount[];
   label: (value: string) => string;
@@ -100,7 +10,10 @@ export interface InsightsFacetTagsProps {
   testID?: string;
 }
 
-/** A facet's values with their record counts, each opening the list narrowed to it. */
+/**
+ * A facet's values with their record counts as MPO `Chip`s painted from each
+ * value's ramp (DF-04, LC-175), each opening the list narrowed to it.
+ */
 export function InsightsFacetTags({
   distribution,
   label,
@@ -115,16 +28,22 @@ export function InsightsFacetTags({
       enableAdd={false}
       enableRemove={false}
       labels={{ noTags: t("No values yet") }}
-      renderTag={(tag) => (
-        <FacetTagChip
-          value={tag.id}
-          count={distribution.find((entry) => entry.value === tag.id)?.count ?? 0}
-          label={tag.label}
-          tint={tint?.(tag.id)}
-          onPress={() => onSelect(tag.id)}
-          testID={testID}
-        />
-      )}
+      renderTag={(tag) => {
+        const count = distribution.find((entry) => entry.value === tag.id)?.count ?? 0;
+        const hue = tint?.(tag.id) ?? "gray";
+        return (
+          <Chip
+            color={hue}
+            swatch={`$${hue}9` as never}
+            count={count}
+            aria-label={t("{{value}}, {{count}} records", { value: tag.label, count })}
+            onPress={() => onSelect(tag.id)}
+            testID={testID ? `${testID}-${tag.id}` : undefined}
+          >
+            {tag.label}
+          </Chip>
+        );
+      }}
     />
   );
 }

package/src/list/FacetBadge.tsx

@@ -1,44 +1,22 @@
-import { Text, XStack } from "@multiplatform.one/components";
-import { hairlineWidth, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Chip, type ChipSize } from "@multiplatform.one/components";
 import type { SizeTokens } from "tamagui";
-import { facetBadgeSteps } from "./facetBadgeSteps";
 
 export interface FacetBadgeProps {
   label: string;
   /** Theme ramp (`"green"`) painting the badge (LC-147). */
   tint?: string;
-  /** Size token (Tamagui's own `size`); below `$true` the badge draws a step smaller. */
+  /** Size token (Tamagui's own `size`); omitted, the chip takes the ambient size. */
   size?: SizeTokens;
 }
 
 /**
- * One facet value as a static badge at the ambient size token, the tint's
- * step-4 fill, step-7 border and step-12 text (DF-04, AA in both schemes).
+ * One facet value as a static MPO `Chip` tinted from its ramp: the ramp's
+ * step-4 fill and step-12 ink, AA in both schemes (DF-04, LC-175).
  */
 export function FacetBadge({ label, tint = "gray", size }: FacetBadgeProps) {
-  const { knobProps } = useResolvedKnobs({ size });
-  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   return (
-    <XStack
-      {...knobProps.borderRadius}
-      paddingHorizontal={small ? "$1.5" : "$2"}
-      paddingVertical={small ? "$0.5" : "$1"}
-      backgroundColor={`$${tint}${facetBadgeSteps.fill}` as never}
-      borderColor={`$${tint}${facetBadgeSteps.border}` as never}
-      borderWidth={hairlineWidth}
-      alignItems="center"
-    >
-      <Text
-        {...knobProps.label}
-        {...knobProps.body}
-        textTransform="capitalize"
-        fontWeight="700"
-        color={`$${tint}${facetBadgeSteps.ink}` as never}
-        {...(small ? { fontSize: "$1" as const } : null)}
-        letterSpacing={0.3}
-      >
-        {label}
-      </Text>
-    </XStack>
+    <Chip color={tint} size={size as ChipSize | undefined}>
+      {label}
+    </Chip>
   );
 }