ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Popover/examples/04-input-form.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from 'react';
+import { Popover, Button, Flex, Label, Input } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Input Form',
+  description: 'Popover containing a small form with labeled input fields and save/cancel actions.'
+};
+
+export default function Example() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <Popover
+      position="bottom"
+      content={
+        <Flex direction="column" gap="sm" styles={{ root: "w-80" }}>
+          <Flex direction="column" gap="xs">
+            <Label htmlFor="contact-name">Name</Label>
+            <Input
+              id="contact-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName((e.target as HTMLInputElement).value)}
+              placeholder="Full name"
+            />
+          </Flex>
+          <Flex direction="column" gap="xs">
+            <Label htmlFor="contact-email">Email</Label>
+            <Input
+              id="contact-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
+              placeholder="name@example.com"
+            />
+          </Flex>
+        </Flex>
+      }
+    >
+      <Button>Edit contact</Button>
+    </Popover>
+  );
+}

package/src/components/Popover/examples/05-arrow-positions.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Popover, Button, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Arrow & Positions',
+  description: 'Directional arrow enabled across all four placement options.'
+};
+
+export default function Example() {
+  return (
+    <Flex align="center">
+      {(["top", "bottom", "left", "right"] as const).map((position) => (
+        <Popover
+          key={position}
+          position={position}
+          showArrow
+          content={<span className="text-sm capitalize">{position}</span>}
+        >
+          <Button variant="ghost">
+            <span className="capitalize">{position}</span>
+          </Button>
+        </Popover>
+      ))}
+    </Flex>
+  );
+}

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

@@ -1,2 +1,10 @@
 export { default as Example1 } from './01-basic-popover.js';
 export { metadata as metadata1 } from './01-basic-popover.js';
+export { default as Example2 } from './02-toggleable-options.js';
+export { metadata as metadata2 } from './02-toggleable-options.js';
+export { default as Example3 } from './03-table-row-actions.js';
+export { metadata as metadata3 } from './03-table-row-actions.js';
+export { default as Example4 } from './04-input-form.js';
+export { metadata as metadata4 } from './04-input-form.js';
+export { default as Example5 } from './05-arrow-positions.js';
+export { metadata as metadata5 } from './05-arrow-positions.js';

package/src/components/Popover/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-popover": {
-    "title": "Basic Popover",
-    "description": "A simple popover with a trigger button. Use this to display contextual content or actions.",
-    "code": "import React from 'react';\nimport { Popover, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Popover content={<p className=\"text-sm\">This is popover content. It appears when you click the button.</p>}>\n      <Button>Click me</Button>\n    </Popover>\n  );\n}"
+    "title": "Basic",
+    "description": "Default popover with a short note and two clear actions.",
+    "code": "\"use client\";\n\nimport { Popover, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Popover\n      content={\n        <div className=\"w-64 space-y-3\">\n          <div className=\"space-y-1\">\n            <div className=\"text-sm font-medium\">Quick note</div>\n            <p>A popover works best when it adds one small piece of context, one simple choice, or one short action.</p>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"ghost\" size=\"sm\">\n              Dismiss\n            </Button>\n            <Button size=\"sm\">\n              Continue\n            </Button>\n          </div>\n        </div>\n      }\n    >\n      <Button>Show info</Button>\n    </Popover>\n  );\n}"
+  },
+  "02-toggleable-options": {
+    "title": "Toggleable Options",
+    "description": "Popover containing a list of toggleable options using List.Item and List.Switch.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Popover, Button, List } from 'ui-lab-components';\n\nconst toggleableItems = [\n  { id: \"notifications\", label: \"Notifications\", desc: \"Push and email alerts\" },\n  { id: \"autoSave\", label: \"Auto-save\", desc: \"Save changes automatically\" },\n  { id: \"darkMode\", label: \"Dark mode\", desc: \"Use dark color scheme\" },\n];\n\nexport default function Example() {\n  const [enabled, setEnabled] = useState<Set<string>>(\n    () => new Set([\"notifications\", \"darkMode\"])\n  );\n\n  const toggle = (id: string) =>\n    setEnabled((prev) => {\n      const next = new Set(prev);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n\n  return (\n    <Popover\n      position=\"bottom\"\n      content={\n        <List items={toggleableItems} spacing=\"sm\" style={{ width: 280 }}>\n          {toggleableItems.map((item) => (\n            <List.Item\n              key={item.id}\n              value={item.id}\n              interactive\n              onClick={() => toggle(item.id)}\n            >\n              <div className=\"min-w-0 flex-1\">\n                <List.Title>{item.label}</List.Title>\n                <List.Desc>{item.desc}</List.Desc>\n              </div>\n              <List.Switch\n                isSelected={enabled.has(item.id)}\n                onChange={() => toggle(item.id)}\n                aria-label={item.label}\n              />\n            </List.Item>\n          ))}\n        </List>\n      }\n    >\n      <Button>Options</Button>\n    </Popover>\n  );\n}"
+  },
+  "03-table-row-actions": {
+    "title": "Table Row Actions",
+    "description": "Per-row action menu in a data table, anchored to the overflow button.",
+    "code": "\"use client\";\n\nimport { Popover, Button, List } from 'ui-lab-components';\nimport { FaEllipsis } from 'react-icons/fa6';\n\nconst rows = [\n  { id: \"usr_1\", name: \"Alice\", role: \"Admin\", status: \"Active\" },\n  { id: \"usr_2\", name: \"Bob\", role: \"Member\", status: \"Invited\" },\n  { id: \"usr_3\", name: \"Carol\", role: \"Viewer\", status: \"Active\" },\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\">Name</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Role</th>\n          <th className=\"text-left py-2 px-3 font-medium text-foreground-200\">Status</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-200\">{row.role}</td>\n            <td className=\"py-2 px-3 text-foreground-200\">{row.status}</td>\n            <td className=\"py-2 px-3 text-right\">\n              <Popover\n                position=\"left\"\n                content={\n                  <List gap=\"sm\" styles={{ root: \"w-full\" }}>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      styles={{ root: \"justify-start\" }}\n                    >\n                      Edit {row.name}\n                    </Button>\n                    <Button\n                      variant=\"danger\"\n                      size=\"sm\"\n                      styles={{ root: \"justify-start\" }}\n                    >\n                      Remove {row.name}\n                    </Button>\n                  </List>\n                }\n              >\n                <Button icon={<FaEllipsis />} styles=\"p-2\" size=\"icon\" variant=\"ghost\" aria-label={`Row actions for ${row.name}`} />\n              </Popover>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}"
+  },
+  "04-input-form": {
+    "title": "Input Form",
+    "description": "Popover containing a small form with labeled input fields and save/cancel actions.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Popover, Button, Flex, Label, Input } from 'ui-lab-components';\n\nexport default function Example() {\n  const [name, setName] = useState(\"\");\n  const [email, setEmail] = useState(\"\");\n\n  return (\n    <Popover\n      position=\"bottom\"\n      content={\n        <Flex direction=\"column\" gap=\"sm\" styles={{ root: \"w-80\" }}>\n          <Flex direction=\"column\" gap=\"xs\">\n            <Label htmlFor=\"contact-name\">Name</Label>\n            <Input\n              id=\"contact-name\"\n              type=\"text\"\n              value={name}\n              onChange={(e) => setName((e.target as HTMLInputElement).value)}\n              placeholder=\"Full name\"\n            />\n          </Flex>\n          <Flex direction=\"column\" gap=\"xs\">\n            <Label htmlFor=\"contact-email\">Email</Label>\n            <Input\n              id=\"contact-email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail((e.target as HTMLInputElement).value)}\n              placeholder=\"name@example.com\"\n            />\n          </Flex>\n        </Flex>\n      }\n    >\n      <Button>Edit contact</Button>\n    </Popover>\n  );\n}"
+  },
+  "05-arrow-positions": {
+    "title": "Arrow & Positions",
+    "description": "Directional arrow enabled across all four placement options.",
+    "code": "\"use client\";\n\nimport { Popover, Button, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex align=\"center\">\n      {([\"top\", \"bottom\", \"left\", \"right\"] as const).map((position) => (\n        <Popover\n          key={position}\n          position={position}\n          showArrow\n          content={<span className=\"text-sm capitalize\">{position}</span>}\n        >\n          <Button variant=\"ghost\">\n            <span className=\"capitalize\">{position}</span>\n          </Button>\n        </Popover>\n      ))}\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Popover/index.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { Button, Frame, Popover } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-popover.js';
+import Example2, { metadata as metadata2 } from './examples/02-toggleable-options.js';
+import Example3, { metadata as metadata3 } from './examples/03-table-row-actions.js';
+import Example4, { metadata as metadata4 } from './examples/04-input-form.js';
+import Example5, { metadata as metadata5 } from './examples/05-arrow-positions.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaQuestion } from 'react-icons/fa6';
@@ -11,6 +15,10 @@ const TAIL_PATH = "M 0.00 0.00 C 3.00 0.00 7.50 -6.00 9.00 -6.00 C 10.50 -6.00 1
 
 const examplesData = [
   { id: '01-basic-popover', Component: Example1, metadata: metadata1 },
+  { id: '02-toggleable-options', Component: Example2, metadata: metadata2 },
+  { id: '03-table-row-actions', Component: Example3, metadata: metadata3 },
+  { id: '04-input-form', Component: Example4, metadata: metadata4 },
+  { id: '05-arrow-positions', Component: Example5, metadata: metadata5 },
 ];
 
 const popoverControls: ControlDef[] = [

package/src/components/Progress/examples/01-basic-progress.tsx

@@ -1,11 +1,40 @@
-import React from 'react';
-import { Progress } from 'ui-lab-components';
+"use client";
+
+import { useState, useEffect } from 'react';
+import { Progress, Flex, Button } from 'ui-lab-components';
 
 export const metadata = {
-  title: 'Basic Progress',
-  description: 'A simple progress bar showing completion at 65%. Use this to display task or loading progress in your interface.'
+  title: 'File Upload',
+  description: 'Simulated upload progress with a label and live percentage — starts on button click.'
 };
 
 export default function Example() {
-  return <Progress value={65} />;
+  const [progress, setProgress] = useState(0);
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    if (!running) return;
+    if (progress >= 100) { setRunning(false); return; }
+    const t = setTimeout(() => setProgress((p) => Math.min(p + Math.random() * 12, 100)), 200);
+    return () => clearTimeout(t);
+  }, [running, progress]);
+
+  const reset = () => { setProgress(0); setRunning(false); };
+
+  return (
+    <Flex direction="column" gap="md" style={{ width: 340 }}>
+      <Flex direction="column" gap="xs">
+        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
+          report-q4-2025.pdf
+        </span>
+        <Progress value={progress} label="Uploading" showValue />
+      </Flex>
+      <Flex gap="sm">
+        <Button variant="primary" onClick={() => setRunning(true)} disabled={running || progress === 100}>
+          {progress === 100 ? "Done" : "Upload"}
+        </Button>
+        <Button variant="ghost" onClick={reset}>Reset</Button>
+      </Flex>
+    </Flex>
+  );
 }

package/src/components/Progress/examples/02-storage-quota.tsx

@@ -0,0 +1,22 @@
+import { Progress, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Storage Quota',
+  description: 'Fixed progress bar showing disk usage relative to a custom max value.'
+};
+
+const used = 7.4;
+const total = 10;
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="md" style={{ width: 300 }}>
+      <Flex direction="column" gap="xs">
+        <Progress value={used} max={total} label="Storage" showValue />
+        <span style={{ fontSize: "var(--text-xs)", color: "var(--foreground-muted)" }}>
+          {used} GB of {total} GB used
+        </span>
+      </Flex>
+    </Flex>
+  );
+}

package/src/components/Progress/examples/03-onboarding-steps.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from 'react';
+import { Progress, Flex, Button } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Onboarding Steps',
+  description: 'Step tracker using value/max to represent wizard completion.'
+};
+
+const steps = ["Profile", "Preferences", "Integrations", "Invite team"];
+
+export default function Example() {
+  const [step, setStep] = useState(1);
+
+  return (
+    <Flex direction="column" gap="md" style={{ width: 340 }}>
+      <Flex direction="column" gap="xs">
+        <Progress value={step} max={steps.length} />
+        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
+          Step {step} of {steps.length} — {steps[step - 1]}
+        </span>
+      </Flex>
+      <Flex gap="sm">
+        <Button variant="ghost" onClick={() => setStep((s) => Math.max(1, s - 1))} disabled={step === 1}>
+          Back
+        </Button>
+        <Button variant="primary" onClick={() => setStep((s) => Math.min(steps.length, s + 1))} disabled={step === steps.length}>
+          Next
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}

package/src/components/Progress/examples/04-indeterminate.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { Progress, Flex, Button } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Indeterminate Loading',
+  description: 'Animated bar for unknown-duration operations — switches to complete when done.'
+};
+
+export default function Example() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!loading) return;
+    const t = setTimeout(() => setLoading(false), 3000);
+    return () => clearTimeout(t);
+  }, [loading]);
+
+  return (
+    <Flex direction="column" gap="md" style={{ width: 320 }}>
+      <Flex direction="column" gap="xs">
+        <span style={{ fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }}>
+          {loading ? "Fetching results…" : "Results loaded"}
+        </span>
+        <Progress indeterminate={loading} value={loading ? 0 : 100} />
+      </Flex>
+      <Button variant="ghost" onClick={() => setLoading(true)} disabled={loading}>
+        Reload
+      </Button>
+    </Flex>
+  );
+}

package/src/components/Progress/examples/05-skill-levels.tsx

@@ -0,0 +1,22 @@
+import { Progress, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Skill Levels',
+  description: 'Stacked progress bars in a profile or stats context with labels and values.'
+};
+
+const skills = [
+  { name: "TypeScript", value: 92 },
+  { name: "Rust", value: 54 },
+  { name: "Go", value: 38 },
+];
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="sm" style={{ width: 300 }}>
+      {skills.map((s) => (
+        <Progress key={s.name} value={s.value} label={s.name} showValue />
+      ))}
+    </Flex>
+  );
+}

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

@@ -1,2 +1,10 @@
 export { default as Example1 } from './01-basic-progress.js';
 export { metadata as metadata1 } from './01-basic-progress.js';
+export { default as Example2 } from './02-storage-quota.js';
+export { metadata as metadata2 } from './02-storage-quota.js';
+export { default as Example3 } from './03-onboarding-steps.js';
+export { metadata as metadata3 } from './03-onboarding-steps.js';
+export { default as Example4 } from './04-indeterminate.js';
+export { metadata as metadata4 } from './04-indeterminate.js';
+export { default as Example5 } from './05-skill-levels.js';
+export { metadata as metadata5 } from './05-skill-levels.js';

package/src/components/Progress/examples.json

@@ -1,7 +1,27 @@
 {
   "01-basic-progress": {
-    "title": "Basic Progress",
-    "description": "A simple progress bar showing completion at 65%. Use this to display task or loading progress in your interface.",
-    "code": "import React from 'react';\nimport { Progress } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Progress value={65} />;\n}"
+    "title": "File Upload",
+    "description": "Simulated upload progress with a label and live percentage — starts on button click.",
+    "code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [progress, setProgress] = useState(0);\n  const [running, setRunning] = useState(false);\n\n  useEffect(() => {\n    if (!running) return;\n    if (progress >= 100) { setRunning(false); return; }\n    const t = setTimeout(() => setProgress((p) => Math.min(p + Math.random() * 12, 100)), 200);\n    return () => clearTimeout(t);\n  }, [running, progress]);\n\n  const reset = () => { setProgress(0); setRunning(false); };\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          report-q4-2025.pdf\n        </span>\n        <Progress value={progress} label=\"Uploading\" showValue />\n      </Flex>\n      <Flex gap=\"sm\">\n        <Button variant=\"primary\" onClick={() => setRunning(true)} disabled={running || progress === 100}>\n          {progress === 100 ? \"Done\" : \"Upload\"}\n        </Button>\n        <Button variant=\"ghost\" onClick={reset}>Reset</Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "02-storage-quota": {
+    "title": "Storage Quota",
+    "description": "Fixed progress bar showing disk usage relative to a custom max value.",
+    "code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst used = 7.4;\nconst total = 10;\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <Progress value={used} max={total} label=\"Storage\" showValue />\n        <span style={{ fontSize: \"var(--text-xs)\", color: \"var(--foreground-muted)\" }}>\n          {used} GB of {total} GB used\n        </span>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "03-onboarding-steps": {
+    "title": "Onboarding Steps",
+    "description": "Step tracker using value/max to represent wizard completion.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nconst steps = [\"Profile\", \"Preferences\", \"Integrations\", \"Invite team\"];\n\nexport default function Example() {\n  const [step, setStep] = useState(1);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <Progress value={step} max={steps.length} />\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          Step {step} of {steps.length} — {steps[step - 1]}\n        </span>\n      </Flex>\n      <Flex gap=\"sm\">\n        <Button variant=\"ghost\" onClick={() => setStep((s) => Math.max(1, s - 1))} disabled={step === 1}>\n          Back\n        </Button>\n        <Button variant=\"primary\" onClick={() => setStep((s) => Math.min(steps.length, s + 1))} disabled={step === steps.length}>\n          Next\n        </Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "04-indeterminate": {
+    "title": "Indeterminate Loading",
+    "description": "Animated bar for unknown-duration operations — switches to complete when done.",
+    "code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    if (!loading) return;\n    const t = setTimeout(() => setLoading(false), 3000);\n    return () => clearTimeout(t);\n  }, [loading]);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 320 }}>\n      <Flex direction=\"column\" gap=\"xs\">\n        <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n          {loading ? \"Fetching results…\" : \"Results loaded\"}\n        </span>\n        <Progress indeterminate={loading} value={loading ? 0 : 100} />\n      </Flex>\n      <Button variant=\"ghost\" onClick={() => setLoading(true)} disabled={loading}>\n        Reload\n      </Button>\n    </Flex>\n  );\n}"
+  },
+  "05-skill-levels": {
+    "title": "Skill Levels",
+    "description": "Stacked progress bars in a profile or stats context with labels and values.",
+    "code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst skills = [\n  { name: \"TypeScript\", value: 92 },\n  { name: \"Rust\", value: 54 },\n  { name: \"Go\", value: 38 },\n];\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"sm\" style={{ width: 300 }}>\n      {skills.map((s) => (\n        <Progress key={s.name} value={s.value} label={s.name} showValue />\n      ))}\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Progress/index.tsx

@@ -2,26 +2,23 @@ import React from 'react';
 import { Progress } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import Example1, { metadata as metadata1 } from './examples/01-basic-progress.js';
+import Example2, { metadata as metadata2 } from './examples/02-storage-quota.js';
+import Example3, { metadata as metadata3 } from './examples/03-onboarding-steps.js';
+import Example4, { metadata as metadata4 } from './examples/04-indeterminate.js';
+import Example5, { metadata as metadata5 } from './examples/05-skill-levels.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
   { id: '01-basic-progress', Component: Example1, metadata: metadata1 },
+  { id: '02-storage-quota', Component: Example2, metadata: metadata2 },
+  { id: '03-onboarding-steps', Component: Example3, metadata: metadata3 },
+  { id: '04-indeterminate', Component: Example4, metadata: metadata4 },
+  { id: '05-skill-levels', Component: Example5, metadata: metadata5 },
 ];
 
 
 const progressControls: ControlDef[] = [
-  {
-    name: "size",
-    label: "Size",
-    type: "select",
-    options: [
-      { label: "Small", value: "sm" },
-      { label: "Medium", value: "md" },
-      { label: "Large", value: "lg" },
-    ],
-    defaultValue: "md",
-  },
   {
     name: "variant",
     label: "Variant",
@@ -71,14 +68,14 @@ export const progressDetail: ComponentDetail = {
   id: "progress",
   name: "Progress",
   description:
-    "A horizontal progress bar with configurable value, variants, and sizes. Supports determinate and indeterminate states.",
+    "A horizontal progress bar with configurable value and variants. Supports determinate and indeterminate states.",
   overview: (
     <div className="space-y-4 text-foreground-300">
       <p>
         The Progress component displays a horizontal bar that fills based on a percentage value. It's ideal for showing loading states, upload progress, completion status, and other metrics.
       </p>
       <p>
-        Progress bars support multiple sizes, semantic color variants, and an indeterminate mode for unknown durations. Labels and percentage values can be displayed for additional context.
+        Progress bars support semantic color variants and an indeterminate mode for unknown durations. Labels and percentage values can be displayed for additional context.
       </p>
     </div>
   ),
@@ -94,7 +91,6 @@ export const progressDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Progress
           value={parseInt(props.value as string)}
-          size={props.size as any}
           variant={props.variant as any}
           indeterminate={props.indeterminate}
           showValue={props.showValue}

package/src/components/Scroll/examples/01-basic-scroll.tsx

@@ -1,22 +1,55 @@
 import { Scroll } from 'ui-lab-components';
 
 export const metadata = {
-  title: 'Basic Scroll',
-  description: 'A simple scrollable container with fixed height. Use this to display overflow content in a constrained space.'
+  title: 'Log Viewer',
+  description: 'Vertically scrollable log output with fade mask to hint at overflow content.'
 };
 
+const LOG_ENTRIES = [
+  { level: "info", msg: "Server started on port 3000" },
+  { level: "info", msg: "Connected to database" },
+  { level: "warn", msg: "Slow query detected: users.findAll (342ms)" },
+  { level: "error", msg: "Failed to send email: SMTP timeout" },
+  { level: "info", msg: "Cache warmed: 1,204 keys loaded" },
+  { level: "info", msg: "Background job 'sync-orders' started" },
+  { level: "warn", msg: "Memory usage at 78%" },
+  { level: "info", msg: "Background job 'sync-orders' completed" },
+  { level: "error", msg: "Unhandled rejection: Cannot read property 'id' of undefined" },
+  { level: "info", msg: "Health check passed" },
+  { level: "warn", msg: "Rate limit reached for IP 192.168.1.42" },
+  { level: "info", msg: "User #4821 logged in" },
+  { level: "info", msg: "Deployment complete: v2.14.0" },
+];
+
 export default function Example() {
   return (
-    <div className='overflow-hidden' style={{ height: '200px', width: '300px' }}>
-      <Scroll>
-        <div>
-          <p>This is scrollable content.</p>
-          <p>Add more content here to see scrolling in action.</p>
-          <p>The Scroll component manages overflow elegantly.</p>
-          <p>You can scroll through all of this content.</p>
-          <p>Perfect for constrained layouts.</p>
-        </div>
-      </Scroll>
+    <div style={{ width: 480, display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <span style={{ fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
+        Application Logs
+      </span>
+      <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }}>
+        <Scroll maxHeight="200px" fade-y fadeDistance={8} fadeSize={5}>
+          <div style={{ padding: '8px 0' }}>
+            {LOG_ENTRIES.map((entry, i) => (
+              <div key={i} style={{
+                display: 'flex',
+                gap: 10,
+                padding: '3px 12px',
+                fontSize: 12,
+                fontFamily: 'var(--font-mono, monospace)',
+                color: entry.level === 'error'
+                  ? 'var(--color-destructive)'
+                  : entry.level === 'warn'
+                    ? 'var(--color-warning, var(--color-muted))'
+                    : 'var(--color-foreground)',
+              }}>
+                <span style={{ color: 'var(--color-muted)', minWidth: 36 }}>{entry.level}</span>
+                <span>{entry.msg}</span>
+              </div>
+            ))}
+          </div>
+        </Scroll>
+      </div>
     </div>
   );
 }

package/src/components/Scroll/examples/02-settings-panel.tsx

@@ -0,0 +1,40 @@
+import { Scroll } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Settings Panel',
+  description: 'Constrained-height settings list with a custom scrollbar shown on hover.'
+};
+
+const SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  description: `Configure behavior for setting ${i + 1}`,
+}));
+
+export default function Example() {
+  return (
+    <div style={{ width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }}>
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }}>
+        Preferences
+      </div>
+      <Scroll maxHeight="240px">
+        <div style={{ padding: '8px 0' }}>
+          {SETTINGS_ITEMS.map((item, i) => (
+            <div key={i} style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '8px 16px',
+              fontSize: 13,
+              borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,
+            }}>
+              <div>
+                <div style={{ color: 'var(--color-foreground)' }}>{item.label}</div>
+                <div style={{ fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }}>{item.description}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Scroll>
+    </div>
+  );
+}

package/src/components/Scroll/examples/03-horizontal-tags.tsx

@@ -0,0 +1,38 @@
+import { Scroll } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Horizontal Tag List',
+  description: 'Horizontally scrollable row of filter tags that overflow their container.'
+};
+
+const TAGS = [
+  "authentication", "payments", "webhooks", "analytics", "notifications",
+  "billing", "user-management", "api-keys", "rate-limiting", "audit-logs",
+  "exports", "integrations", "search", "permissions", "reports",
+];
+
+export default function Example() {
+  return (
+    <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <span style={{ fontSize: 12, color: 'var(--color-muted)' }}>Filter by topic</span>
+      <Scroll direction="horizontal" maxWidth="420px" hide={false} inline>
+        <div style={{ display: 'flex', gap: 6, padding: '2px 0' }}>
+          {TAGS.map((tag) => (
+            <span key={tag} style={{
+              whiteSpace: 'nowrap',
+              padding: '3px 10px',
+              border: '1px solid var(--color-border)',
+              borderRadius: 4,
+              fontSize: 12,
+              color: 'var(--color-foreground)',
+              cursor: 'default',
+              background: 'var(--color-background-900)',
+            }}>
+              {tag}
+            </span>
+          ))}
+        </div>
+      </Scroll>
+    </div>
+  );
+}

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

@@ -1,2 +1,6 @@
 export { default as Example1 } from './01-basic-scroll.js';
 export { metadata as metadata1 } from './01-basic-scroll.js';
+export { default as Example2 } from './02-settings-panel.js';
+export { metadata as metadata2 } from './02-settings-panel.js';
+export { default as Example3 } from './03-horizontal-tags.js';
+export { metadata as metadata3 } from './03-horizontal-tags.js';

package/src/components/Scroll/examples.json

@@ -1,7 +1,17 @@
 {
   "01-basic-scroll": {
-    "title": "Basic Scroll",
-    "description": "A simple scrollable container with fixed height. Use this to display overflow content in a constrained space.",
-    "code": "import { Scroll } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className='overflow-hidden' style={{ height: '200px', width: '300px' }}>\n      <Scroll>\n        <div>\n          <p>This is scrollable content.</p>\n          <p>Add more content here to see scrolling in action.</p>\n          <p>The Scroll component manages overflow elegantly.</p>\n          <p>You can scroll through all of this content.</p>\n          <p>Perfect for constrained layouts.</p>\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
+    "title": "Log Viewer",
+    "description": "Vertically scrollable log output with fade mask to hint at overflow content.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst LOG_ENTRIES = [\n  { level: \"info\", msg: \"Server started on port 3000\" },\n  { level: \"info\", msg: \"Connected to database\" },\n  { level: \"warn\", msg: \"Slow query detected: users.findAll (342ms)\" },\n  { level: \"error\", msg: \"Failed to send email: SMTP timeout\" },\n  { level: \"info\", msg: \"Cache warmed: 1,204 keys loaded\" },\n  { level: \"info\", msg: \"Background job 'sync-orders' started\" },\n  { level: \"warn\", msg: \"Memory usage at 78%\" },\n  { level: \"info\", msg: \"Background job 'sync-orders' completed\" },\n  { level: \"error\", msg: \"Unhandled rejection: Cannot read property 'id' of undefined\" },\n  { level: \"info\", msg: \"Health check passed\" },\n  { level: \"warn\", msg: \"Rate limit reached for IP 192.168.1.42\" },\n  { level: \"info\", msg: \"User #4821 logged in\" },\n  { level: \"info\", msg: \"Deployment complete: v2.14.0\" },\n];\n\nexport default function Example() {\n  return (\n    <div style={{ width: 480, display: 'flex', flexDirection: 'column', gap: 4 }}>\n      <span style={{ fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>\n        Application Logs\n      </span>\n      <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }}>\n        <Scroll maxHeight=\"200px\" fade-y fadeDistance={8} fadeSize={5}>\n          <div style={{ padding: '8px 0' }}>\n            {LOG_ENTRIES.map((entry, i) => (\n              <div key={i} style={{\n                display: 'flex',\n                gap: 10,\n                padding: '3px 12px',\n                fontSize: 12,\n                fontFamily: 'var(--font-mono, monospace)',\n                color: entry.level === 'error'\n                  ? 'var(--color-destructive)'\n                  : entry.level === 'warn'\n                    ? 'var(--color-warning, var(--color-muted))'\n                    : 'var(--color-foreground)',\n              }}>\n                <span style={{ color: 'var(--color-muted)', minWidth: 36 }}>{entry.level}</span>\n                <span>{entry.msg}</span>\n              </div>\n            ))}\n          </div>\n        </Scroll>\n      </div>\n    </div>\n  );\n}"
+  },
+  "02-settings-panel": {
+    "title": "Settings Panel",
+    "description": "Constrained-height settings list with a custom scrollbar shown on hover.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({\n  label: `Option ${i + 1}`,\n  description: `Configure behavior for setting ${i + 1}`,\n}));\n\nexport default function Example() {\n  return (\n    <div style={{ width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }}>\n      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }}>\n        Preferences\n      </div>\n      <Scroll maxHeight=\"240px\">\n        <div style={{ padding: '8px 0' }}>\n          {SETTINGS_ITEMS.map((item, i) => (\n            <div key={i} style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'center',\n              padding: '8px 16px',\n              fontSize: 13,\n              borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,\n            }}>\n              <div>\n                <div style={{ color: 'var(--color-foreground)' }}>{item.label}</div>\n                <div style={{ fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }}>{item.description}</div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
+  },
+  "03-horizontal-tags": {
+    "title": "Horizontal Tag List",
+    "description": "Horizontally scrollable row of filter tags that overflow their container.",
+    "code": "import { Scroll } from 'ui-lab-components';\n\nconst TAGS = [\n  \"authentication\", \"payments\", \"webhooks\", \"analytics\", \"notifications\",\n  \"billing\", \"user-management\", \"api-keys\", \"rate-limiting\", \"audit-logs\",\n  \"exports\", \"integrations\", \"search\", \"permissions\", \"reports\",\n];\n\nexport default function Example() {\n  return (\n    <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 6 }}>\n      <span style={{ fontSize: 12, color: 'var(--color-muted)' }}>Filter by topic</span>\n      <Scroll direction=\"horizontal\" maxWidth=\"420px\" hide={false} inline>\n        <div style={{ display: 'flex', gap: 6, padding: '2px 0' }}>\n          {TAGS.map((tag) => (\n            <span key={tag} style={{\n              whiteSpace: 'nowrap',\n              padding: '3px 10px',\n              border: '1px solid var(--color-border)',\n              borderRadius: 4,\n              fontSize: 12,\n              color: 'var(--color-foreground)',\n              cursor: 'default',\n              background: 'var(--color-background-900)',\n            }}>\n              {tag}\n            </span>\n          ))}\n        </div>\n      </Scroll>\n    </div>\n  );\n}"
   }
 }