@vertz/ui-primitives 0.2.32 → 0.2.33

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.
Files changed (2) hide show
  1. package/README.md +41 -23
  2. package/package.json +14 -14
package/README.md CHANGED
@@ -23,23 +23,23 @@ This package depends on `@vertz/ui` for reactive state.
23
23
 
24
24
  ## Available Primitives
25
25
 
26
- | Primitive | Description |
27
- |-----------|-------------|
26
+ | Primitive | Description |
27
+ | ------------- | ------------------------------------------------------ |
28
28
  | **Accordion** | Collapsible sections with single or multiple expansion |
29
- | **Button** | Accessible button with press state |
30
- | **Checkbox** | Checkbox with indeterminate state support |
31
- | **Combobox** | Searchable dropdown with filtering |
32
- | **Dialog** | Modal dialog with focus trap and backdrop |
33
- | **Menu** | Dropdown menu with arrow key navigation |
34
- | **Popover** | Floating content anchored to a trigger |
35
- | **Progress** | Progress bar with indeterminate mode |
36
- | **Radio** | Radio button group with arrow key navigation |
37
- | **Select** | Single-select dropdown |
38
- | **Slider** | Range input with thumb and track |
39
- | **Switch** | Toggle switch (on/off) |
40
- | **Tabs** | Tabbed interface with keyboard navigation |
41
- | **Toast** | Notification toast with auto-dismiss |
42
- | **Tooltip** | Hover tooltip with pointer positioning |
29
+ | **Button** | Accessible button with press state |
30
+ | **Checkbox** | Checkbox with indeterminate state support |
31
+ | **Combobox** | Searchable dropdown with filtering |
32
+ | **Dialog** | Modal dialog with focus trap and backdrop |
33
+ | **Menu** | Dropdown menu with arrow key navigation |
34
+ | **Popover** | Floating content anchored to a trigger |
35
+ | **Progress** | Progress bar with indeterminate mode |
36
+ | **Radio** | Radio button group with arrow key navigation |
37
+ | **Select** | Single-select dropdown |
38
+ | **Slider** | Range input with thumb and track |
39
+ | **Switch** | Toggle switch (on/off) |
40
+ | **Tabs** | Tabbed interface with keyboard navigation |
41
+ | **Toast** | Notification toast with auto-dismiss |
42
+ | **Tooltip** | Hover tooltip with pointer positioning |
43
43
 
44
44
  ## Usage
45
45
 
@@ -169,7 +169,7 @@ function LoginDialog() {
169
169
 
170
170
  const trigger = document.createElement('button');
171
171
  trigger.textContent = 'Open Dialog';
172
- trigger.onclick = () => state.open.value = true;
172
+ trigger.onclick = () => (state.open.value = true);
173
173
 
174
174
  const container = document.createElement('div');
175
175
  container.appendChild(trigger);
@@ -192,6 +192,7 @@ Dialog.Root(options: DialogOptions): {
192
192
  ```
193
193
 
194
194
  The dialog handles:
195
+
195
196
  - Focus trapping (Tab cycles through focusable elements)
196
197
  - Escape key to close
197
198
  - Click outside overlay to close
@@ -243,6 +244,7 @@ Menu.Item(options: { onSelect?: () => void }): HTMLDivElement
243
244
  ```
244
245
 
245
246
  Menu handles:
247
+
246
248
  - Arrow Up/Down navigation
247
249
  - Enter/Space to select
248
250
  - Escape to close
@@ -271,7 +273,12 @@ function LanguageSelect() {
271
273
  content.appendChild(option);
272
274
  }
273
275
 
274
- return <div>{trigger}{content}</div>;
276
+ return (
277
+ <div>
278
+ {trigger}
279
+ {content}
280
+ </div>
281
+ );
275
282
  }
276
283
  ```
277
284
 
@@ -340,6 +347,7 @@ Tabs.Content(options: { value: string }): HTMLDivElement
340
347
  ```
341
348
 
342
349
  Tabs handle:
350
+
343
351
  - Arrow Left/Right navigation
344
352
  - Home/End keys to jump to first/last tab
345
353
  - Automatic panel switching
@@ -457,12 +465,22 @@ Primitives provide **zero styles**. You can style them with:
457
465
  Most primitives set `data-state` attributes you can use for CSS:
458
466
 
459
467
  ```css
460
- button[data-state="idle"] { /* ... */ }
461
- button[data-state="pressed"] { /* ... */ }
462
- button[data-state="disabled"] { /* ... */ }
468
+ button[data-state='idle'] {
469
+ /* ... */
470
+ }
471
+ button[data-state='pressed'] {
472
+ /* ... */
473
+ }
474
+ button[data-state='disabled'] {
475
+ /* ... */
476
+ }
463
477
 
464
- [aria-expanded="true"] { /* ... */ }
465
- [aria-checked="true"] { /* ... */ }
478
+ [aria-expanded='true'] {
479
+ /* ... */
480
+ }
481
+ [aria-checked='true'] {
482
+ /* ... */
483
+ }
466
484
  ```
467
485
 
468
486
  ## Accessibility
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@vertz/ui-primitives",
3
- "version": "0.2.32",
4
- "type": "module",
5
- "license": "MIT",
3
+ "version": "0.2.33",
6
4
  "description": "Headless UI primitives for Vertz — Accordion, Dialog, Select, and more",
5
+ "license": "MIT",
7
6
  "repository": {
8
7
  "type": "git",
9
8
  "url": "https://github.com/vertz-dev/vertz.git",
10
9
  "directory": "packages/ui-primitives"
11
10
  },
12
- "publishConfig": {
13
- "access": "public",
14
- "provenance": true
15
- },
11
+ "files": [
12
+ "dist"
13
+ ],
14
+ "type": "module",
15
+ "sideEffects": false,
16
16
  "main": "dist/src/index.js",
17
17
  "types": "dist/src/index.d.ts",
18
18
  "exports": {
@@ -25,9 +25,10 @@
25
25
  "types": "./dist/src/utils.d.ts"
26
26
  }
27
27
  },
28
- "files": [
29
- "dist"
30
- ],
28
+ "publishConfig": {
29
+ "access": "public",
30
+ "provenance": true
31
+ },
31
32
  "scripts": {
32
33
  "build": "bunup",
33
34
  "test": "bun test",
@@ -36,17 +37,16 @@
36
37
  },
37
38
  "dependencies": {
38
39
  "@floating-ui/dom": "^1.7.5",
39
- "@vertz/ui": "^0.2.30"
40
+ "@vertz/ui": "^0.2.31"
40
41
  },
41
42
  "devDependencies": {
42
43
  "@happy-dom/global-registrator": "^20.7.0",
43
- "@vertz/ui-compiler": "^0.2.30",
44
+ "@vertz/ui-compiler": "^0.2.31",
44
45
  "bunup": "^0.16.31",
45
46
  "happy-dom": "^20.7.0",
46
47
  "typescript": "^5.7.0"
47
48
  },
48
49
  "engines": {
49
50
  "node": ">=22"
50
- },
51
- "sideEffects": false
51
+ }
52
52
  }