@alexgorbatchev/shadcn 0.0.46 → 0.0.48
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 +12 -4
- package/dist/{chunk-p1eqxz4v.js → chunk-a6mes7w0.js} +80 -80
- package/dist/{chunk-8wc2z7te.js → chunk-cfnkbp0y.js} +103 -75
- package/dist/{chunk-8rtm4y46.js → chunk-pj01ybcm.js} +6 -6
- package/dist/{chunk-0qgd06td.js → chunk-svr3r7pj.js} +754 -718
- package/dist/components/ActionsMenu.d.ts +21 -0
- package/dist/components/ConfirmationDialog.d.ts +3 -2
- package/dist/components/ContextMenu.d.ts +3 -16
- package/dist/components/DropdownMenu.d.ts +4 -23
- package/dist/components/FormDialog.d.ts +23 -0
- package/dist/components/InlineEdit.d.ts +4 -2
- package/dist/components/MenuParts.d.ts +24 -0
- package/dist/components/MenuPopup.d.ts +6 -0
- package/dist/components/Menubar.d.ts +4 -6
- package/dist/components/assistant-ui/elements/RegenerateMenu.js +2 -2
- package/dist/components/assistant-ui/index.js +2 -2
- package/dist/components/data-grid/index.js +2 -2
- package/dist/components/json-render/catalog.d.ts +1 -1
- package/dist/components/json-render/index.js +20 -20
- package/dist/components/tree/index.js +2218 -15
- package/dist/index.d.ts +4 -0
- package/dist/index.js +70 -58
- package/dist/menu/types.d.ts +3 -0
- package/dist/prototype.js +3 -2
- package/llms/components/forms/InlineEdit.md +34 -1
- package/llms/components/navigation/ActionsMenu.md +143 -0
- package/llms/components/overlays/ConfirmationDialog.md +31 -1
- package/llms/components/overlays/FormDialog.md +102 -0
- package/llms/setup.md +12 -4
- package/llms.txt +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export { Button, buttonVariants } from "./components/Button.js";
|
|
2
2
|
export { ButtonLink } from "./components/ButtonLink.js";
|
|
3
3
|
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "./components/DropdownMenu.js";
|
|
4
|
+
export { ActionsMenu, ActionsMenuTrigger, ActionsMenuContextTarget, ActionsMenuContextContent, } from "./components/ActionsMenu.js";
|
|
5
|
+
export type { IActionsMenuProps, ActionsMenuTriggerProps } from "./components/ActionsMenu.js";
|
|
6
|
+
export { MenuGroup, MenuLabel, MenuLinkItem, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubTrigger, MenuSubContent, } from "./components/MenuParts.js";
|
|
7
|
+
export { FormDialog } from "./components/FormDialog.js";
|
|
4
8
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./components/Accordion.js";
|
|
5
9
|
export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./components/Popover.js";
|
|
6
10
|
export { Skeleton } from "./components/Skeleton.js";
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ButtonLink2,
|
|
3
|
+
ContextMenu2,
|
|
4
|
+
ContextMenuPortal2,
|
|
5
|
+
ContextMenuTrigger2,
|
|
6
|
+
ContextMenuContent2,
|
|
7
|
+
ActionsMenu2,
|
|
8
|
+
ActionsMenuTrigger2,
|
|
9
|
+
ActionsMenuContextTarget2,
|
|
10
|
+
ActionsMenuContextContent2,
|
|
11
|
+
FormDialog2,
|
|
3
12
|
Accordion2,
|
|
4
13
|
AccordionItem2,
|
|
5
14
|
AccordionTrigger2,
|
|
@@ -76,21 +85,6 @@ import {
|
|
|
76
85
|
DrawerFooter2,
|
|
77
86
|
DrawerTitle2,
|
|
78
87
|
DrawerDescription2,
|
|
79
|
-
ContextMenu2,
|
|
80
|
-
ContextMenuPortal2,
|
|
81
|
-
ContextMenuTrigger2,
|
|
82
|
-
ContextMenuContent2,
|
|
83
|
-
ContextMenuGroup2,
|
|
84
|
-
ContextMenuLabel2,
|
|
85
|
-
ContextMenuItem2,
|
|
86
|
-
ContextMenuSub2,
|
|
87
|
-
ContextMenuSubTrigger2,
|
|
88
|
-
ContextMenuSubContent2,
|
|
89
|
-
ContextMenuCheckboxItem2,
|
|
90
|
-
ContextMenuRadioGroup2,
|
|
91
|
-
ContextMenuRadioItem2,
|
|
92
|
-
ContextMenuSeparator2,
|
|
93
|
-
ContextMenuShortcut2,
|
|
94
88
|
Menubar2,
|
|
95
89
|
MenubarMenu2,
|
|
96
90
|
MenubarGroup2,
|
|
@@ -178,7 +172,7 @@ import {
|
|
|
178
172
|
StatusTracker2,
|
|
179
173
|
DashboardLayout2,
|
|
180
174
|
BillingUsage2
|
|
181
|
-
} from "./chunk-
|
|
175
|
+
} from "./chunk-svr3r7pj.js";
|
|
182
176
|
import {
|
|
183
177
|
Tabs2,
|
|
184
178
|
tabsListVariants2,
|
|
@@ -203,6 +197,8 @@ import {
|
|
|
203
197
|
ToolbarSeparator2
|
|
204
198
|
} from "./chunk-x6vx0v6d.js";
|
|
205
199
|
import {
|
|
200
|
+
ScrollArea2,
|
|
201
|
+
ScrollBar2,
|
|
206
202
|
Combobox2,
|
|
207
203
|
ComboboxValue2,
|
|
208
204
|
ComboboxTrigger2,
|
|
@@ -219,8 +215,6 @@ import {
|
|
|
219
215
|
ComboboxChip2,
|
|
220
216
|
ComboboxChipsInput2,
|
|
221
217
|
useComboboxAnchor2,
|
|
222
|
-
ScrollArea2,
|
|
223
|
-
ScrollBar2,
|
|
224
218
|
NumberField2,
|
|
225
219
|
NumberFieldGroup2,
|
|
226
220
|
NumberFieldInput2,
|
|
@@ -228,7 +222,7 @@ import {
|
|
|
228
222
|
NumberFieldIncrement2,
|
|
229
223
|
NumberFieldScrubArea2,
|
|
230
224
|
NumberFieldScrubAreaCursor2
|
|
231
|
-
} from "./chunk-
|
|
225
|
+
} from "./chunk-a6mes7w0.js";
|
|
232
226
|
import {
|
|
233
227
|
NativeSelect2,
|
|
234
228
|
NativeSelectOption2,
|
|
@@ -238,22 +232,23 @@ import {
|
|
|
238
232
|
Slider2
|
|
239
233
|
} from "./chunk-2mn2ctsk.js";
|
|
240
234
|
import {
|
|
235
|
+
MenuPortal,
|
|
236
|
+
MenuPopup,
|
|
237
|
+
MenuGroup2,
|
|
238
|
+
MenuLabel2,
|
|
239
|
+
MenuItem2,
|
|
240
|
+
MenuLinkItem2,
|
|
241
|
+
MenuSub2,
|
|
242
|
+
MenuSubTrigger2,
|
|
243
|
+
MenuSubContent2,
|
|
244
|
+
MenuCheckboxItem2,
|
|
245
|
+
MenuRadioGroup2,
|
|
246
|
+
MenuRadioItem2,
|
|
247
|
+
MenuSeparator2,
|
|
248
|
+
MenuShortcut2,
|
|
241
249
|
DropdownMenu2,
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
DropdownMenuContent2,
|
|
245
|
-
DropdownMenuGroup2,
|
|
246
|
-
DropdownMenuLabel2,
|
|
247
|
-
DropdownMenuItem2,
|
|
248
|
-
DropdownMenuSub2,
|
|
249
|
-
DropdownMenuSubTrigger2,
|
|
250
|
-
DropdownMenuSubContent2,
|
|
251
|
-
DropdownMenuCheckboxItem2,
|
|
252
|
-
DropdownMenuRadioGroup2,
|
|
253
|
-
DropdownMenuRadioItem2,
|
|
254
|
-
DropdownMenuSeparator2,
|
|
255
|
-
DropdownMenuShortcut2
|
|
256
|
-
} from "./chunk-8wc2z7te.js";
|
|
250
|
+
DropdownMenuTrigger2
|
|
251
|
+
} from "./chunk-cfnkbp0y.js";
|
|
257
252
|
import {
|
|
258
253
|
Empty2,
|
|
259
254
|
EmptyHeader2,
|
|
@@ -466,6 +461,10 @@ export {
|
|
|
466
461
|
AccordionItem2 as AccordionItem,
|
|
467
462
|
AccordionTrigger2 as AccordionTrigger,
|
|
468
463
|
AccountMenu2 as AccountMenu,
|
|
464
|
+
ActionsMenu2 as ActionsMenu,
|
|
465
|
+
ActionsMenuContextContent2 as ActionsMenuContextContent,
|
|
466
|
+
ActionsMenuContextTarget2 as ActionsMenuContextTarget,
|
|
467
|
+
ActionsMenuTrigger2 as ActionsMenuTrigger,
|
|
469
468
|
Alert2 as Alert,
|
|
470
469
|
AlertAction2 as AlertAction,
|
|
471
470
|
AlertDescription2 as AlertDescription,
|
|
@@ -547,19 +546,19 @@ export {
|
|
|
547
546
|
ComboboxValue2 as ComboboxValue,
|
|
548
547
|
ConfirmationDialog2 as ConfirmationDialog,
|
|
549
548
|
ContextMenu2 as ContextMenu,
|
|
550
|
-
|
|
549
|
+
MenuCheckboxItem2 as ContextMenuCheckboxItem,
|
|
551
550
|
ContextMenuContent2 as ContextMenuContent,
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
551
|
+
MenuGroup2 as ContextMenuGroup,
|
|
552
|
+
MenuItem2 as ContextMenuItem,
|
|
553
|
+
MenuLabel2 as ContextMenuLabel,
|
|
555
554
|
ContextMenuPortal2 as ContextMenuPortal,
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
555
|
+
MenuRadioGroup2 as ContextMenuRadioGroup,
|
|
556
|
+
MenuRadioItem2 as ContextMenuRadioItem,
|
|
557
|
+
MenuSeparator2 as ContextMenuSeparator,
|
|
558
|
+
MenuShortcut2 as ContextMenuShortcut,
|
|
559
|
+
MenuSub2 as ContextMenuSub,
|
|
560
|
+
MenuSubContent2 as ContextMenuSubContent,
|
|
561
|
+
MenuSubTrigger2 as ContextMenuSubTrigger,
|
|
563
562
|
ContextMenuTrigger2 as ContextMenuTrigger,
|
|
564
563
|
DashboardLayout2 as DashboardLayout,
|
|
565
564
|
DataViewer2 as DataViewer,
|
|
@@ -591,19 +590,19 @@ export {
|
|
|
591
590
|
DrawerTrigger2 as DrawerTrigger,
|
|
592
591
|
DropTarget2 as DropTarget,
|
|
593
592
|
DropdownMenu2 as DropdownMenu,
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
593
|
+
MenuCheckboxItem2 as DropdownMenuCheckboxItem,
|
|
594
|
+
MenuPopup as DropdownMenuContent,
|
|
595
|
+
MenuGroup2 as DropdownMenuGroup,
|
|
596
|
+
MenuItem2 as DropdownMenuItem,
|
|
597
|
+
MenuLabel2 as DropdownMenuLabel,
|
|
598
|
+
MenuPortal as DropdownMenuPortal,
|
|
599
|
+
MenuRadioGroup2 as DropdownMenuRadioGroup,
|
|
600
|
+
MenuRadioItem2 as DropdownMenuRadioItem,
|
|
601
|
+
MenuSeparator2 as DropdownMenuSeparator,
|
|
602
|
+
MenuShortcut2 as DropdownMenuShortcut,
|
|
603
|
+
MenuSub2 as DropdownMenuSub,
|
|
604
|
+
MenuSubContent2 as DropdownMenuSubContent,
|
|
605
|
+
MenuSubTrigger2 as DropdownMenuSubTrigger,
|
|
607
606
|
DropdownMenuTrigger2 as DropdownMenuTrigger,
|
|
608
607
|
Empty2 as Empty,
|
|
609
608
|
EmptyContent2 as EmptyContent,
|
|
@@ -623,6 +622,7 @@ export {
|
|
|
623
622
|
FieldSet2 as FieldSet,
|
|
624
623
|
FieldTitle2 as FieldTitle,
|
|
625
624
|
FilterBar2 as FilterBar,
|
|
625
|
+
FormDialog2 as FormDialog,
|
|
626
626
|
HoverCard2 as HoverCard,
|
|
627
627
|
HoverCardContent2 as HoverCardContent,
|
|
628
628
|
HoverCardTrigger2 as HoverCardTrigger,
|
|
@@ -654,6 +654,18 @@ export {
|
|
|
654
654
|
Marker2 as Marker,
|
|
655
655
|
MarkerContent2 as MarkerContent,
|
|
656
656
|
MarkerIcon2 as MarkerIcon,
|
|
657
|
+
MenuCheckboxItem2 as MenuCheckboxItem,
|
|
658
|
+
MenuGroup2 as MenuGroup,
|
|
659
|
+
MenuItem2 as MenuItem,
|
|
660
|
+
MenuLabel2 as MenuLabel,
|
|
661
|
+
MenuLinkItem2 as MenuLinkItem,
|
|
662
|
+
MenuRadioGroup2 as MenuRadioGroup,
|
|
663
|
+
MenuRadioItem2 as MenuRadioItem,
|
|
664
|
+
MenuSeparator2 as MenuSeparator,
|
|
665
|
+
MenuShortcut2 as MenuShortcut,
|
|
666
|
+
MenuSub2 as MenuSub,
|
|
667
|
+
MenuSubContent2 as MenuSubContent,
|
|
668
|
+
MenuSubTrigger2 as MenuSubTrigger,
|
|
657
669
|
Menubar2 as Menubar,
|
|
658
670
|
MenubarCheckboxItem2 as MenubarCheckboxItem,
|
|
659
671
|
MenubarContent2 as MenubarContent,
|
package/dist/menu/types.d.ts
CHANGED
|
@@ -11,4 +11,7 @@ export type MenuItemProps = Menu.Item.Props & IMenuItemOptions;
|
|
|
11
11
|
export type MenuSubTriggerProps = Menu.SubmenuTrigger.Props & IMenuInsetProps;
|
|
12
12
|
export type MenuCheckboxItemProps = Menu.CheckboxItem.Props & IMenuInsetProps;
|
|
13
13
|
export type MenuRadioItemProps = Menu.RadioItem.Props & IMenuInsetProps;
|
|
14
|
+
export type MenuPopupProps = Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & IDensityProps & {
|
|
15
|
+
width?: "content" | "anchor";
|
|
16
|
+
};
|
|
14
17
|
export {};
|
package/dist/prototype.js
CHANGED
|
@@ -2051,7 +2051,7 @@ var program = new Command;
|
|
|
2051
2051
|
// package.json
|
|
2052
2052
|
var package_default = {
|
|
2053
2053
|
name: "@alexgorbatchev/shadcn",
|
|
2054
|
-
version: "0.0.
|
|
2054
|
+
version: "0.0.48",
|
|
2055
2055
|
description: "Sharp, monospace React components with compact and comfortable densities.",
|
|
2056
2056
|
license: "MIT",
|
|
2057
2057
|
repository: {
|
|
@@ -3462,7 +3462,8 @@ var package_default = {
|
|
|
3462
3462
|
"input-otp@1.5.0": "patches/input-otp@1.5.0.patch",
|
|
3463
3463
|
"@vitest/coverage-istanbul@4.1.11": "patches/@vitest%2Fcoverage-istanbul@4.1.11.patch",
|
|
3464
3464
|
"storybook@10.6.1": "patches/storybook@10.6.1.patch",
|
|
3465
|
-
"uncontrollable@7.2.1": "patches/uncontrollable@7.2.1.patch"
|
|
3465
|
+
"uncontrollable@7.2.1": "patches/uncontrollable@7.2.1.patch",
|
|
3466
|
+
"@headless-tree/core@1.8.0": "patches/@headless-tree%2Fcore@1.8.0.patch"
|
|
3466
3467
|
}
|
|
3467
3468
|
};
|
|
3468
3469
|
|
|
@@ -60,8 +60,41 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
|
|
|
60
60
|
{
|
|
61
61
|
args: {
|
|
62
62
|
onCommit: async () => {
|
|
63
|
-
throw new Error("
|
|
63
|
+
throw new Error("Private storage diagnostic");
|
|
64
64
|
},
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
```
|
|
68
|
+
|
|
69
|
+
### UnchangedEnter
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
{
|
|
73
|
+
args: { hasChanges: false }
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### UnchangedBlur
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
{
|
|
81
|
+
args: { hasChanges: false }
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### UnchangedCreate
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
{}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### AuthoredValidationAndRetry
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
{
|
|
95
|
+
args: {
|
|
96
|
+
onCommit: fn(),
|
|
97
|
+
renderError: () => "A title is required.",
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
```
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# ActionsMenu
|
|
2
|
+
|
|
3
|
+
Story: @alexgorbatchev/shadcn/navigation/ActionsMenu
|
|
4
|
+
Source: src/components/stories/navigation/ActionsMenu.stories.tsx
|
|
5
|
+
|
|
6
|
+
[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/navigation/ActionsMenu.stories.tsx)
|
|
7
|
+
|
|
8
|
+
## Public imports
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { ActionsMenu, ActionsMenuContextTarget, ActionsMenuContextContent, ActionsMenuTrigger, MenuGroup, MenuItem, MenuLinkItem, MenuLabel, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, Button } from "@alexgorbatchev/shadcn";
|
|
12
|
+
import { Tree, TreeItem, useTree, syncDataLoaderFeature, hotkeysCoreFeature, selectionFeature } from "@alexgorbatchev/shadcn/tree";
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Supporting imports
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import type { ReactElement } from "react";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Default component
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
ActionsMenu
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Default args
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
{
|
|
31
|
+
label: "Track actions",
|
|
32
|
+
items: (<MenuGroup>
|
|
33
|
+
<MenuItem onClick={() => fixture_menuAction("track-42")}>Inspect track</MenuItem>
|
|
34
|
+
</MenuGroup>),
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Examples
|
|
39
|
+
|
|
40
|
+
Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
|
|
41
|
+
|
|
42
|
+
### RegisteredTree
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
{
|
|
46
|
+
render: () => <RegisteredTreeExample />
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Dropdown
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
{}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### BothEntryPoints
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
{
|
|
60
|
+
args: { contextTarget: <section aria-label="Track"/> },
|
|
61
|
+
render: (args) => (<ActionsMenu {...args}>
|
|
62
|
+
<p>Selected track</p>
|
|
63
|
+
<ActionsMenuTrigger />
|
|
64
|
+
</ActionsMenu>)
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### NativeTableRow
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
{
|
|
72
|
+
render: (args) => (<table>
|
|
73
|
+
<tbody>
|
|
74
|
+
<ActionsMenu {...args}>
|
|
75
|
+
<ActionsMenuContextTarget render={<tr ref={fixture_menuTargetRef}/>}>
|
|
76
|
+
<td>Track title</td>
|
|
77
|
+
<td>
|
|
78
|
+
<ActionsMenuTrigger />
|
|
79
|
+
<ActionsMenuContextContent />
|
|
80
|
+
</td>
|
|
81
|
+
</ActionsMenuContextTarget>
|
|
82
|
+
</ActionsMenu>
|
|
83
|
+
</tbody>
|
|
84
|
+
</table>)
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Disabled
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
{
|
|
92
|
+
args: { disabled: true, contextTarget: <section aria-label="Protected track"/> }
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Submenu
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
{
|
|
100
|
+
args: {
|
|
101
|
+
trigger: <Button variant="outline"/>,
|
|
102
|
+
contextTarget: <section aria-label="Playlist track"/>,
|
|
103
|
+
items: (<>
|
|
104
|
+
<MenuGroup>
|
|
105
|
+
<MenuLabel>Track</MenuLabel>
|
|
106
|
+
<MenuItem disabled>Unavailable action</MenuItem>
|
|
107
|
+
</MenuGroup>
|
|
108
|
+
<MenuSeparator />
|
|
109
|
+
<MenuGroup>
|
|
110
|
+
<MenuSub>
|
|
111
|
+
<MenuSubTrigger>Playlist</MenuSubTrigger>
|
|
112
|
+
<MenuSubContent>
|
|
113
|
+
<MenuGroup>
|
|
114
|
+
<MenuItem onClick={() => fixture_menuAction("playlist-7", "track-42")}>Add to favorites</MenuItem>
|
|
115
|
+
</MenuGroup>
|
|
116
|
+
</MenuSubContent>
|
|
117
|
+
</MenuSub>
|
|
118
|
+
</MenuGroup>
|
|
119
|
+
</>),
|
|
120
|
+
},
|
|
121
|
+
render: (args) => (<ActionsMenu {...args}>
|
|
122
|
+
<ActionsMenuTrigger>Track options</ActionsMenuTrigger>
|
|
123
|
+
</ActionsMenu>)
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### NativeLink
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
{
|
|
131
|
+
args: {
|
|
132
|
+
size: "sm",
|
|
133
|
+
items: (<MenuGroup>
|
|
134
|
+
<MenuLinkItem href="#details" onClick={(event) => {
|
|
135
|
+
fixture_menuAction(event.currentTarget.hash);
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
}}>
|
|
138
|
+
View details
|
|
139
|
+
</MenuLinkItem>
|
|
140
|
+
</MenuGroup>),
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
```
|
|
@@ -70,8 +70,38 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
|
|
|
70
70
|
{
|
|
71
71
|
args: {
|
|
72
72
|
onConfirm: async () => {
|
|
73
|
-
throw new Error("
|
|
73
|
+
throw new Error("Private removal diagnostic");
|
|
74
74
|
},
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
```
|
|
78
|
+
|
|
79
|
+
### AuthoredFailureAndRetry
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
{
|
|
83
|
+
args: {
|
|
84
|
+
onConfirm: fn(),
|
|
85
|
+
renderError: () => "The image is in use. Close the editor and retry.",
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### LongDescription
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
{
|
|
94
|
+
args: { description: "Review this irreversible image removal carefully. ".repeat(300) }
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Pending
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
{
|
|
102
|
+
beforeEach: () => {
|
|
103
|
+
fixture_confirmation.pending = Promise.withResolvers<void>();
|
|
104
|
+
},
|
|
105
|
+
args: { onConfirm: fn(() => fixture_confirmation.pending.promise) }
|
|
106
|
+
}
|
|
107
|
+
```
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# FormDialog
|
|
2
|
+
|
|
3
|
+
Story: @alexgorbatchev/shadcn/components/overlays/FormDialog
|
|
4
|
+
Source: src/components/stories/overlays/FormDialog.stories.tsx
|
|
5
|
+
|
|
6
|
+
[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/overlays/FormDialog.stories.tsx)
|
|
7
|
+
|
|
8
|
+
## Public imports
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { FormDialog, Input, Button } from "@alexgorbatchev/shadcn";
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Supporting imports
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { useState, type ReactElement } from "react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Default component
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
FormDialog
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Default args
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
{
|
|
30
|
+
open: false,
|
|
31
|
+
onOpenChange: fn(),
|
|
32
|
+
title: "Edit project",
|
|
33
|
+
description: "Change the project name.",
|
|
34
|
+
submitLabel: "Save project",
|
|
35
|
+
onSubmit: fn((event) => event.preventDefault()),
|
|
36
|
+
children: <Input aria-label="Project name" defaultValue="Example"/>,
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Default render
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
function Example(args): ReactElement {
|
|
44
|
+
const [open, setOpen] = useState(false);
|
|
45
|
+
return (<>
|
|
46
|
+
<Button onClick={() => setOpen(true)}>Edit project</Button>
|
|
47
|
+
<FormDialog {...args} open={open} onOpenChange={(next) => {
|
|
48
|
+
args.onOpenChange(next);
|
|
49
|
+
setOpen(next);
|
|
50
|
+
}}/>
|
|
51
|
+
</>);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Examples
|
|
56
|
+
|
|
57
|
+
Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
|
|
58
|
+
|
|
59
|
+
### Submit
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
{}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Busy
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
{
|
|
69
|
+
args: { isBusy: true }
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### ConsentOnly
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
{
|
|
77
|
+
args: {
|
|
78
|
+
onSubmit: undefined,
|
|
79
|
+
submitLabel: undefined,
|
|
80
|
+
primaryAction: <Button onClick={fixture_formDialogAction}>Review changes</Button>,
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### DoneOnly
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
{
|
|
89
|
+
args: { onSubmit: undefined, submitLabel: undefined, cancelLabel: "Done" }
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### LongContent
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
{
|
|
97
|
+
args: {
|
|
98
|
+
children: Array.from({ length: 60 }, (_, index) => <p key={index}>Project detail {index + 1}</p>),
|
|
99
|
+
error: "Save failed. Retry after checking the project.",
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
package/llms/setup.md
CHANGED
|
@@ -71,7 +71,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
|
|
|
71
71
|
| `/file-upload` | FileUpload selection and validation | `bun add react-dropzone@^20.1.4` |
|
|
72
72
|
| `/color-picker` | ColorPicker | `bun add react-colorful@^5.8.1` |
|
|
73
73
|
| `/image-crop` | ImageCrop and native export helpers | `bun add react-image-crop@^11.1.2` |
|
|
74
|
-
| `/tree` | Tree, native hooks and features | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0
|
|
74
|
+
| `/tree` | Tree, native hooks and features | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`; patched runtimes are bundled |
|
|
75
75
|
| `/editor` | RichTextEditor, native Tiptap hooks and StarterKit | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
|
|
76
76
|
| `/event-calendar` | EventCalendar, EventForm and native calendar APIs | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3` |
|
|
77
77
|
| `/gantt` | Gantt and Roadmap | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0` |
|
|
@@ -86,7 +86,7 @@ import { ChartContainer, type ChartConfig } from "@alexgorbatchev/shadcn/chart";
|
|
|
86
86
|
import { Carousel, CarouselContent, CarouselItem } from "@alexgorbatchev/shadcn/carousel";
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
A production install of this package adds no third-party packages: every library is an optional peer that consumers install themselves, or is bundled into the package. Core peers are listed under Installation; feature peers are listed per entry point above. The patched `sonner`, `input-otp`,
|
|
89
|
+
A production install of this package adds no third-party packages: every library is an optional peer that consumers install themselves, or is bundled into the package. Core peers are listed under Installation; feature peers are listed per entry point above. The patched `sonner`, `input-otp`, `@shadcn/react`, and Headless Tree runtimes, and the calendar with its patched `uncontrollable` wrapper, are bundled so consumers receive the fixes even when their package manager does not apply Bun patches. Install their upstream peers for the types the declarations reference; the tree runtime stays behind `/tree` and the calendar runtime behind `/event-calendar`. Import tree hooks and features from this package's `/tree` entry point so they use the bundled native implementation. Install `@base-ui/utils` at the exact version `@base-ui/react` requires, so the portal components share Base UI's own ref merging without a second copy. Shared providers work across entry points.
|
|
90
90
|
|
|
91
91
|
The optional assistant-ui catalog provides presentational families under `/assistant-ui/<family>` and runtime adapters under `/assistant-ui/native/<family>`. For example, import `ApprovalCard` from `@alexgorbatchev/shadcn/assistant-ui/approval-card`. Add `@alexgorbatchev/shadcn/assistant-ui.css` to your stylesheet. Native threads require an actual assistant-ui runtime and the selected family's optional peers. See the [assistant-ui reference](https://github.com/alexgorbatchev/shadcn/blob/main/docs/internal/assistant-ui.md) for imports, dependency-bearing styles, source inventory, and the SelectionToolbar isolation limitation.
|
|
92
92
|
|
|
@@ -360,7 +360,7 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
|
|
|
360
360
|
|
|
361
361
|
# Inline editing and ratings
|
|
362
362
|
|
|
363
|
-
`InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Rejected saves display
|
|
363
|
+
`InlineEdit` mounts an edit session with a controlled `value`, `onValueChange`, `onCommit`, and `onCancel`. Mount it in place of the displayed label. Its input focuses and selects its text by default; `shouldSelectOnMount={false}` preserves the initial caret. Enter or blur commits once, Escape cancels without committing, and asynchronous saves disable the input until completion. Set `hasChanges={false}` to cancel an unchanged edit before calling `onCommit`; the caller owns normalization and comparison. It defaults to true, so creation sessions can commit their initial value. Rejected saves display a generic error and allow retry; `renderError` can map the unknown failure to application-authored guidance.
|
|
364
364
|
|
|
365
365
|
`VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
|
|
366
366
|
|
|
@@ -370,17 +370,25 @@ Column `meta.filter` offers a column in `DataGridFilters`, hidden columns includ
|
|
|
370
370
|
|
|
371
371
|
Import `DataGridSelectHeader` and `DataGridSelectCell` from `@alexgorbatchev/shadcn/data-grid`. Pass the current `useTable` result as `table` to both controls, and pass `row` and an accessible `label` to each cell. The header selects selectable filtered rows across all pages and preserves selections hidden by filters. It shows a mixed state when some of those rows are selected and disables itself when none are selectable. Its default label is "Select all filtered rows"; provide `label` to name the scope in your application. Cells follow native row selection rules, including disabled rows and partially selected parents. The controls observe selection changes without requiring the parent table selector to include selection state.
|
|
372
372
|
|
|
373
|
+
`ActionsMenu` shares one `items` definition between a dropdown action and an optional context menu. Supply an accessible `label`; the default trigger is a ghost icon button. `size="sm"` displays the label, and `variant`, `disabled`, and `trigger` customize the action. Supplying `contextTarget` composes the native context trigger with that element and adds its popup. Compose items with `MenuItem`, `MenuLinkItem`, checkbox/radio parts, groups, labels, separators, shortcuts, and submenu parts; dropdown and context menus share these implementations. `MenuLinkItem` retains its native anchor and menu keyboard semantics.
|
|
374
|
+
|
|
375
|
+
For nested layouts, compose `ActionsMenuTrigger`, `ActionsMenuContextTarget`, and `ActionsMenuContextContent` explicitly inside `ActionsMenu`. The dropdown trigger owns its local native dropdown root and popup; the context target and content share an independent context root. A tree row can use `TreeItem render={<ActionsMenuContextTarget />}` and put the trigger in its action slot. For a table row, render the context target as the actual `tr`, then place the dropdown trigger and context content inside a `td`: native popup portals insert focus guards at their declaration, which must remain valid table children.
|
|
376
|
+
|
|
373
377
|
`TreeItem linkProps` places the registered tree item, roving focus, and native drag handlers on an anchor. Pass `href` and anchor events directly, or compose a router link through `linkProps.render`. The outer `render` and `ref` remain available for row overlays; disclosure and `endEnhancer` controls remain siblings of the link. Enter and modified clicks retain native link behavior, while tree arrows retain navigation and expansion behavior. Optional `dropHint={{ content, open, side }}` displays caller-controlled drag feedback without adding a focus target.
|
|
374
378
|
|
|
379
|
+
Embedded actions, links, menus, editable fields, and media controls retain their own keyboard behavior. Registered anchor and button rows still participate in tree navigation; rename and search inputs retain their completion and cancellation shortcuts.
|
|
380
|
+
|
|
375
381
|
`PageHeader` accepts an optional `eyebrow` above its single page title. It accepts any React content without introducing another heading. Breadcrumbs, description, actions, and density remain independent slots; long action content wraps within narrow layouts.
|
|
376
382
|
|
|
377
383
|
`StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
|
|
378
384
|
|
|
379
385
|
`DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.
|
|
380
386
|
|
|
387
|
+
`FormDialog` supplies a controlled dialog with a fixed heading and footer around a scrolling body. Supply `open`, `onOpenChange`, `title`, and children; `description`, `size`, and `density` are optional. With `onSubmit`, the body and actions use a native form: the caller handles `preventDefault`, validation, submission, and pending state. `submitLabel` adds the stock submit button, with optional `submitVariant` and `submitDisabled`; `primaryAction` supplies a custom action instead. Without `onSubmit`, custom actions can request consent without introducing a form. Without a primary action, `cancelLabel="Done"` gives a close-only footer. `isBusy` blocks native dismissal and disables the stock actions; callers disable their own inputs and custom actions. Pass already-rendered safe guidance through `error`.
|
|
388
|
+
|
|
381
389
|
`ImagePicker` displays a 256px square preview with upload and unset buttons. Supply the existing `src`, a staged `file` (`undefined` for the existing image, `null` for removal), and `onFileChange`/`onClear` callbacks. It accepts PNG, JPEG, and GIF files and releases local preview URLs when they change or unmount. The consumer owns saving and removal confirmation.
|
|
382
390
|
|
|
383
|
-
`ConfirmationDialog` uses an alert dialog with Cancel and a destructive confirmation button. Supply `open`, `onOpenChange`, `title`, `description`, `confirmLabel`, and `onConfirm`. It waits for asynchronous work, keeps the dialog open on failure, and prevents cancellation while that work is pending.
|
|
391
|
+
`ConfirmationDialog` uses an alert dialog with Cancel and a destructive confirmation button. Supply `open`, `onOpenChange`, `title`, `description`, `confirmLabel`, and `onConfirm`. It waits for asynchronous work, keeps the dialog open on failure, and prevents cancellation while that work is pending. Its body scrolls within the viewport while the heading and actions stay visible. Failures display generic guidance by default; `renderError` maps unknown failures to application-authored messages.
|
|
384
392
|
|
|
385
393
|
# Split views
|
|
386
394
|
|
package/llms.txt
CHANGED
|
@@ -431,6 +431,7 @@ Generated from the public package exports and Storybook sources.
|
|
|
431
431
|
## navigation
|
|
432
432
|
|
|
433
433
|
- [AccountMenu](./llms/components/navigation/AccountMenu.md)
|
|
434
|
+
- [ActionsMenu](./llms/components/navigation/ActionsMenu.md)
|
|
434
435
|
- [Breadcrumb](./llms/components/navigation/Breadcrumb.md)
|
|
435
436
|
- [Command](./llms/components/navigation/Command.md)
|
|
436
437
|
- [ContextMenu](./llms/components/navigation/ContextMenu.md)
|
|
@@ -449,6 +450,7 @@ Generated from the public package exports and Storybook sources.
|
|
|
449
450
|
- [ConfirmationDialog](./llms/components/overlays/ConfirmationDialog.md)
|
|
450
451
|
- [Dialog](./llms/components/overlays/Dialog.md)
|
|
451
452
|
- [Drawer](./llms/components/overlays/Drawer.md)
|
|
453
|
+
- [FormDialog](./llms/components/overlays/FormDialog.md)
|
|
452
454
|
- [HoverCard](./llms/components/overlays/HoverCard.md)
|
|
453
455
|
- [Popover](./llms/components/overlays/Popover.md)
|
|
454
456
|
- [Sheet](./llms/components/overlays/Sheet.md)
|