ui-lab-registry 0.3.44 → 0.3.45

package/src/components/Badge/examples.json

@@ -1,12 +1,27 @@
 {
-  "01-basic-badge": {
-    "title": "Basic Badge",
-    "description": "A simple badge with default styling. Use this to display labels, tags, or status indicators in your interface.",
-    "code": "import React from 'react';\nimport { Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  return <Badge>New</Badge>;\n}"
-  },
-  "02-variants-and-sizes": {
-    "title": "Badge Variants and Sizes",
-    "description": "Showcases all available badge variants (default, success, warning, danger, info) and sizes (sm, md, lg). Also demonstrates pill-shaped badges.",
-    "code": "import React from 'react';\nimport { Badge } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <div className=\"p-4 space-y-8\">\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Variants</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge variant=\"default\">Default</Badge>\n          <Badge variant=\"success\">Success</Badge>\n          <Badge variant=\"warning\">Warning</Badge>\n          <Badge variant=\"danger\">Danger</Badge>\n          <Badge variant=\"info\">Info</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Sizes</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge size=\"sm\">Small</Badge>\n          <Badge size=\"md\">Medium</Badge>\n          <Badge size=\"lg\">Large</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Pill Shape</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge pill variant=\"default\">Default Pill</Badge>\n          <Badge pill variant=\"success\">Success Pill</Badge>\n          <Badge pill variant=\"warning\">Warning Pill</Badge>\n          <Badge pill variant=\"danger\">Danger Pill</Badge>\n          <Badge pill variant=\"info\">Info Pill</Badge>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">Variants with Sizes</h3>\n        <div className=\"space-y-3\">\n          <div className=\"flex gap-2 flex-wrap items-center\">\n            <Badge variant=\"success\" size=\"sm\">Small Success</Badge>\n            <Badge variant=\"success\" size=\"md\">Medium Success</Badge>\n            <Badge variant=\"success\" size=\"lg\">Large Success</Badge>\n          </div>\n          <div className=\"flex gap-2 flex-wrap items-center\">\n            <Badge variant=\"danger\" size=\"sm\">Small Danger</Badge>\n            <Badge variant=\"danger\" size=\"md\">Medium Danger</Badge>\n            <Badge variant=\"danger\" size=\"lg\">Large Danger</Badge>\n          </div>\n        </div>\n      </div>\n\n      <div>\n        <h3 className=\"text-sm font-semibold text-foreground-200 mb-3\">With Count</h3>\n        <div className=\"flex gap-2 flex-wrap items-center\">\n          <Badge variant=\"default\" count={5} />\n          <Badge variant=\"success\" count={12} />\n          <Badge variant=\"warning\" count={99} />\n          <Badge variant=\"danger\" count={3} pill />\n          <Badge variant=\"info\" count={42} pill />\n        </div>\n      </div>\n    </div>\n  );\n}"
+  "01-status-badges": {
+    "title": "Status Labels",
+    "description": "Inline status labels alongside text content, such as document or workflow states.",
+    "code": "import { Badge, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"sm\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge variant=\"default\">Draft</Badge>\n      <Badge variant=\"default\">In Review</Badge>\n      <Badge variant=\"default\">Published</Badge>\n      <Badge variant=\"default\">Archived</Badge>\n    </Flex>\n  );\n}"
+  },
+  "02-icon-position": {
+    "title": "Icon Position",
+    "description": "Icons placed on the left or right of the label — left for status/type indicators, right for directional cues.",
+    "code": "import { Badge, Flex } from 'ui-lab-components';\nimport { FaCircleCheck, FaTriangleExclamation, FaArrowRight, FaStar } from 'react-icons/fa6';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge icon={{ left: <FaCircleCheck size={10} /> }}>Verified</Badge>\n      <Badge icon={{ left: <FaTriangleExclamation size={10} /> }}>Warning</Badge>\n      <Badge icon={{ right: <FaArrowRight size={10} /> }}>Continue</Badge>\n      <Badge icon={{ right: <FaStar size={10} /> }}>Featured</Badge>\n    </Flex>\n  );\n}"
+  },
+  "03-selectable-tags": {
+    "title": "Selectable Tags",
+    "description": "Icon-prefixed tags that toggle active state, e.g. for filtering or labeling.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Badge, Flex } from 'ui-lab-components';\nimport { FaTag } from 'react-icons/fa6';\n\nconst tags = ['design', 'frontend', 'api', 'docs'];\n\nexport default function Example() {\n  const [active, setActive] = useState<string[]>(['design']);\n\n  function toggle(tag: string) {\n    setActive((prev) =>\n      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]\n    );\n  }\n\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      {tags.map((tag) => (\n        <Badge\n          key={tag}\n          icon={<FaTag size={10} />}\n          onClick={() => toggle(tag)}\n          style={{\n            cursor: 'pointer',\n            opacity: active.includes(tag) ? 1 : 0.45,\n          }}\n        >\n          {tag}\n        </Badge>\n      ))}\n    </Flex>\n  );\n}"
+  },
+  "04-dismissible": {
+    "title": "Dismissible Tags",
+    "description": "Applied label chips in a multi-select input or filter bar that can be individually removed.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Badge, Flex } from 'ui-lab-components';\n\nconst initial = ['React', 'TypeScript', 'CSS Modules', 'Next.js', 'Radix UI'];\n\nexport default function Example() {\n  const [tags, setTags] = useState(initial);\n\n  return (\n    <Flex gap=\"xs\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      {tags.map((tag) => (\n        <Badge\n          key={tag}\n          dismissible\n          onDismiss={() => setTags((prev) => prev.filter((t) => t !== tag))}\n        >\n          {tag}\n        </Badge>\n      ))}\n      {tags.length === 0 && (\n        <span\n          className=\"text-sm text-foreground-400 cursor-pointer\"\n          onClick={() => setTags(initial)}\n        >\n          All dismissed — click to reset\n        </span>\n      )}\n    </Flex>\n  );\n}"
+  },
+  "05-semantic-colors": {
+    "title": "Semantic Colors",
+    "description": "Badges styled with design system semantic color tokens for success, warning, danger, info, and accent states.",
+    "code": "import { Badge, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex gap=\"sm\" align=\"center\" justify=\"center\" wrap=\"wrap\">\n      <Badge className=\"bg-success-500/20 text-success-500 border-none\">Success</Badge>\n      <Badge className=\"bg-warning-500/20 text-warning-500 border-none\">Warning</Badge>\n      <Badge className=\"bg-danger-500/20 text-danger-500 border-none\">Danger</Badge>\n      <Badge className=\"bg-info-500/20 text-info-500 border-none\">Info</Badge>\n      <Badge className=\"bg-accent-500/20 text-accent-500 border-none\">Accent</Badge>\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Badge/index.tsx

@@ -2,12 +2,20 @@ import React from 'react';
 import { Badge } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
 import { FaInfo } from 'react-icons/fa6';
-import Example1, { metadata as metadata1 } from './examples/01-basic-badge.js';
+import Example1, { metadata as metadata1 } from './examples/01-status-badges.js';
+import Example2, { metadata as metadata2 } from './examples/02-icon-position.js';
+import Example3, { metadata as metadata3 } from './examples/03-selectable-tags.js';
+import Example4, { metadata as metadata4 } from './examples/04-dismissible.js';
+import Example5, { metadata as metadata5 } from './examples/05-semantic-colors.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 
 const examplesData = [
-  { id: '01-basic-badge', Component: Example1, metadata: metadata1 },
+  { id: '01-status-badges', Component: Example1, metadata: metadata1 },
+  { id: '02-icon-position', Component: Example2, metadata: metadata2 },
+  { id: '03-selectable-tags', Component: Example3, metadata: metadata3 },
+  { id: '04-dismissible', Component: Example4, metadata: metadata4 },
+  { id: '05-semantic-colors', Component: Example5, metadata: metadata5 },
 ];
 
 const badgeControls: ControlDef[] = [
@@ -24,17 +32,6 @@ const badgeControls: ControlDef[] = [
     ],
     defaultValue: 'default',
   },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-    defaultValue: 'md',
-  },
   {
     name: 'dismissible',
     label: 'Dismissible',
@@ -56,7 +53,7 @@ export const badgeDetail: ComponentDetail = {
   overview: (
     <div className="space-y-4 text-foreground-300">
       <p>
-        Badge components are compact elements used to display status indicators, tags, labels, and other small pieces of information. They support multiple variants for different semantic meanings, multiple sizes for different contexts, and optional icons and dismissal functionality.
+        Badge components are compact elements used to display status indicators, tags, labels, and other small pieces of information. They support multiple variants for different semantic meanings, optional icons, and dismissal functionality.
       </p>
       <p>
         Use badges to highlight key information, indicate status changes, or tag content categories.
@@ -74,7 +71,6 @@ export const badgeDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Badge
           variant={props.variant as any}
-          size={props.size as any}
           dismissible={props.dismissible}
         >
           Badge Text

package/src/components/Banner/examples/01-variants.tsx

@@ -0,0 +1,33 @@
+import { Banner, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Variants',
+  description: 'All five semantic variants: note, info, success, warning, and danger.',
+};
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="md" style={{ width: 480 }}>
+      <Banner variant="note">
+        <Banner.Title>Note</Banner.Title>
+        <Banner.Body>This is a general note with supplementary context.</Banner.Body>
+      </Banner>
+      <Banner variant="info">
+        <Banner.Title>Info</Banner.Title>
+        <Banner.Body>Your workspace is on the free plan. Upgrade to unlock more seats.</Banner.Body>
+      </Banner>
+      <Banner variant="success">
+        <Banner.Title>Success</Banner.Title>
+        <Banner.Body>Your changes have been saved and are now live.</Banner.Body>
+      </Banner>
+      <Banner variant="warning">
+        <Banner.Title>Warning</Banner.Title>
+        <Banner.Body>This action cannot be undone. Proceed with caution.</Banner.Body>
+      </Banner>
+      <Banner variant="danger">
+        <Banner.Title>Danger</Banner.Title>
+        <Banner.Body>Your account has exceeded its storage limit.</Banner.Body>
+      </Banner>
+    </Flex>
+  );
+}

package/src/components/Banner/examples/02-dismissible.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from 'react';
+import { Banner, Button, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Dismissible',
+  description: 'A banner with a dismiss button. The caller controls what happens after dismissal.',
+};
+
+export default function Example() {
+  const [dismissed, setDismissed] = useState(false);
+
+  return (
+    <Flex direction="column" gap="md" style={{ width: 480 }}>
+      {!dismissed ? (
+        <Banner variant="info" isDismissible onDismiss={() => setDismissed(true)}>
+          <Banner.Title>Scheduled maintenance</Banner.Title>
+          <Banner.Body>The system will be unavailable on Saturday from 2–4 AM UTC.</Banner.Body>
+        </Banner>
+      ) : (
+        <Flex gap="sm" style={{ alignItems: 'center' }}>
+          <span className="text-sm text-foreground-400">Banner dismissed.</span>
+          <Button variant="ghost" onClick={() => setDismissed(false)}>
+            Restore
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  );
+}

package/src/components/Banner/examples/03-form-feedback.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from 'react';
+import { Banner, Button, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Form Feedback',
+  description: 'Banners shown conditionally after a form action to relay success or failure.',
+};
+
+export default function Example() {
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState(false);
+
+  const handleSubmit = () => {
+    if (!submitted) {
+      setError(true);
+      return;
+    }
+    setError(false);
+  };
+
+  return (
+    <Flex direction="column" gap="md" style={{ width: 400 }}>
+      {error && (
+        <Banner variant="danger" isDismissible onDismiss={() => setError(false)}>
+          <Banner.Title>Submission failed</Banner.Title>
+          <Banner.Body>Please review the form and correct any errors before retrying.</Banner.Body>
+        </Banner>
+      )}
+      {submitted && !error && (
+        <Banner variant="success">
+          <Banner.Title>Profile updated</Banner.Title>
+          <Banner.Body>Your changes have been saved successfully.</Banner.Body>
+        </Banner>
+      )}
+      <Flex gap="sm">
+        <Button variant="primary" onClick={() => { setSubmitted(true); setError(false); }}>
+          Save changes
+        </Button>
+        <Button variant="secondary" onClick={() => { setSubmitted(false); handleSubmit(); }}>
+          Trigger error
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}

package/src/components/Banner/examples/04-settings-panel.tsx

@@ -0,0 +1,21 @@
+import { Banner, Button, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Settings Panel',
+  description: 'A small warning banner inline with a destructive settings action.',
+};
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="md" style={{ width: 420 }}>
+      <div>
+        <p className="text-sm font-semibold text-foreground-100">API Access</p>
+        <p className="text-xs text-foreground-400">Manage keys for external integrations.</p>
+      </div>
+      <Banner variant="warning">
+        <Banner.Body>Regenerating your key will revoke all existing integrations immediately.</Banner.Body>
+      </Banner>
+      <Button variant="secondary">Regenerate API key</Button>
+    </Flex>
+  );
+}

package/src/components/Banner/examples/05-body-only.tsx

@@ -0,0 +1,22 @@
+import { Banner, Flex } from 'ui-lab-components';
+
+export const metadata = {
+  title: 'Body Only',
+  description: 'Single-line banners without a title for compact inline notifications.',
+};
+
+export default function Example() {
+  return (
+    <Flex direction="column" gap="md" style={{ width: 480 }}>
+      <Banner variant="info" isDismissible>
+        <Banner.Body>
+          Two-factor authentication is not enabled on your account.{' '}
+          <a href="#" className="underline">Enable now</a>
+        </Banner.Body>
+      </Banner>
+      <Banner variant="success" isDismissible>
+        <Banner.Body>Deployment #142 completed in 38 seconds.</Banner.Body>
+      </Banner>
+    </Flex>
+  );
+}

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

@@ -1,2 +1,14 @@
-export { default as Example1 } from './01-basic-banner.js';
-export { metadata as metadata1 } from './01-basic-banner.js';
+export { default as Example1 } from './01-variants.js';
+export { metadata as metadata1 } from './01-variants.js';
+
+export { default as Example2 } from './02-dismissible.js';
+export { metadata as metadata2 } from './02-dismissible.js';
+
+export { default as Example3 } from './03-form-feedback.js';
+export { metadata as metadata3 } from './03-form-feedback.js';
+
+export { default as Example4 } from './04-settings-panel.js';
+export { metadata as metadata4 } from './04-settings-panel.js';
+
+export { default as Example5 } from './05-body-only.js';
+export { metadata as metadata5 } from './05-body-only.js';

package/src/components/Banner/examples.json

@@ -1,7 +1,27 @@
 {
-  "01-basic-banner": {
-    "title": "Basic Banner",
-    "description": "A neutral note banner using background shades instead of semantic colors. The default banner variant for general-purpose messaging.",
-    "code": "import React from 'react';\nimport { Banner } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Banner variant=\"note\" size=\"md\">\n      This is a note banner. Use it for general-purpose messages and information without semantic intent.\n    </Banner>\n  );\n}"
+  "01-variants": {
+    "title": "Variants",
+    "description": "All five semantic variants: note, info, success, warning, and danger.",
+    "code": "import { Banner, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 480 }}>\n      <Banner variant=\"note\">\n        <Banner.Title>Note</Banner.Title>\n        <Banner.Body>This is a general note with supplementary context.</Banner.Body>\n      </Banner>\n      <Banner variant=\"info\">\n        <Banner.Title>Info</Banner.Title>\n        <Banner.Body>Your workspace is on the free plan. Upgrade to unlock more seats.</Banner.Body>\n      </Banner>\n      <Banner variant=\"success\">\n        <Banner.Title>Success</Banner.Title>\n        <Banner.Body>Your changes have been saved and are now live.</Banner.Body>\n      </Banner>\n      <Banner variant=\"warning\">\n        <Banner.Title>Warning</Banner.Title>\n        <Banner.Body>This action cannot be undone. Proceed with caution.</Banner.Body>\n      </Banner>\n      <Banner variant=\"danger\">\n        <Banner.Title>Danger</Banner.Title>\n        <Banner.Body>Your account has exceeded its storage limit.</Banner.Body>\n      </Banner>\n    </Flex>\n  );\n}"
+  },
+  "02-dismissible": {
+    "title": "Dismissible",
+    "description": "A banner with a dismiss button. The caller controls what happens after dismissal.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Banner, Button, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [dismissed, setDismissed] = useState(false);\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 480 }}>\n      {!dismissed ? (\n        <Banner variant=\"info\" isDismissible onDismiss={() => setDismissed(true)}>\n          <Banner.Title>Scheduled maintenance</Banner.Title>\n          <Banner.Body>The system will be unavailable on Saturday from 2–4 AM UTC.</Banner.Body>\n        </Banner>\n      ) : (\n        <Flex gap=\"sm\" style={{ alignItems: 'center' }}>\n          <span className=\"text-sm text-foreground-400\">Banner dismissed.</span>\n          <Button variant=\"ghost\" onClick={() => setDismissed(false)}>\n            Restore\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n}"
+  },
+  "03-form-feedback": {
+    "title": "Form Feedback",
+    "description": "Banners shown conditionally after a form action to relay success or failure.",
+    "code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Banner, Button, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  const [submitted, setSubmitted] = useState(false);\n  const [error, setError] = useState(false);\n\n  const handleSubmit = () => {\n    if (!submitted) {\n      setError(true);\n      return;\n    }\n    setError(false);\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 400 }}>\n      {error && (\n        <Banner variant=\"danger\" isDismissible onDismiss={() => setError(false)}>\n          <Banner.Title>Submission failed</Banner.Title>\n          <Banner.Body>Please review the form and correct any errors before retrying.</Banner.Body>\n        </Banner>\n      )}\n      {submitted && !error && (\n        <Banner variant=\"success\">\n          <Banner.Title>Profile updated</Banner.Title>\n          <Banner.Body>Your changes have been saved successfully.</Banner.Body>\n        </Banner>\n      )}\n      <Flex gap=\"sm\">\n        <Button variant=\"primary\" onClick={() => { setSubmitted(true); setError(false); }}>\n          Save changes\n        </Button>\n        <Button variant=\"secondary\" onClick={() => { setSubmitted(false); handleSubmit(); }}>\n          Trigger error\n        </Button>\n      </Flex>\n    </Flex>\n  );\n}"
+  },
+  "04-settings-panel": {
+    "title": "Settings Panel",
+    "description": "A small warning banner inline with a destructive settings action.",
+    "code": "import { Banner, Button, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 420 }}>\n      <div>\n        <p className=\"text-sm font-semibold text-foreground-100\">API Access</p>\n        <p className=\"text-xs text-foreground-400\">Manage keys for external integrations.</p>\n      </div>\n      <Banner variant=\"warning\">\n        <Banner.Body>Regenerating your key will revoke all existing integrations immediately.</Banner.Body>\n      </Banner>\n      <Button variant=\"secondary\">Regenerate API key</Button>\n    </Flex>\n  );\n}"
+  },
+  "05-body-only": {
+    "title": "Body Only",
+    "description": "Single-line banners without a title for compact inline notifications.",
+    "code": "import { Banner, Flex } from 'ui-lab-components';\n\nexport default function Example() {\n  return (\n    <Flex direction=\"column\" gap=\"md\" style={{ width: 480 }}>\n      <Banner variant=\"info\" isDismissible>\n        <Banner.Body>\n          Two-factor authentication is not enabled on your account.{' '}\n          <a href=\"#\" className=\"underline\">Enable now</a>\n        </Banner.Body>\n      </Banner>\n      <Banner variant=\"success\" isDismissible>\n        <Banner.Body>Deployment #142 completed in 38 seconds.</Banner.Body>\n      </Banner>\n    </Flex>\n  );\n}"
   }
 }

package/src/components/Banner/index.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { Banner } from 'ui-lab-components';
 import { ControlDef, ComponentDetail } from '@/types';
-import Example1, { metadata as metadata1 } from './examples/01-basic-banner.js';
+import Example1, { metadata as metadata1 } from './examples/01-variants.js';
+import Example2, { metadata as metadata2 } from './examples/02-dismissible.js';
+import Example3, { metadata as metadata3 } from './examples/03-form-feedback.js';
+import Example4, { metadata as metadata4 } from './examples/04-settings-panel.js';
+import Example5, { metadata as metadata5 } from './examples/05-body-only.js';
 import examplesJson from './examples.json' with { type: 'json' };
 import { loadComponentExamples } from '../../utils/load-component-examples.js';
 import { FaInfoCircle } from 'react-icons/fa';
 
 const examplesData = [
-  { id: '01-basic-banner', Component: Example1, metadata: metadata1 },
+  { id: '01-variants', Component: Example1, metadata: metadata1 },
+  { id: '02-dismissible', Component: Example2, metadata: metadata2 },
+  { id: '03-form-feedback', Component: Example3, metadata: metadata3 },
+  { id: '04-settings-panel', Component: Example4, metadata: metadata4 },
+  { id: '05-body-only', Component: Example5, metadata: metadata5 },
 ];
 
 const bannerControls: ControlDef[] = [
@@ -24,17 +32,6 @@ const bannerControls: ControlDef[] = [
     ],
     defaultValue: 'note',
   },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-    defaultValue: 'md',
-  },
   {
     name: 'dismissible',
     label: 'Dismissible',
@@ -47,7 +44,7 @@ const bannerBasicCode = `import { Banner } from "ui-lab-components";
 
 export function Example() {
   return (
-    <Banner variant="note" size="md">
+    <Banner variant="note">
       This is an informational banner.
     </Banner>
   );
@@ -76,7 +73,7 @@ export const bannerDetail: ComponentDetail = {
       description: 'Adjust props to customize the banner',
       code: bannerBasicCode,
       preview: (
-        <Banner variant="note" size="md">
+        <Banner variant="note">
           This is an informational banner.
         </Banner>
       ),
@@ -84,7 +81,6 @@ export const bannerDetail: ComponentDetail = {
       renderPreview: (props: any) => (
         <Banner
           variant={props.variant as any}
-          size={props.size as any}
           isDismissible={props.dismissible}
         >
           This is a {props.variant} banner.

package/src/components/Button/examples/01-variants.tsx

@@ -1,62 +1,28 @@
 import React from 'react'
-import { Button } from 'ui-lab-components'
+import { Button, Flex } from 'ui-lab-components'
+
+const buttonVariants = [
+  { label: "Primary", variant: "primary" },
+  { label: "Default", variant: "default" },
+  { label: "Secondary", variant: "secondary" },
+  { label: "Outline", variant: "outline" },
+  { label: "Ghost", variant: "ghost" },
+  { label: "Danger", variant: "danger" },
+] as const;
 
 export const metadata = {
   title: 'Button Variants',
-  description: 'All available button variants including primary, default, secondary, outline, and ghost styles.'
+  description: 'All available button variants side by side in a single row.'
 };
 
 export default function Example() {
   return (
-    <div className="p-4 space-y-8">
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Primary Variant</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="primary">Primary Button</Button>
-          <Button variant="primary" disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Default Variant</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="default">Default Button</Button>
-          <Button variant="default" disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Secondary Variant</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="secondary">Secondary Button</Button>
-          <Button variant="secondary" disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Outline Variant</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="outline">Outline Button</Button>
-          <Button variant="outline" disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Ghost Variant</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="ghost">Ghost Button</Button>
-          <Button variant="ghost" disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-foreground-200 mb-3">Sizes</h3>
-        <div className="flex gap-2 flex-wrap items-center">
-          <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
-          <Button size="lg">Large</Button>
-        </div>
-      </div>
-    </div>
+    <Flex gap="xs" align="center" justify="center" wrap="nowrap">
+      {buttonVariants.map((button) => (
+        <Button key={button.variant} variant={button.variant}>
+          {button.label}
+        </Button>
+      ))}
+    </Flex>
   )
 }

package/src/components/Button/examples/02-multi-actions.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React, { useState } from 'react'
 import { Button, Flex } from 'ui-lab-components'
 import { FaEllipsisVertical } from "react-icons/fa6";
 

package/src/components/Button/examples/04-sub-stack-actions.tsx

@@ -21,7 +21,7 @@ export default function Example() {
       <Input
         placeholder="Search..."
         icon={<LuSearch />}
-        hint={<Badge size="sm" variant="secondary" >Ctrl+K</Badge>}
+        hint={<Badge variant="secondary" >Ctrl+K</Badge>}
       />
       <Button size="sm" icon={{ right: <FaPlus size={12} /> }} >Upload</Button>
     </Flex>

package/src/components/Button/examples/06-icons.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Button, Flex } from 'ui-lab-components'
+import { FaArrowRight, FaDownload, FaEllipsisVertical, FaPlus } from 'react-icons/fa6'
+
+export const metadata = {
+  title: 'Icons',
+  description: 'Left, right, and icon-only button patterns.'
+};
+
+export default function Example() {
+  return (
+    <Flex gap="xs" align="center" justify="center" wrap="wrap">
+      <Button variant="primary" icon={{ left: <FaPlus /> }}>
+        New Project
+      </Button>
+      <Button variant="outline" icon={{ right: <FaArrowRight /> }}>
+        Continue
+      </Button>
+      <Button variant="secondary" icon={<FaDownload />}>
+        Download
+      </Button>
+      <Button size="icon" variant="ghost" aria-label="More actions" icon={<FaEllipsisVertical />} />
+    </Flex>
+  )
+}

package/src/components/Button/examples/07-split-button.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React, { useState } from 'react'
+import { Button, Divider, Flex, Group, Select } from 'ui-lab-components'
+import { FaChevronDown } from 'react-icons/fa6'
+
+const splitActions = [
+  { value: "publish", label: "Publish now" },
+  { value: "schedule", label: "Schedule publish" },
+  { value: "save", label: "Save draft" },
+] as const;
+
+export const metadata = {
+  title: 'Split Button',
+  description: 'Group + Select primitives for a classic split button with a primary action and a separate menu trigger.'
+};
+
+export default function Example() {
+  const [action, setAction] = useState<string | number | null>(splitActions[0].value);
+  const selectedAction = splitActions.find((item) => item.value === action) ?? splitActions[0];
+
+  return (
+    <Flex direction="column" gap="sm" align="center">
+      <Group orientation="horizontal">
+        <Group.Select className="w-full" selectedKey={action} onSelectionChange={setAction}>
+          <Select.Value>
+            <Button variant="primary">{selectedAction.label}</Button>
+          </Select.Value>
+          <Divider />
+          <Select.Trigger
+            chevron={<FaChevronDown className="h-3.5 w-3.5" />}
+            aria-label="Choose split action"
+          />
+          <Select.Content>
+            <Select.List>
+              {splitActions.map((item) => (
+                <Select.Item key={item.value} value={item.value} textValue={item.label}>
+                  {item.label}
+                </Select.Item>
+              ))}
+            </Select.List>
+          </Select.Content>
+        </Group.Select>
+      </Group>
+    </Flex>
+  )
+}

package/src/components/Button/examples/08-button-group.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { useState } from 'react'
+import { Button, Divider, Group } from 'ui-lab-components'
+import { FaGrip, FaList, FaTable } from 'react-icons/fa6'
+
+export const metadata = {
+  title: 'Button Group',
+  description: 'Joined view switcher using the Group compound component with active state.'
+};
+
+export default function Example() {
+  const [viewMode, setViewMode] = useState("list");
+
+  return (
+    <Group orientation="horizontal" spacing="xs">
+      <Group.Button active={viewMode === "list"} onPress={() => setViewMode("list")}>
+        <FaList className="mr-1.5 text-foreground-400" /> List
+      </Group.Button>
+      <Divider orientation="vertical" />
+      <Group.Button active={viewMode === "grid"} onPress={() => setViewMode("grid")}>
+        <FaGrip className="mr-1.5 text-foreground-400" /> Grid
+      </Group.Button>
+      <Divider orientation="vertical" />
+      <Group.Button active={viewMode === "table"} onPress={() => setViewMode("table")}>
+        <FaTable className="mr-1.5 text-foreground-400" /> Table
+      </Group.Button>
+    </Group>
+  )
+}

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

@@ -8,3 +8,9 @@ export { default as Example4 } from './04-sub-stack-actions.js'
 export { metadata as metadata4 } from './04-sub-stack-actions.js'
 export { default as Example5 } from './05-split-action-button.js'
 export { metadata as metadata5 } from './05-split-action-button.js'
+export { default as Example6 } from './06-icons.js'
+export { metadata as metadata6 } from './06-icons.js'
+export { default as Example7 } from './07-split-button.js'
+export { metadata as metadata7 } from './07-split-button.js'
+export { default as Example8 } from './08-button-group.js'
+export { metadata as metadata8 } from './08-button-group.js'