@cosmicdrift/kumiko-renderer-web 0.193.1 → 0.195.0

package/src/layout/__tests__/workspace-switcher.test.tsx

@@ -6,14 +6,14 @@
 // callback. Radix opens on pointerdown → userEvent instead of
 // fireEvent.click, same as language-switcher.test.tsx.
 
-import { describe, expect, mock, test } from "bun:test";
+import { describe, expect, mock, spyOn, test } from "bun:test";
 import {
   createStaticLocaleResolver,
   LocaleProvider,
   type WorkspaceSchema,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
-import { renderWithSidebar, screen } from "../../__tests__/test-utils";
+import { render, renderWithSidebar, screen } from "../../__tests__/test-utils";
 import { WorkspaceSwitcher } from "../workspace-switcher";
 
 function ws(id: string, label = id): WorkspaceSchema {
@@ -55,6 +55,66 @@ describe("WorkspaceSwitcher — Render", () => {
     expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-checked")).toBe("true");
   });
 
+  test("entries carry role=menuitemradio (exclusive choice), not menuitemcheckbox", async () => {
+    const user = userEvent.setup();
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={() => {}}
+      />,
+    );
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    expect(screen.getByTestId("workspace-tab-a").getAttribute("role")).toBe("menuitemradio");
+    expect(screen.getByTestId("workspace-tab-b").getAttribute("role")).toBe("menuitemradio");
+  });
+
+  test("trigger has an accessible name beyond the active workspace label", () => {
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="a"
+        onSelect={() => {}}
+      />,
+    );
+    expect(
+      screen.getByTestId("workspace-switcher-trigger").getAttribute("aria-label"),
+    ).toBeTruthy();
+  });
+
+  test("activeId zeigt auf keinen sichtbaren Workspace → Trigger zeigt Fallback-Label statt leerem span (fw#1816)", () => {
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="stale-id-not-in-list"
+        onSelect={() => {}}
+        testId="sw"
+      />,
+    );
+    expect(screen.getByTestId("sw").textContent).not.toBe("");
+    expect(screen.getByText("Select workspace")).toBeTruthy();
+  });
+
+  test("rendering outside a SidebarProvider throws — the JSDoc requirement is a real crash, not just documentation (fw#1816)", () => {
+    // SidebarMenuButton calls useSidebar() internally; without a
+    // SidebarProvider ancestor that throws synchronously during render.
+    // Silence the expected console.error noise React logs alongside it.
+    const consoleError = spyOn(console, "error").mockImplementation(() => {});
+    try {
+      expect(() =>
+        render(
+          <WorkspaceSwitcher
+            workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+            activeId="a"
+            onSelect={() => {}}
+          />,
+        ),
+      ).toThrow(/useSidebar must be used within a SidebarProvider/);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
   test("Click auf einen Eintrag ruft onSelect mit der Workspace-id", async () => {
     const user = userEvent.setup();
     const onSelect = mock((_id: string) => {});

package/src/layout/sidebar-panel.tsx

@@ -22,6 +22,7 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
 
 type SlotElement = HTMLElement | null;
@@ -57,10 +58,6 @@ const DEFAULT_WIDTH = 340;
 const DEFAULT_MIN = 260;
 const DEFAULT_MAX = 640;
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
 function readStoredWidth(key: string | undefined): number | null {
   if (key === undefined || typeof window === "undefined") return null;
   const raw = window.localStorage.getItem(key);

package/src/layout/workspace-switcher.tsx

@@ -20,8 +20,9 @@ import { ChevronsUpDown } from "lucide-react";
 import type { ReactNode } from "react";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "../primitives/dropdown-menu";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
@@ -33,6 +34,12 @@ export type WorkspaceSwitcherProps = {
   readonly testId?: string;
 };
 
+/**
+ * Requires an ancestor `SidebarProvider` (see `../ui/sidebar`) — this
+ * component renders `SidebarMenuButton`, which calls `useSidebar()`
+ * internally and throws ("useSidebar must be used within a
+ * SidebarProvider.") when rendered outside one.
+ */
 export function WorkspaceSwitcher({
   workspaces,
   activeId,
@@ -57,22 +64,28 @@ export function WorkspaceSwitcher({
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <SidebarMenuButton data-testid="workspace-switcher-trigger">
-              <span className="truncate">{active !== undefined ? labelOf(active) : ""}</span>
+            <SidebarMenuButton
+              data-testid="workspace-switcher-trigger"
+              aria-label={t("kumiko.workspace.switch")}
+            >
+              <span className="truncate">
+                {active !== undefined ? labelOf(active) : t("kumiko.workspace.select")}
+              </span>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="min-w-[10rem]">
-            {workspaces.map((ws) => (
-              <DropdownMenuCheckboxItem
-                key={ws.definition.id}
-                checked={ws.definition.id === activeId}
-                data-testid={`workspace-tab-${ws.definition.id}`}
-                onSelect={() => onSelect(ws.definition.id)}
-              >
-                <span className="truncate">{labelOf(ws)}</span>
-              </DropdownMenuCheckboxItem>
-            ))}
+            <DropdownMenuRadioGroup value={activeId} onValueChange={onSelect}>
+              {workspaces.map((ws) => (
+                <DropdownMenuRadioItem
+                  key={ws.definition.id}
+                  value={ws.definition.id}
+                  data-testid={`workspace-tab-${ws.definition.id}`}
+                >
+                  <span className="truncate">{labelOf(ws)}</span>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>

package/src/lib/__tests__/resize-image.test.ts

@@ -49,7 +49,9 @@ describe("resizeImageBeforeUpload", () => {
     globalThis.createImageBitmap = mock(async () => bitmap);
 
     try {
-      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.jpg", { type: "image/jpeg" });
       const result = await resizeImageBeforeUpload(file, 2560);
       expect(capturedWidth).toBe(2560);
       expect(capturedHeight).toBe(1280);
@@ -81,7 +83,9 @@ describe("resizeImageBeforeUpload", () => {
     }));
 
     try {
-      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.heic", { type: "image/heic" });
       const result = await resizeImageBeforeUpload(file);
       expect(result.name).toBe("photo.jpg");
       expect(result.type).toBe("image/jpeg");
@@ -114,7 +118,9 @@ describe("resizeImageBeforeUpload", () => {
     }));
 
     try {
-      const file = new File(["x"], "photo.webp", { type: "image/webp" });
+      // Content sized well above the 1-byte re-encoded blob so the resize
+      // wins the size-guard and the assertions below observe its output.
+      const file = new File(["x".repeat(2000)], "photo.webp", { type: "image/webp" });
       const result = await resizeImageBeforeUpload(file);
       expect(result.name).toBe("photo.png");
       expect(result.type).toBe("image/png");
@@ -126,6 +132,39 @@ describe("resizeImageBeforeUpload", () => {
     }
   });
 
+  test("belässt ein bereits optimiertes Bild unverändert, wenn der Re-Encode es vergrößern würde", async () => {
+    // A small in-spec PNG (e.g. palette-optimized) round-tripped through a
+    // canvas can come back as a bigger full-RGBA blob — the size guard must
+    // then keep serving the original bytes instead of the larger re-encode.
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x".repeat(2000)], { type: "image/png" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const file = new File(["x"], "photo.png", { type: "image/png" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+      expect(result.size).toBeLessThanOrEqual(file.size);
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
   test("fällt bei Decode-Fehlern auf die Originaldatei zurück", async () => {
     class FakeOffscreenCanvas {
       getContext() {

package/src/lib/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/lib/resize-image.ts

@@ -54,7 +54,12 @@ export async function resizeImageBeforeUpload(
     const actualType = blob.type || file.type;
     const fileName =
       actualType === file.type ? file.name : withMatchingExtension(file.name, actualType);
-    return new File([blob], fileName, { type: actualType });
+    const resized = new File([blob], fileName, { type: actualType });
+    // Only takes the re-encode if it actually shrank the file — a
+    // palette-optimized PNG or a small in-spec photo can come back larger
+    // after a full RGBA canvas round-trip. EXIF/GPS stripping is then
+    // best-effort: an original that's kept as-is keeps its metadata too.
+    return resized.size < file.size ? resized : file;
   } catch {
     return file;
   }

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -183,13 +183,25 @@ describe("defaultCellRender", () => {
     expect(result).not.toMatch(/[.,]\d\d$/);
   });
 
-  test("money → rehydrated { amount major, amountMinor } uses amountMinor (not major×100 wrong)", () => {
-    // rehydrateMoney (fw#1830): amount is major units, amountMinor is cents.
-    // formatMoney expects cents — using amount would show 100× too small.
+  test("money → rehydrated { amount major, amountMinor } derives minor units from amount + currencyDecimals", () => {
+    // rehydrateMoney (fw#1830): amount is major units, amountMinor is a flat
+    // ×100 scale that disagrees with currencyDecimals for non-2-decimal
+    // currencies — defaultCellRender ignores amountMinor and derives minor
+    // units from `amount` instead (see index.tsx).
     const result = defaultCellRender({ amount: 119, currency: "EUR", amountMinor: 11900 }, "money");
     expect(result.replace(/[^0-9]/g, "")).toBe("11900");
   });
 
+  test("money → zero-decimal currency (JPY) ignores amountMinor's mismatched flat scale", () => {
+    const result = defaultCellRender({ amount: 500, currency: "JPY", amountMinor: 50000 }, "money");
+    expect(result.replace(/[^0-9]/g, "")).toBe("500");
+  });
+
+  test("money → three-decimal currency (BHD) ignores amountMinor's mismatched flat scale", () => {
+    const result = defaultCellRender({ amount: 1.5, currency: "BHD", amountMinor: 150 }, "money");
+    expect(result.replace(/[^0-9]/g, "")).toBe("1500");
+  });
+
   test("money → unerwarteter Value-Shape fällt auf String zurück", () => {
     expect(defaultCellRender(45000, "money")).toBe("45000");
   });

package/src/primitives/__tests__/date-field.test.tsx

@@ -0,0 +1,37 @@
+// DateField rendering tests — happy-dom + @testing-library/react. Pins
+// that the input's `placeholder` actually comes from `t()` + resolvedLocale
+// (date-parse.test.ts only covers the pure formatDatePlaceholder logic; a
+// wrong/renamed i18n key or a missing LocaleProvider fallback would stay
+// green there).
+
+import { describe, expect, test } from "bun:test";
+import {
+  createStaticLocaleResolver,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { render, screen } from "@testing-library/react";
+import { DateField } from "../date-field";
+
+function renderWithLocale(locale: string) {
+  return render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <DateField id="date" name="date" value="" onChange={() => {}} locale={locale} />
+    </LocaleProvider>,
+  );
+}
+
+describe("DateField placeholder", () => {
+  test("de-DE → placeholder built from t() keys, not a hardcoded pattern", () => {
+    renderWithLocale("de-DE");
+    expect(screen.getByRole("textbox").getAttribute("placeholder")).toBe("TT.MM.JJJJ");
+  });
+
+  test("en-US → placeholder built from t() keys, not a hardcoded pattern", () => {
+    renderWithLocale("en-US");
+    expect(screen.getByRole("textbox").getAttribute("placeholder")).toBe("MM/DD/YYYY");
+  });
+});

package/src/primitives/__tests__/date-parse.test.ts

@@ -5,6 +5,7 @@
 // rejection.
 
 import { describe, expect, test } from "bun:test";
+import { kumikoDefaultTranslations } from "@cosmicdrift/kumiko-renderer";
 import { Temporal } from "temporal-polyfill";
 import {
   formatDateForInput,
@@ -14,8 +15,19 @@ import {
   toIso,
 } from "../date-parse";
 
-const dePlaceholderLetters = { year: "J", month: "M", day: "T" };
-const enPlaceholderLetters = { year: "Y", month: "M", day: "D" };
+// Derived from kumikoDefaultTranslations instead of hardcoded so a drift in
+// the i18n defaults (e.g. renaming "T" → "D") fails this test too.
+function placeholderLetters(locale: "de" | "en"): { year: string; month: string; day: string } {
+  const bundle = kumikoDefaultTranslations[locale];
+  return {
+    year: bundle?.["kumiko.field.dateField.placeholderYear"] ?? "",
+    month: bundle?.["kumiko.field.dateField.placeholderMonth"] ?? "",
+    day: bundle?.["kumiko.field.dateField.placeholderDay"] ?? "",
+  };
+}
+
+const dePlaceholderLetters = placeholderLetters("de");
+const enPlaceholderLetters = placeholderLetters("en");
 
 describe("parseIso", () => {
   test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -2,7 +2,7 @@
 // test interacts with the rendered DOM (click/type/paste) and asserts on
 // the outcome; none merely check that the component mounts.
 
-import { describe, expect, mock, test } from "bun:test";
+import { describe, expect, mock, spyOn, test } from "bun:test";
 import type { FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type { EmbeddedListColumn, EmbeddedListInputProps } from "@cosmicdrift/kumiko-renderer";
 import {
@@ -11,9 +11,15 @@ import {
   LocaleProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import { fireEvent, render, screen, within } from "@testing-library/react";
-import { type ReactElement, useState } from "react";
+import { act, type ReactElement, useState } from "react";
 import { EmbeddedListInput } from "../embedded-list-input";
 
+function setViewportWidth(width: number): void {
+  (
+    window as unknown as { happyDOM: { setInnerWidth: (n: number) => void } }
+  ).happyDOM.setInnerWidth(width);
+}
+
 function renderWithLocale(ui: ReactElement) {
   return render(
     <LocaleProvider
@@ -118,12 +124,53 @@ describe("EmbeddedListInput — desktop/mobile are mutually exclusive mounts (#1
   });
 
   test("mobile viewport mounts only the card layout, not the table", () => {
+    const originalWidth = window.innerWidth;
+    setViewportWidth(500);
+    try {
+      renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+      expect(screen.getByTestId("lines-mobile")).toBeTruthy();
+      expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
+    } finally {
+      setViewportWidth(originalWidth);
+    }
+  });
+
+  test("mobile viewport at mount never creates the desktop table — no mount-then-discard flicker (fw#1868)", () => {
+    // The old useIsMobile hook only set its value in a useEffect, so the
+    // very first render always mounted the desktop table (isMobile=false)
+    // before an effect swapped in the mobile cards — even on a phone. Since
+    // effects flush synchronously inside render()'s act(), a plain post-
+    // render DOM assertion can't tell the two implementations apart (both
+    // end up correct); spying on document.createElement across the whole
+    // render call is the only way to prove a <table> was never built at all.
     const originalWidth = window.innerWidth;
     window.innerWidth = 500;
+    const createElementSpy = spyOn(document, "createElement");
     try {
       renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
       expect(screen.getByTestId("lines-mobile")).toBeTruthy();
       expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(createElementSpy.mock.calls.some(([tag]) => tag === "table")).toBe(false);
+    } finally {
+      window.innerWidth = originalWidth;
+      createElementSpy.mockRestore();
+    }
+  });
+
+  test("resizing past the breakpoint after mount swaps the table for the card layout", async () => {
+    const originalWidth = window.innerWidth;
+    try {
+      renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+      expect(screen.getByTestId("lines-desktop")).toBeTruthy();
+
+      await act(async () => {
+        window.innerWidth = 500;
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(screen.getByTestId("lines-mobile")).toBeTruthy();
       expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
     } finally {
       window.innerWidth = originalWidth;
@@ -626,6 +673,34 @@ describe("EmbeddedListInput — currency (#1839)", () => {
   });
 });
 
+describe("EmbeddedListInput — totals follow the app locale, not the browser locale", () => {
+  test("a de-DE app locale formats both the money total and a plain number total with '.' thousands / ',' decimal", () => {
+    const rows = [{ description: "A", quantity: 1234.5, amount: 150099 }];
+    render(
+      <LocaleProvider
+        resolver={createStaticLocaleResolver({ locale: "de-DE" })}
+        fallbackBundles={[kumikoDefaultTranslations]}
+      >
+        <EmbeddedListInput
+          {...baseProps({
+            rows,
+            currency: "EUR",
+            totals: [
+              { field: "amount", label: "Sum", value: 150099 },
+              { field: "quantity", label: "Qty total", value: 1234.5 },
+            ],
+          })}
+        />
+      </LocaleProvider>,
+    );
+    const totals = within(screen.getByTestId("lines-desktop")).getByTestId("lines-totals");
+    // de-DE: money "1.500,99 €", plain number "1.234,5" — both use "." as
+    // the thousands separator and "," as the decimal separator.
+    expect(totals.textContent).toContain("1.500,99");
+    expect(totals.textContent).toContain("1.234,5");
+  });
+});
+
 describe("EmbeddedListInput — desktop table width (solon#107)", () => {
   test("the table keeps min-w-max so columns don't shrink below their width classes", () => {
     const rows = [{ description: "A", quantity: 1, amount: 100 }];

package/src/primitives/__tests__/file-upload.test.tsx

@@ -23,3 +23,27 @@ describe("FileUploadInput — image variant preview src (#1950)", () => {
     expect(container.querySelector("img")?.getAttribute("src")).toBe("/api/files/abc");
   });
 });
+
+describe("FileUploadInput — camera capture (#1953)", () => {
+  test("with capture set, the <input type=file> carries the capture attribute", () => {
+    const { container } = render(
+      <FileUploadInput
+        kind="image"
+        id="avatar"
+        value={null}
+        onChange={noop}
+        capture="environment"
+      />,
+    );
+    expect(container.querySelector('input[type="file"]')?.getAttribute("capture")).toBe(
+      "environment",
+    );
+  });
+
+  test("without capture, the <input type=file> has no capture attribute", () => {
+    const { container } = render(
+      <FileUploadInput kind="image" id="avatar" value={null} onChange={noop} />,
+    );
+    expect(container.querySelector('input[type="file"]')?.hasAttribute("capture")).toBe(false);
+  });
+});

package/src/primitives/date-field.tsx

@@ -105,6 +105,14 @@ export function DateField({
         disabled={disabled}
         required={required}
         aria-invalid={hasError === true ? true : undefined}
+        // Deliberate: slot order/separator follow resolvedLocale (the
+        // `locale` prop, or the browser locale), but the letters follow
+        // the app's UI locale via t() — a caller rendering a date in a
+        // locale that differs from the UI locale gets a mixed-locale
+        // placeholder (e.g. German UI + locale="en-US" → "MM/TT/JJJJ").
+        // Accepted for now (fw#1879): a static per-locale letter lookup
+        // would need its own locale-root resolution and tests for a
+        // placeholder-only, Low-severity mismatch.
         placeholder={formatDatePlaceholder(resolvedLocale, {
           year: t("kumiko.field.dateField.placeholderYear"),
           month: t("kumiko.field.dateField.placeholderMonth"),

package/src/primitives/date-parse.ts

@@ -80,7 +80,12 @@ function localeDateParts(locale: string): Intl.DateTimeFormatPart[] {
   const refEpochMillis = activeTemporal()
     .PlainDate.from({ year: 2026, month: 1, day: 2 })
     .toZonedDateTime("UTC").epochMilliseconds;
-  return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(refEpochMillis);
+  return new Intl.DateTimeFormat(locale, {
+    timeZone: "UTC",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).formatToParts(refEpochMillis);
 }
 
 // Field order of the numeric locale format. de → [d,m,y], en-US →

package/src/primitives/dropdown-menu.tsx

@@ -83,6 +83,29 @@ export function DropdownMenuCheckboxItem({
   );
 }
 
+export const DropdownMenuRadioGroup = Primitive.RadioGroup;
+
+// RadioItem with a dot indicator on the left — for exclusive single-choice
+// selection (e.g. WorkspaceSwitcher). Unlike CheckboxItem, Radix renders
+// role="menuitemradio" + aria-checked here instead of role="menuitemcheckbox",
+// which announces "one of several" to screen readers instead of "on/off".
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): ReactNode {
+  return (
+    <Primitive.RadioItem className={cn(itemClass, "pl-8 pr-2", className)} {...props}>
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Primitive.ItemIndicator>
+          <Check className="h-3.5 w-3.5" />
+        </Primitive.ItemIndicator>
+      </span>
+      {children}
+    </Primitive.RadioItem>
+  );
+}
+
 export function DropdownMenuLabel({
   className,
   ...props