overflow-toolbar 0.1.0 → 0.1.2
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/README.md +4 -4
- package/package.json +11 -6
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ A responsive toolbar overflow component that automatically collapses items into
|
|
|
17
17
|
- **Reverse mode** — collapse from the left instead of the right
|
|
18
18
|
- **Menu-only items** — items that always live in the dropdown (e.g. Help, About)
|
|
19
19
|
- **Min state** — items shrink to icon-only before being fully hidden
|
|
20
|
-
- **Three implementations** — React/Radix UI, Material UI, and vanilla JavaScript
|
|
20
|
+
- **Three implementations** — React/Radix UI (shadcn-compatible), Material UI, and vanilla JavaScript
|
|
21
21
|
- **Tree-shakeable** — import only the variant you need via subpath exports
|
|
22
22
|
- **TypeScript** — full type declarations included
|
|
23
23
|
|
|
@@ -29,7 +29,7 @@ npm install overflow-toolbar
|
|
|
29
29
|
|
|
30
30
|
## Quick Start
|
|
31
31
|
|
|
32
|
-
### Radix UI (React)
|
|
32
|
+
### Radix UI / shadcn (React)
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
35
|
import { RxOverflow, RxOverflowItem, RxOverflowMenu } from 'overflow-toolbar/rx';
|
|
@@ -105,7 +105,7 @@ Import only what you need for optimal tree-shaking:
|
|
|
105
105
|
|---|---|
|
|
106
106
|
| `overflow-toolbar` | Everything (all variants) |
|
|
107
107
|
| `overflow-toolbar/core` | Core React components (`Overflow`, `OverflowItem`, `OverflowMenu`, `OverflowController`) |
|
|
108
|
-
| `overflow-toolbar/rx` | Radix UI variant (`RxOverflow`, `RxOverflowItem`, `RxOverflowMenu`) |
|
|
108
|
+
| `overflow-toolbar/rx` | Radix UI / shadcn variant (`RxOverflow`, `RxOverflowItem`, `RxOverflowMenu`) |
|
|
109
109
|
| `overflow-toolbar/mui` | Material UI variant (`MuiOverflow`, `MuiOverflowItem`, `MuiOverflowMenu`) |
|
|
110
110
|
| `overflow-toolbar/vanilla` | Vanilla JS (`OverflowToolbar`) |
|
|
111
111
|
| `overflow-toolbar/styles` | Core CSS (required by all variants) |
|
|
@@ -251,7 +251,7 @@ pnpm lint # lint
|
|
|
251
251
|
|
|
252
252
|
## Also Known As
|
|
253
253
|
|
|
254
|
-
This component implements what is commonly known as a responsive toolbar, overflow menu, adaptive toolbar, collapsible toolbar, priority+ pattern, priority-plus navigation, toolbar button group overflow, responsive action bar, command bar, or "more menu." It handles responsive buttons, auto-collapse, icon-only collapse, and dynamic toolbar resizing using ResizeObserver.
|
|
254
|
+
This component implements what is commonly known as a responsive toolbar, overflow menu, adaptive toolbar, collapsible toolbar, priority+ pattern, priority-plus navigation, toolbar button group overflow, responsive action bar, command bar, or "more menu." It handles responsive buttons, auto-collapse, icon-only collapse, and dynamic toolbar resizing using ResizeObserver. The Radix UI variant is fully compatible with shadcn/ui projects.
|
|
255
255
|
|
|
256
256
|
## License
|
|
257
257
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "overflow-toolbar",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Responsive toolbar overflow component — items automatically collapse into a dropdown menu as the container shrinks. Supports visible, icon-only (min), and hidden states. Ships with React (Radix UI), MUI, and vanilla JS implementations.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -60,23 +60,28 @@
|
|
|
60
60
|
"exports": {
|
|
61
61
|
".": {
|
|
62
62
|
"types": "./dist/index.d.ts",
|
|
63
|
-
"import": "./dist/index.js"
|
|
63
|
+
"import": "./dist/index.js",
|
|
64
|
+
"default": "./dist/index.js"
|
|
64
65
|
},
|
|
65
66
|
"./core": {
|
|
66
67
|
"types": "./dist/components/Overflow/index.d.ts",
|
|
67
|
-
"import": "./dist/
|
|
68
|
+
"import": "./dist/overflow.js",
|
|
69
|
+
"default": "./dist/overflow.js"
|
|
68
70
|
},
|
|
69
71
|
"./rx": {
|
|
70
72
|
"types": "./dist/components/RxOverflow/index.d.ts",
|
|
71
|
-
"import": "./dist/
|
|
73
|
+
"import": "./dist/rx.js",
|
|
74
|
+
"default": "./dist/rx.js"
|
|
72
75
|
},
|
|
73
76
|
"./mui": {
|
|
74
77
|
"types": "./dist/components/MuiOverflow/index.d.ts",
|
|
75
|
-
"import": "./dist/
|
|
78
|
+
"import": "./dist/mui.js",
|
|
79
|
+
"default": "./dist/mui.js"
|
|
76
80
|
},
|
|
77
81
|
"./vanilla": {
|
|
78
82
|
"types": "./dist/components/NoFrameworkOverflow/index.d.ts",
|
|
79
|
-
"import": "./dist/
|
|
83
|
+
"import": "./dist/vanilla.js",
|
|
84
|
+
"default": "./dist/vanilla.js"
|
|
80
85
|
},
|
|
81
86
|
"./styles": "./dist/components/Overflow/Overflow.css",
|
|
82
87
|
"./rx/styles": "./dist/components/RxOverflow/rx.css",
|