ui-lab-registry 0.3.44 → 0.3.45

package/dist/components/Input/examples.json

@@ -8,5 +8,35 @@
         "title": "Validation States",
         "description": "Input fields with error and success validation states, including helper text for user feedback.",
         "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n      {/* Error State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label error helperText=\"Please enter a valid email address\" helperTextError>\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          error\n          defaultValue=\"invalid-email\"\n          icon={{ suffix: <FaCircleExclamation className=\"text-danger-600\" size={14} /> }}\n        />\n      </div>\n\n      {/* Success State */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label helperText=\"Email address is available\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n          defaultValue=\"user@example.com\"\n          icon={{ suffix: <FaCircleCheck className=\"text-success-600\" size={14} /> }}\n          className=\"border-success-600 focus:border-success-600\"\n        />\n      </div>\n\n      {/* Default State with Helper Text */}\n      <div className=\"flex flex-col gap-1.5\">\n        <Label required helperText=\"We'll never share your email with anyone else.\">\n          Email\n        </Label>\n        <Input\n          type=\"email\"\n          placeholder=\"Enter your email\"\n        />\n      </div>\n    </div>\n  );\n}"
+    },
+    "03-sign-in": {
+        "title": "Sign In Form",
+        "description": "Email and password fields with a password visibility toggle — a common authentication pattern.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Button } from \"ui-lab-components\";\nimport { FaEnvelope, FaLock, FaEye, FaEyeSlash } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        type=\"email\"\n        icon={<FaEnvelope className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Email address\"\n        autoComplete=\"email\"\n      />\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        icon={<FaLock className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Password\"\n        autoComplete=\"current-password\"\n        actions={[\n          {\n            icon: showPassword\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: showPassword ? \"Hide password\" : \"Show password\",\n            onClick: () => setShowPassword((v) => !v),\n          },\n        ]}\n      />\n      <Button variant=\"primary\" className=\"w-full mt-1\">Sign in</Button>\n    </Flex>\n  );\n}"
+    },
+    "04-search": {
+        "title": "Search",
+        "description": "Search input with a keyboard shortcut hint that switches to a clear action once the user types.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex, Badge } from \"ui-lab-components\";\nimport { FaMagnifyingGlass, FaXmark } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [query, setQuery] = useState(\"\");\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        icon={<FaMagnifyingGlass className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"Search components...\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        hint={!query ? <Badge>⌘K</Badge> : undefined}\n        actions={\n          query\n            ? [{ icon: <FaXmark className=\"w-3.5 h-3.5\" />, title: \"Clear\", onClick: () => setQuery(\"\") }]\n            : []\n        }\n      />\n    </Flex>\n  );\n}"
+    },
+    "05-user-handle": {
+        "title": "User Handle",
+        "description": "Editable username field with an inline copy action.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaAt, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [handle, setHandle] = useState(\"kyza\");\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 320 }}>\n      <Input\n        icon={<FaAt className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        placeholder=\"username\"\n        value={handle}\n        onChange={(e) => setHandle(e.target.value)}\n        actions={[\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy handle\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+    },
+    "06-api-key": {
+        "title": "API Key",
+        "description": "Read-only secret field with reveal and copy actions — suitable for credentials and tokens.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaKey, FaEye, FaEyeSlash, FaCopy, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [revealed, setRevealed] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const key = \"sk-proj-a8f2c1d9e4b7\";\n\n  const handleCopy = () => {\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 360 }}>\n      <Input\n        type={revealed ? \"text\" : \"password\"}\n        icon={<FaKey className=\"w-3.5 h-3.5 text-foreground-400\" />}\n        value={key}\n        readOnly\n        actions={[\n          {\n            icon: revealed\n              ? <FaEyeSlash className=\"w-3.5 h-3.5\" />\n              : <FaEye className=\"w-3.5 h-3.5\" />,\n            title: revealed ? \"Hide key\" : \"Reveal key\",\n            onClick: () => setRevealed((v) => !v),\n          },\n          {\n            icon: copied\n              ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n              : <FaCopy className=\"w-3.5 h-3.5\" />,\n            title: copied ? \"Copied!\" : \"Copy key\",\n            onClick: handleCopy,\n          },\n        ]}\n      />\n    </Flex>\n  );\n}"
+    },
+    "07-url-validation": {
+        "title": "URL with Validation",
+        "description": "URL field that shows a success or error icon in the suffix slot based on the input value.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\nimport { FaLink, FaCircleExclamation, FaCheck } from \"react-icons/fa6\";\n\nexport default function Example() {\n  const [url, setUrl] = useState(\"\");\n\n  const isValid = url.length === 0 || /^https?:\\/\\/.+\\..+/.test(url);\n  const showError = url.length > 0 && !isValid;\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 340 }}>\n      <Input\n        placeholder=\"https://example.com\"\n        value={url}\n        onChange={(e) => setUrl(e.target.value)}\n        error={showError}\n        icon={{\n          prefix: <FaLink className=\"w-3.5 h-3.5 text-foreground-400\" />,\n          suffix: showError\n            ? <FaCircleExclamation className=\"w-3.5 h-3.5 text-red-500\" />\n            : url.length > 0\n            ? <FaCheck className=\"w-3.5 h-3.5 text-green-500\" />\n            : undefined,\n        }}\n      />\n    </Flex>\n  );\n}"
+    },
+    "08-quantity": {
+        "title": "Quantity",
+        "description": "Number input with native spin controls for selecting a bounded quantity.",
+        "code": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input, Flex } from \"ui-lab-components\";\n\nexport default function Example() {\n  const [qty, setQty] = useState(1);\n\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 200 }}>\n      <Input\n        type=\"number\"\n        placeholder=\"Qty\"\n        value={qty}\n        min={1}\n        max={99}\n        onChange={(e) => setQty(Number(e.target.value))}\n      />\n    </Flex>\n  );\n}"
     }
 }

package/dist/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAYtD,QAAA,MAAM,aAAa,EAAE,UAAU,EA+B9B,CAAA;AAQD,eAAO,MAAM,WAAW,EAAE,eAmDzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAwBtD,QAAA,MAAM,aAAa,EAAE,UAAU,EA+B9B,CAAA;AAQD,eAAO,MAAM,WAAW,EAAE,eAmDzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}

package/dist/components/Input/index.js

@@ -2,11 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from 'ui-lab-components';
 import Example1, { metadata as metadata1 } from './examples/01-basic-input.js';
 import Example2, { metadata as metadata2 } from './examples/02-validation.js';
+import Example3, { metadata as metadata3 } from './examples/03-sign-in.js';
+import Example4, { metadata as metadata4 } from './examples/04-search.js';
+import Example5, { metadata as metadata5 } from './examples/05-user-handle.js';
+import Example6, { metadata as metadata6 } from './examples/06-api-key.js';
+import Example7, { metadata as metadata7 } from './examples/07-url-validation.js';
+import Example8, { metadata as metadata8 } from './examples/08-quantity.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 const examplesData = [
     { id: '01-basic-input', Component: Example1, metadata: metadata1 },
     { id: '02-validation', Component: Example2, metadata: metadata2 },
+    { id: '03-sign-in', Component: Example3, metadata: metadata3 },
+    { id: '04-search', Component: Example4, metadata: metadata4 },
+    { id: '05-user-handle', Component: Example5, metadata: metadata5 },
+    { id: '06-api-key', Component: Example6, metadata: metadata6 },
+    { id: '07-url-validation', Component: Example7, metadata: metadata7 },
+    { id: '08-quantity', Component: Example8, metadata: metadata8 },
 ];
 const inputControls = [
     {

package/dist/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/examples/02-review-queue.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=02-review-queue.d.ts.map

package/dist/components/List/examples/02-review-queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-review-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/02-review-queue.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAqC9B"}

package/dist/components/List/examples/02-review-queue.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { List } from "ui-lab-components";
+export const metadata = {
+    title: "Review Queue",
+    description: "A compact checklist for work that can be completed directly from each row.",
+};
+const reviewItems = [
+    { id: "legal", title: "Legal review", desc: "Updated retention language" },
+    { id: "security", title: "Security review", desc: "New access scopes" },
+    { id: "billing", title: "Billing review", desc: "Invoice copy changes" },
+];
+export default function Example() {
+    const [checked, setChecked] = useState(() => new Set(["legal"]));
+    const setItem = (id, value) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            value ? next.add(id) : next.delete(id);
+            return next;
+        });
+    };
+    const toggleItem = (id) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    };
+    return (_jsx(List, { items: reviewItems, spacing: "sm", style: { width: 320 }, children: reviewItems.map((item) => (_jsxs(List.Item, { value: item.id, interactive: true, onClick: () => toggleItem(item.id), children: [_jsx(List.Checkbox, { "aria-label": `Mark ${item.title} reviewed`, placement: "start", checked: checked.has(item.id), onCheckedChange: (value) => setItem(item.id, value) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(List.Title, { children: item.title }), _jsx(List.Desc, { children: item.desc })] })] }, item.id))) }));
+}
+//# sourceMappingURL=02-review-queue.js.map

package/dist/components/List/examples/02-review-queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-review-queue.js","sourceRoot":"","sources":["../../../../src/components/List/examples/02-review-queue.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,4EAA4E;CAC1F,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,4BAA4B,EAAE;IAC1E,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,mBAAmB,EAAE;IACvE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,sBAAsB,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,CAAC,EAAU,EAAE,KAAc,EAAE,EAAE;QAC7C,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACvC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,EAAU,EAAE,EAAE;QAChC,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC9C,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACzD,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,IAAI,CAAC,IAAI,IAAe,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aACrF,KAAC,IAAI,CAAC,QAAQ,kBACA,QAAQ,IAAI,CAAC,KAAK,WAAW,EACzC,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAC7B,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,GACnD,EACF,eAAK,SAAS,EAAC,gBAAgB,aAC7B,KAAC,IAAI,CAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAc,EACrC,KAAC,IAAI,CAAC,IAAI,cAAE,IAAI,CAAC,IAAI,GAAa,IAC9B,KAVQ,IAAI,CAAC,EAAE,CAWX,CACb,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/components/List/examples/03-notification-rules.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-notification-rules.d.ts.map

package/dist/components/List/examples/03-notification-rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-notification-rules.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/03-notification-rules.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA+D9B"}

package/dist/components/List/examples/03-notification-rules.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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({
+        comments: "digest",
+        deployments: "email",
+        incidents: "push",
+    });
+    const setItem = (id, value) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            value ? next.add(id) : next.delete(id);
+            return next;
+        });
+    };
+    const toggleItem = (id) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    };
+    const setDeliveryMode = (id, value) => {
+        setDelivery((current) => ({ ...current, [id]: value }));
+    };
+    return (_jsx(List, { items: notificationItems, spacing: "sm", style: { width: 400 }, children: notificationItems.map((item) => (_jsxs(List.Item, { value: item.id, interactive: true, onClick: () => toggleItem(item.id), children: [_jsx(List.Checkbox, { "aria-label": `Enable ${item.title.toLowerCase()} notifications`, placement: "start", checked: checked.has(item.id), onCheckedChange: (value) => setItem(item.id, value) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(List.Title, { children: item.title }), _jsx(List.Desc, { children: item.desc })] }), _jsxs(List.Select, { selectedKey: delivery[item.id], valueLabel: String(delivery[item.id] ?? ""), isDisabled: !checked.has(item.id), onSelectionChange: (value) => setDeliveryMode(item.id, value), children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, { placeholder: "Mode" }) }), _jsx(Select.Content, { children: _jsxs(Select.List, { children: [_jsx(Select.Item, { value: "email", children: "Email" }), _jsx(Select.Item, { value: "digest", children: "Digest" }), _jsx(Select.Item, { value: "push", children: "Push" })] }) })] })] }, item.id))) }));
+}
+//# sourceMappingURL=03-notification-rules.js.map

package/dist/components/List/examples/03-notification-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-notification-rules.js","sourceRoot":"","sources":["../../../../src/components/List/examples/03-notification-rules.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/examples/04-quota-editor.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-quota-editor.d.ts.map

package/dist/components/List/examples/04-quota-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-quota-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/04-quota-editor.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAsD9B"}

package/dist/components/List/examples/04-quota-editor.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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({
+        seats: "24",
+        projects: "12",
+        tokens: "50000",
+    });
+    const setItem = (id, value) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            value ? next.add(id) : next.delete(id);
+            return next;
+        });
+    };
+    const toggleItem = (id) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    };
+    const setLimit = (id, value) => {
+        setLimits((current) => ({ ...current, [id]: value }));
+    };
+    return (_jsx(List, { items: quotaItems, spacing: "sm", style: { width: 396 }, children: quotaItems.map((item) => (_jsxs(List.Item, { value: item.id, interactive: true, onClick: () => toggleItem(item.id), children: [_jsx(List.Checkbox, { "aria-label": `Enable ${item.title.toLowerCase()} limit`, placement: "start", checked: checked.has(item.id), onCheckedChange: (value) => setItem(item.id, value) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(List.Title, { children: item.title }), _jsx(List.Desc, { children: item.desc })] }), _jsx(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" })] }, item.id))) }));
+}
+//# sourceMappingURL=04-quota-editor.js.map

package/dist/components/List/examples/04-quota-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-quota-editor.js","sourceRoot":"","sources":["../../../../src/components/List/examples/04-quota-editor.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,2EAA2E;CACzF,CAAC;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE;IAClE,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,+BAA+B,EAAE;IAC5E,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,0BAA0B,EAAE;CACpE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAyB;QAC3D,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,OAAO;KAChB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CAAC,EAAU,EAAE,KAAc,EAAE,EAAE;QAC7C,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACvC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,EAAU,EAAE,EAAE;QAChC,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC9C,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAAU,EAAE,KAAa,EAAE,EAAE;QAC7C,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACxD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,MAAC,IAAI,CAAC,IAAI,IAAe,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,QAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aACrF,KAAC,IAAI,CAAC,QAAQ,kBACA,UAAU,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EACtD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAC7B,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,GACnD,EACF,eAAK,SAAS,EAAC,gBAAgB,aAC7B,KAAC,IAAI,CAAC,KAAK,cAAE,IAAI,CAAC,KAAK,GAAc,EACrC,KAAC,IAAI,CAAC,IAAI,cAAE,IAAI,CAAC,IAAI,GAAa,IAC9B,EACN,KAAC,IAAI,CAAC,KAAK,kBACG,GAAG,IAAI,CAAC,KAAK,QAAQ,EACjC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EACtB,QAAQ,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EACjE,SAAS,EAAC,MAAM,GAChB,KAlBY,IAAI,CAAC,EAAE,CAmBX,CACb,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}

package/dist/components/List/examples/05-permissions-matrix.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=05-permissions-matrix.d.ts.map

package/dist/components/List/examples/05-permissions-matrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-permissions-matrix.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/05-permissions-matrix.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA0E9B"}

package/dist/components/List/examples/05-permissions-matrix.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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({
+        members: "edit",
+        billing: "view",
+        tokens: "edit",
+    });
+    const allChecked = checked.size === permissionItems.length;
+    const isIndeterminate = checked.size > 0 && !allChecked;
+    const setItem = (id, value) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            value ? next.add(id) : next.delete(id);
+            return next;
+        });
+    };
+    const setAll = (value) => {
+        permissionItems.forEach((item) => setItem(item.id, value));
+    };
+    const setPermissionLevel = (id, value) => {
+        setLevel((current) => ({ ...current, [id]: value }));
+    };
+    return (_jsxs(List, { items: rows, spacing: "sm", style: { width: 420 }, children: [_jsxs(List.Item, { value: "all", interactive: true, onClick: () => setAll(!allChecked), children: [_jsx(List.Checkbox, { "aria-label": "Toggle all permissions", placement: "start", checked: allChecked, isIndeterminate: isIndeterminate, onCheckedChange: setAll }), _jsx(List.Title, { children: "All permissions" })] }), _jsx(List.Divider, {}), permissionItems.map((item) => (_jsxs(List.Item, { value: item.id, interactive: true, onClick: () => setItem(item.id, !checked.has(item.id)), children: [_jsx("div", { className: "w-5 flex-shrink-0" }), _jsx(List.Checkbox, { "aria-label": `Allow ${item.title.toLowerCase()}`, placement: "start", checked: checked.has(item.id), onCheckedChange: (value) => setItem(item.id, value) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(List.Title, { children: item.title }), _jsx(List.Desc, { children: item.desc })] }), _jsxs(List.Select, { selectedKey: level[item.id], valueLabel: String(level[item.id] ?? ""), isDisabled: !checked.has(item.id), onSelectionChange: (value) => setPermissionLevel(item.id, value), children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, { placeholder: "Access" }) }), _jsx(Select.Content, { children: _jsxs(Select.List, { children: [_jsx(Select.Item, { value: "view", children: "View" }), _jsx(Select.Item, { value: "edit", children: "Edit" }), _jsx(Select.Item, { value: "admin", children: "Admin" })] }) })] })] }, item.id)))] }));
+}
+//# sourceMappingURL=05-permissions-matrix.js.map

package/dist/components/List/examples/05-permissions-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-permissions-matrix.js","sourceRoot":"","sources":["../../../../src/components/List/examples/05-permissions-matrix.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/examples/index.d.ts

@@ -1,3 +1,11 @@
 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/List/examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/components/List/examples/index.js

@@ -1,3 +1,11 @@
 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';
 //# sourceMappingURL=index.js.map

package/dist/components/List/examples/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/List/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/List/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/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/dist/components/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA0B1C,eAAO,MAAM,UAAU,EAAE,eA8KxB,CAAC;AAEF,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkC1C,eAAO,MAAM,UAAU,EAAE,eA8KxB,CAAC;AAEF,cAAc,qBAAqB,CAAC"}

package/dist/components/List/index.js

@@ -1,10 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { List, Button } from 'ui-lab-components';
 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";
 
@@ -92,7 +100,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>
@@ -100,7 +108,7 @@ export function Example() {
     </List>
   );
 }`,
-            preview: (_jsxs(List, { "aria-label": "Actions List", children: [_jsx(List.Header, { children: _jsx("h3", { children: "Feed" }) }), _jsxs(List.Item, { interactive: true, children: [_jsx("p", { className: "text-sm text-foreground-300", children: "Item with actions" }), _jsxs(List.ActionGroup, { justify: "space-between", children: [_jsx("button", { className: "text-sm text-foreground-300 hover:text-foreground-100 transition-colors", children: "\uD83D\uDC4D Like" }), _jsx("button", { className: "text-sm text-foreground-300 hover:text-foreground-100 transition-colors", children: "\uD83D\uDCAC Reply" })] })] })] })),
+            preview: (_jsxs(List, { "aria-label": "Actions List", children: [_jsx(List.Header, { children: _jsx("h3", { children: "Feed" }) }), _jsxs(List.Item, { interactive: true, children: [_jsx("p", { className: "text-sm text-foreground-300", children: "Item with actions" }), _jsxs(List.ActionGroup, { justify: "between", children: [_jsx("button", { className: "text-sm text-foreground-300 hover:text-foreground-100 transition-colors", children: "\uD83D\uDC4D Like" }), _jsx("button", { className: "text-sm text-foreground-300 hover:text-foreground-100 transition-colors", children: "\uD83D\uDCAC Reply" })] })] })] })),
         },
         {
             id: 'sticky-header',

package/dist/components/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Menu/examples/03-toolbar-dropdown.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=03-toolbar-dropdown.d.ts.map

package/dist/components/Menu/examples/03-toolbar-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-toolbar-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/examples/03-toolbar-dropdown.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA0B9B"}

package/dist/components/Menu/examples/03-toolbar-dropdown.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Menu, { type: "pop-over", children: [_jsx(Menu.Trigger, { children: _jsxs(Button, { variant: "ghost", children: ["File ", _jsx(FaChevronDown, { className: "w-3 h-3 ml-1" })] }) }), _jsxs(Menu.Content, { align: "start", children: [_jsxs(Menu.Item, { onSelect: () => { }, children: ["New file", _jsx(Menu.Shortcut, { children: "\u2318N" })] }), _jsxs(Menu.Item, { onSelect: () => { }, children: ["Open\u2026", _jsx(Menu.Shortcut, { children: "\u2318O" })] }), _jsxs(Menu.Item, { onSelect: () => { }, children: ["Save", _jsx(Menu.Shortcut, { children: "\u2318S" })] }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { disabled: true, children: "Recent files" })] })] }));
+}
+//# sourceMappingURL=03-toolbar-dropdown.js.map

package/dist/components/Menu/examples/03-toolbar-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"03-toolbar-dropdown.js","sourceRoot":"","sources":["../../../../src/components/Menu/examples/03-toolbar-dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,uEAAuE;CACrF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,IAAI,EAAC,UAAU,aACnB,KAAC,IAAI,CAAC,OAAO,cACX,MAAC,MAAM,IAAC,OAAO,EAAC,OAAO,sBAChB,KAAC,aAAa,IAAC,SAAS,EAAC,cAAc,GAAG,IACxC,GACI,EACf,MAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,OAAO,aACzB,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,yBAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,2BAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,qBAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,KAAC,IAAI,CAAC,SAAS,KAAG,EAClB,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,mCAAyB,IAC/B,IACV,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Menu/examples/04-table-row-actions.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=04-table-row-actions.d.ts.map

package/dist/components/Menu/examples/04-table-row-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-table-row-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/examples/04-table-row-actions.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA6C9B"}

package/dist/components/Menu/examples/04-table-row-actions.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-background-700", children: [_jsx("th", { className: "text-left py-2 px-3 font-medium text-foreground-200", children: "Document" }), _jsx("th", { className: "text-left py-2 px-3 font-medium text-foreground-200", children: "Updated" }), _jsx("th", { className: "py-2 px-3" })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { className: "border-b border-background-700 last:border-0", children: [_jsx("td", { className: "py-2 px-3", children: row.name }), _jsx("td", { className: "py-2 px-3 text-foreground-400", children: row.updated }), _jsx("td", { className: "py-2 px-3 text-right", children: _jsxs(Menu, { type: "pop-over", children: [_jsx(Menu.Trigger, { children: _jsx(Button, { icon: _jsx(FaEllipsis, {}), size: "icon", variant: "ghost", styles: "p-2", "aria-label": `Actions for ${row.name}` }) }), _jsxs(Menu.Content, { align: "end", children: [_jsx(Menu.Item, { onSelect: () => { }, children: "Open" }), _jsx(Menu.Item, { onSelect: () => { }, children: "Rename" }), _jsx(Menu.Item, { onSelect: () => { }, children: "Duplicate" }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { onSelect: () => { }, styles: { root: "text-destructive" }, children: "Delete" })] })] }) })] }, row.id))) })] }));
+}
+//# sourceMappingURL=04-table-row-actions.js.map

package/dist/components/Menu/examples/04-table-row-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"04-table-row-actions.js","sourceRoot":"","sources":["../../../../src/components/Menu/examples/04-table-row-actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,0FAA0F;CACxG,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE;IACtD,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,WAAW,EAAE;IAC7D,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE;CAC5D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,iBAAO,SAAS,EAAC,gCAAgC,aAC/C,0BACE,cAAI,SAAS,EAAC,gCAAgC,aAC5C,aAAI,SAAS,EAAC,qDAAqD,yBAAc,EACjF,aAAI,SAAS,EAAC,qDAAqD,wBAAa,EAChF,aAAI,SAAS,EAAC,WAAW,GAAG,IACzB,GACC,EACR,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,cAAiB,SAAS,EAAC,8CAA8C,aACvE,aAAI,SAAS,EAAC,WAAW,YAAE,GAAG,CAAC,IAAI,GAAM,EACzC,aAAI,SAAS,EAAC,+BAA+B,YAAE,GAAG,CAAC,OAAO,GAAM,EAChE,aAAI,SAAS,EAAC,sBAAsB,YAClC,MAAC,IAAI,IAAC,IAAI,EAAC,UAAU,aACnB,KAAC,IAAI,CAAC,OAAO,cACX,KAAC,MAAM,IACL,IAAI,EAAE,KAAC,UAAU,KAAG,EACpB,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,EACf,MAAM,EAAC,KAAK,gBACA,eAAe,GAAG,CAAC,IAAI,EAAE,GACrC,GACW,EACf,MAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,aACvB,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,qBAAkB,EAC/C,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,uBAAoB,EACjD,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,0BAAuB,EACpD,KAAC,IAAI,CAAC,SAAS,KAAG,EAClB,KAAC,IAAI,CAAC,IAAI,IACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAClB,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,uBAG1B,IACC,IACV,GACJ,KA3BE,GAAG,CAAC,EAAE,CA4BV,CACN,CAAC,GACI,IACF,CACT,CAAC;AACJ,CAAC"}

package/dist/components/Menu/examples/05-context-menu.d.ts

@@ -0,0 +1,6 @@
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function Example(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=05-context-menu.d.ts.map

package/dist/components/Menu/examples/05-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/examples/05-context-menu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA4B9B"}

package/dist/components/Menu/examples/05-context-menu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Menu, { type: "context-menu", children: [_jsx(Menu.Trigger, { children: _jsx("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", children: "Right-click anywhere in this area" }) }), _jsxs(Menu.Content, { children: [_jsxs(Menu.Item, { onSelect: () => { }, children: ["Cut", _jsx(Menu.Shortcut, { children: "\u2318X" })] }), _jsxs(Menu.Item, { onSelect: () => { }, children: ["Copy", _jsx(Menu.Shortcut, { children: "\u2318C" })] }), _jsxs(Menu.Item, { onSelect: () => { }, children: ["Paste", _jsx(Menu.Shortcut, { children: "\u2318V" })] }), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { onSelect: () => { }, styles: { root: "text-destructive" }, children: "Delete" })] })] }));
+}
+//# sourceMappingURL=05-context-menu.js.map

package/dist/components/Menu/examples/05-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"05-context-menu.js","sourceRoot":"","sources":["../../../../src/components/Menu/examples/05-context-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,IAAI,EAAC,cAAc,aACvB,KAAC,IAAI,CAAC,OAAO,cACX,cAAK,SAAS,EAAC,0IAA0I,kDAEnJ,GACO,EACf,MAAC,IAAI,CAAC,OAAO,eACX,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,oBAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,qBAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,MAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,sBAE3B,KAAC,IAAI,CAAC,QAAQ,0BAAmB,IACvB,EACZ,KAAC,IAAI,CAAC,SAAS,KAAG,EAClB,KAAC,IAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,uBAEvD,IACC,IACV,CACR,CAAC;AACJ,CAAC"}