@primitiv-ui/react 0.1.30 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./src/index.ts",

package/src/RadioCard/README.md

@@ -27,7 +27,7 @@ import { RadioCard } from "@primitiv-ui/react";
 | Export | Element | ARIA / data hooks | `asChild` |
 |--------|---------|------------------|-----------|
 | `RadioCard.Root` | `<div>` | `role="radiogroup"` | yes |
-| `RadioCard.Item` | `<button>` | `role="radio"`, `aria-checked`, `data-state`, `tabIndex` | yes |
+| `RadioCard.Item` | `<button>` | `role="radio"`, `aria-checked`, `data-state`, `data-disabled`, `tabIndex` | yes |
 | `RadioCard.Indicator` | `<span>` | `aria-hidden="true"`, `data-state` | yes |
 
 ## State modes
@@ -131,3 +131,4 @@ to keep it in the DOM — `data-state="unchecked"` lets a CSS exit animation pla
 | Attribute | Values | Set on |
 |-----------|--------|--------|
 | `data-state` | `"checked"` \| `"unchecked"` | `RadioCard.Item`, `RadioCard.Indicator` |
+| `data-disabled` | `""` (present only while disabled) | `RadioCard.Item` |

package/src/RadioCard/RadioCard.tsx

@@ -157,8 +157,10 @@ RadioCardRoot.displayName = "RadioCardRoot";
  * excludes the Item from arrow-key navigation and the roving-tabindex
  * home base.
  *
- * **Styling hook.** `data-state="checked" | "unchecked"` mirrors the
- * selection state for CSS targeting.
+ * **Styling hooks.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state, and `data-disabled=""` is present while disabled — the
+ * same pair `CheckboxCard.Root` publishes, so one stylesheet can dress
+ * both.
  *
  * **`asChild` prop.** Pass `asChild` to render any consumer element with
  * the Item's ARIA, data-state, tabIndex, onClick, onKeyDown, disabled, and
@@ -223,6 +225,7 @@ export function RadioCardItem({
     role: "radio" as const,
     "aria-checked": isChecked,
     "data-state": isChecked ? ("checked" as const) : ("unchecked" as const),
+    "data-disabled": disabled ? "" : undefined,
     tabIndex: isTabStop ? 0 : -1,
     disabled,
     onClick: composeEventHandlers(onClick, () => select(value)),

package/src/RadioCard/__tests__/RadioCard.disabled-items.test.tsx

@@ -18,6 +18,29 @@ describe("RadioCard disabled items", () => {
     expect(screen.getByRole("radio", { name: "Starter" })).toBeDisabled();
   });
 
+  /*
+   * The styling hook, not just the native attribute. `[data-disabled]` is what
+   * the registry stylesheet keys the dimmed look off — the same hook
+   * `CheckboxCard.Root` already publishes — so without it the shipped disabled
+   * treatment silently never applies (found by measuring: a disabled RadioCard
+   * rendered at opacity 1 while a disabled CheckboxCard correctly dimmed).
+   */
+  it('sets data-disabled="" on a disabled item, and omits it otherwise', () => {
+    // Arrange & Act
+    render(
+      <RadioCard.Root aria-label="Plan">
+        <RadioCard.Item value="starter" disabled>
+          Starter
+        </RadioCard.Item>
+        <RadioCard.Item value="pro">Pro</RadioCard.Item>
+      </RadioCard.Root>,
+    );
+
+    // Assert
+    expect(screen.getByRole("radio", { name: "Starter" })).toHaveAttribute("data-disabled", "");
+    expect(screen.getByRole("radio", { name: "Pro" })).not.toHaveAttribute("data-disabled");
+  });
+
   it("does not change selection when a disabled item is clicked", async () => {
     // Arrange
     const user = userEvent.setup();