@primitiv-ui/react 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primitiv-ui/react",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "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).",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -42,6 +42,7 @@
42
42
  "@types/react-dom": "^19.2.3",
43
43
  "@vitejs/plugin-react": "^6.0.1",
44
44
  "@vitest/coverage-v8": "^4.1.4",
45
+ "class-variance-authority": "^0.7.1",
45
46
  "jsdom": "^29.0.2",
46
47
  "react": "^19.2.5",
47
48
  "react-dom": "^19.2.5",
@@ -64,6 +64,23 @@ the switch from the focus ring. `data-disabled=""` is set for CSS targeting.
64
64
  </Switch.Root>
65
65
  ```
66
66
 
67
+ ## Size
68
+
69
+ The styled surface installed by `primitiv add switch` exposes a `size` prop.
70
+ The default is `md`.
71
+
72
+ | Value | Description |
73
+ |-------|-------------|
74
+ | `xs` | Extra small |
75
+ | `sm` | Small |
76
+ | `md` | Medium (default) |
77
+ | `lg` | Large |
78
+ | `xl` | Extra large |
79
+
80
+ ```tsx
81
+ <Switch size="sm" aria-label="Enable notifications" />
82
+ ```
83
+
67
84
  ## The Thumb
68
85
 
69
86
  `Switch.Thumb` is **always mounted** — unlike `Checkbox.Indicator`, it never
@@ -0,0 +1,19 @@
1
+ import { switchRecipe } from "../../../../../registry/components/switch/switch.recipe";
2
+
3
+ describe("Switch recipe size variants", () => {
4
+ it("includes base class and defaults to md size", () => {
5
+ const result = switchRecipe();
6
+ expect(result).toContain("primitiv-switch");
7
+ expect(result).toContain("primitiv-switch--md");
8
+ });
9
+
10
+ it.each([
11
+ ["xs", "primitiv-switch--xs"],
12
+ ["sm", "primitiv-switch--sm"],
13
+ ["md", "primitiv-switch--md"],
14
+ ["lg", "primitiv-switch--lg"],
15
+ ["xl", "primitiv-switch--xl"],
16
+ ] as const)("applies %s size modifier class", (size, expected) => {
17
+ expect(switchRecipe({ size })).toContain(expected);
18
+ });
19
+ });