ui-lab-registry 0.3.44 → 0.3.45

package/src/components/List/examples/03-notification-rules.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { List, Select } from "ui-lab-components";
+
+export const metadata = {
+  title: "Notification Rules",
+  description: "Rows can combine a leading checkbox with a trailing Select action.",
+};
+
+const notificationItems = [
+  { id: "comments", title: "Comments", desc: "Replies and mentions" },
+  { id: "deployments", title: "Deployments", desc: "Preview and production updates" },
+  { id: "incidents", title: "Incidents", desc: "Status changes and postmortems" },
+];
+
+export default function Example() {
+  const [checked, setChecked] = useState(() => new Set(["comments", "incidents"]));
+  const [delivery, setDelivery] = useState<Record<string, string | number | null>>({
+    comments: "digest",
+    deployments: "email",
+    incidents: "push",
+  });
+
+  const setItem = (id: string, value: boolean) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      value ? next.add(id) : next.delete(id);
+      return next;
+    });
+  };
+
+  const toggleItem = (id: string) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  const setDeliveryMode = (id: string, value: string | number | null) => {
+    setDelivery((current) => ({ ...current, [id]: value }));
+  };
+
+  return (
+    <List items={notificationItems} spacing="sm" style={{ width: 400 }}>
+      {notificationItems.map((item) => (
+        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>
+          <List.Checkbox
+            aria-label={`Enable ${item.title.toLowerCase()} notifications`}
+            placement="start"
+            checked={checked.has(item.id)}
+            onCheckedChange={(value) => setItem(item.id, value)}
+          />
+          <div className="min-w-0 flex-1">
+            <List.Title>{item.title}</List.Title>
+            <List.Desc>{item.desc}</List.Desc>
+          </div>
+          <List.Select
+            selectedKey={delivery[item.id]}
+            valueLabel={String(delivery[item.id] ?? "")}
+            isDisabled={!checked.has(item.id)}
+            onSelectionChange={(value) => setDeliveryMode(item.id, value)}
+          >
+            <Select.Trigger>
+              <Select.Value placeholder="Mode" />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.List>
+                <Select.Item value="email">Email</Select.Item>
+                <Select.Item value="digest">Digest</Select.Item>
+                <Select.Item value="push">Push</Select.Item>
+              </Select.List>
+            </Select.Content>
+          </List.Select>
+        </List.Item>
+      ))}
+    </List>
+  );
+}

package/src/components/List/examples/04-quota-editor.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { List } from "ui-lab-components";
+
+export const metadata = {
+  title: "Quota Editor",
+  description: "Inline inputs work as row actions without taking over the List primitive.",
+};
+
+const quotaItems = [
+  { id: "seats", title: "Seats", desc: "Maximum workspace members" },
+  { id: "projects", title: "Projects", desc: "Active projects per workspace" },
+  { id: "tokens", title: "Tokens", desc: "Monthly API token budget" },
+];
+
+export default function Example() {
+  const [checked, setChecked] = useState(() => new Set(["seats", "projects"]));
+  const [limits, setLimits] = useState<Record<string, string>>({
+    seats: "24",
+    projects: "12",
+    tokens: "50000",
+  });
+
+  const setItem = (id: string, value: boolean) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      value ? next.add(id) : next.delete(id);
+      return next;
+    });
+  };
+
+  const toggleItem = (id: string) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  const setLimit = (id: string, value: string) => {
+    setLimits((current) => ({ ...current, [id]: value }));
+  };
+
+  return (
+    <List items={quotaItems} spacing="sm" style={{ width: 396 }}>
+      {quotaItems.map((item) => (
+        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>
+          <List.Checkbox
+            aria-label={`Enable ${item.title.toLowerCase()} limit`}
+            placement="start"
+            checked={checked.has(item.id)}
+            onCheckedChange={(value) => setItem(item.id, value)}
+          />
+          <div className="min-w-0 flex-1">
+            <List.Title>{item.title}</List.Title>
+            <List.Desc>{item.desc}</List.Desc>
+          </div>
+          <List.Input
+            aria-label={`${item.title} limit`}
+            type="number"
+            value={limits[item.id]}
+            disabled={!checked.has(item.id)}
+            onChange={(event) => setLimit(item.id, event.currentTarget.value)}
+            className="w-24"
+          />
+        </List.Item>
+      ))}
+    </List>
+  );
+}

package/src/components/List/examples/05-permissions-matrix.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { List, Select } from "ui-lab-components";
+
+export const metadata = {
+  title: "Permissions Matrix",
+  description: "A parent checkbox can summarize rows that also expose per-row Select controls.",
+};
+
+const permissionItems = [
+  { id: "members", title: "Members", desc: "Invite and remove workspace members" },
+  { id: "billing", title: "Billing", desc: "Update plan, seats, and invoices" },
+  { id: "tokens", title: "Tokens", desc: "Issue scoped API credentials" },
+];
+
+export default function Example() {
+  const rows = useMemo(() => [{ id: "all", title: "All permissions" }, ...permissionItems], []);
+  const [checked, setChecked] = useState(() => new Set(["members", "tokens"]));
+  const [level, setLevel] = useState<Record<string, string | number | null>>({
+    members: "edit",
+    billing: "view",
+    tokens: "edit",
+  });
+  const allChecked = checked.size === permissionItems.length;
+  const isIndeterminate = checked.size > 0 && !allChecked;
+
+  const setItem = (id: string, value: boolean) => {
+    setChecked((current) => {
+      const next = new Set(current);
+      value ? next.add(id) : next.delete(id);
+      return next;
+    });
+  };
+
+  const setAll = (value: boolean) => {
+    permissionItems.forEach((item) => setItem(item.id, value));
+  };
+
+  const setPermissionLevel = (id: string, value: string | number | null) => {
+    setLevel((current) => ({ ...current, [id]: value }));
+  };
+
+  return (
+    <List items={rows} spacing="sm" style={{ width: 420 }}>
+      <List.Item value="all" interactive onClick={() => setAll(!allChecked)}>
+        <List.Checkbox
+          aria-label="Toggle all permissions"
+          placement="start"
+          checked={allChecked}
+          isIndeterminate={isIndeterminate}
+          onCheckedChange={setAll}
+        />
+        <List.Title>All permissions</List.Title>
+      </List.Item>
+      <List.Divider />
+      {permissionItems.map((item) => (
+        <List.Item key={item.id} value={item.id} interactive onClick={() => setItem(item.id, !checked.has(item.id))}>
+          <div className="w-5 flex-shrink-0" />
+          <List.Checkbox
+            aria-label={`Allow ${item.title.toLowerCase()}`}
+            placement="start"
+            checked={checked.has(item.id)}
+            onCheckedChange={(value) => setItem(item.id, value)}
+          />
+          <div className="min-w-0 flex-1">
+            <List.Title>{item.title}</List.Title>
+            <List.Desc>{item.desc}</List.Desc>
+          </div>
+          <List.Select
+            selectedKey={level[item.id]}
+            valueLabel={String(level[item.id] ?? "")}
+            isDisabled={!checked.has(item.id)}
+            onSelectionChange={(value) => setPermissionLevel(item.id, value)}
+          >
+            <Select.Trigger>
+              <Select.Value placeholder="Access" />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.List>
+                <Select.Item value="view">View</Select.Item>
+                <Select.Item value="edit">Edit</Select.Item>
+                <Select.Item value="admin">Admin</Select.Item>
+              </Select.List>
+            </Select.Content>
+          </List.Select>
+        </List.Item>
+      ))}
+    </List>
+  );
+}

package/src/components/List/examples/index.ts

@@ -1,2 +1,10 @@
 export { default as Example1 } from './01-basic.js';
 export { metadata as metadata1 } from './01-basic.js';
+export { default as Example2 } from './02-review-queue.js';
+export { metadata as metadata2 } from './02-review-queue.js';
+export { default as Example3 } from './03-notification-rules.js';
+export { metadata as metadata3 } from './03-notification-rules.js';
+export { default as Example4 } from './04-quota-editor.js';
+export { metadata as metadata4 } from './04-quota-editor.js';
+export { default as Example5 } from './05-permissions-matrix.js';
+export { metadata as metadata5 } from './05-permissions-matrix.js';

package/src/components/List/examples.json

@@ -3,5 +3,25 @@
     "title": "Basic List",
     "description": "A simple list displaying basic items with selection and interaction support.",
     "code": "import { List } from 'ui-lab-components';\nimport { Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <List aria-label=\"Basic List Example\">\n      <List.Header>\n        <h2>Items</h2>\n      </List.Header>\n      <List.Item interactive>Item One</List.Item>\n      <List.Item interactive>Item Two</List.Item>\n      <List.Item interactive>Item Three</List.Item>\n      <List.Footer align=\"center\">\n        <Button variant=\"primary\" size=\"sm\">\n          Load More\n        </Button>\n      </List.Footer>\n    </List>\n  );\n}"
+  },
+  "02-review-queue": {
+    "title": "Review Queue",
+    "description": "A compact checklist for work that can be completed directly from each row.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List } from \"ui-lab-components\";\n\nconst reviewItems = [\n  { id: \"legal\", title: \"Legal review\", desc: \"Updated retention language\" },\n  { id: \"security\", title: \"Security review\", desc: \"New access scopes\" },\n  { id: \"billing\", title: \"Billing review\", desc: \"Invoice copy changes\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"legal\"]));\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <List items={reviewItems} spacing=\"sm\" style={{ width: 320 }}>\n      {reviewItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Mark ${item.title} reviewed`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "03-notification-rules": {
+    "title": "Notification Rules",
+    "description": "Rows can combine a leading checkbox with a trailing Select action.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List, Select } from \"ui-lab-components\";\n\nconst notificationItems = [\n  { id: \"comments\", title: \"Comments\", desc: \"Replies and mentions\" },\n  { id: \"deployments\", title: \"Deployments\", desc: \"Preview and production updates\" },\n  { id: \"incidents\", title: \"Incidents\", desc: \"Status changes and postmortems\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"comments\", \"incidents\"]));\n  const [delivery, setDelivery] = useState<Record<string, string | number | null>>({\n    comments: \"digest\",\n    deployments: \"email\",\n    incidents: \"push\",\n  });\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  const setDeliveryMode = (id: string, value: string | number | null) => {\n    setDelivery((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={notificationItems} spacing=\"sm\" style={{ width: 400 }}>\n      {notificationItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Enable ${item.title.toLowerCase()} notifications`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Select\n            selectedKey={delivery[item.id]}\n            valueLabel={String(delivery[item.id] ?? \"\")}\n            isDisabled={!checked.has(item.id)}\n            onSelectionChange={(value) => setDeliveryMode(item.id, value)}\n          >\n            <Select.Trigger>\n              <Select.Value placeholder=\"Mode\" />\n            </Select.Trigger>\n            <Select.Content>\n              <Select.List>\n                <Select.Item value=\"email\">Email</Select.Item>\n                <Select.Item value=\"digest\">Digest</Select.Item>\n                <Select.Item value=\"push\">Push</Select.Item>\n              </Select.List>\n            </Select.Content>\n          </List.Select>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "04-quota-editor": {
+    "title": "Quota Editor",
+    "description": "Inline inputs work as row actions without taking over the List primitive.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { List } from \"ui-lab-components\";\n\nconst quotaItems = [\n  { id: \"seats\", title: \"Seats\", desc: \"Maximum workspace members\" },\n  { id: \"projects\", title: \"Projects\", desc: \"Active projects per workspace\" },\n  { id: \"tokens\", title: \"Tokens\", desc: \"Monthly API token budget\" },\n];\n\nexport default function Example() {\n  const [checked, setChecked] = useState(() => new Set([\"seats\", \"projects\"]));\n  const [limits, setLimits] = useState<Record<string, string>>({\n    seats: \"24\",\n    projects: \"12\",\n    tokens: \"50000\",\n  });\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const toggleItem = (id: string) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  };\n\n  const setLimit = (id: string, value: string) => {\n    setLimits((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={quotaItems} spacing=\"sm\" style={{ width: 396 }}>\n      {quotaItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => toggleItem(item.id)}>\n          <List.Checkbox\n            aria-label={`Enable ${item.title.toLowerCase()} limit`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Input\n            aria-label={`${item.title} limit`}\n            type=\"number\"\n            value={limits[item.id]}\n            disabled={!checked.has(item.id)}\n            onChange={(event) => setLimit(item.id, event.currentTarget.value)}\n            className=\"w-24\"\n          />\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
+  },
+  "05-permissions-matrix": {
+    "title": "Permissions Matrix",
+    "description": "A parent checkbox can summarize rows that also expose per-row Select controls.",
+    "code": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport { List, Select } from \"ui-lab-components\";\n\nconst permissionItems = [\n  { id: \"members\", title: \"Members\", desc: \"Invite and remove workspace members\" },\n  { id: \"billing\", title: \"Billing\", desc: \"Update plan, seats, and invoices\" },\n  { id: \"tokens\", title: \"Tokens\", desc: \"Issue scoped API credentials\" },\n];\n\nexport default function Example() {\n  const rows = useMemo(() => [{ id: \"all\", title: \"All permissions\" }, ...permissionItems], []);\n  const [checked, setChecked] = useState(() => new Set([\"members\", \"tokens\"]));\n  const [level, setLevel] = useState<Record<string, string | number | null>>({\n    members: \"edit\",\n    billing: \"view\",\n    tokens: \"edit\",\n  });\n  const allChecked = checked.size === permissionItems.length;\n  const isIndeterminate = checked.size > 0 && !allChecked;\n\n  const setItem = (id: string, value: boolean) => {\n    setChecked((current) => {\n      const next = new Set(current);\n      value ? next.add(id) : next.delete(id);\n      return next;\n    });\n  };\n\n  const setAll = (value: boolean) => {\n    permissionItems.forEach((item) => setItem(item.id, value));\n  };\n\n  const setPermissionLevel = (id: string, value: string | number | null) => {\n    setLevel((current) => ({ ...current, [id]: value }));\n  };\n\n  return (\n    <List items={rows} spacing=\"sm\" style={{ width: 420 }}>\n      <List.Item value=\"all\" interactive onClick={() => setAll(!allChecked)}>\n        <List.Checkbox\n          aria-label=\"Toggle all permissions\"\n          placement=\"start\"\n          checked={allChecked}\n          isIndeterminate={isIndeterminate}\n          onCheckedChange={setAll}\n        />\n        <List.Title>All permissions</List.Title>\n      </List.Item>\n      <List.Divider />\n      {permissionItems.map((item) => (\n        <List.Item key={item.id} value={item.id} interactive onClick={() => setItem(item.id, !checked.has(item.id))}>\n          <div className=\"w-5 flex-shrink-0\" />\n          <List.Checkbox\n            aria-label={`Allow ${item.title.toLowerCase()}`}\n            placement=\"start\"\n            checked={checked.has(item.id)}\n            onCheckedChange={(value) => setItem(item.id, value)}\n          />\n          <div className=\"min-w-0 flex-1\">\n            <List.Title>{item.title}</List.Title>\n            <List.Desc>{item.desc}</List.Desc>\n          </div>\n          <List.Select\n            selectedKey={level[item.id]}\n            valueLabel={String(level[item.id] ?? \"\")}\n            isDisabled={!checked.has(item.id)}\n            onSelectionChange={(value) => setPermissionLevel(item.id, value)}\n          >\n            <Select.Trigger>\n              <Select.Value placeholder=\"Access\" />\n            </Select.Trigger>\n            <Select.Content>\n              <Select.List>\n                <Select.Item value=\"view\">View</Select.Item>\n                <Select.Item value=\"edit\">Edit</Select.Item>\n                <Select.Item value=\"admin\">Admin</Select.Item>\n              </Select.List>\n            </Select.Content>\n          </List.Select>\n        </List.Item>\n      ))}\n    </List>\n  );\n}"
   }
 }

package/src/components/List/index.tsx

@@ -2,11 +2,19 @@ import React from 'react';
 import { List, Button } from 'ui-lab-components';
 import { ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic.js';
+import Example2, { metadata as metadata2 } from './examples/02-review-queue.js';
+import Example3, { metadata as metadata3 } from './examples/03-notification-rules.js';
+import Example4, { metadata as metadata4 } from './examples/04-quota-editor.js';
+import Example5, { metadata as metadata5 } from './examples/05-permissions-matrix.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic', Component: Example1, metadata: metadata1 },
+  { id: '02-review-queue', Component: Example2, metadata: metadata2 },
+  { id: '03-notification-rules', Component: Example3, metadata: metadata3 },
+  { id: '04-quota-editor', Component: Example4, metadata: metadata4 },
+  { id: '05-permissions-matrix', Component: Example5, metadata: metadata5 },
 ];
 
 const basicListCode = `import { List, Button } from "ui-lab-components";
@@ -141,7 +149,7 @@ export function Example() {
       </List.Header>
       <List.Item interactive>
         <p>Item with actions</p>
-        <List.ActionGroup justify="space-between">
+        <List.ActionGroup justify="between">
           <button>👍 Like</button>
           <button>💬 Reply</button>
         </List.ActionGroup>
@@ -156,7 +164,7 @@ export function Example() {
           </List.Header>
           <List.Item interactive>
             <p className="text-sm text-foreground-300">Item with actions</p>
-            <List.ActionGroup justify="space-between">
+            <List.ActionGroup justify="between">
               <button className="text-sm text-foreground-300 hover:text-foreground-100 transition-colors">👍 Like</button>
               <button className="text-sm text-foreground-300 hover:text-foreground-100 transition-colors">💬 Reply</button>
             </List.ActionGroup>

package/src/components/Menu/examples/03-toolbar-dropdown.tsx

@@ -0,0 +1,35 @@
+import { Menu, Button } from "ui-lab-components";
+import { FaChevronDown } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Toolbar Dropdown",
+  description: "Dropdown menu of actions with keyboard shortcuts and a disabled item.",
+};
+
+export default function Example() {
+  return (
+    <Menu type="pop-over">
+      <Menu.Trigger>
+        <Button variant="ghost">
+          File <FaChevronDown className="w-3 h-3 ml-1" />
+        </Button>
+      </Menu.Trigger>
+      <Menu.Content align="start">
+        <Menu.Item onSelect={() => {}}>
+          New file
+          <Menu.Shortcut>⌘N</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Item onSelect={() => {}}>
+          Open…
+          <Menu.Shortcut>⌘O</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Item onSelect={() => {}}>
+          Save
+          <Menu.Shortcut>⌘S</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Separator />
+        <Menu.Item disabled>Recent files</Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/components/Menu/examples/04-table-row-actions.tsx

@@ -0,0 +1,60 @@
+import { Menu, Button } from "ui-lab-components";
+import { FaEllipsis } from "react-icons/fa6";
+
+export const metadata = {
+  title: "Table Row Actions",
+  description: "Per-row overflow menu in a table, with a destructive action separated from neutral ones.",
+};
+
+const rows = [
+  { id: "doc_1", name: "Q3 roadmap", updated: "2h ago" },
+  { id: "doc_2", name: "Pricing review", updated: "yesterday" },
+  { id: "doc_3", name: "Hiring plan", updated: "3 days ago" },
+];
+
+export default function Example() {
+  return (
+    <table className="w-full text-sm border-collapse">
+      <thead>
+        <tr className="border-b border-background-700">
+          <th className="text-left py-2 px-3 font-medium text-foreground-200">Document</th>
+          <th className="text-left py-2 px-3 font-medium text-foreground-200">Updated</th>
+          <th className="py-2 px-3" />
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.id} className="border-b border-background-700 last:border-0">
+            <td className="py-2 px-3">{row.name}</td>
+            <td className="py-2 px-3 text-foreground-400">{row.updated}</td>
+            <td className="py-2 px-3 text-right">
+              <Menu type="pop-over">
+                <Menu.Trigger>
+                  <Button
+                    icon={<FaEllipsis />}
+                    size="icon"
+                    variant="ghost"
+                    styles="p-2"
+                    aria-label={`Actions for ${row.name}`}
+                  />
+                </Menu.Trigger>
+                <Menu.Content align="end">
+                  <Menu.Item onSelect={() => {}}>Open</Menu.Item>
+                  <Menu.Item onSelect={() => {}}>Rename</Menu.Item>
+                  <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
+                  <Menu.Separator />
+                  <Menu.Item
+                    onSelect={() => {}}
+                    styles={{ root: "text-destructive" }}
+                  >
+                    Delete
+                  </Menu.Item>
+                </Menu.Content>
+              </Menu>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/Menu/examples/05-context-menu.tsx

@@ -0,0 +1,36 @@
+import { Menu } from "ui-lab-components";
+
+export const metadata = {
+  title: "Context Menu",
+  description: "Right-click anywhere in the surface to open the menu at the cursor position.",
+};
+
+export default function Example() {
+  return (
+    <Menu type="context-menu">
+      <Menu.Trigger>
+        <div className="flex items-center justify-center w-80 h-32 border border-dashed border-background-700 rounded-sm text-sm text-foreground-400 select-none">
+          Right-click anywhere in this area
+        </div>
+      </Menu.Trigger>
+      <Menu.Content>
+        <Menu.Item onSelect={() => {}}>
+          Cut
+          <Menu.Shortcut>⌘X</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Item onSelect={() => {}}>
+          Copy
+          <Menu.Shortcut>⌘C</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Item onSelect={() => {}}>
+          Paste
+          <Menu.Shortcut>⌘V</Menu.Shortcut>
+        </Menu.Item>
+        <Menu.Separator />
+        <Menu.Item onSelect={() => {}} styles={{ root: "text-destructive" }}>
+          Delete
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/components/Menu/examples/06-view-options.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { Menu, Button } from "ui-lab-components";
+
+export const metadata = {
+  title: "View Options",
+  description: "Mixed checkbox and radio items for toggling display state and selecting a single density.",
+};
+
+export default function Example() {
+  const [showGrid, setShowGrid] = useState(true);
+  const [showRulers, setShowRulers] = useState(false);
+  const [density, setDensity] = useState("comfortable");
+
+  return (
+    <Menu type="pop-over">
+      <Menu.Trigger>
+        <Button>View</Button>
+      </Menu.Trigger>
+      <Menu.Content align="start">
+        <Menu.Label>Display</Menu.Label>
+        <Menu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+          Show grid
+        </Menu.CheckboxItem>
+        <Menu.CheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
+          Show rulers
+        </Menu.CheckboxItem>
+        <Menu.Separator />
+        <Menu.Label>Density</Menu.Label>
+        <Menu.RadioGroup value={density} onValueChange={setDensity}>
+          <Menu.RadioItem value="compact">Compact</Menu.RadioItem>
+          <Menu.RadioItem value="comfortable">Comfortable</Menu.RadioItem>
+          <Menu.RadioItem value="spacious">Spacious</Menu.RadioItem>
+        </Menu.RadioGroup>
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/components/Menu/examples/index.ts

@@ -2,3 +2,11 @@ export { default as Example1 } from './01-basic-menu.js';
 export { metadata as metadata1 } from './01-basic-menu.js';
 export { default as Example2 } from './02-nested-menu.js';
 export { metadata as metadata2 } from './02-nested-menu.js';
+export { default as Example3 } from './03-toolbar-dropdown.js';
+export { metadata as metadata3 } from './03-toolbar-dropdown.js';
+export { default as Example4 } from './04-table-row-actions.js';
+export { metadata as metadata4 } from './04-table-row-actions.js';
+export { default as Example5 } from './05-context-menu.js';
+export { metadata as metadata5 } from './05-context-menu.js';
+export { default as Example6 } from './06-view-options.js';
+export { metadata as metadata6 } from './06-view-options.js';

package/src/components/Menu/examples.json

@@ -8,5 +8,25 @@
     "title": "Nested Menu",
     "description": "Context menu with submenus for organizing related actions. Hover over items with arrows to reveal nested options.",
     "code": "import { Menu } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Menu>\n      <Menu.Trigger className=\"flex items-center justify-center rounded-md border-2 border-dashed border-background-600 p-12 w-full cursor-context-menu select-none text-foreground-300 hover:border-background-500 transition-colors\">\n        Right click here\n      </Menu.Trigger>\n      <Menu.Content>\n        <Menu.Item>New File</Menu.Item>\n        <Menu.Item>New Folder</Menu.Item>\n        <Menu.Separator />\n        <Menu.Sub>\n          <Menu.SubTrigger>Open with...</Menu.SubTrigger>\n          <Menu.SubContent>\n            <Menu.Item>VS Code</Menu.Item>\n            <Menu.Item>Sublime Text</Menu.Item>\n            <Menu.Item>Vim</Menu.Item>\n            <Menu.Separator />\n            <Menu.Item>Other Application...</Menu.Item>\n          </Menu.SubContent>\n        </Menu.Sub>\n        <Menu.Sub>\n          <Menu.SubTrigger>Share</Menu.SubTrigger>\n          <Menu.SubContent>\n            <Menu.Item>Copy Link</Menu.Item>\n            <Menu.Item>Email</Menu.Item>\n            <Menu.Sub>\n              <Menu.SubTrigger>Social Media</Menu.SubTrigger>\n              <Menu.SubContent>\n                <Menu.Item>Twitter</Menu.Item>\n                <Menu.Item>LinkedIn</Menu.Item>\n                <Menu.Item>Facebook</Menu.Item>\n              </Menu.SubContent>\n            </Menu.Sub>\n          </Menu.SubContent>\n        </Menu.Sub>\n        <Menu.Separator />\n        <Menu.Item>Rename</Menu.Item>\n        <Menu.Item disabled>Delete</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "03-toolbar-dropdown": {
+    "title": "Toolbar Dropdown",
+    "description": "Dropdown menu of actions with keyboard shortcuts and a disabled item.",
+    "code": "import { Menu, Button } from \"ui-lab-components\";\nimport { FaChevronDown } from \"react-icons/fa6\";\n\nexport default function Example() {\n  return (\n    <Menu type=\"pop-over\">\n      <Menu.Trigger>\n        <Button variant=\"ghost\">\n          File <FaChevronDown className=\"w-3 h-3 ml-1\" />\n        </Button>\n      </Menu.Trigger>\n      <Menu.Content align=\"start\">\n        <Menu.Item onSelect={() => {}}>\n          New file\n          <Menu.Shortcut>⌘N</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Open…\n          <Menu.Shortcut>⌘O</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Save\n          <Menu.Shortcut>⌘S</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item disabled>Recent files</Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "04-table-row-actions": {
+    "title": "Table Row Actions",
+    "description": "Per-row overflow menu in a table, with a destructive action separated from neutral ones.",
+    "code": "import { Menu, Button } from \"ui-lab-components\";\nimport { FaEllipsis } from \"react-icons/fa6\";\n\nconst rows = [\n  { id: \"doc_1\", name: \"Q3 roadmap\", updated: \"2h ago\" },\n  { id: \"doc_2\", name: \"Pricing review\", updated: \"yesterday\" },\n  { id: \"doc_3\", name: \"Hiring plan\", updated: \"3 days ago\" },\n];\n\nexport default function Example() {\n  return (\n    <table className=\"w-full text-sm border-collapse\">\n      <thead>\n        <tr className=\"border-b border-background-700\">\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Document</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Updated</th>\n          <th className=\"py-2 px-3\" />\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.id} className=\"border-b border-background-700 last:border-0\">\n            <td className=\"py-2 px-3\">{row.name}</td>\n            <td className=\"py-2 px-3 text-foreground-400\">{row.updated}</td>\n            <td className=\"py-2 px-3 text-right\">\n              <Menu type=\"pop-over\">\n                <Menu.Trigger>\n                  <Button\n                    icon={<FaEllipsis />}\n                    size=\"icon\"\n                    variant=\"ghost\"\n                    styles=\"p-2\"\n                    aria-label={`Actions for ${row.name}`}\n                  />\n                </Menu.Trigger>\n                <Menu.Content align=\"end\">\n                  <Menu.Item onSelect={() => {}}>Open</Menu.Item>\n                  <Menu.Item onSelect={() => {}}>Rename</Menu.Item>\n                  <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n                  <Menu.Separator />\n                  <Menu.Item\n                    onSelect={() => {}}\n                    styles={{ root: \"text-destructive\" }}\n                  >\n                    Delete\n                  </Menu.Item>\n                </Menu.Content>\n              </Menu>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}"
+  },
+  "05-context-menu": {
+    "title": "Context Menu",
+    "description": "Right-click anywhere in the surface to open the menu at the cursor position.",
+    "code": "import { Menu } from \"ui-lab-components\";\n\nexport default function Example() {\n  return (\n    <Menu type=\"context-menu\">\n      <Menu.Trigger>\n        <div className=\"flex items-center justify-center w-80 h-32 border border-dashed border-background-700 rounded-sm text-sm text-foreground-400 select-none\">\n          Right-click anywhere in this area\n        </div>\n      </Menu.Trigger>\n      <Menu.Content>\n        <Menu.Item onSelect={() => {}}>\n          Cut\n          <Menu.Shortcut>⌘X</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Copy\n          <Menu.Shortcut>⌘C</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Item onSelect={() => {}}>\n          Paste\n          <Menu.Shortcut>⌘V</Menu.Shortcut>\n        </Menu.Item>\n        <Menu.Separator />\n        <Menu.Item onSelect={() => {}} styles={{ root: \"text-destructive\" }}>\n          Delete\n        </Menu.Item>\n      </Menu.Content>\n    </Menu>\n  );\n}"
+  },
+  "06-view-options": {
+    "title": "View Options",
+    "description": "Mixed checkbox and radio items for toggling display state and selecting a single density.",
+    "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Menu, Button } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [showGrid, setShowGrid] = useState(true);\n  const [showRulers, setShowRulers] = useState(false);\n  const [density, setDensity] = useState(\"comfortable\");\n\n  return (\n    <Menu type=\"pop-over\">\n      <Menu.Trigger>\n        <Button>View</Button>\n      </Menu.Trigger>\n      <Menu.Content align=\"start\">\n        <Menu.Label>Display</Menu.Label>\n        <Menu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>\n          Show grid\n        </Menu.CheckboxItem>\n        <Menu.CheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>\n          Show rulers\n        </Menu.CheckboxItem>\n        <Menu.Separator />\n        <Menu.Label>Density</Menu.Label>\n        <Menu.RadioGroup value={density} onValueChange={setDensity}>\n          <Menu.RadioItem value=\"compact\">Compact</Menu.RadioItem>\n          <Menu.RadioItem value=\"comfortable\">Comfortable</Menu.RadioItem>\n          <Menu.RadioItem value=\"spacious\">Spacious</Menu.RadioItem>\n        </Menu.RadioGroup>\n      </Menu.Content>\n    </Menu>\n  );\n}"
   }
 }

package/src/components/Menu/index.tsx

@@ -3,6 +3,10 @@ import { Menu } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-menu.js';
 import Example2, { metadata as metadata2 } from './examples/02-nested-menu.js';
+import Example3, { metadata as metadata3 } from './examples/03-toolbar-dropdown.js';
+import Example4, { metadata as metadata4 } from './examples/04-table-row-actions.js';
+import Example5, { metadata as metadata5 } from './examples/05-context-menu.js';
+import Example6, { metadata as metadata6 } from './examples/06-view-options.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaArrowsRotate, FaStar, FaTrash } from 'react-icons/fa6';
@@ -10,6 +14,10 @@ import { FaArrowsRotate, FaStar, FaTrash } from 'react-icons/fa6';
 const examplesData = [
   { id: '01-basic-menu', Component: Example1, metadata: metadata1 },
   { id: '02-nested-menu', Component: Example2, metadata: metadata2 },
+  { id: '03-toolbar-dropdown', Component: Example3, metadata: metadata3 },
+  { id: '04-table-row-actions', Component: Example4, metadata: metadata4 },
+  { id: '05-context-menu', Component: Example5, metadata: metadata5 },
+  { id: '06-view-options', Component: Example6, metadata: metadata6 },
 ];
 
 const menuControls: ControlDef[] = [];

package/src/components/Modal/examples/02-form-modal.tsx

@@ -73,7 +73,7 @@ export default function Example() {
           </form>
         </Modal.Body>
         <Modal.Footer>
-          <Flex gap="sm" justify="flex-end">
+          <Flex gap="sm" justify="end">
             <Button variant="ghost" onClick={() => setIsOpen(false)}>
               Cancel
             </Button>

package/src/components/Modal/examples/03-delete-confirmation.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { Modal, Button } from "ui-lab-components";
+
+export const metadata = {
+  title: "Delete Confirmation",
+  description: "Destructive action dialog that blocks the user until they explicitly confirm or cancel.",
+};
+
+export default function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setIsOpen(true)}>
+        Delete workspace
+      </Button>
+
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title="Delete workspace"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => setIsOpen(false)}>
+              Delete
+            </Button>
+          </>
+        }
+      >
+        <p className="text-sm text-foreground-300">
+          This will permanently delete <strong className="text-foreground-100">acme-corp</strong> and all
+          its data. This action cannot be undone.
+        </p>
+      </Modal>
+    </>
+  );
+}