@boxcustodia/library 2.0.0-alpha.26 → 2.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/menu/menu.stories.tsx

@@ -39,6 +39,34 @@ const meta: Meta<typeof Menu> = {
   },
   argTypes: {
     classNames: { control: false },
+    items: {
+      control: false,
+      description: `Array of \`MenuItemType\`. Each entry is a discriminated union on \`type\`:
+
+\`\`\`ts
+// Action item
+{ type: "item"; label: ReactNode; shortcut?: string; onClick?: () => void; disabled?: boolean; variant?: "default" | "error" }
+
+// Checkbox item
+{ type: "checkbox"; label: ReactNode; checked?: boolean; onCheckedChange?: (checked: boolean) => void; disabled?: boolean }
+
+// Radio group — wraps radio items; controlled via value/onValueChange on the group
+{ type: "radio-group"; value?: string; onValueChange?: (value: string) => void; items: RadioItem[] }
+// RadioItem: { type: "radio"; label: ReactNode; value: string; disabled?: boolean }
+
+// Group with optional label
+{ type: "group"; label?: ReactNode; items: MenuItemType[] }
+
+// Submenu
+{ type: "submenu"; label: ReactNode; items: MenuItemType[] }
+
+// Label (non-interactive heading)
+{ type: "label"; label: ReactNode }
+
+// Separator
+{ type: "separator" }
+\`\`\``,
+    },
   },
 };
 
@@ -50,10 +78,10 @@ export const Default: Story = {
     <Menu
       {...args}
       items={[
-        { type: "item", label: "Profile", onSelect: action("profile") },
-        { type: "item", label: "Settings", onSelect: action("settings") },
+        { type: "item", label: "Profile", onClick: action("profile") },
+        { type: "item", label: "Settings", onClick: action("settings") },
         { type: "separator" },
-        { type: "item", label: "Log out", onSelect: action("logout") },
+        { type: "item", label: "Log out", onClick: action("logout") },
       ]}
     />
   ),
@@ -69,8 +97,8 @@ export const WithClassNames: Story = {
       {...args}
       classNames={{ popup: "w-56" }}
       items={[
-        { type: "item", label: "Profile", onSelect: action("profile") },
-        { type: "item", label: "Settings", onSelect: action("settings") },
+        { type: "item", label: "Profile", onClick: action("profile") },
+        { type: "item", label: "Settings", onClick: action("settings") },
       ]}
     />
   ),
@@ -88,26 +116,26 @@ export const Shortcuts: Story = {
           type: "item",
           label: "New",
           shortcut: "Ctrl+N",
-          onSelect: action("new"),
+          onClick: action("new"),
         },
         {
           type: "item",
           label: "Open",
           shortcut: "Ctrl+O",
-          onSelect: action("open"),
+          onClick: action("open"),
         },
         {
           type: "item",
           label: "Save",
           shortcut: "Ctrl+S",
-          onSelect: action("save"),
+          onClick: action("save"),
         },
         { type: "separator" },
         {
           type: "item",
           label: "Close",
           shortcut: "Ctrl+W",
-          onSelect: action("close"),
+          onClick: action("close"),
         },
       ]}
     />
@@ -197,19 +225,19 @@ export const Groups: Story = {
               type: "item",
               label: "Cut",
               shortcut: "Ctrl+X",
-              onSelect: action("cut"),
+              onClick: action("cut"),
             },
             {
               type: "item",
               label: "Copy",
               shortcut: "Ctrl+C",
-              onSelect: action("copy"),
+              onClick: action("copy"),
             },
             {
               type: "item",
               label: "Paste",
               shortcut: "Ctrl+V",
-              onSelect: action("paste"),
+              onClick: action("paste"),
             },
           ],
         },
@@ -222,9 +250,9 @@ export const Groups: Story = {
               type: "item",
               label: "Select All",
               shortcut: "Ctrl+A",
-              onSelect: action("select-all"),
+              onClick: action("select-all"),
             },
-            { type: "item", label: "Deselect", onSelect: action("deselect") },
+            { type: "item", label: "Deselect", onClick: action("deselect") },
           ],
         },
       ]}
@@ -237,14 +265,14 @@ export const Submenu: Story = {
     <Menu
       {...args}
       items={[
-        { type: "item", label: "Copy link", onSelect: action("copy-link") },
+        { type: "item", label: "Copy link", onClick: action("copy-link") },
         {
           type: "submenu",
           label: "Export as",
           items: [
-            { type: "item", label: "PDF", onSelect: action("export-pdf") },
-            { type: "item", label: "CSV", onSelect: action("export-csv") },
-            { type: "item", label: "JSON", onSelect: action("export-json") },
+            { type: "item", label: "PDF", onClick: action("export-pdf") },
+            { type: "item", label: "CSV", onClick: action("export-csv") },
+            { type: "item", label: "JSON", onClick: action("export-json") },
           ],
         },
       ]}
@@ -260,14 +288,14 @@ export const Error: Story = {
     <Menu
       {...args}
       items={[
-        { type: "item", label: "Profile", onSelect: action("profile") },
-        { type: "item", label: "Billing", onSelect: action("billing") },
+        { type: "item", label: "Profile", onClick: action("profile") },
+        { type: "item", label: "Billing", onClick: action("billing") },
         { type: "separator" },
         {
           type: "item",
           label: "Delete account",
           variant: "error",
-          onSelect: action("delete"),
+          onClick: action("delete"),
         },
       ]}
     />
@@ -283,7 +311,7 @@ export const Error: Story = {
  *   <MenuPopup>
  *     <MenuGroup>
  *       <MenuLabel>Section</MenuLabel>
- *       <MenuItem onSelect={() => {}}>Item</MenuItem>
+ *       <MenuItem onClick={() => {}}>Item</MenuItem>
  *     </MenuGroup>
  *   </MenuPopup>
  * </MenuRoot>
@@ -305,25 +333,25 @@ export const Primitive: Story = {
         </MenuGroup>
         <MenuSeparator />
         <MenuGroup>
-          <MenuItem onSelect={action("tasks")}>All Tasks</MenuItem>
-          <MenuItem onSelect={action("completed")}>Completed</MenuItem>
-          <MenuItem onSelect={action("upcoming")}>Upcoming</MenuItem>
+          <MenuItem onClick={action("tasks")}>All Tasks</MenuItem>
+          <MenuItem onClick={action("completed")}>Completed</MenuItem>
+          <MenuItem onClick={action("upcoming")}>Upcoming</MenuItem>
         </MenuGroup>
         <MenuSeparator />
         <MenuSub>
           <MenuSubTrigger>Categories</MenuSubTrigger>
           <MenuSubContent>
-            <MenuItem onSelect={action("work")}>Work</MenuItem>
-            <MenuItem onSelect={action("personal")}>Personal</MenuItem>
-            <MenuItem onSelect={action("shopping")}>Shopping</MenuItem>
+            <MenuItem onClick={action("work")}>Work</MenuItem>
+            <MenuItem onClick={action("personal")}>Personal</MenuItem>
+            <MenuItem onClick={action("shopping")}>Shopping</MenuItem>
           </MenuSubContent>
         </MenuSub>
         <MenuSeparator />
-        <MenuItem onSelect={action("settings")}>
+        <MenuItem onClick={action("settings")}>
           Settings
           <MenuShortcut>Ctrl+,</MenuShortcut>
         </MenuItem>
-        <MenuItem disabled onSelect={action("archived")}>
+        <MenuItem disabled onClick={action("archived")}>
           Archived
         </MenuItem>
       </MenuPopup>