@plexui/mcp 0.1.0

package/dist/index.js

@@ -0,0 +1,4586 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+
+// src/data/manifest.json
+var manifest_default = {
+  name: "@plexui/ui",
+  version: "latest",
+  description: "The most flexible UI kit for React. Production-grade components with pixel-perfect Figma parity.",
+  homepage: "https://plexui.com",
+  docsUrl: "https://plexui.com/docs/components",
+  install: "npm install @plexui/ui",
+  setup: {
+    css: '@import "tailwindcss";\n@import "@plexui/ui/css";',
+    provider: 'Wrap your app with <PlexUIProvider> from "@plexui/ui/components/PlexUIProvider"'
+  },
+  sizeScale: [
+    "3xs",
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl"
+  ],
+  colors: [
+    "primary",
+    "secondary",
+    "danger",
+    "success",
+    "warning",
+    "caution",
+    "discovery",
+    "info"
+  ],
+  variants: [
+    "solid",
+    "soft",
+    "outline",
+    "ghost"
+  ],
+  componentCount: 37,
+  components: [
+    {
+      slug: "alert",
+      name: "Alert",
+      description: "Call attention to a specific message or warning",
+      importPath: "@plexui/ui/components/Alert",
+      exports: [
+        "Alert"
+      ],
+      props: [
+        {
+          name: "title",
+          type: "ReactNode",
+          description: "Title displayed in the alert"
+        },
+        {
+          name: "description",
+          type: "ReactNode",
+          description: "Description text"
+        },
+        {
+          name: "actions",
+          type: "ReactNode",
+          description: "Actions (for example buttons)"
+        },
+        {
+          name: "actionsPlacement",
+          type: '"end" | "bottom"',
+          description: "Placement of actions"
+        },
+        {
+          name: "color",
+          type: "SemanticColors",
+          default: '"primary"',
+          description: "Color scheme"
+        },
+        {
+          name: "variant",
+          type: '"solid" | "soft" | "outline"',
+          default: '"outline"',
+          description: "Style variant"
+        },
+        {
+          name: "indicator",
+          type: "ReactNode | false",
+          description: "Custom indicator or false to hide"
+        },
+        {
+          name: "onDismiss",
+          type: "() => void",
+          description: "Shows dismiss button when provided"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: `<Alert
+  title="Scheduled maintenance"
+  description="We'll be offline 2 - 4 AM UTC on July 14 while we upgrade our database."
+  actions={<Button color="primary" variant="soft" pill>Dismiss</Button>}
+/>`
+        },
+        {
+          name: "Colors & variants",
+          code: '<Alert\n  color="primary"\n  variant="outline"\n  title="Scheduled maintenance on Saturday, 2-4 AM PT"\n  description={<>Track status updates on <TextLink color="currentcolor" href="#">status page</TextLink></>}\n/>',
+          details: "You can stylize the display of the alert using the color and variant props."
+        },
+        {
+          name: "Title",
+          code: '<Alert title="Your current access level limits what you can view or modify" />',
+          details: "You can optionally include a title for your alert with the title prop."
+        },
+        {
+          name: "Description",
+          code: `<Alert
+  description={
+    <>
+      We're working on centralizing SCIM and invite settings. For now, setup is handled within individual product settings. <TextLink href="#">Learn more</TextLink>
+    </>
+  }
+/>`,
+          details: "You can optionally include description text for your alert with the description prop."
+        },
+        {
+          name: "Actions",
+          code: '<Alert\n  variant="soft"\n  color="warning"\n  title="Password expires in 3 days"\n  description="Update it now to avoid losing access to your account."\n  actions={<Button color="primary" pill>Update password</Button>}\n/>',
+          details: "You can add actions to the alert with the actions prop, which accepts ReactNode. Combine with onDismiss to add a dismiss button."
+        },
+        {
+          name: "Action placement",
+          code: `<Alert
+  title="Our terms of service has been updated"
+  description="We've updated our terms to clarify how we handle data, billing, and user permissions. Please review and accept the latest terms to avoid impacting your service."
+  actions={(
+    <>
+      <Button color="primary" variant="soft" pill>Set reminder</Button>
+      <Button color="primary" variant="solid" pill>Review terms</Button>
+    </>
+  )}
+  actionsPlacement="bottom"
+/>`,
+          details: "Actions are automatically positioned in the alert by default. You can force a specific position with the actionsPlacement prop by passing either 'end' or 'bottom'."
+        },
+        {
+          name: "Indicator",
+          code: `<Alert
+  indicator={<Lightbulb />}
+  description={
+    <>
+      We're working on centralizing SCIM and invite settings. For now, setup is handled within individual product settings. <TextLink href="#">Learn more</TextLink>
+    </>
+  }
+/>`,
+          details: "Alert provides an indicator icon by default. You can override it by passing a custom icon to indicator, or pass indicator={'{false}'} to hide it entirely."
+        },
+        {
+          name: "Dismissible",
+          code: `<Alert
+  className="items-start"
+  title="Try our new dashboard layout"
+  description="We've introduced a streamlined layout that makes using the dashboard even easier. You can switch back any time."
+  actions={(
+    <>
+      <Button color="primary" variant="soft" pill>Dismiss</Button>
+      <Button color="primary" variant="solid" pill>Try it</Button>
+    </>
+  )}
+/>`,
+          details: "The suggested approach for dismissible notices is to use labeled buttons via actions. You can also provide onDismiss to render a dismiss button in the alert chrome."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/alert"
+    },
+    {
+      slug: "avatar-group",
+      name: "Avatar Group",
+      description: "Display avatars as a single stack",
+      importPath: "@plexui/ui/components/Avatar",
+      exports: [
+        "AvatarGroup"
+      ],
+      props: [
+        {
+          name: "size",
+          type: "number",
+          description: "Size of all avatars in the group"
+        },
+        {
+          name: "stack",
+          type: '"start" | "end"',
+          default: '"start"',
+          description: "Stacking direction"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<AvatarGroup size={42}>\n  <Avatar name="Tyler" imageUrl="https://gravatar.com/avatar/xyz" />\n  <Avatar name="Jane" color="primary" variant="solid" />\n  <Avatar name="Tech support" Icon={Robot} variant="solid" />\n  <Avatar overflowCount={5} />\n</AvatarGroup>'
+        },
+        {
+          name: "Stacking direction",
+          code: '<AvatarGroup stack="end" size={42}>...</AvatarGroup>',
+          details: 'You can control the stacking direction using the stack prop, as either "start" or "end".'
+        },
+        {
+          name: "Group sizing",
+          code: '<AvatarGroup size={48}>\n  <Avatar name="Tyler" color="info" />\n  <Avatar name="Jane" color="discovery" />\n  <Avatar name="Will" color="danger" />\n  <Avatar overflowCount={5} />\n</AvatarGroup>',
+          details: "You can control the size of all avatars in the group by passing size directly to the &lt;AvatarGroup&gt; component."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/avatar-group"
+    },
+    {
+      slug: "avatar",
+      name: "Avatar",
+      description: "Display user identities with either text, photo, or an icon",
+      importPath: "@plexui/ui/components/Avatar",
+      exports: [
+        "Avatar"
+      ],
+      props: [
+        {
+          name: "name",
+          type: "string",
+          description: "Display name; used for text initial when no image/icon"
+        },
+        {
+          name: "imageUrl",
+          type: "string",
+          description: "Absolute URL for image avatar"
+        },
+        {
+          name: "Icon",
+          type: "React.ComponentType",
+          description: "Icon component for icon avatar"
+        },
+        {
+          name: "size",
+          type: "number",
+          description: "Width and height in pixels"
+        },
+        {
+          name: "color",
+          type: "string",
+          description: "Semantic color for text/icon avatar"
+        },
+        {
+          name: "variant",
+          type: '"soft" | "solid"',
+          description: "Style variant"
+        },
+        {
+          name: "overflowCount",
+          type: "number",
+          description: "Show overflow count (e.g. +9)"
+        },
+        {
+          name: "onClick",
+          type: "function",
+          description: "Makes avatar interactive"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex gap-4">\n  <Avatar name="Tyler" imageUrl="https://gravatar.com/avatar/9531b260b9693f3394bea8646c6ea141ce58fe5a138b7db7729d60a4c5dde552" size={48} />\n  <Avatar name="Will" size={48} />\n  <Avatar name="Tech support" Icon={Robot} size={48} color="primary" variant="solid" />\n</div>',
+          details: "A variety of avatar types: text, image, icon, and overflow."
+        },
+        {
+          name: "Text",
+          code: '<Avatar name="David" size={48} />',
+          details: "For text-based avatars, a single initial is displayed based on the name prop passed to the component."
+        },
+        {
+          name: "Image",
+          code: '<Avatar\n  name="Tyler"\n  imageUrl="https://gravatar.com/avatar/9531b260b9693f3394bea8646c6ea141ce58fe5a138b7db7729d60a4c5dde552"\n  size={48}\n/>',
+          details: "To display an image avatar, provide an absolute URL to the image with imageUrl. Images will have a soft fade entrance once loaded, or fallback to a text display if the image fail to load."
+        },
+        {
+          name: "Icon",
+          code: "<Avatar\n  Icon={Robot}\n  size={48}\n/>",
+          details: "To display an icon avatar, provide an icon to render to the Icon prop. The name prop is not used in this case, and can be omitted."
+        },
+        {
+          name: "Overflow count",
+          code: "<Avatar overflowCount={9} size={48} />",
+          details: "To display an overflow avatar, provide a number to the overflowCount prop. The number will be automatically formatted and scaled to fit."
+        },
+        {
+          name: "Sizing",
+          code: '<Avatar name="David" size={48} />',
+          details: "To size the avatar, pass a number to the size property, which will set the width and height in pixels. Text and icon avatars will scale their sizes dynamically based on this value."
+        },
+        {
+          name: "Colors & variants",
+          code: '<div className="flex gap-4 flex-wrap">\n  <Avatar name="A" color="primary" variant="soft" size={40} />\n  <Avatar name="B" color="primary" variant="solid" size={40} />\n  <Avatar name="C" color="success" variant="soft" size={40} />\n  <Avatar name="D" color="danger" variant="solid" size={40} />\n</div>',
+          details: "You can stylize the display of the avatar using the color and variant props."
+        },
+        {
+          name: "Roundness",
+          code: '<Avatar name="Acme, co." color="primary" variant="solid" size={48} className="rounded-lg" />',
+          details: "By default, avatars are fully rounded. You can override this by passing a Tailwind rounding class to className."
+        },
+        {
+          name: "Interactive",
+          code: '<Avatar\n  name="Will"\n  size={48}\n  onClick={saySup}\n/>',
+          details: "Avatars can be used as interactive elements by passing an onClick handler. The avatar will automatically apply semantic and visual interaction styles."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/avatar"
+    },
+    {
+      slug: "badge",
+      name: "Badge",
+      description: "Emphasize details with a status indicator",
+      importPath: "@plexui/ui/components/Badge",
+      exports: [
+        "Badge"
+      ],
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Content inside the badge"
+        },
+        {
+          name: "color",
+          type: '"secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution"',
+          default: '"secondary"',
+          description: "Semantic color"
+        },
+        {
+          name: "variant",
+          type: '"solid" | "soft" | "outline"',
+          default: '"soft"',
+          description: "Style variant"
+        },
+        {
+          name: "size",
+          type: '"sm" | "md" | "lg"',
+          default: '"sm"',
+          description: "Badge size"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "false",
+          description: "Fully rounded"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex gap-4 flex-wrap">\n  <Badge color="success" size="lg">Successful</Badge>\n  <Badge size="lg" className="gap-1.5"><LoadingIndicator /> In progress</Badge>\n  <Badge color="danger" size="lg">Failed</Badge>\n  <Badge color="warning" size="lg" pill><Flask /> Beta</Badge>\n  <Badge color="caution" size="lg">Caution</Badge>\n</div>',
+          details: "Status badges in different colors and compositions."
+        },
+        {
+          name: "Colors & variants",
+          code: 'const variants = ["soft", "solid", "outline"] as const\nconst colors = ["secondary", "success", "warning", "danger", "info", "discovery", "caution"] as const\n\n<div className="pt-1 pb-6 px-8 w-fit min-w-full">\n  <div\n    className="grid gap-6 items-center justify-center"\n    style={{ gridTemplateColumns: \\`auto repeat(\\${colors.length}, min-content)\\` }}\n  >\n    <div />\n    {colors.map((color) => (\n      <div key={color} className="text-center mb-1 text-sm" style={{ color: "var(--color-text-tertiary)" }}>\n        {color}\n      </div>\n    ))}\n\n    {variants.map((variant) => (\n      <React.Fragment key={variant}>\n        <div className="text-right mr-3 text-sm" style={{ color: "var(--color-text-tertiary)" }}>\n          {variant}\n        </div>\n        {colors.map((color) => (\n          <div key={\\`\\${variant}-\\${color}\\',
+          details: "You can stylize the display of the badge using the color and variant props."
+        },
+        {
+          name: "Size & roundness",
+          code: 'const [size, setSize] = useState("md")\nconst [pill, setPill] = useState(false)\n\n<>\n  <div style={{ background: "var(--color-surface-secondary)", width: "100%" }}>\n    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 16px 6px 8px", borderTop: "1px solid var(--color-fd-border)" }}>\n      <span style={{ fontFamily: "var(--font-mono, ui-monospace, monospace)", fontSize: "0.8125rem", padding: "2px 8px", borderRadius: 6, background: "var(--color-surface-secondary)" }}>\n        size\n      </span>\n      <SegmentedControl value={size} onChange={setSize} size="xs" aria-label="size">\n        <SegmentedControl.Option value="sm">sm</SegmentedControl.Option>\n        <SegmentedControl.Option value="md">md</SegmentedControl.Option>\n        <SegmentedControl.Option value="lg">lg</SegmentedControl.Option>\n      </SegmentedControl>\n    </div>\n    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 16px 6px 8px", borderTop: "1px solid var(--color-fd-border)" }}>\n      <span style={{ fontFamily: "var(--font-mono, ui-monospace, monospace)", fontSize: "0.8125rem", padding: "2px 8px", borderRadius: 6, background: "var(--color-surface-secondary)" }}>\n        pill\n      </span>\n      <Switch checked={pill} onCheckedChange={setPill} aria-label="pill" />\n    </div>\n  </div>\n  <div className="py-10 flex justify-center">\n    <Badge color="info" size={size} pill={pill}>New</Badge>\n  </div>\n</>',
+          details: "You can control the size and roundness of the badge with size and pill props. When pill is set, extra horizontal gutter is dynamically applied to the badge."
+        },
+        {
+          name: "Icon",
+          code: '<Badge color="warning" size="lg"><Flask /> Beta</Badge>',
+          details: "Content within the badge can be composed, like showing icons. Color, sizing, and spacing adapt by default."
+        },
+        {
+          name: "Loading",
+          code: '<Badge size="lg" color="secondary" className="gap-1.5">\n  <LoadingIndicator /> In progress\n</Badge>',
+          details: "In this example, additional gap is added with a Tailwind gap-1.5 class to provide the appropriate visual spacing."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/badge"
+    },
+    {
+      slug: "button-link",
+      name: "Button Link",
+      description: '"Button as a semantic anchor element"',
+      importPath: "@plexui/ui/components/Button",
+      exports: [
+        "ButtonLink"
+      ],
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Content inside the link button"
+        },
+        {
+          name: "color",
+          type: '"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning"',
+          default: '"primary"',
+          description: "Visual color"
+        },
+        {
+          name: "variant",
+          type: '"solid" | "soft" | "outline" | "ghost"',
+          default: '"solid"',
+          description: "Style variant"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Control height and typography scale"
+        },
+        {
+          name: "gutterSize",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl"',
+          description: "Override horizontal padding"
+        },
+        {
+          name: "iconSize",
+          type: '"sm" | "md" | "lg" | "xl" | "2xl"',
+          description: "Override icon size"
+        },
+        {
+          name: "href",
+          type: "string",
+          description: "Link URL"
+        },
+        {
+          name: "to",
+          type: "string | object",
+          description: "Router link destination (internal)"
+        },
+        {
+          name: "as",
+          type: "ComponentType",
+          description: "Link component override (e.g. Next Link)"
+        },
+        {
+          name: "external",
+          type: "boolean",
+          description: "Force external-link behavior"
+        },
+        {
+          name: "opticallyAlign",
+          type: '"start" | "end"',
+          description: "Apply optical negative margin alignment"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          description: "Full width"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "true",
+          description: "Fully rounded"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable link"
+        },
+        {
+          name: "disabledTone",
+          type: '"relaxed"',
+          description: "Use relaxed visual tone for disabled state"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Custom classes for the root element"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<ButtonLink color="primary" pill={false} href="#">View API Keys <ArrowRight /></ButtonLink>'
+        },
+        {
+          name: "Internal link",
+          code: '<ButtonLink href="/some-path" color="primary">\n  Internal link <ArrowRight />\n</ButtonLink>',
+          details: "When a relative href or to is provided, ButtonLink automatically uses the configured LinkComponent from PlexUIProvider so your router handles navigation and prefetching."
+        },
+        {
+          name: "External link",
+          code: '<ButtonLink href="#" color="primary">\n  External link <ArrowUpRight />\n</ButtonLink>',
+          details: 'When linking to an external URL (or when external is set), &lt;a&gt; is used with target="_blank" and rel="noopener noreferrer" added automatically. If your link is not being automatically identified, you can force external link behavior with the external prop.'
+        },
+        {
+          name: "Colors & variants",
+          code: '<div className="pt-1 pb-6 px-8 w-fit min-w-full">\n  {/* Matrix of variant x color */}\n</div>',
+          details: "Stylize the link with color and variant props."
+        },
+        {
+          name: "Sizing & roundness",
+          code: '<ButtonLink size="lg" pill={false}>\n  View account <ArrowRight />\n</ButtonLink>\n<ButtonLink size="lg" pill={false}>\n  View account\n</ButtonLink>',
+          details: "Sizing of the link is controlled with size and gutterSize props. size sets the control height, and gutterSize sets the horizontal padding. Create fully rounded links with the pill prop. When pill is set, extra horizontal gutter is dynamically applied to the link."
+        },
+        {
+          name: "Icons",
+          code: '<ButtonLink color="info" size="lg" iconSize="lg" variant="soft" href="#">\n  <Globe /> View website\n</ButtonLink>',
+          details: "Icon sizing is controlled by the iconSize prop, which makes it easy to add icons as children without additional props. size will provide a default value for iconSize, but setting the prop will force the specified size."
+        },
+        {
+          name: "Block",
+          code: '<ButtonLink block size="lg" href="#">Continue to dashboard</ButtonLink>',
+          details: "Create full-width links with the block prop."
+        },
+        {
+          name: "Disabled",
+          code: '<ButtonLink href="#" color="primary" disabled>\n  View API Keys\n</ButtonLink>',
+          details: 'Use disabled to both visually and accessibly disable a link. The component renders as a span[role="link"], and onClick handlers are not bound.'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/button-link"
+    },
+    {
+      slug: "button",
+      name: "Button",
+      description: "Create actions in many different styles",
+      importPath: "@plexui/ui/components/Button",
+      exports: [
+        "Button"
+      ],
+      props: [
+        {
+          name: "color",
+          type: '"primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning"',
+          default: '"primary"',
+          description: "Visual color scheme"
+        },
+        {
+          name: "variant",
+          type: '"solid" | "soft" | "outline" | "ghost"',
+          default: '"solid"',
+          description: "Button style variant"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Control height and default gutter/icon size"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "true",
+          description: "Fully rounded corners"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          description: "Full width"
+        },
+        {
+          name: "uniform",
+          type: "boolean",
+          default: "false",
+          description: "Square icon button (width equals height)"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Visually and accessibly disabled"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          description: "Shows loading indicator"
+        },
+        {
+          name: "inert",
+          type: "boolean",
+          default: "false",
+          description: "Accessibly disabled without visual change"
+        },
+        {
+          name: "selected",
+          type: "boolean",
+          default: "false",
+          description: "Selected state styling"
+        },
+        {
+          name: "opticallyAlign",
+          type: '"start" | "end"',
+          description: "Offset gutter for optical alignment"
+        },
+        {
+          name: "gutterSize",
+          type: "string",
+          description: "Horizontal padding size"
+        },
+        {
+          name: "iconSize",
+          type: "string",
+          description: "Size of icons in children"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex gap-3">\n  <Button color="primary">Submit</Button>\n  <Button variant="soft"><CompareArrows /> Compare</Button>\n  <Button color="danger" gutterSize="sm" pill={false}><Delete /></Button>\n  <Button variant="outline">Next <ArrowRight /></Button>\n  <Button variant="ghost" color="secondary" uniform><Clear /></Button>\n</div>',
+          details: "A showcase of Button's key styles: solid, soft, outline, ghost, and icon-only."
+        },
+        {
+          name: "Colors & variants",
+          code: '<div className="w-[calc(100%+48px)] -mx-6 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">\n  <div className="pt-1 pb-6 px-8 w-max min-w-full">\n    <Matrix\n      rowLabels={["soft", "solid", "outline", "ghost"]}\n      columnLabels={["primary", "secondary", "danger", "info", "discovery", "success", "caution", "warning"]}\n      renderCell={(row, col) => (\n        <Button\n          color={["primary", "secondary", "danger", "info", "discovery", "success", "caution", "warning"][col]}\n          variant={["soft", "solid", "outline", "ghost"][row]}\n          size="md"\n        >\n          Submit\n        </Button>\n      )}\n    />\n  </div>\n</div>',
+          details: "You can stylize the display of the button using the color and variant props."
+        },
+        {
+          name: "Sizing & roundness",
+          code: '<div className="flex flex-col gap-2 justify-start items-start">\n  <Button color="primary" size="xl" pill><Mail /> Button <ArrowRight /></Button>\n  <Button color="primary" size="xl" pill>Button <ArrowRight /></Button>\n  <Button color="primary" size="xl" pill><Mail /> Button</Button>\n  <Button color="primary" size="xl" pill>Button</Button>\n</div>',
+          details: "Control height with size and horizontal padding with gutterSize. Use pill for fully rounded corners. size sets the button to a specific control height, and gutterSize sets the horizontal padding. Each size provides default values for gutterSize and iconSize props, as well as font-size. Each of these values can be overridden independently. When pill is set, extra horizontal gutter is dynamically applied to the button."
+        },
+        {
+          name: "Icons",
+          code: '<Button color="secondary" size="lg" uniform variant="ghost">\n  <PlusLg />\n</Button>',
+          details: "Add icons as children \u2014 sizing is automatic via iconSize prop. Default values for iconSize are provided through the size prop, but you can pass the prop directly to change the defaults. For icon-only buttons, there are two common approaches: Square \u2014 create perfect square icon buttons with the uniform prop. When uniform is passed, gutterSize is ignored. Combine with pill to make circular icons. Tighter gutters \u2014 applying a smaller gutterSize than size can create well-sized, but not exactly square, icon buttons."
+        },
+        {
+          name: "Block",
+          code: '<div className="w-[290px] text-center p-2 border border-dashed border-alpha/20 rounded-md">\n  <Button block size="lg">Continue</Button>\n</div>',
+          details: "Create full-width buttons with the block prop."
+        },
+        {
+          name: "Disabled",
+          code: "<Button disabled>Submit</Button>",
+          details: "Use disabled to both visually and accessibly disable a button."
+        },
+        {
+          name: "Inert",
+          code: "<Button inert>Submit</Button>",
+          details: "Use inert to accessibly disable a button without any visual changes. Note: For accessibility reasons, disabled is used instead of applying inert directly to the button. Visual disablement in the disabled prop is applied via [data-disable]."
+        },
+        {
+          name: "Loading",
+          code: '<Button loading size="xl" pill><ArrowUp /> Click to load</Button>',
+          details: "Use loading to display a loading indicator in the button, fading out the current content. Interactions will be prevented by default during this state, by providing a default value for inert to true. You can override this behavior directly with inert, or use disabled to add visual disablement."
+        },
+        {
+          name: "Selected",
+          code: '<Popover>\n  <Popover.Trigger>\n    <Button selected variant="solid">Click to open</Button>\n  </Popover.Trigger>\n  <Popover.Content minWidth="auto" className="p-4 text-sm">\n    <ShimmerText className="font-medium text-secondary">Button should look selected</ShimmerText>\n  </Popover.Content>\n</Popover>',
+          details: 'Use selected to indicate that a given button is correctly in an open or selected state. The exact visual behavior differs across each variant. This behavior is automatically configured with components like Menu that apply [aria-expanded="true"] or [data-state="open"] attributes.'
+        },
+        {
+          name: "Optical alignment",
+          code: '<div className="flex flex-col gap-3">\n  <div className="border border-dashed border-alpha/20 rounded-md py-4 px-6">\n    <div className="mb-2 text-secondary text-sm">Default gutters</div>\n    <Button variant="ghost">Ghost button</Button>\n  </div>\n  <div className="border border-dashed border-alpha/20 rounded-md py-4 px-6">\n    <div className="mb-2 text-secondary text-sm">opticallyAlign="start"</div>\n    <Button variant="ghost" opticallyAlign="start">Ghost button</Button>\n  </div>\n</div>',
+          details: 'Use opticallyAlign with either "start" or "end" to offset the gutter of the button.'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/button"
+    },
+    {
+      slug: "checkbox",
+      name: "Checkbox",
+      description: "Toggle control for on and off states",
+      importPath: "@plexui/ui/components/Checkbox",
+      exports: [
+        "Checkbox"
+      ],
+      props: [
+        {
+          name: "variant",
+          type: '"solid" | "ghost"',
+          default: '"solid"',
+          description: "Visual style \u2014 solid (filled background) or ghost (checkmark only)"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "false",
+          description: "Fully rounded indicator corners"
+        },
+        {
+          name: "checked",
+          type: 'boolean | "indeterminate"',
+          description: "Controlled state"
+        },
+        {
+          name: "defaultChecked",
+          type: 'boolean | "indeterminate"',
+          description: "Initial state (uncontrolled)"
+        },
+        {
+          name: "onCheckedChange",
+          type: "(next: boolean) => void",
+          description: "Called when state changes"
+        },
+        {
+          name: "label",
+          type: "ReactNode",
+          description: "Accessible label \u2014 accepts ReactNode for rich content"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Prevent interaction"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          description: "Required for form submission"
+        },
+        {
+          name: "name",
+          type: "string",
+          description: "Form field name"
+        },
+        {
+          name: "value",
+          type: "string",
+          description: "Value when submitted"
+        },
+        {
+          name: "orientation",
+          type: '"left" | "right"',
+          default: '"left"',
+          description: "Label position relative to checkbox"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "CSS classes applied to wrapper node"
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "The id of the checkbox element"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex flex-col gap-3">\n  <Checkbox label="Same as billing address" />\n  <Checkbox label="Subscribe to newsletter" defaultChecked />\n</div>'
+        },
+        {
+          name: "Variants",
+          code: '{/* solid (default) */}\n<Checkbox label="Checked" defaultChecked />\n\n{/* solid pill */}\n<Checkbox label="Checked" pill defaultChecked />\n\n{/* ghost */}\n<Checkbox label="Checked" variant="ghost" defaultChecked />',
+          details: "The checkbox supports three visual styles: solid (default) with a filled background and standard radius, solid pill with fully rounded corners, and ghost which renders only the checkmark without a border or background fill."
+        },
+        {
+          name: "Pill",
+          code: '<Checkbox label="Checked" pill defaultChecked />',
+          details: "Set pill to render the checkbox indicator with fully rounded corners (border-radius: full) instead of the default square radius."
+        },
+        {
+          name: "Ghost",
+          code: '<Checkbox label="Checked" variant="ghost" defaultChecked />',
+          details: 'Use variant="ghost" to render the checkbox without a border or background. The checkmark uses the text color instead of white, making it suitable for subtle inline selections or task lists.'
+        },
+        {
+          name: "With description",
+          code: '<div className="flex flex-col gap-4">\n  <Checkbox\n    label={\n      <div className="flex flex-col">\n        <span>Accept terms and conditions</span>\n        <span className="text-xs text-secondary mt-0.5">\n          By checking this box, you agree to our Terms of Service\n          and Privacy Policy.\n        </span>\n      </div>\n    }\n    defaultChecked\n  />\n  <Checkbox\n    label={\n      <div className="flex flex-col">\n        <span>Enable notifications</span>\n        <span className="text-xs text-secondary mt-0.5">\n          You can enable or disable notifications at any time\n          from settings.\n        </span>\n      </div>\n    }\n  />\n</div>',
+          details: "The label prop accepts ReactNode, so you can compose a label with secondary description text. This is useful for options that need additional context or explanation."
+        },
+        {
+          name: "Indeterminate",
+          code: 'const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate");\n\n<Checkbox\n  checked={checked}\n  onCheckedChange={() =>\n    setChecked(c => c === "indeterminate" ? true : c ? false : "indeterminate")\n  }\n  label="Select all"\n/>',
+          details: 'Use checked="indeterminate" to indicate a partially selected state. This is typically used for "select all" controls where only some child items are checked.'
+        },
+        {
+          name: "Disabled",
+          code: '{/* solid */}\n<Checkbox label="Unchecked" disabled />\n<Checkbox label="Checked" disabled defaultChecked />\n<Checkbox label="Indeterminate" disabled checked="indeterminate" />\n\n{/* solid pill */}\n<Checkbox label="Unchecked" pill disabled />\n<Checkbox label="Checked" pill disabled defaultChecked />\n\n{/* ghost */}\n<Checkbox label="Unchecked" variant="ghost" disabled />\n<Checkbox label="Checked" variant="ghost" disabled defaultChecked />',
+          details: "When disabled is set, the checkbox is dimmed to 50% opacity and prevents interaction. Works consistently across all variants \u2014 solid, pill, and ghost."
+        },
+        {
+          name: "Label orientation",
+          code: '<Checkbox label="Accept terms and conditions" orientation="right" />',
+          details: 'By default the checkbox renders to the left of the label. Set orientation="right" to place the checkbox after the label.'
+        },
+        {
+          name: "Without label",
+          code: '<div className="flex gap-4">\n  <Checkbox />\n  <Checkbox defaultChecked />\n  <Checkbox checked="indeterminate" />\n</div>',
+          details: "When no label is provided, the checkbox renders as a standalone control. All three visual states are shown: unchecked, checked, and indeterminate."
+        },
+        {
+          name: "Group with select all",
+          code: 'const [items, setItems] = useState([\n  { id: "read", label: "Read", checked: true },\n  { id: "write", label: "Write", checked: false },\n  { id: "execute", label: "Execute", checked: false },\n]);\n\nconst allChecked = items.every(i => i.checked);\nconst noneChecked = items.every(i => !i.checked);\nconst parentChecked = allChecked ? true : noneChecked ? false : "indeterminate";\n\n<>\n  <Checkbox\n    label="Permissions"\n    checked={parentChecked}\n    onCheckedChange={() => {\n      const next = !allChecked;\n      setItems(prev => prev.map(i => ({ ...i, checked: next })));\n    }}\n  />\n  <div className="pl-6 flex flex-col gap-3">\n    {items.map(item => (\n      <Checkbox\n        key={item.id}\n        label={item.label}\n        checked={item.checked}\n        onCheckedChange={next => {\n          setItems(prev =>\n            prev.map(i => i.id === item.id ? { ...i, checked: Boolean(next) } : i)\n          );\n        }}\n      />\n    ))}\n  </div>\n</>',
+          details: 'Combine a parent checkbox with child checkboxes to create a "select all" pattern. The parent shows an indeterminate state when only some children are checked.'
+        },
+        {
+          name: "Group with description",
+          code: '<Field label="Show on desktop" description="Select the items you want to display on the desktop.">\n  {() => (\n    <div className="flex flex-col gap-3">\n      <Checkbox label="Hard disks" defaultChecked />\n      <Checkbox label="External disks" />\n      <Checkbox label="CDs, DVDs, and iPods" />\n      <Checkbox label="Connected servers" />\n    </div>\n  )}\n</Field>',
+          details: "Wrap a group of checkboxes in a Field for a shared label and description. This is a common pattern for preference lists and settings panels."
+        },
+        {
+          name: "With Field",
+          code: '<Field\n  label="Terms"\n  description="Please review and accept the terms before continuing."\n  errorMessage={showError ? "You must accept the terms to continue." : undefined}\n>\n  {() => (\n    <div className="flex flex-col gap-3 mt-1">\n      <Checkbox label="I agree to the Terms of Service" />\n      <Checkbox label="Subscribe to product updates" />\n    </div>\n  )}\n</Field>',
+          details: "Wrap checkboxes in a Field component for form layout with label, description, and error message support. The Field provides aria-describedby and aria-invalid linking automatically."
+        },
+        {
+          name: "Grouped sections",
+          code: '<div className="divide-y">\n  <div className="pb-5">\n    <Field label="Email notifications" description="Configure which emails you receive.">\n      {() => (\n        <div className="flex flex-col gap-4">\n          <Checkbox\n            label={\n              <div className="flex flex-col">\n                <span>Marketing</span>\n                <span className="text-xs text-secondary mt-0.5">\n                  Receive emails about new products and features.\n                </span>\n              </div>\n            }\n            defaultChecked\n          />\n          <Checkbox\n            label={\n              <div className="flex flex-col">\n                <span>Security</span>\n                <span className="text-xs text-secondary mt-0.5">\n                  Receive emails about account activity and security.\n                </span>\n              </div>\n            }\n            defaultChecked\n          />\n        </div>\n      )}\n    </Field>\n  </div>\n  <div className="pt-5">\n    <Field label="Push notifications" description="Configure which push notifications you receive.">\n      {() => (\n        <div className="flex flex-col gap-3">\n          <Checkbox label="Everything" />\n          <Checkbox label="Direct messages and mentions" defaultChecked />\n          <Checkbox label="Nothing" />\n        </div>\n      )}\n    </Field>\n  </div>\n</div>',
+          details: "Use dividers to separate checkbox groups into logical sections. Each section can be wrapped in a Field with its own label and description."
+        },
+        {
+          name: "With Radio Group",
+          code: '<div className="flex flex-row gap-12 items-start">\n  <div>\n    <span className="text-xs text-tertiary font-mono mb-1">RadioGroup</span>\n    <RadioGroup direction="row" defaultValue="email" aria-label="Channel">\n      <RadioGroup.Item value="email">Email</RadioGroup.Item>\n      <RadioGroup.Item value="sms">SMS</RadioGroup.Item>\n      <RadioGroup.Item value="push">Push</RadioGroup.Item>\n    </RadioGroup>\n  </div>\n  <div>\n    <span className="text-xs text-tertiary font-mono mb-1">Checkbox</span>\n    <div className="flex flex-row gap-5">\n      <Checkbox label="Email" defaultChecked />\n      <Checkbox label="SMS" />\n      <Checkbox label="Push" />\n    </div>\n  </div>\n</div>',
+          details: "Place Checkbox alongside RadioGroup controls to verify that indicator sizes, label baselines, and spacing align consistently in both horizontal and vertical layouts."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/checkbox"
+    },
+    {
+      slug: "code-block",
+      name: "Code Block",
+      description: "Display syntax-highlighted code snippets",
+      importPath: "@plexui/ui/components/CodeBlock",
+      exports: [
+        "CodeBlock"
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<CodeBlock language="javascript">{codeSnippet}</CodeBlock>'
+        },
+        {
+          name: "Collapsible",
+          code: '<CollapsibleCodeBlock language="tsx">{code}</CollapsibleCodeBlock>',
+          details: "Use CollapsibleCodeBlock to display code in a compact view with gradient overlay and an expand action."
+        },
+        {
+          name: "Collapsible \u2014 expanded by default",
+          code: '<CollapsibleCodeBlock language="tsx" defaultExpanded>{code}</CollapsibleCodeBlock>'
+        },
+        {
+          name: "Collapsible \u2014 custom height",
+          code: '<CollapsibleCodeBlock language="tsx" collapsedHeight={60}>{code}</CollapsibleCodeBlock>'
+        },
+        {
+          name: "Collapsible \u2014 max expanded height",
+          code: '<CollapsibleCodeBlock language="tsx" defaultExpanded maxExpandedHeight={200}>{code}</CollapsibleCodeBlock>'
+        },
+        {
+          name: "Collapsible \u2014 without copy button",
+          code: '<CollapsibleCodeBlock language="tsx" defaultExpanded copyable={false}>{code}</CollapsibleCodeBlock>'
+        },
+        {
+          name: "Supported languages",
+          code: '<CodeBlock language="javascript">{code}</CodeBlock>',
+          details: "A pragmatic set of Prism grammars are pre-registered out of the box."
+        }
+      ],
+      subComponents: [
+        {
+          name: "CodeBlock",
+          props: [
+            {
+              name: "children",
+              type: "string",
+              description: "Code content"
+            },
+            {
+              name: "language",
+              type: "string",
+              description: "Prism language name"
+            },
+            {
+              name: "className",
+              type: "string",
+              description: "Additional wrapper class"
+            }
+          ]
+        },
+        {
+          name: "CollapsibleCodeBlock",
+          props: [
+            {
+              name: "children",
+              type: "string",
+              description: "Code content"
+            },
+            {
+              name: "language",
+              type: "string",
+              description: "Prism language name"
+            },
+            {
+              name: "defaultExpanded",
+              type: "boolean",
+              default: "false",
+              description: "Start expanded"
+            },
+            {
+              name: "collapsedHeight",
+              type: "number",
+              default: "80",
+              description: "Height when collapsed (px)"
+            },
+            {
+              name: "maxExpandedHeight",
+              type: "number",
+              description: "Max height when expanded (px)"
+            },
+            {
+              name: "copyable",
+              type: "boolean",
+              default: "true",
+              description: "Show copy button"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/code-block"
+    },
+    {
+      slug: "copy-tooltip",
+      name: "Copy Tooltip",
+      description: "Allow users to easily copy to clipboard",
+      importPath: "@plexui/ui/components/Tooltip",
+      exports: [
+        "CopyTooltip"
+      ],
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Trigger element (for example Tooltip.TriggerDecorator)"
+        },
+        {
+          name: "copyValue",
+          type: "string",
+          default: '"Very cool content to copy"',
+          description: "Content to copy to clipboard"
+        },
+        {
+          name: "openDelay",
+          type: "number",
+          default: "150",
+          description: "Tooltip open delay in milliseconds"
+        },
+        {
+          name: "align",
+          type: '"start" | "center" | "end"',
+          default: '"center"',
+          description: "Preferred tooltip alignment against the trigger"
+        },
+        {
+          name: "alignOffset",
+          type: "number",
+          default: "0",
+          description: "Offset from start/end alignment in pixels"
+        },
+        {
+          name: "side",
+          type: '"top" | "right" | "bottom" | "left"',
+          default: '"top"',
+          description: "Preferred side of the trigger"
+        },
+        {
+          name: "sideOffset",
+          type: "number",
+          default: "5",
+          description: "Distance from trigger in pixels"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<CopyTooltip copyValue="Very cool content to copy">\n  <Tooltip.TriggerDecorator>sess_12345abcdefg</Tooltip.TriggerDecorator>\n</CopyTooltip>'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/copy-tooltip"
+    },
+    {
+      slug: "date-picker",
+      name: "Date Picker",
+      description: "Select a single date with an interactive calendar",
+      importPath: "@plexui/ui/components/DatePicker",
+      exports: [
+        "DatePicker"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "DateTime | null",
+          description: "Selected date (luxon)"
+        },
+        {
+          name: "onChange",
+          type: "(date: DateTime | null) => void",
+          description: "Called when date changes"
+        },
+        {
+          name: "min",
+          type: "DateTime",
+          description: "Minimum selectable date"
+        },
+        {
+          name: "max",
+          type: "DateTime",
+          description: "Maximum selectable date"
+        },
+        {
+          name: "captionLayout",
+          type: '"buttons" | "dropdown"',
+          default: '"buttons"',
+          description: "Calendar header mode. Use dropdown for date of birth"
+        },
+        {
+          name: "showTime",
+          type: "boolean",
+          default: "false",
+          description: "Show time input below calendar"
+        },
+        {
+          name: "yearRange",
+          type: "[number, number]",
+          description: "Min/max years for dropdown caption"
+        },
+        {
+          name: "size",
+          type: "string",
+          description: "Trigger size"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          description: "Rounded trigger"
+        },
+        {
+          name: "clearable",
+          type: "boolean",
+          description: "Show clear button"
+        },
+        {
+          name: "triggerShowIcon",
+          type: "boolean",
+          default: "true",
+          description: "Show calendar icon"
+        },
+        {
+          name: "triggerDateFormat",
+          type: "string",
+          default: '"MM/dd/yy"',
+          description: "Date format in trigger. Auto-includes time when showTime is enabled"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Trigger placeholder"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "Disable picker"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: "const [selectedDate, setSelectedDate] = useState<DateTime | null>(null)\n<DatePicker value={selectedDate} onChange={setSelectedDate} clearable pill />"
+        },
+        {
+          name: "Limits",
+          code: "const minDate = today.minus({ days: 30 }).startOf('day')\nconst maxDate = today.plus({ days: 30 }).endOf('day')\n<DatePicker value={...} onChange={...} min={minDate} max={maxDate} />",
+          details: "Use min and max to limit selectable dates to a specific timeframe."
+        },
+        {
+          name: "Date of birth",
+          code: '<DatePicker\n  captionLayout="dropdown"\n  triggerDateFormat="MMMM d, yyyy"\n  max={DateTime.local()}\n  placeholder="Select your birthday"\n  clearable pill\n/>',
+          details: 'Set captionLayout="dropdown" to add month and year dropdowns inline with the arrow navigation. Ideal for selecting a date of birth where navigating month-by-month would be impractical.'
+        },
+        {
+          name: "Time picker",
+          code: '<DatePicker\n  showTime\n  triggerDateFormat="MM/dd/yy HH:mm"\n  placeholder="Select date & time"\n  clearable pill\n/>',
+          details: "Enable showTime to add hour and minute inputs below the calendar. The popover stays open after selecting a date so the user can adjust the time. Use arrow keys to increment or decrement values."
+        },
+        {
+          name: "Dropdown + time",
+          code: '<DatePicker\n  captionLayout="dropdown"\n  showTime\n  yearRange={[2020, 2030]}\n  triggerDateFormat="MMM d, yyyy HH:mm"\n  placeholder="Schedule event"\n  clearable pill\n/>',
+          details: 'Combine captionLayout="dropdown" with showTime for quick month/year jumps and time selection in a single picker \u2014 useful for scheduling events at a specific date and time.'
+        },
+        {
+          name: "Two fields",
+          code: `<div style={{ display: 'flex', gap: '12px' }}>
+  <div>
+    <label>Date</label>
+    <DatePicker value={...} onChange={...} />
+  </div>
+  <div>
+    <label>Time</label>
+    <Input type="time" value={...} onChange={...} />
+  </div>
+</div>`,
+          details: 'Compose DatePicker and Input type="time" side by side for maximum flexibility in form layouts. Each field operates independently while sharing the same DateTime value.'
+        },
+        {
+          name: "Date input",
+          code: "<MaskedDateInput value={date} onChange={setDate} />",
+          details: "A masked input for typing a date directly. Auto-formats as MM / DD / YYYY with segment highlighting and separator auto-advance."
+        },
+        {
+          name: "DateTime input",
+          code: "<MaskedDateTimeInput value={dateTime} onChange={setDateTime} />",
+          details: "Extended masked input for date and time. Format: MM / DD / YYYY HH : MM. Same auto-formatting behavior with time segments appended."
+        },
+        {
+          name: "Without Icon",
+          code: '<DatePicker triggerShowIcon={false} placeholder="Choose a date" ... />',
+          details: "Remove the calendar icon from the trigger by setting triggerShowIcon to false."
+        },
+        {
+          name: "Disabled",
+          code: "<DatePicker disabled value={...} onChange={...} />",
+          details: "Disable the picker to prevent user interaction."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/date-picker"
+    },
+    {
+      slug: "date-range-picker",
+      name: "Date Range Picker",
+      description: "Select a date range with an interactive calendar",
+      importPath: "@plexui/ui/components/DateRangePicker",
+      exports: [
+        "DateRangePicker"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "DateRange | null",
+          description: "Selected range ([start, end], inclusive)"
+        },
+        {
+          name: "onChange",
+          type: "(next: DateRange | null, shortcut?: DateRangeShortcut) => void",
+          description: "Called when range changes"
+        },
+        {
+          name: "min",
+          type: "DateTime",
+          description: "Earliest selectable date"
+        },
+        {
+          name: "max",
+          type: "DateTime",
+          description: "Latest selectable date"
+        },
+        {
+          name: "maxRangeDays",
+          type: "number",
+          description: "Max length of range in days (inclusive)"
+        },
+        {
+          name: "shortcuts",
+          type: "DateRangeShortcut[]",
+          description: "Quick selection shortcuts"
+        },
+        {
+          name: "side",
+          type: '"top" | "right" | "bottom" | "left"',
+          default: '"bottom"',
+          description: "Preferred side for popover"
+        },
+        {
+          name: "sideOffset",
+          type: "number",
+          default: "8",
+          description: "Distance from trigger in pixels"
+        },
+        {
+          name: "align",
+          type: '"start" | "center" | "end"',
+          default: '"center"',
+          description: "Preferred popover alignment"
+        },
+        {
+          name: "alignOffset",
+          type: "number",
+          default: "0",
+          description: "Offset from start/end alignment in pixels"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable picker interactions"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          default: '"Select date range..."',
+          description: "Placeholder in trigger when value is empty"
+        },
+        {
+          name: "variant",
+          type: '"soft" | "outline" | "ghost"',
+          default: '"outline"',
+          description: "Trigger style variant"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "true",
+          description: "Rounded trigger shape"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Trigger size scale"
+        },
+        {
+          name: "dropdownIconType",
+          type: '"chevronDown" | "dropdown" | "none"',
+          default: '"dropdown"',
+          description: "Icon shown at trigger end"
+        },
+        {
+          name: "triggerClassName",
+          type: "string",
+          description: "Custom class for trigger"
+        },
+        {
+          name: "triggerShowIcon",
+          type: "boolean",
+          default: "true",
+          description: "Show calendar icon at trigger start"
+        },
+        {
+          name: "triggerStepperUnit",
+          type: '"month"',
+          description: "Enable month stepper mode in trigger"
+        },
+        {
+          name: "triggerDateFormat",
+          type: "string",
+          default: '"MM/dd/yy"',
+          description: "Date formatting in trigger text"
+        },
+        {
+          name: "clearable",
+          type: "boolean",
+          default: "false",
+          description: "Show clear button in trigger"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          description: "Stretch trigger to full available width"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: "const [value, setValue] = useState<DateRange | null>(null)\n<DateRangePicker value={value} onChange={setValue} shortcuts={shortcuts} clearable pill />"
+        },
+        {
+          name: "Limits",
+          code: "<DateRangePicker value={...} onChange={...} min={minDate} max={maxDate} />",
+          details: "Use min and max to limit the selectable range. Use maxRangeDays to limit the range length."
+        },
+        {
+          name: "Shortcuts",
+          code: "<DateRangePicker shortcuts={dayShortcuts} ... />",
+          details: "Use the shortcuts array to provide quick date range options. When a shortcut is selected, its label is shown in the trigger."
+        },
+        {
+          name: "Month stepper",
+          code: '<DateRangePicker\n  triggerStepperUnit="month"\n  value={value}\n  onChange={setValue}\n  clearable\n  pill\n  max={maxDate}\n/>',
+          details: 'Enable a stepper in the trigger with triggerStepperUnit="month". When the selected range matches the unit, the trigger shows the stepper.'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/date-range-picker"
+    },
+    {
+      slug: "dialog",
+      name: "Dialog",
+      description: "Modal dialog overlay for confirmations, forms, and alerts",
+      importPath: "@plexui/ui/components/Dialog",
+      exports: [
+        "Dialog"
+      ],
+      props: [
+        {
+          name: "open",
+          type: "boolean",
+          description: "Controlled open state"
+        },
+        {
+          name: "onOpenChange",
+          type: "(open: boolean) => void",
+          description: "Called when the dialog opens or closes"
+        },
+        {
+          name: "width",
+          type: "number | string",
+          default: "480",
+          description: "Panel width"
+        },
+        {
+          name: "showClose",
+          type: "boolean",
+          default: "true",
+          description: "Show close button in top-right corner"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS class on the panel"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Dialog>\n  <Dialog.Trigger>\n    <Button color="secondary" variant="outline">Open dialog</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Unsaved changes</Dialog.Title>\n    </Dialog.Header>\n    <p>You have unsaved changes that will be lost...</p>\n    <Dialog.Footer>\n      <Dialog.Close><Button color="primary" variant="soft">Cancel</Button></Dialog.Close>\n      <Button color="primary">Save changes</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>'
+        },
+        {
+          name: "Destructive confirmation",
+          code: '<Dialog>\n  <Dialog.Trigger>\n    <Button color="danger" variant="outline">Delete</Button>\n  </Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Delete assistant?</Dialog.Title>\n    </Dialog.Header>\n    <p>This change will affect all API integrations. It cannot be undone.</p>\n    <Dialog.Footer>\n      <Dialog.Close><Button color="secondary" variant="soft">Cancel</Button></Dialog.Close>\n      <Button color="danger">Delete</Button>\n    </Dialog.Footer>\n  </Dialog.Content>\n</Dialog>',
+          details: 'Use color="danger" on the action button for destructive operations.'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/dialog"
+    },
+    {
+      slug: "empty-message",
+      name: "Empty Message",
+      description: "Gracefully inform users when there's nothing to see",
+      importPath: "@plexui/ui/components/EmptyMessage",
+      exports: [
+        "EmptyMessage"
+      ],
+      props: [
+        {
+          name: "color",
+          type: "string",
+          description: "Semantic color (e.g. danger, warning)"
+        },
+        {
+          name: "size",
+          type: '"sm" | "md" | "lg"',
+          description: "Icon size"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional classes for the action row container"
+        }
+      ],
+      examples: [
+        {
+          name: "Composition",
+          code: `<EmptyMessage>
+  <EmptyMessage.Icon><Explore /></EmptyMessage.Icon>
+  <EmptyMessage.Title>Your evaluations will appear here</EmptyMessage.Title>
+  <EmptyMessage.Description>Create an evaluation to assess your model's responses</EmptyMessage.Description>
+  <EmptyMessage.ActionRow><Button color="primary">Create</Button></EmptyMessage.ActionRow>
+</EmptyMessage>`
+        },
+        {
+          name: "Error message",
+          code: '<EmptyMessage>\n  <EmptyMessage.Icon color="danger"><Mic /></EmptyMessage.Icon>\n  <EmptyMessage.Title color="danger">Enable microphone access...</EmptyMessage.Title>\n</EmptyMessage>',
+          details: "The color property enables you to display clearer intent with the message, such as showing an error state."
+        },
+        {
+          name: "Warning message",
+          code: '<EmptyMessage>\n  <EmptyMessage.Icon color="warning"><Sparkle /></EmptyMessage.Icon>\n  <EmptyMessage.Title>o1-preview is in beta</EmptyMessage.Title>\n  <EmptyMessage.Description>System instructions and model configuration are not available yet.</EmptyMessage.Description>\n  <EmptyMessage.ActionRow className="text-sm">\n    <TextLink href="/">Learn more<ArrowUpRight /></TextLink>\n  </EmptyMessage.ActionRow>\n</EmptyMessage>'
+        },
+        {
+          name: "No results",
+          code: '<EmptyMessage fill="none">\n  <EmptyMessage.Icon size="sm"><Search /></EmptyMessage.Icon>\n  <EmptyMessage.Description>No icons found matching "pizza"</EmptyMessage.Description>\n</EmptyMessage>',
+          details: "The components of EmptyMessage are both composable and optional. This example omits the EmptyMessage.Title component, using only an icon and description for a simpler message style."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/empty-message"
+    },
+    {
+      slug: "field",
+      name: "Field",
+      description: "Form field wrapper with label, description, error, and accessibility linking",
+      importPath: "@plexui/ui/components/Field",
+      exports: [
+        "Field"
+      ],
+      props: [
+        {
+          name: "label",
+          type: "ReactNode",
+          description: "Label text for the field"
+        },
+        {
+          name: "description",
+          type: "ReactNode",
+          description: "Helper text below the label; linked via aria-describedby"
+        },
+        {
+          name: "errorMessage",
+          type: "ReactNode",
+          description: "Error message below the control; auto-sets aria-invalid on child"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Controls the label font size to match the child control"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          default: "false",
+          description: "Shows a required asterisk after the label (visual only)"
+        },
+        {
+          name: "orientation",
+          type: '"vertical" | "horizontal"',
+          default: '"vertical"',
+          description: "Layout direction of label and control"
+        },
+        {
+          name: "opticallyAlign",
+          type: '"start" | "end"',
+          description: "Applies optical alignment to the child control via negative margin using its gutter"
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "Override the auto-generated id used for htmlFor/aria linking"
+        },
+        {
+          name: "children",
+          type: "ReactElement | (fieldProps) => ReactNode",
+          description: "Form control; receives id, aria-describedby, and aria-invalid"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Field label="Email">\n  <Input placeholder="Enter email..." />\n</Field>',
+          details: "Field wraps a form control with a label, optional description, and error message. It automatically generates htmlFor, aria-describedby, and aria-invalid linking between the label, description, error, and child control."
+        },
+        {
+          name: "With description",
+          code: `<Field label="Email" description="We'll never share your email with anyone else.">
+  <Input placeholder="Enter email..." />
+</Field>`,
+          details: "Use description to display helper text below the label. The description is automatically linked to the control via aria-describedby."
+        },
+        {
+          name: "With error message",
+          code: '<Field label="Email" errorMessage="Please enter a valid email address">\n  <Input placeholder="Enter email..." />\n</Field>',
+          details: 'Use errorMessage to display a validation error. When provided, the child control automatically receives aria-invalid="true". The error is rendered using the FieldError component with role="alert" for accessibility.'
+        },
+        {
+          name: "Required",
+          code: '<Field label="Email" required>\n  <Input placeholder="Enter email..." />\n</Field>',
+          details: "Use required to show a visual asterisk after the label. This is purely visual and does not add the required HTML attribute \u2014 pass required directly to the child control for form validation."
+        },
+        {
+          name: "Sizing",
+          code: '<Field label="Email" size="lg">\n  <Input placeholder="Enter email..." size="lg" />\n</Field>',
+          details: "Field accepts a size prop that scales the label and description font size to match the child control. Pass the same size to both Field and the child control."
+        },
+        {
+          name: "Horizontal layout",
+          code: '<div className="flex flex-col gap-4">\n  <Field label="First name" orientation="horizontal">\n    <Input placeholder="Jane" />\n  </Field>\n  <Field label="Last name" orientation="horizontal">\n    <Input placeholder="Doe" />\n  </Field>\n</div>',
+          details: 'Use orientation="horizontal" to render the label beside the control instead of above it.'
+        },
+        {
+          name: "Textarea",
+          code: '<Field label="Bio" description="Write a short bio for your profile.">\n  <Textarea placeholder="Tell us about yourself..." rows={3} />\n</Field>'
+        },
+        {
+          name: "Select",
+          code: '<Field label="Role" description="Select your primary role.">\n  {(fieldProps) => (\n    <Select\n      {...fieldProps}\n      placeholder="Select a role..."\n      options={[\n        { label: "Admin", value: "admin" },\n        { label: "Editor", value: "editor" },\n        { label: "Viewer", value: "viewer" },\n      ]}\n    />\n  )}\n</Field>',
+          details: "For components like Select that may not forward all props via cloneElement, use the render prop pattern to explicitly pass field props."
+        },
+        {
+          name: "Slider",
+          code: 'const [price, setPrice] = useState([200, 800])\n<Field label="Price Range" description={\\`Set your budget range ($\\${price[0]} \u2013 $\\${price[1]}).\\',
+          details: "Field works with any form control. Use the description to display the current slider value."
+        },
+        {
+          name: "Fieldset",
+          code: '<div>\n  <div className="mb-3">\n    <h3 className="text-base font-semibold">Address Information</h3>\n    <p className="text-sm text-secondary mt-1">We need your address to deliver your order.</p>\n  </div>\n  <div className="flex flex-col gap-4">\n    <Field label="Street Address">\n      <Input placeholder="123 Main St" />\n    </Field>\n    <div className="flex gap-3">\n      <Field label="City" className="flex-1">\n        <Input placeholder="New York" />\n      </Field>\n      <Field label="Postal Code" className="flex-1">\n        <Input placeholder="90502" />\n      </Field>\n    </div>\n  </div>\n</div>',
+          details: "Group related fields under a heading and description to create a logical fieldset."
+        },
+        {
+          name: "Checkbox",
+          code: `<Field label="Notifications" description="Choose which notifications you'd like to receive.">
+  {() => (
+    <div className="flex flex-col gap-3 mt-1">
+      <Checkbox label="Email notifications" />
+      <Checkbox label="Push notifications" />
+      <Checkbox label="SMS notifications" />
+    </div>
+  )}
+</Field>`,
+          details: "Wrap a group of checkboxes in a Field for a shared label and description."
+        },
+        {
+          name: "Radio",
+          code: '<Field label="Subscription plan" description="Select your preferred plan.">\n  {(fieldProps) => (\n    <RadioGroup aria-label="Subscription plan" value={plan} onChange={setPlan} direction="col">\n      <RadioGroup.Item value="free">Free</RadioGroup.Item>\n      <RadioGroup.Item value="pro">Pro \u2014 $9/mo</RadioGroup.Item>\n      <RadioGroup.Item value="enterprise">Enterprise \u2014 $29/mo</RadioGroup.Item>\n    </RadioGroup>\n  )}\n</Field>',
+          details: "Use Field with RadioGroup for labeled radio selections."
+        },
+        {
+          name: "Switch",
+          code: '<Field label="Marketing emails" orientation="horizontal">\n  {(fieldProps) => (\n    <Switch id={fieldProps.id} checked={enabled} onCheckedChange={setEnabled} />\n  )}\n</Field>',
+          details: 'Pair a Field with a Switch using orientation="horizontal" for inline toggle settings.'
+        },
+        {
+          name: "Field group",
+          code: `<div className="divide-y divide-alpha/15">
+  <div className="pb-6">
+    <Field label="Responses" description="Get notified when the assistant responds to requests that take time.">
+      {() => (
+        <div className="flex flex-col gap-3 mt-1">
+          <Checkbox label="Push notifications" defaultChecked />
+        </div>
+      )}
+    </Field>
+  </div>
+  <div className="py-6">
+    <Field label="Tasks" description="Get notified when tasks you've created have updates.">
+      {() => (
+        <div className="flex flex-col gap-3 mt-1">
+          <Checkbox label="Push notifications" />
+          <Checkbox label="Email notifications" />
+        </div>
+      )}
+    </Field>
+  </div>
+</div>`,
+          details: "Stack Field components with a divider to group related notification settings."
+        },
+        {
+          name: "Validation and Errors",
+          code: '<div className="flex flex-col gap-4">\n  <Field label="Name" required errorMessage={nameError}>\n    <Input placeholder="Enter your name" value={name} onChange={(evt) => setName(evt.target.value)} />\n  </Field>\n  <Field label="Email" required errorMessage={emailError}>\n    <Input placeholder="Enter your email" value={email} onChange={(evt) => setEmail(evt.target.value)} />\n  </Field>\n</div>',
+          details: "Combine required and errorMessage for client-side validation feedback. Toggle errors on and off to see the visual transition."
+        },
+        {
+          name: "Optical alignment",
+          code: `<div className="border border-dashed border-alpha/20 rounded-md py-6 px-8">
+  <div className="flex flex-col gap-5">
+    <Field label="Full name" opticallyAlign="start">
+      <Input placeholder="Jane Doe" pill />
+    </Field>
+    <Field label="Email" description="We'll never share your email." errorMessage="Please enter a valid email address." required opticallyAlign="start">
+      <Input placeholder="jane@example.com" pill />
+    </Field>
+  </div>
+  <Button className="mt-6" color="primary" variant="soft" pill>Submit</Button>
+</div>`,
+          details: 'Use opticallyAlign="start" to apply a negative margin on the child control, aligning its text with the surrounding content. Works with pill inputs. The label, description, and error message stay at the container edge while the control extends past it.'
+        },
+        {
+          name: "Form example",
+          code: 'const [pill, setPill] = useState(false);\n\n<fieldset className="flex flex-col gap-5">\n  <h3 className="text-base font-semibold">Payment Method</h3>\n  <Field label="Name on Card">\n    <Input placeholder="Evil Rabbit" pill={pill} />\n  </Field>\n  <Field label="Card Number">\n    <Input placeholder="1234 5678 9012 3456" pill={pill} />\n  </Field>\n  <div className="grid grid-cols-3 gap-3">\n    <Field label="Month">\n      {(fp) => <Select id={fp.id} placeholder="MM" pill={pill} options={months} />}\n    </Field>\n    <Field label="Year">\n      {(fp) => <Select id={fp.id} placeholder="YYYY" pill={pill} options={years} />}\n    </Field>\n    <Field label="CVV">\n      <Input placeholder="123" pill={pill} />\n    </Field>\n  </div>\n</fieldset>\n\n<Checkbox label="Same as shipping address" defaultChecked />\n\n<Field label="Comments">\n  <Textarea placeholder="Add any additional comments" rows={3} />\n</Field>\n\n<div className="flex gap-2">\n  <Button color="primary" pill={pill}>Submit</Button>\n  <Button color="secondary" variant="outline" pill={pill}>Cancel</Button>\n</div>',
+          details: "A payment form built with Field, showing two fieldsets, a 3-column grid row, and a pill toggle that applies rounded corners to all controls."
+        },
+        {
+          name: "Birthday segmented input",
+          code: '<Field label="Birthday">\n  <div className="flex items-center gap-2">\n    <Input value={month} placeholder="MM" maxLength={2} className="w-[56px]" />\n    <span>/</span>\n    <Input value={day} placeholder="DD" maxLength={2} className="w-[56px]" />\n    <span>/</span>\n    <Input value={year} placeholder="YYYY" maxLength={4} className="w-[80px]" />\n  </div>\n</Field>',
+          details: "Three compact Input controls composed as month/day/year with auto-advance behavior, wrapped in a Field for shared label and accessibility."
+        },
+        {
+          name: "Birthday with selects",
+          code: '<Field label="Birthday">\n  <div className="flex gap-2">\n    <Select placeholder="Month" options={monthOptions} />\n    <Select placeholder="Day" options={dayOptions} />\n    <Select placeholder="Year" options={yearOptions} />\n  </div>\n</Field>',
+          details: "Dropdown birthday picker with Month/Day/Year selects inside a labeled Field group."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/field"
+    },
+    {
+      slug: "floating-label-input",
+      name: "Float Input",
+      description: "Input with floating label that animates on focus",
+      importPath: "@plexui/ui/components/FloatingLabelInput",
+      exports: [
+        "FloatingLabelInput"
+      ],
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "Floating label text"
+        },
+        {
+          name: "errorMessage",
+          type: "string",
+          description: "Validation message below input; sets invalid state"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable input interactions"
+        },
+        {
+          name: "invalid",
+          type: "boolean",
+          default: "false",
+          description: "Invalid visual state"
+        },
+        {
+          name: "readOnly",
+          type: "boolean",
+          default: "false",
+          description: "Read-only input state"
+        },
+        {
+          name: "onClear",
+          type: "() => void",
+          description: "Shows a clear button when input has value"
+        },
+        {
+          name: "startAdornment",
+          type: "ReactNode",
+          description: "Content rendered before the input, inside the field. Visible when focused or has value."
+        },
+        {
+          name: "endAdornment",
+          type: "ReactNode",
+          description: "Content rendered after the input, before the clear button"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<FloatingLabelInput label="Email address" />'
+        },
+        {
+          name: "Filled state",
+          code: '<FloatingLabelInput label="Email address" defaultValue="jane.doe@example.com" />',
+          details: "When the input has a value, the label stays floated above the input."
+        },
+        {
+          name: "With error message",
+          code: '<FloatingLabelInput\n  label="Email address"\n  defaultValue="jane.doe@example"\n  invalid\n  errorMessage="Email is not valid."\n/>',
+          details: "Use the errorMessage prop to display a validation error below the input. When errorMessage is provided, the input automatically enters the invalid state."
+        },
+        {
+          name: "Clear button",
+          code: 'const [value, setValue] = useState("clearable@example.com")\n\n<FloatingLabelInput\n  label="Email address"\n  value={value}\n  onChange={(evt) => setValue(evt.target.value)}\n  onClear={() => setValue("")}\n/>',
+          details: "Use the onClear prop to display a built-in clear button. The button appears when the input has a value and is not disabled or read-only."
+        },
+        {
+          name: "Disabled",
+          code: '<FloatingLabelInput label="Email address" defaultValue="jane.doe@example.com" disabled />',
+          details: "Use the disabled prop to disable the input, greying it out and preventing user interactions."
+        },
+        {
+          name: "Read only",
+          code: '<FloatingLabelInput label="Email address" defaultValue="jane.doe@example.com" readOnly />',
+          details: "Use the readOnly prop to make the input read-only. The user can still select and copy the text."
+        },
+        {
+          name: "All states",
+          code: '<div className="flex flex-col items-center gap-8 py-8">\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Empty</div>\n    <FloatingLabelInput label="Email address" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Filled</div>\n    <FloatingLabelInput label="Email address" defaultValue="jane.doe@gmail.com" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Invalid</div>\n    <FloatingLabelInput invalid label="Email address" defaultValue="invalid@email" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Disabled</div>\n    <FloatingLabelInput disabled label="Email address" defaultValue="jane.doe@gmail.com" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Read only</div>\n    <FloatingLabelInput readOnly label="Email address" defaultValue="readonly@gmail.com" className="w-[320px]" />\n  </div>\n</div>',
+          details: "Overview of all input states."
+        },
+        {
+          name: "Password input",
+          code: '<FloatingLabelInput label="Password" type="password" />',
+          details: "The component works with different input types."
+        },
+        {
+          name: "Password with visibility toggle",
+          code: 'const [visible, setVisible] = useState(false)\n\n<FloatingLabelInput\n  label="Password"\n  type={visible ? "text" : "password"}\n  endAdornment={\n    <button onClick={() => setVisible(v => !v)} aria-label={visible ? "Hide" : "Show"}>\n      {visible ? <EyeOff /> : <Eye />}\n    </button>\n  }\n/>',
+          details: 'Use the endAdornment prop to render a visibility toggle button inside the input. Clicking the eye icon switches between type="password" and type="text".'
+        },
+        {
+          name: "SSN input",
+          code: `const [rawDigits, setRawDigits] = useState("")
+const [visible, setVisible] = useState(false)
+const formatted = formatSSN(rawDigits)
+
+<FloatingLabelInput
+  label="Social Security Number"
+  value={formatted}
+  inputMode="numeric"
+  maxLength={11}
+  onChange={(evt) => setRawDigits(extractDigits(evt.target.value))}
+  style={!visible && rawDigits ? { color: 'transparent', caretColor: 'var(--color-text)' } : undefined}
+  endAdornment={
+    <button onClick={() => setVisible(v => !v)}>
+      {visible ? <EyeOff /> : <Eye />}
+    </button>
+  }
+/>`,
+          details: "A Social Security Number input combining three techniques: an input mask that auto-inserts dashes (XXX-XX-XXXX) with highlighted segment, value masking that hides digits behind bullets (\u2022\u2022\u2022-\u2022\u2022-\u2022\u2022\u2022\u2022), and an endAdornment visibility toggle to reveal the real value."
+        },
+        {
+          name: "Birthday input",
+          code: 'const [birthday, setBirthday] = useState("")\n\n<FloatingLabelInput\n  label="Birthday"\n  value={birthday}\n  maxLength={14}\n  onChange={(evt) => setBirthday(formatBirthdayValue(evt.target.value))}\n/>',
+          details: "A date-of-birth input with inline formatting that inserts separators as you type (MM / DD / YYYY)."
+        },
+        {
+          name: "Birthday with validation",
+          code: '<FloatingLabelInput\n  label="Birthday"\n  defaultValue="02 / 30 / 2001"\n  invalid\n  errorMessage="Please enter a valid date."\n/>',
+          details: "Use invalid and errorMessage to display the OpenAI-style birthday validation state."
+        },
+        {
+          name: "Birthday states",
+          code: '<div className="flex flex-col items-center gap-8 py-8">\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Empty</div>\n    <FloatingLabelInput label="Birthday" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Filled</div>\n    <FloatingLabelInput label="Birthday" defaultValue="01 / 15 / 1995" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Invalid</div>\n    <FloatingLabelInput invalid label="Birthday" defaultValue="02 / 30 / 2001" className="w-[320px]" />\n  </div>\n  <div className="flex items-center">\n    <div className="text-right text-secondary text-sm mr-8 min-w-[5rem]">Disabled</div>\n    <FloatingLabelInput disabled label="Birthday" defaultValue="01 / 15 / 1995" className="w-[320px]" />\n  </div>\n</div>',
+          details: "Overview of birthday input states."
+        },
+        {
+          name: "Country select",
+          code: 'import { FloatingLabelSelect } from "@plexui/ui/components/FloatingLabelSelect"\nimport { Menu } from "@plexui/ui/components/Menu"\n\nconst [country, setCountry] = useState(null)\nconst selected = COUNTRIES.find((c) => c.value === country)\n\n<Menu>\n  <Menu.Trigger>\n    <FloatingLabelSelect\n      label="Country"\n      selected={!!selected}\n      onClearClick={() => setCountry(null)}\n    >\n      {selected?.flag} {selected?.label}\n    </FloatingLabelSelect>\n  </Menu.Trigger>\n  <Menu.Content>\n    <Menu.RadioGroup value={country} onChange={setCountry}>\n      {COUNTRIES.map((c) => (\n        <Menu.RadioItem key={c.value} value={c.value}>\n          {c.flag} {c.label}\n        </Menu.RadioItem>\n      ))}\n    </Menu.RadioGroup>\n  </Menu.Content>\n</Menu>',
+          details: "Use FloatingLabelSelect alongside FloatingLabelInput for consistent form styling. The select trigger shares the same floating-label visual shell \u2014 the label floats up when a value is selected."
+        },
+        {
+          name: "Phone input",
+          code: '<Select trigger={countryTrigger} ... />\n<FloatingLabelInput\n  label="Phone number"\n  type="tel"\n  startAdornment={<span className="text-tertiary">+34</span>}\n/>',
+          details: "A country code selector paired with a FloatingLabelInput that uses startAdornment to show the dial code as a non-editable prefix. The prefix appears when the field is focused or has a value."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/floating-label-input"
+    },
+    {
+      slug: "indicators",
+      name: "Indicators",
+      description: "Display loading and progress states to users",
+      importPath: "@plexui/ui/components/Indicator",
+      exports: [
+        "LoadingIndicator",
+        "CircularProgress",
+        "LoadingDots"
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex items-center gap-6">\n  <LoadingIndicator size={20} />\n  <CircularProgress size={24} />\n  <LoadingDots />\n</div>'
+        },
+        {
+          name: "LoadingIndicator",
+          code: "<LoadingIndicator />",
+          details: "Simple spinning indicator for general loading states."
+        },
+        {
+          name: "Sizing & stroke",
+          code: "<LoadingIndicator size={30} strokeWidth={2} />",
+          details: "By default, the indicator adapts to the surrounding font-size and color of text. You can control the size of the LoadingIndicator using the --indicator-size CSS custom property."
+        },
+        {
+          name: "Color",
+          code: '<div className="flex items-center gap-2 text-danger">\n  <LoadingIndicator size={16} /> <span>Destroying forever...</span>\n</div>',
+          details: "The indicator defaults to currentcolor, inheriting the surrounding text color. This can also be customized by altering the --indicator-color variable around the DOM scope of the component."
+        },
+        {
+          name: "Duration",
+          code: "<div style={{ '--indicator-rotate-duration': '3s' } as React.CSSProperties}>\n  <LoadingIndicator />\n</div>",
+          details: "You can control the rotation speed of the spinner with --indicator-rotate-duration."
+        },
+        {
+          name: "CircularProgress",
+          code: "<CircularProgress />",
+          details: "Circular progress ring with simulated progress animation."
+        },
+        {
+          name: "Progress",
+          code: "<CircularProgress progress={25} />",
+          details: "Use progress to show static progress and prevent the animation."
+        },
+        {
+          name: "Sizing & stroke",
+          code: "<CircularProgress size={30} strokeWidth={2} />",
+          details: "Use size and strokeWidth. Or use --circular-progress-size and --circular-progress-stroke CSS variables."
+        },
+        {
+          name: "Color",
+          code: '<CircularProgress trackColor="var(--alpha-15)" trackActiveColor="var(--gray-1000)" />',
+          details: "Customize the color of the indicator with the --circular-progress-track-color and --circular-progress-track-active-color variables."
+        },
+        {
+          name: "LoadingDots",
+          code: "<LoadingDots />",
+          details: "Indicate typing progress with staggered pulsing dot animation."
+        },
+        {
+          name: "Color",
+          code: '<div className="text-danger">\n  <LoadingDots />\n</div>',
+          details: "The indicator defaults to currentcolor, inheriting the surrounding text color. You can customize the color by providing a different color value or context."
+        }
+      ],
+      subComponents: [
+        {
+          name: "LoadingIndicator",
+          props: [
+            {
+              name: "size",
+              type: "number",
+              description: "Size in px (or use --indicator-size CSS variable)"
+            },
+            {
+              name: "strokeWidth",
+              type: "number",
+              description: "Stroke width"
+            }
+          ]
+        },
+        {
+          name: "CircularProgress",
+          props: [
+            {
+              name: "progress",
+              type: "number",
+              description: "Static progress 0\u2013100 (disables animation)"
+            },
+            {
+              name: "size",
+              type: "number",
+              description: "Diameter in px"
+            },
+            {
+              name: "strokeWidth",
+              type: "number",
+              description: "Stroke thickness"
+            },
+            {
+              name: "done",
+              type: "boolean",
+              description: "Completion state for animation"
+            },
+            {
+              name: "trackColor",
+              type: "string",
+              description: "Track color (CSS variable or value)"
+            },
+            {
+              name: "trackActiveColor",
+              type: "string",
+              description: "Active segment color"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/indicators"
+    },
+    {
+      slug: "input",
+      name: "Input",
+      description: "Semantic input text collection",
+      importPath: "@plexui/ui/components/Input",
+      exports: [
+        "Input"
+      ],
+      props: [
+        {
+          name: "variant",
+          type: '"outline" | "soft"',
+          default: '"outline"',
+          description: "Visual style of the input"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Controls the size of the input"
+        },
+        {
+          name: "gutterSize",
+          type: "string",
+          description: "Controls gutter on the edges; defaults to value from size"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disables the input visually and from interactions"
+        },
+        {
+          name: "invalid",
+          type: "boolean",
+          default: "false",
+          description: "Mark the input as invalid"
+        },
+        {
+          name: "allowAutofillExtensions",
+          type: "boolean",
+          default: "false",
+          description: "Allow autofill extensions to appear in the input"
+        },
+        {
+          name: "autoSelect",
+          type: "boolean",
+          default: "false",
+          description: "Select all contents of the input when mounted"
+        },
+        {
+          name: "startAdornment",
+          type: "ReactNode",
+          description: "Content rendered at the start of the input"
+        },
+        {
+          name: "endAdornment",
+          type: "ReactNode",
+          description: "Content rendered at the end of the input"
+        },
+        {
+          name: "onClear",
+          type: "() => void",
+          description: "When provided, displays a clear button that appears when the input has a value"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "false",
+          description: "Fully rounded pill shape"
+        },
+        {
+          name: "opticallyAlign",
+          type: '"start" | "end"',
+          description: "Applies a negative margin using the current gutter to optically align with surrounding content"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Input placeholder="Enter text..." />'
+        },
+        {
+          name: "Variants",
+          code: '<div className="flex flex-col gap-2 w-[320px]">\n  <Input placeholder="Enter text..." variant="outline" />\n  <Input placeholder="Enter text..." variant="soft" />\n</div>',
+          details: "Use variant to stylize the input."
+        },
+        {
+          name: "Sizing & roundness",
+          code: '<div className="flex flex-col gap-2.5 justify-start items-start w-[320px]">\n  <Input placeholder="Enter text..." size="lg" />\n  <Input placeholder="Search..." startAdornment={<Search className="fill-tertiary" />} size="lg" />\n  <Input value={username} placeholder="Username" onChange={(evt) => setUsername(evt.target.value)} maxLength={16} endAdornment={<span className="mt-[1.5px] tabular-nums text-tertiary text-[.875em]">{username.length}/16</span>} />\n</div>',
+          details: "Sizing of the input is controlled with size and gutterSize props. size sets the input to a specific control height, and gutterSize sets the horizontal padding. Each size provides default values for gutterSize, as well as font-size. Each of these values can be overridden independently."
+        },
+        {
+          name: "Start adornment",
+          code: '<Input\n  placeholder="Start adornment"\n  startAdornment={<Search className="fill-tertiary" />}\n/>',
+          details: "You can add arbitrary content to the beginning of an input with startAdornment &ndash; like a search icon. Ideally, the spacing will look pretty good by default. If you need to customize the spacing: gutterSize determines the amount of spacing on the edges of the container, which you can fine-tune as needed (if you need precise spacing not supported by gutterSize, use negative left margin on your adornment directly, e.g. -ml-2). The spacing between the adornment and the input is controlled with gap on the container, which you can customize as needed with Tailwind classes."
+        },
+        {
+          name: "Clear button",
+          code: '<Input\n  placeholder="Enter text..."\n  value={value}\n  onChange={(evt) => setValue(evt.target.value)}\n  onClear={() => setValue("")}\n  pill\n/>',
+          details: "Use the onClear prop to display a built-in clear button. The button appears when the input has a value and is not disabled or read-only."
+        },
+        {
+          name: "End adornment",
+          code: '<Input\n  placeholder="Username"\n  value={username}\n  onChange={(evt) => setUsername(evt.target.value)}\n  maxLength={16}\n  endAdornment={\n    <span className="mt-[1.5px] tabular-nums text-tertiary text-[.875em]">\n      {username.length}/16\n    </span>\n  }\n/>',
+          details: "You can add arbitrary content to the end of an input with endAdornment &ndash; like a character counter or custom icon. The same spacing guidance from startAdornment applies here."
+        },
+        {
+          name: "Password with visibility toggle",
+          code: `<Input
+  placeholder="Password"
+  type={visible ? 'text' : 'password'}
+  endAdornment={<VisibilityToggle visible={visible} onToggle={toggle} />}
+/>`,
+          details: 'Combine endAdornment with a toggle button to switch between type="password" and type="text". Works across all sizes, variants, and with pill.'
+        },
+        {
+          name: "SSN input",
+          code: `<Input
+  placeholder="Social Security Number"
+  value={formatted}
+  inputMode="numeric"
+  endAdornment={<VisibilityToggle visible={visible} onToggle={toggle} />}
+  style={!visible && rawDigits ? { color: 'transparent', caretColor: 'var(--color-text)' } : undefined}
+/>`,
+          details: "A masked SSN field that formats input as XXX-XX-XXXX, hides digits behind bullets when masked, and reveals the value via a visibility toggle in endAdornment. An inline mask suffix highlights the next expected segment. Adapts to all sizes automatically."
+        },
+        {
+          name: "Birthday input",
+          code: '<Input\n  placeholder="Birthday (MM / DD / YYYY)"\n  value={birthday}\n  inputMode="numeric"\n  maxLength={14}\n/>',
+          details: "A date-of-birth input with inline formatting that inserts separators as you type (MM / DD / YYYY). An inline mask suffix highlights the next expected segment. Works across all sizes, variants, and with pill."
+        },
+        {
+          name: "Birthday with validation",
+          code: '<Input\n  placeholder="Birthday (MM / DD / YYYY)"\n  value={birthday}\n  inputMode="numeric"\n  invalid={!!errorMessage}\n/>',
+          details: "Use invalid and FieldError to display a validation state when the entered date is not valid."
+        },
+        {
+          name: "Disabled",
+          code: '<Input disabled defaultValue="Jane Doe" />',
+          details: "Use the disabled prop to disable the input, greying it out and preventing user interactions."
+        },
+        {
+          name: "Invalid",
+          code: '<Input invalid placeholder="Invalid input" />',
+          details: "Use the invalid prop to mark the input as invalid. You decide how this state is removed, whether that's through onFocus, onChange, an onSubmit handler, etc. Default visual styles will be applied, based on the variant. Additionally, [data-invalid] is applied to the container for custom styling."
+        },
+        {
+          name: "Auto select text",
+          code: '<Input autoSelect placeholder="Add text..." defaultValue="Toggle to auto select" />',
+          details: "Pass autoSelect to select all text in the input &ndash; useful when pairing with other copy actions. This prop behaves like an imperative action when toggled and allows selection to change."
+        },
+        {
+          name: "Autofill extensions",
+          code: '<Input allowAutofillExtensions name="email" placeholder="Allowed" />',
+          details: 'By default, autofill extensions are prevented by Input. For the occasions where you want browser extensions to be present, pass allowAutofillExtensions to remove the disabling. When name is passed, or type is set to "password", this value will default to true.'
+        },
+        {
+          name: "With button",
+          code: '<div className="flex gap-2">\n  <Input placeholder="jane.doe@gmail.com" size="lg" variant="outline" />\n  <Button color="primary" size="lg" variant="outline" pill={false}>Subscribe</Button>\n</div>',
+          details: "You can pair Input and Button components together by using the same size value."
+        },
+        {
+          name: "Optical alignment",
+          code: `<Field label="Full name" opticallyAlign="start">
+  <Input placeholder="Jane Doe" pill />
+</Field>
+<Field
+  label="Email"
+  description="We'll never share your email."
+  errorMessage="Please enter a valid email address."
+  required
+  opticallyAlign="start"
+>
+  <Input placeholder="jane@example.com" pill />
+</Field>
+<Button className="mt-6" color="primary" variant="soft" pill>
+  Submit
+</Button>`
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/input"
+    },
+    {
+      slug: "markdown",
+      name: "Markdown",
+      description: "Render rich formatted content",
+      importPath: "@plexui/ui/components/Markdown",
+      exports: [
+        "Markdown"
+      ],
+      props: [
+        {
+          name: "children",
+          type: "string",
+          description: "Markdown source"
+        },
+        {
+          name: "includeMath",
+          type: "boolean",
+          default: "false",
+          description: "Enable LaTeX math rendering"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: "<Markdown>{markdownContent}</Markdown>",
+          details: "Use Markdown to render rich markdown text."
+        },
+        {
+          name: "Math",
+          code: "<Markdown includeMath>{markdownWithLatex}</Markdown>",
+          details: "Use includeMath to enable LaTeX rendering."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/markdown"
+    },
+    {
+      slug: "menu",
+      name: "Menu",
+      description: "Structured actions in a dropdown list",
+      importPath: "@plexui/ui/components/Menu",
+      exports: [
+        "Menu"
+      ],
+      props: [
+        {
+          name: "forceOpen",
+          type: "boolean",
+          description: "Keep menu open (controlled)"
+        },
+        {
+          name: "onOpen",
+          type: "() => void",
+          description: "Called when menu opens"
+        },
+        {
+          name: "onClose",
+          type: "() => void",
+          description: "Called when menu closes"
+        },
+        {
+          name: "modal",
+          type: "boolean",
+          description: "Whether menu is modal (focus trap)"
+        },
+        {
+          name: "width",
+          type: "number | string",
+          description: "Panel width (px or CSS value)"
+        },
+        {
+          name: "minWidth",
+          type: "number | string",
+          default: "auto",
+          description: "Minimum panel width"
+        },
+        {
+          name: "side",
+          type: '"top" | "right" | "bottom" | "left"',
+          description: "Preferred placement"
+        },
+        {
+          name: "align",
+          type: '"start" | "center" | "end"',
+          description: "Alignment relative to trigger"
+        },
+        {
+          name: "onSelect",
+          type: "(event: Event) => void",
+          description: "Called when item is selected"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "Disable the item"
+        },
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Checked state"
+        },
+        {
+          name: "onCheckedChange",
+          type: "(checked: boolean) => void",
+          description: "When checkbox toggles"
+        },
+        {
+          name: "indicatorPosition",
+          type: '"start" | "end"',
+          description: "Checkbox position"
+        },
+        {
+          name: "indicatorVariant",
+          type: "string",
+          description: "Badge/indicator style (e.g. solid)"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Menu>\n  <Menu.Trigger>\n    <Button color="primary" size="lg" variant="ghost">Sample menu <ChevronDownMd /></Button>\n  </Menu.Trigger>\n  <Menu.Content width={210} minWidth={210}>\n    <Menu.Item>\n      <p className="font-semibold">Sam Smith</p>\n      <p className="text-secondary">sam.smith@gmail.com</p>\n    </Menu.Item>\n    <Menu.Separator />\n    <Menu.Link href="/settings">Your profile</Menu.Link>\n    <Menu.Link href="#">Terms & policies</Menu.Link>\n    <Menu.Item disabled onSelect={() => {}}>Feature flags</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item onSelect={() => {}}>Logout</Menu.Item>\n  </Menu.Content>\n</Menu>'
+        },
+        {
+          name: "Natural sizing",
+          code: '<Menu>\n  <Menu.Trigger>\n    <Button color="primary" size="lg" variant="ghost" className="font-semibold gap-1.5"><Tools /> Tools</Button>\n  </Menu.Trigger>\n  <Menu.Content minWidth="auto">\n    <Menu.Item onSelect={() => {}}><Functions height={18} width={18} /> Function</Menu.Item>\n    <Menu.Item onSelect={() => {}}><Search height={18} width={18} /> File Search</Menu.Item>\n    <Menu.Item onSelect={() => {}}><Globe height={18} width={18} /> Web Search</Menu.Item>\n    <Menu.Item onSelect={() => {}}><Code height={18} width={18} /> Code Interpreter</Menu.Item>\n    <Menu.Item onSelect={() => {}}><ImageSquare height={18} width={18} /> Image Generation</Menu.Item>\n  </Menu.Content>\n</Menu>',
+          details: `Menu supports several sizing strategies:Natural sizing &ndash; use minWidth="auto" to have the menu fit naturally to the size of the content.Fixed size &ndash; use width and minWidth to set the menu to a fixed size, regardless of content size.Flexible sizing &ndash; minWidth can be used by itself to describe a menu that must be a given size, but can grow larger depending on its content.Max sizing &ndash; apply max-width to the children of Menu.Content. maxWidth isn't exposed as a prop because it's reserved for Radix variables used in collision detection.`
+        },
+        {
+          name: "Grouped items",
+          code: '<Menu>\n  <Menu.Trigger>\n    <Button color="primary" size="lg" variant="ghost" className="font-semibold gap-1.5"><FileDocument /> Templates <ChevronDownMd /></Button>\n  </Menu.Trigger>\n  <Menu.Content minWidth={220}>\n    <Menu.Group>\n      <Menu.Label>Active</Menu.Label>\n      <Menu.Link href="#">Welcome email</Menu.Link>\n      <Menu.Link href="#">Order confirmation</Menu.Link>\n      <Menu.Link href="#">Password reset</Menu.Link>\n    </Menu.Group>\n    <Menu.Separator />\n    <Menu.Group>\n      <Menu.Label>Draft</Menu.Label>\n      <Menu.Link href="#">New promo campaign</Menu.Link>\n      <Menu.Link href="#">Account deactivation</Menu.Link>\n    </Menu.Group>\n  </Menu.Content>\n</Menu>',
+          details: "Use Menu.Group and Menu.Label to organize related items into labeled sections."
+        },
+        {
+          name: "Submenus",
+          code: '<Menu>\n  <Menu.Trigger>\n    <Button color="primary" size="lg" variant="ghost">Options <ChevronDownMd /></Button>\n  </Menu.Trigger>\n  <Menu.Content minWidth={180}>\n    <Menu.Item onSelect={() => {}}>Edit</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>\n    <Menu.Separator />\n    <Menu.Sub>\n      <Menu.SubTrigger>More</Menu.SubTrigger>\n      <Menu.SubContent>\n        <Menu.Item onSelect={() => {}}>Move to project\u2026</Menu.Item>\n        <Menu.Item onSelect={() => {}}>Move to folder\u2026</Menu.Item>\n        <Menu.Separator />\n        <Menu.Item onSelect={() => {}}>Advanced options\u2026</Menu.Item>\n      </Menu.SubContent>\n    </Menu.Sub>\n    <Menu.Separator />\n    <Menu.Item onSelect={() => {}}>Share</Menu.Item>\n    <Menu.Item onSelect={() => {}}>Add to favorites</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item onSelect={() => {}}>Delete</Menu.Item>\n  </Menu.Content>\n</Menu>',
+          details: "Use Menu.Sub, Menu.SubTrigger, and Menu.SubContent for nested menus."
+        },
+        {
+          name: "Checkbox items",
+          code: 'const [settings, setSettings] = useState({\n  showGrid: true,\n  showLabels: false,\n  enableShadows: false,\n})\n\nreturn (\n  <Menu>\n    <Menu.Trigger>\n      <Button variant="ghost" color="primary">\n        Checkbox menu <ChevronDownMd />\n      </Button>\n    </Menu.Trigger>\n    <Menu.Content minWidth={200}>\n      <Menu.CheckboxItem\n        checked={settings.showGrid}\n        onCheckedChange={(checked) => setSettings((s) => ({ ...s, showGrid: checked }))}\n        onSelect={(evt) => evt.preventDefault()}\n        indicatorPosition="end"\n        indicatorVariant="solid"\n      >\n        Show grid lines\n      </Menu.CheckboxItem>\n      <Menu.CheckboxItem\n        checked={settings.showLabels}\n        onCheckedChange={(checked) => setSettings((s) => ({ ...s, showLabels: checked }))}\n        onSelect={(evt) => evt.preventDefault()}\n        indicatorPosition="end"\n        indicatorVariant="solid"\n      >\n        Display labels\n      </Menu.CheckboxItem>\n      <Menu.CheckboxItem\n        checked={settings.enableShadows}\n        onCheckedChange={(checked) => setSettings((s) => ({ ...s, enableShadows: checked }))}\n        onSelect={(evt) => evt.preventDefault()}\n        indicatorPosition="end"\n        indicatorVariant="solid"\n      >\n        Enable shadows\n      </Menu.CheckboxItem>\n    </Menu.Content>\n  </Menu>\n)',
+          details: 'Use Menu.CheckboxItem with checked, onCheckedChange, and {"onSelect={(evt) => evt.preventDefault()}"} to keep the menu open.'
+        },
+        {
+          name: "Radio items",
+          code: 'const [value, setValue] = useState("any")\n\n<Menu>\n  <Menu.Trigger>\n    <Button color="primary" variant="ghost">\n      Radio menu <ChevronDownMd />\n    </Button>\n  </Menu.Trigger>\n  <Menu.Content align="start" minWidth="auto" width="auto">\n    <Menu.RadioGroup\n      indicatorPosition="end"\n      value={value}\n      onChange={setValue}\n    >\n      <Menu.RadioItem value="any">Any time</Menu.RadioItem>\n      <Menu.RadioItem value="today" disabled>Today</Menu.RadioItem>\n      <Menu.RadioItem value="last7d">Last 7 days</Menu.RadioItem>\n      <Menu.RadioItem value="last30d">Last 30 days</Menu.RadioItem>\n      <Menu.RadioItem value="last3m">Last 3 months</Menu.RadioItem>\n    </Menu.RadioGroup>\n  </Menu.Content>\n</Menu>',
+          details: "Use Menu.RadioGroup and Menu.RadioItem for single-selection options."
+        },
+        {
+          name: "Item actions",
+          code: '<Menu>\n  <Menu.Trigger>\n    <Button color="primary" size="lg" variant="ghost" className="font-semibold gap-1.5"><History /> Conversations</Button>\n  </Menu.Trigger>\n  <Menu.Content width={270}>\n    <Menu.Item onSelect={() => {}}>\n      <span className="flex-1 truncate">Sample thread title</span>\n      <Menu.ItemActions>\n        <Menu.ItemAction onClick={() => {}}><Trash /></Menu.ItemAction>\n      </Menu.ItemActions>\n    </Menu.Item>\n    <Menu.Item onSelect={() => {}}>\n      <span className="flex-1 truncate">Another sample thread title</span>\n      <Menu.ItemActions>\n        <Menu.ItemAction onClick={() => {}}><Trash /></Menu.ItemAction>\n      </Menu.ItemActions>\n    </Menu.Item>\n    <Menu.Item onSelect={() => {}}>\n      <span className="flex-1 truncate">Long thread title that is going to be clipped off</span>\n      <Menu.ItemActions>\n        <Menu.ItemAction onClick={() => {}}><Trash /></Menu.ItemAction>\n      </Menu.ItemActions>\n    </Menu.Item>\n  </Menu.Content>\n</Menu>',
+          details: "Use Menu.ItemActions and Menu.ItemAction for hover actions (e.g. delete) on an item.Accessibility note: these actions are not keyboard accessible due to how Radix Menu works, so they should not be critical actions with no other parity."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/menu"
+    },
+    {
+      slug: "otp-input",
+      name: "OTP Input",
+      description: "Individual digit input cells for verification code entry",
+      importPath: "@plexui/ui/components/OTPInput",
+      exports: [
+        "OTPInput"
+      ],
+      props: [
+        {
+          name: "length",
+          type: "number",
+          default: "6",
+          description: "Number of digit cells"
+        },
+        {
+          name: "value",
+          type: "string",
+          description: "Controlled value"
+        },
+        {
+          name: "onChange",
+          type: "(value: string) => void",
+          description: "Called when value changes"
+        },
+        {
+          name: "onComplete",
+          type: "(value: string) => void",
+          description: "Called when all digits filled"
+        },
+        {
+          name: "grouping",
+          type: "number[]",
+          description: "Grouping pattern with extra gap (e.g. [3,3])"
+        },
+        {
+          name: "invalid",
+          type: "boolean",
+          default: "false",
+          description: "Invalid visual state"
+        },
+        {
+          name: "errorMessage",
+          type: "string",
+          description: "Error message below the input"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable all cells"
+        },
+        {
+          name: "autoFocus",
+          type: "boolean",
+          default: "false",
+          description: "Auto-focus first cell on mount"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: "<OTPInput />"
+        },
+        {
+          name: "Filled state",
+          code: '<OTPInput value="488030" onChange={setValue} />'
+        },
+        {
+          name: "Grouped (3+3)",
+          code: "<OTPInput grouping={[3, 3]} />"
+        },
+        {
+          name: "With error",
+          code: '<OTPInput invalid errorMessage="Invalid verification code." />'
+        },
+        {
+          name: "Disabled",
+          code: '<OTPInput value="488030" disabled />'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/otp-input"
+    },
+    {
+      slug: "popover",
+      name: "Popover",
+      description: "Generic floating UI utility for contextual actions",
+      importPath: "@plexui/ui/components/Popover",
+      exports: [
+        "Popover"
+      ],
+      props: [
+        {
+          name: "showOnHover",
+          type: "boolean",
+          description: "Open on hover and focus instead of click"
+        },
+        {
+          name: "width",
+          type: "number | string",
+          description: "Panel width (px or CSS value)"
+        },
+        {
+          name: "minWidth",
+          type: "number | string",
+          default: "300",
+          description: "Minimum panel width in px"
+        },
+        {
+          name: "maxWidth",
+          type: "number | string",
+          description: "Maximum panel width"
+        },
+        {
+          name: "side",
+          type: '"top" | "right" | "bottom" | "left"',
+          description: "Preferred placement"
+        },
+        {
+          name: "align",
+          type: '"start" | "center" | "end"',
+          description: "Alignment relative to trigger"
+        },
+        {
+          name: "sideOffset",
+          type: "number",
+          description: "Offset from trigger (px)"
+        },
+        {
+          name: "alignOffset",
+          type: "number",
+          description: "Alignment offset (px)"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Popover>\n  <Popover.Trigger><Button color="primary">Generate</Button></Popover.Trigger>\n  <Popover.Content side="right">...</Popover.Content>\n</Popover>'
+        },
+        {
+          name: "Sizing the popover",
+          code: '<Popover>\n  <Popover.Trigger>...</Popover.Trigger>\n  <Popover.Content minWidth="auto" side="top">...</Popover.Content>\n</Popover>',
+          details: "The popover can be sized with any combination of width, minWidth, or maxWidth. All popovers default to a minWidth of 300px, and a maxWidth of Radix's viewport detection."
+        },
+        {
+          name: "Open on hover",
+          code: "<Popover showOnHover>\n  <Popover.Trigger>...</Popover.Trigger>\n  <Popover.Content>...</Popover.Content>\n</Popover>",
+          details: "Use showOnHover to create popovers that appear on hover and focus events. This should be used sparingly and with clear intention.By default, hover popovers will not alter the focused element on the page, nor restore focus to the trigger on close. However, if interactive content is present in the popover, and tab is used to navigate into the popover, focus will be restored to the trigger on close."
+        },
+        {
+          name: "Using the controller",
+          code: "const { close, shake } = usePopoverController()\n// e.g. close after form submit, shake on validation error",
+          details: "You can access usePopoverController() controller context from components within Popover.Content. The hook exposes two methods, close() and shake(). They do exactly what you think they do.Attempting to submit an empty form calls the shake() methodAfter async submission occurs (faked loading state), the close() method is called to close the popup imperatively."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/popover"
+    },
+    {
+      slug: "progress-steps",
+      name: "Progress Steps",
+      description: "Display progress through a multi-step process",
+      importPath: "@plexui/ui/components/ProgressSteps",
+      exports: [
+        "ProgressSteps"
+      ],
+      props: [
+        {
+          name: "current",
+          type: "number",
+          description: "Current active step (1-based)"
+        },
+        {
+          name: "orientation",
+          type: '"horizontal" | "vertical"',
+          default: '"horizontal"',
+          description: "Layout direction"
+        },
+        {
+          name: "size",
+          type: '"sm" | "md" | "lg"',
+          default: '"md"',
+          description: "Step indicator size"
+        },
+        {
+          name: "color",
+          type: '"default" | "success"',
+          default: '"default"',
+          description: "Color scheme for completed/active steps"
+        },
+        {
+          name: "connectorStyle",
+          type: '"solid" | "dashed"',
+          default: '"solid"',
+          description: "Connector line style"
+        },
+        {
+          name: "variant",
+          type: '"minimal"',
+          description: "Compact bar variant (requires total)"
+        },
+        {
+          name: "total",
+          type: "number",
+          description: "Total steps for minimal variant"
+        },
+        {
+          name: "icon",
+          type: "ReactNode",
+          description: "Custom icon instead of step number"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: "<ProgressSteps current={2}>\n  <ProgressSteps.Step>\n    <ProgressSteps.Title>Your details</ProgressSteps.Title>\n    <ProgressSteps.Description>Please provide your name and email</ProgressSteps.Description>\n  </ProgressSteps.Step>\n  <ProgressSteps.Step>\n    <ProgressSteps.Title>Company details</ProgressSteps.Title>\n    <ProgressSteps.Description>A few details about your company</ProgressSteps.Description>\n  </ProgressSteps.Step>\n  <ProgressSteps.Step>\n    <ProgressSteps.Title>Invite your team</ProgressSteps.Title>\n    <ProgressSteps.Description>Start collaborating with your team</ProgressSteps.Description>\n  </ProgressSteps.Step>\n  <ProgressSteps.Step>\n    <ProgressSteps.Title>Add your socials</ProgressSteps.Title>\n    <ProgressSteps.Description>Share posts to your social accounts</ProgressSteps.Description>\n  </ProgressSteps.Step>\n</ProgressSteps>"
+        },
+        {
+          name: "Sizes",
+          code: '<ProgressSteps current={2} size="md">\n  <ProgressSteps.Step><ProgressSteps.Title>Step 1</ProgressSteps.Title></ProgressSteps.Step>\n  <ProgressSteps.Step><ProgressSteps.Title>Step 2</ProgressSteps.Title></ProgressSteps.Step>\n  <ProgressSteps.Step><ProgressSteps.Title>Step 3</ProgressSteps.Title></ProgressSteps.Step>\n  <ProgressSteps.Step><ProgressSteps.Title>Step 4</ProgressSteps.Title></ProgressSteps.Step>\n</ProgressSteps>',
+          details: "Use size to control the scale of step indicators."
+        },
+        {
+          name: "Vertical",
+          code: '<ProgressSteps current={2} orientation="vertical">...</ProgressSteps>\n<ProgressSteps current={3} orientation="vertical" connectorStyle="dashed">...</ProgressSteps>',
+          details: 'Use orientation="vertical" to display steps in a vertical layout, ideal for sidebar navigation or multi-step forms. The example also shows the dashed connector style.'
+        },
+        {
+          name: "With Icons",
+          code: "<ProgressSteps current={3}>\n  <ProgressSteps.Step icon={<Email />}>...</ProgressSteps.Step>\n  <ProgressSteps.Step icon={<Globe />}>...</ProgressSteps.Step>\n  <ProgressSteps.Step icon={<Users />}>...</ProgressSteps.Step>\n  <ProgressSteps.Step icon={<Bolt />}>...</ProgressSteps.Step>\n</ProgressSteps>",
+          details: "Use icon prop on ProgressSteps.Step to display custom icons instead of step numbers."
+        },
+        {
+          name: "With Navigation",
+          code: '<ProgressSteps variant="minimal" current={step} total={4} />\n<Button onClick={() => setStep(s => Math.max(1, s - 1))}>Previous</Button>\n<Button onClick={() => setStep(s => Math.min(4, s + 1))}>Next</Button>',
+          details: "Example of integrating with navigation controls."
+        },
+        {
+          name: "Minimal",
+          code: '<ProgressSteps variant="minimal" current={3} total={4} color="default" />',
+          details: 'Use variant="minimal" for a compact horizontal bar indicator. Requires total prop.'
+        },
+        {
+          name: "Icons Only",
+          code: "<ProgressSteps current={2}>\n  <ProgressSteps.Step />\n  <ProgressSteps.Step />\n  <ProgressSteps.Step />\n  <ProgressSteps.Step />\n</ProgressSteps>",
+          details: "Omit Title and Description for a minimal indicator when step details are shown elsewhere."
+        },
+        {
+          name: "Colors",
+          code: '<ProgressSteps current={3}>...</ProgressSteps>\n<ProgressSteps current={3} color="success">...</ProgressSteps>',
+          details: "Use color to change the color scheme of completed and active steps."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/progress-steps"
+    },
+    {
+      slug: "radio-group",
+      name: "Radio Group",
+      description: "Semantic radio option selection",
+      importPath: "@plexui/ui/components/RadioGroup",
+      exports: [
+        "RadioGroup"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "string",
+          description: "Controlled selected value"
+        },
+        {
+          name: "defaultValue",
+          type: "string",
+          description: "Initial selected value (uncontrolled)"
+        },
+        {
+          name: "onChange",
+          type: "(value: string) => void",
+          description: "Called when selected option changes"
+        },
+        {
+          name: "direction",
+          type: '"col" | "row"',
+          default: '"col"',
+          description: "Item flow direction"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable the whole group"
+        },
+        {
+          name: "aria-label",
+          type: "string",
+          description: "Accessible group label"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          description: "Stretch item to fill available width"
+        },
+        {
+          name: "orientation",
+          type: '"left" | "right"',
+          default: '"left"',
+          description: "Position of the radio indicator relative to the label"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [frequency, setFrequency] = useState("daily")\n<RadioGroup direction="col" value={frequency} onChange={setFrequency} aria-label="Notification frequency">\n  <RadioGroup.Item value="daily">Daily</RadioGroup.Item>\n  <RadioGroup.Item value="weekly">Weekly</RadioGroup.Item>\n  <RadioGroup.Item value="monthly">Monthly</RadioGroup.Item>\n  <RadioGroup.Item value="never">Never</RadioGroup.Item>\n</RadioGroup>'
+        },
+        {
+          name: "Direction",
+          code: '<RadioGroup direction="col" defaultValue="light" aria-label="Theme">\n  <RadioGroup.Item value="light">Light</RadioGroup.Item>\n  <RadioGroup.Item value="dark">Dark</RadioGroup.Item>\n  <RadioGroup.Item value="system">System</RadioGroup.Item>\n</RadioGroup>',
+          details: "Use direction to control whether the items flow in a column or row. An optimal gap will be dynamically applied based on the orientation."
+        },
+        {
+          name: "Orientation",
+          code: '<RadioGroup className="w-[320px]" direction="col" defaultValue="email" aria-label="Default notification channel">\n  <RadioGroup.Item value="email" orientation="right" block>Email</RadioGroup.Item>\n  <RadioGroup.Item value="sms" orientation="right" block>SMS</RadioGroup.Item>\n  <RadioGroup.Item value="push" orientation="right" block>Push notification</RadioGroup.Item>\n</RadioGroup>',
+          details: 'Use orientation="right" on RadioGroup.Item to place the radio indicator after the label text. Useful for settings lists and card-style selections where the content should lead.'
+        },
+        {
+          name: "Group disabled",
+          code: '<RadioGroup disabled defaultValue="standard" aria-label="Shipping method">\n  <RadioGroup.Item value="standard">Standard</RadioGroup.Item>\n  <RadioGroup.Item value="express">Express</RadioGroup.Item>\n  <RadioGroup.Item value="overnight">Overnight</RadioGroup.Item>\n</RadioGroup>',
+          details: "Use disabled on RadioGroup to disable all radio options."
+        },
+        {
+          name: "Item disabled",
+          code: '<RadioGroup aria-label="Delivery method" direction="col">\n  <RadioGroup.Item value="standard">Standard shipping (3\u20135 days)</RadioGroup.Item>\n  <RadioGroup.Item value="express" disabled>Express shipping (1\u20132 days)</RadioGroup.Item>\n  <RadioGroup.Item value="same-day">\n    Same-day delivery \u2014 available in select metro areas with a minimum order of $50\n  </RadioGroup.Item>\n</RadioGroup>',
+          details: "Use disabled on single RadioGroup.Item to disable only that option."
+        },
+        {
+          name: "With description",
+          code: '<RadioGroup direction="col" value={value} onChange={setValue} aria-label="Spacing">\n  <RadioGroup.Item value="default">\n    <div className="flex flex-col">\n      <span>Default</span>\n      <span className="text-xs text-secondary mt-0.5">\n        Standard spacing for most use cases.\n      </span>\n    </div>\n  </RadioGroup.Item>\n  <RadioGroup.Item value="comfortable">\n    <div className="flex flex-col">\n      <span>Comfortable</span>\n      <span className="text-xs text-secondary mt-0.5">\n        More space between elements.\n      </span>\n    </div>\n  </RadioGroup.Item>\n  <RadioGroup.Item value="compact">\n    <div className="flex flex-col">\n      <span>Compact</span>\n      <span className="text-xs text-secondary mt-0.5">\n        Minimal spacing for dense layouts.\n      </span>\n    </div>\n  </RadioGroup.Item>\n</RadioGroup>',
+          details: "Radio items accept ReactNode children, so you can compose a label with secondary description text \u2014 useful for options that need additional context."
+        },
+        {
+          name: "With Field",
+          code: '<Field label="Notification method" description="Choose how you want to receive notifications.">\n  {() => (\n    <RadioGroup direction="col" value={value} onChange={setValue} aria-label="Notification method">\n      <RadioGroup.Item value="email">Email</RadioGroup.Item>\n      <RadioGroup.Item value="sms">SMS</RadioGroup.Item>\n      <RadioGroup.Item value="push">Push notification</RadioGroup.Item>\n    </RadioGroup>\n  )}\n</Field>',
+          details: "Wrap a RadioGroup in a Field for a shared label and description. The Field provides aria-describedby linking automatically."
+        },
+        {
+          name: "With Field error",
+          code: '<Field\n  label="Subscription plan"\n  description="Select a plan to continue."\n  errorMessage={showError ? "Please select a subscription plan." : undefined}\n>\n  {(fieldProps) => (\n    <RadioGroup direction="col" aria-label="Subscription plan" {...fieldProps}>\n      <RadioGroup.Item value="monthly">Monthly ($9.99/month)</RadioGroup.Item>\n      <RadioGroup.Item value="yearly">Yearly ($99.99/year)</RadioGroup.Item>\n      <RadioGroup.Item value="lifetime">Lifetime ($299.99)</RadioGroup.Item>\n    </RadioGroup>\n  )}\n</Field>',
+          details: "When a Field has an errorMessage, it sets aria-invalid on the child control for screen readers. The error message is displayed below the group."
+        },
+        {
+          name: "Choice card",
+          code: '<RadioGroup className="flex-col w-[320px] gap-3" value={value} onChange={setValue} aria-label="Workspace type">\n  <div style={{\n    border: "1px solid",\n    borderColor: isSelected ? "var(--color-background-primary-solid)" : "var(--color-border-primary-outline)",\n    borderRadius: "var(--radius-lg)",\n    backgroundColor: isSelected ? "var(--color-background-primary-soft-alpha)" : undefined,\n  }}>\n    <RadioGroup.Item value="personal" block orientation={orientation} className="gap-3 p-3">\n      <div className="flex flex-col flex-1">\n        <span className="font-semibold">Personal</span>\n        <span className="text-xs text-secondary mt-0.5">For hobby projects and experimentation.</span>\n      </div>\n    </RadioGroup.Item>\n  </div>\n  ...\n</RadioGroup>',
+          details: 'Style each radio option as a bordered card with visual selection state. The selected card gets a highlighted border using design tokens. Use orientation="right" to place the indicator after the content. Wrap each RadioGroup.Item in a card container with border and borderRadius on the same element.'
+        },
+        {
+          name: "Card selection",
+          code: '<RadioGroup className="flex-col w-[390px] gap-4">\n  <RadioGroup.Item className="gap-2.5" value="basic">\n    <div><h4>Basic Plan</h4><p className="text-secondary text-sm">5 GB storage</p></div>\n  </RadioGroup.Item>\n  ...\n</RadioGroup>',
+          details: "Leverage component composition and className overrides to build card-style radio selections with rich content per option."
+        },
+        {
+          name: "Grouped sections",
+          code: '<div className="flex flex-col max-w-sm w-full divide-y divide-alpha/15">\n  <div className="pb-5">\n    <Field label="Visibility" description="Control who can see project resources.">\n      {() => (\n        <RadioGroup direction="col" value={visibility} onChange={setVisibility} aria-label="Visibility">\n          <RadioGroup.Item value="hidden">Hidden</RadioGroup.Item>\n          <RadioGroup.Item value="owners">Visible to organization owners</RadioGroup.Item>\n          <RadioGroup.Item value="everyone">Visible to everyone</RadioGroup.Item>\n        </RadioGroup>\n      )}\n    </Field>\n  </div>\n  <div className="pt-5">\n    <Field label="Digest frequency" description="How often you receive summary emails.">\n      {() => (\n        <RadioGroup direction="col" value={frequency} onChange={setFrequency} aria-label="Digest frequency">\n          <RadioGroup.Item value="daily">Daily</RadioGroup.Item>\n          <RadioGroup.Item value="weekly">Weekly</RadioGroup.Item>\n          <RadioGroup.Item value="monthly">Monthly</RadioGroup.Item>\n          <RadioGroup.Item value="never">Never</RadioGroup.Item>\n        </RadioGroup>\n      )}\n    </Field>\n  </div>\n</div>',
+          details: "Use dividers to separate radio groups into logical sections. Each section can be wrapped in a Field with its own label and description."
+        },
+        {
+          name: "With Checkbox",
+          code: '<div className="flex flex-row gap-12 items-start">\n  <div>\n    <span className="text-xs text-tertiary font-mono mb-1">RadioGroup</span>\n    <RadioGroup direction="row" defaultValue="email" aria-label="Channel">\n      <RadioGroup.Item value="email">Email</RadioGroup.Item>\n      <RadioGroup.Item value="sms">SMS</RadioGroup.Item>\n      <RadioGroup.Item value="push">Push</RadioGroup.Item>\n    </RadioGroup>\n  </div>\n  <div>\n    <span className="text-xs text-tertiary font-mono mb-1">Checkbox</span>\n    <div className="flex flex-row gap-5">\n      <Checkbox label="Email" defaultChecked />\n      <Checkbox label="SMS" />\n      <Checkbox label="Push" />\n    </div>\n  </div>\n</div>',
+          details: "Place RadioGroup alongside Checkbox controls to verify that indicator sizes, label baselines, and spacing align consistently in both horizontal and vertical layouts."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/radio-group"
+    },
+    {
+      slug: "select-control",
+      name: "Select Control",
+      description: "Customizable select control for use with any type of floating UI",
+      importPath: "@plexui/ui/components/SelectControl",
+      exports: [
+        "SelectControl"
+      ],
+      props: [
+        {
+          name: "selected",
+          type: "boolean",
+          description: "Whether a value is selected (affects placeholder styling)"
+        },
+        {
+          name: "variant",
+          type: '"soft" | "outline" | "ghost"',
+          default: '"outline"',
+          description: "Visual variant"
+        },
+        {
+          name: "size",
+          type: "string",
+          description: "Control size"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          description: "Fully rounded trigger"
+        },
+        {
+          name: "StartIcon",
+          type: "Component",
+          description: "Icon at start"
+        },
+        {
+          name: "onClearClick",
+          type: "() => void",
+          description: "Enables clear button when set"
+        },
+        {
+          name: "dropdownIconType",
+          type: '"chevronDown" | "dropdown" | "none"',
+          description: "Dropdown indicator style"
+        },
+        {
+          name: "invalid",
+          type: "boolean",
+          description: "Invalid state"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "Disable control"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          description: "Full width"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "Loading state"
+        },
+        {
+          name: "opticallyAlign",
+          type: '"start" | "end"',
+          description: "Optical alignment"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [value, setValue] = useState("")\nconst placeholder = "Select date..."\n\nreturn (\n  <Menu>\n    <Menu.Trigger>\n      <SelectControl selected={!!value} onClearClick={() => setValue("")} StartIcon={CalendarAlt}>\n        {value || placeholder}\n      </SelectControl>\n    </Menu.Trigger>\n    <Menu.Content>\n      <Menu.RadioGroup value={value} onChange={setValue}>\n        ...\n      </Menu.RadioGroup>\n    </Menu.Content>\n  </Menu>\n)'
+        },
+        {
+          name: "Variants",
+          code: '<SelectControl variant="soft" selected StartIcon={Cabinet} onClearClick={() => {}}>Sample value</SelectControl>\n<SelectControl variant="outline" selected StartIcon={Cabinet} onClearClick={() => {}}>Sample value</SelectControl>\n<SelectControl variant="ghost" selected StartIcon={Cabinet} onClearClick={() => {}}>Sample value</SelectControl>',
+          details: 'Use the variant prop to stylize the select control. Available variant styles are similar to {""}, but aligned with subtle differences from {""} variant treatments.'
+        },
+        {
+          name: "Sizing & roundness",
+          code: '<SelectControl size="md" pill={false} dropdownIconType="none">Select...</SelectControl>\n<SelectControl size="md" loading>Select...</SelectControl>\n<SelectControl size="md">Select...</SelectControl>\n<SelectControl size="md" StartIcon={Tools} dropdownIconType="none">Tool calls</SelectControl>\n...',
+          details: "Sizing of the control is determined with the size prop. Each size provides dynamic values for various aspects of the control, including icon and indicator placement, as well font-size and gutter values.Create fully rounded controls with the pill prop. When pill is set, extra horizontal gutter is dynamically applied, and the clear action is also set to pill."
+        },
+        {
+          name: "Selected",
+          code: "<SelectControl selected={false}>Select...</SelectControl>",
+          details: "Use selected to indicate if the control has a selected value, which toggles visual placeholder styling.As you'll notice here, this doesn't do anything to the content of the control &ndash; that's up to you."
+        },
+        {
+          name: "Start icon",
+          code: "<SelectControl StartIcon={CalendarAlt}>Select date...</SelectControl>",
+          details: "Use StartIcon to display an icon in the control. Sizing, spacing, and coloring are handled automatically."
+        },
+        {
+          name: "Dropdown icon",
+          code: '<SelectControl selected dropdownIconType="dropdown" StartIcon={CalendarAlt}>Select...</SelectControl>',
+          details: "Use dropdownIconType to control the presentation of the dropdown indicator."
+        },
+        {
+          name: "Clearable",
+          code: '<SelectControl selected onClearClick={() => setValue("")} StartIcon={CalendarAlt}>\n  {value || "Select..."}\n</SelectControl>',
+          details: "Pass a callback onClearClick to enable the clearable action."
+        },
+        {
+          name: "Loading",
+          code: "<SelectControl loading>Loading models...</SelectControl>",
+          details: "During loading, dropdown icon and clear actions are automatically hidden.Interactions will be prevented by default during this state, by providing a default value for inert to true. You can override this behavior directly with inert, or use disabled to add visual disablement."
+        },
+        {
+          name: "Invalid",
+          code: "<SelectControl invalid selected>Pineapple on pizza</SelectControl>",
+          details: "Use invalid to visually indicate the control is in an invalid state."
+        },
+        {
+          name: "Disabled",
+          code: "<SelectControl disabled selected StartIcon={User}>Reader</SelectControl>",
+          details: "Use disabled to both visually and accessibly disable the control."
+        },
+        {
+          name: "Block",
+          code: '<div className="w-[290px] text-center p-2 border border-dashed border-alpha/20 rounded-md">\n  <SelectControl block size="lg">Select...</SelectControl>\n</div>',
+          details: "Create full-width controls with the block prop."
+        },
+        {
+          name: "Optical alignment",
+          code: '<SelectControl selected variant="ghost" opticallyAlign="start">Ghost control</SelectControl>',
+          details: 'Use opticallyAlign with either "start" or "end" to offset the gutter of the control.'
+        },
+        {
+          name: "Country selector",
+          code: `const countries = [
+  { value: "us", label: "United States" },
+  { value: "gb", label: "United Kingdom" },
+  // ...60 countries
+];
+
+const CountryView = ({ value }) => (
+  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+    <img src={\\\`https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/flags/4x3/\\\${value}.svg\\`,
+          details: "A plain country selector built with Select. Shows flag icons with country names \u2014 no dial codes. Useful for profile forms, shipping addresses, and other country-only fields."
+        },
+        {
+          name: "Country code selector",
+          code: `const countries = [
+  { value: "us", label: "United States (+1)", dialCode: "+1" },
+  { value: "gb", label: "United Kingdom (+44)", dialCode: "+44" },
+  // ...60 countries
+];
+
+const CountryTriggerView = ({ value }) => {
+  const country = lookup.get(value);
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+      <img src={\\\`https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/flags/4x3/\\\${value}.svg\\`,
+          details: "A searchable country selector built with Select. Custom TriggerView and OptionView render flag icons and dial codes. Search matches both country name and dial code."
+        },
+        {
+          name: "Phone form",
+          code: "import { useState, useCallback, useRef } from 'react';\nimport { Input } from '@plexui/ui/components/Input';\nimport { Select, type Option } from '@plexui/ui/components/Select';\nimport { Button } from '@plexui/ui/components/Button';\nimport { FieldError } from '@plexui/ui/components/FieldError';\n\n// Country data \u2014 include all 245 countries in production\ntype Country = { value: string; label: string; dialCode: string; flag: string };\n\nconst COUNTRIES: Country[] = [\n  { value: 'us', label: 'United States', dialCode: '+1', flag: '\u{1F1FA}\u{1F1F8}' },\n  { value: 'gb', label: 'United Kingdom', dialCode: '+44', flag: '\u{1F1EC}\u{1F1E7}' },\n  { value: 'de', label: 'Germany', dialCode: '+49', flag: '\u{1F1E9}\u{1F1EA}' },\n  { value: 'fr', label: 'France', dialCode: '+33', flag: '\u{1F1EB}\u{1F1F7}' },\n  { value: 'es', label: 'Spain', dialCode: '+34', flag: '\u{1F1EA}\u{1F1F8}' },\n  { value: 'it', label: 'Italy', dialCode: '+39', flag: '\u{1F1EE}\u{1F1F9}' },\n  { value: 'jp', label: 'Japan', dialCode: '+81', flag: '\u{1F1EF}\u{1F1F5}' },\n  { value: 'au', label: 'Australia', dialCode: '+61', flag: '\u{1F1E6}\u{1F1FA}' },\n  { value: 'br', label: 'Brazil', dialCode: '+55', flag: '\u{1F1E7}\u{1F1F7}' },\n  { value: 'in', label: 'India', dialCode: '+91', flag: '\u{1F1EE}\u{1F1F3}' },\n  // ... full list of 245 countries\n];\n\nconst COUNTRY_LOOKUP = new Map(COUNTRIES.map((c) => [c.value, c]));\nconst COUNTRY_OPTIONS = COUNTRIES.map((c) => ({\n  ...c,\n  label: \\`\\${c.label} (\\${c.dialCode})\\`,\n}));\n\n// Per-country phone number format patterns\nconst PHONE_FORMATS: Record<string, number[]> = {\n  us: [3, 3, 4], ca: [3, 3, 4],   // 123 456 7890\n  gb: [4, 3, 3], de: [3, 4, 4],   // 1234 567 890 | 123 4567 8901\n  fr: [1, 2, 2, 2, 2],            // 1 23 45 67 89\n  es: [3, 2, 2, 2],               // 123 45 67 89\n  it: [3, 3, 4], jp: [2, 4, 4],\n  au: [3, 3, 3], br: [2, 5, 4],\n  in: [5, 5],                      // 12345 67890\n  // ... add more countries as needed\n};\n\nfunction formatPhoneNumber(raw: string, countryCode?: string) {\n  const digits = raw.replace(/\\\\D/g, '');\n  if (!digits) return '';\n  const format = (countryCode && PHONE_FORMATS[countryCode]) || [3, 3, 4];\n  const groups: string[] = [];\n  let i = 0;\n  for (const size of format) {\n    if (i >= digits.length) break;\n    groups.push(digits.slice(i, i + size));\n    i += size;\n  }\n  if (i < digits.length) groups.push(digits.slice(i));\n  return groups.join(' ');\n}\n\n// Flag icon \u2014 SVG flags from lipis/flag-icons, all 4:3\nfunction FlagIcon({ code, trigger }: { code: string; trigger?: boolean }) {\n  return (\n    <span\n      style={{\n        display: 'block',\n        height: trigger ? 'var(--start-icon-size, 18px)' : 16,\n        aspectRatio: '4 / 3',\n        borderRadius: 2,\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      <img\n        src={\\`https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/flags/4x3/\\${code}.svg\\",
+          details: "Country selector with flag icons and phone input composed into a form. Selecting a country updates the dial code prefix and clears the phone field. Phone numbers are formatted as you type using per-country patterns (e.g. 123 456 7890 for US, 1234 567 890 for UK). Search works by both country name and dial code. Validation runs on submit &mdash; the phone field shows an error state with FieldError when the number is too short or too long."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/select-control"
+    },
+    {
+      slug: "select",
+      name: "Select",
+      description: "Choose from a dropdown of options",
+      importPath: "@plexui/ui/components/Select",
+      exports: [
+        "Select"
+      ],
+      props: [
+        {
+          name: "options",
+          type: "Options<T>",
+          description: "Array of options or grouped options"
+        },
+        {
+          name: "value",
+          type: "string | string[]",
+          description: "Selected value (single) or values (multiple)"
+        },
+        {
+          name: "onChange",
+          type: "function",
+          description: "Called when selection changes"
+        },
+        {
+          name: "multiple",
+          type: "boolean",
+          default: "false",
+          description: "Allow multiple selection"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          default: '"Select..."',
+          description: "Trigger placeholder"
+        },
+        {
+          name: "variant",
+          type: "string",
+          default: '"outline"',
+          description: "Trigger variant"
+        },
+        {
+          name: "size",
+          type: "string",
+          default: '"md"',
+          description: "Trigger size"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "false",
+          description: "Rounded trigger"
+        },
+        {
+          name: "clearable",
+          type: "boolean",
+          default: "false",
+          description: "Show clear button"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "true",
+          description: "Full width trigger"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable select"
+        },
+        {
+          name: "actions",
+          type: "array",
+          description: "Actions below options list"
+        },
+        {
+          name: "OptionView",
+          type: "React.FC",
+          description: "Custom option render"
+        },
+        {
+          name: "TriggerView",
+          type: "React.FC",
+          description: "Custom trigger render (multi)"
+        },
+        {
+          name: "searchPlaceholder",
+          type: "string",
+          description: "Search input placeholder"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<Select\n  value={fruit}\n  options={fruits}\n  onChange={handleChange}\n  placeholder="Select a fruit..."\n  variant="solid"\n/>'
+        },
+        {
+          name: "Custom views",
+          code: 'const RoleOptionDescription = ({ children }: { children: ReactNode }) => (\n  <div className="font-normal text-secondary text-[0.935em] leading-[1.45]">\n    {children}\n  </div>\n);\n\nconst roles = [\n  {\n    value: "owner",\n    label: "Owner",\n    description: (\n      <RoleOptionDescription>\n        Can modify project information and manage project members\n      </RoleOptionDescription>\n    ),\n  },\n  {\n    value: "reader",\n    label: "Reader",\n    description: (\n      <RoleOptionDescription>\n        Can make API requests that read or modify data\n      </RoleOptionDescription>\n    ),\n  },\n];\n\n<Select\n  value={role}\n  options={roles}\n  placeholder="Select role..."\n  align="start"\n  listMinWidth={260}\n  variant="ghost"\n  size="lg"\n  onChange={({ value }) => setRole(value)}\n  TriggerStartIcon={role === "owner" ? UserLock : User}\n  triggerClassName="font-semibold"\n  optionClassName="font-semibold"\n/>',
+          details: "You can fully customize the styling and rendering of select's trigger and options:Trigger &ndash; triggerClassName, TriggerStartIcon, and TriggerViewOptions &ndash; optionClassName, OptionView, as well as description and tooltip fields in options"
+        },
+        {
+          name: "Actions",
+          code: '<Select\n  value={value}\n  onChange={handleChange}\n  options={items}\n  placeholder="Select..."\n  align="start"\n  listMinWidth={240}\n  triggerClassName="font-semibold"\n  actions={[\n    { id: "create", label: "Create project", Icon: Plus, onSelect: () => {} },\n    { id: "overview", label: "Organization overview", Icon: Workspace, onSelect: () => {} },\n  ]}\n/>',
+          details: "Custom, arbitrary actions can be displayed below the options list via the actions prop."
+        },
+        {
+          name: "Grouped options",
+          code: '<Select\n  value={value}\n  options={groupedItems}\n  onChange={(v) => setValue(v.value)}\n  variant="outline"\n  size="lg"\n  side="bottom"\n  listMinWidth={300}\n  searchPlaceholder="Select an option..."\n  clearable\n/>',
+          details: "Select supports option groups, similar to the native &lt;optgroup&gt; element. All selects are searchable by default, but will only present a searchbox when it makes sense. Currently, this means when there are 15 or more options."
+        },
+        {
+          name: "Multiple selection",
+          code: '<Select\n  variant="soft"\n  placeholder="Select fruits..."\n  options={fruitsOptions}\n  name="fruits"\n  multiple\n  clearable\n  value={fruits}\n  onChange={(values) => setFruits(values.map(({ value }) => value))}\n  TriggerView={MultiFruitTriggerView}\n/>',
+          details: "Multiple selection is supported through the multiple property. This changes how value, onChange, and TriggerView are typed, accepting and returning arrays of values."
+        },
+        {
+          name: "Column configuration",
+          code: `const [shown, setShown] = useState(['name', 'email', 'role', 'status'])
+const toggle = (id) => {
+  setShown((prev) =>
+    prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
+  )
+}
+const shownColumns = allColumns.filter((c) => shown.includes(c.id))
+const hiddenColumns = allColumns.filter((c) => !shown.includes(c.id))
+  <Popover.Trigger>
+    <Button variant="outline" size="sm"><SettingsSlider /> Columns</Button>
+  </Popover.Trigger>
+  <Popover.Content minWidth={240} side="bottom" align="start">
+    {shownColumns.map((col) => (
+      <Row key={col.id} onClick={() => toggle(col.id)}>
+        <span>{col.label}</span>
+        <Switch checked />
+      </Row>
+    ))}
+    {hiddenColumns.map((col) => (
+      <Row key={col.id} onClick={() => toggle(col.id)}>
+        <span className="text-tertiary">{col.label}</span>
+        <Switch checked={false} />
+      </Row>
+    ))}
+  </Popover.Content>
+</Popover>`,
+          details: "A column-visibility panel built with Popover and Switch. Toggling a switch moves the column between shown and hidden groups."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/select"
+    },
+    {
+      slug: "shimmer-text",
+      name: "Shimmer Text",
+      description: "Animated shimmer effect for text content",
+      importPath: "@plexui/ui/components/ShimmerText",
+      exports: [
+        "ShimmerText",
+        "ShimmerableText"
+      ],
+      props: [
+        {
+          name: "as",
+          type: '"p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div"',
+          default: '"div"',
+          description: "HTML element to render"
+        },
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Text content to shimmer"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes"
+        },
+        {
+          name: "shimmer",
+          type: "boolean",
+          default: "false",
+          description: "Whether the shimmer animation is active"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<ShimmerText className="text-lg font-semibold">\n  Thinking...\n</ShimmerText>',
+          details: "ShimmerText applies a continuous shimmer animation to text content. Useful for loading states, AI-generated content indicators, or visual emphasis."
+        },
+        {
+          name: "Semantic elements",
+          code: '<div className="flex flex-col gap-4">\n  <ShimmerText as="h2" className="text-2xl font-bold">Heading shimmer</ShimmerText>\n  <ShimmerText as="p" className="text-base">Paragraph shimmer effect</ShimmerText>\n  <ShimmerText as="span" className="text-sm text-secondary">Inline shimmer</ShimmerText>\n</div>',
+          details: "Use the as prop to render as any text element: p, span, h1\u2013h6, or div."
+        },
+        {
+          name: "Controllable shimmer",
+          code: 'const [shimmer, setShimmer] = useState(true)\n\n<ShimmerableText shimmer={shimmer} className="text-lg font-semibold">\n  Generating response...\n</ShimmerableText>',
+          details: "ShimmerableText allows toggling the shimmer on and off. When shimmer is set to false, the animation finishes its current iteration and then pauses gracefully \u2014 no abrupt cut. Use this variant when text transitions between a loading and idle state."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/shimmer-text"
+    },
+    {
+      slug: "sidebar",
+      name: "Sidebar",
+      description: "Composable navigation sidebar for application layouts",
+      importPath: "@plexui/ui/components/Sidebar",
+      exports: [
+        "SidebarProvider",
+        "SidebarLayout",
+        "Sidebar",
+        "SidebarHeader",
+        "SidebarContent",
+        "SidebarFooter",
+        "SidebarGroup",
+        "SidebarGroupLabel",
+        "SidebarMenu",
+        "SidebarMenuItem",
+        "SidebarMenuButton",
+        "SidebarInset",
+        "SidebarTrigger"
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<SidebarProvider>\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">Project</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton isActive tooltip="Overview">\n                  <SidebarMenuButtonIcon><Home /></SidebarMenuButtonIcon>\n                  <SidebarMenuButtonLabel>Overview</SidebarMenuButtonLabel>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              ...\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter><SidebarTrigger /></SidebarFooter>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>'
+        },
+        {
+          name: "Scrollable Content",
+          code: '<SidebarProvider>\n  <SidebarLayout style={{ height: 400 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">Project</SidebarGroupLabel>\n          <SidebarGroupContent><SidebarMenu>...</SidebarMenu></SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">System</SidebarGroupLabel>\n          <SidebarGroupContent><SidebarMenu>...</SidebarMenu></SidebarGroupContent>\n        </SidebarGroup>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">Resources</SidebarGroupLabel>\n          <SidebarGroupContent><SidebarMenu>...</SidebarMenu></SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter><SidebarTrigger /></SidebarFooter>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "When the content is taller than the sidebar, it will scroll vertically."
+        },
+        {
+          name: "Text-Only Navigation",
+          code: '<SidebarProvider collapsible="none">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar variant="docs" style={{ width: "180px" }}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel size="lg">Settings</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton isActive>\n                  <SidebarMenuButtonLabel>Your profile</SidebarMenuButtonLabel>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              ...\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: 'A text-only sidebar without icons. Use collapsible="none" since there are no icons to collapse to.'
+        },
+        {
+          name: "Collapse Modes",
+          code: '<SidebarProvider collapsible="icon">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">Project</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton isActive tooltip="Overview">\n                  <SidebarMenuButtonIcon><Home /></SidebarMenuButtonIcon>\n                  <SidebarMenuButtonLabel>Overview</SidebarMenuButtonLabel>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              ...\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter><SidebarTrigger /></SidebarFooter>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "The sidebar supports different collapse behaviors via the collapsible prop on SidebarProvider:offcanvas (default) &ndash; On mobile, works as a drawer. On desktop, collapses completely.icon &ndash; Collapses to an icon-only rail.none &ndash; Static sidebar that cannot be collapsed.When using icon mode, add the tooltip prop to SidebarMenuButton to show labels on hover. Tooltips appear only in collapsed state and are hidden on mobile.You can control the open state externally with open and onOpenChange (controlled mode). Use the control below to toggle the sidebar."
+        },
+        {
+          name: "Nested Navigation",
+          code: '<SidebarProvider collapsible="none">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar variant="docs" style={{ width: "260px" }}>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenuItem expanded={isExpanded}>\n            <SidebarMenuButton onClick={() => toggle(id)}>\n              <SidebarMenuButtonLabel>Getting Started</SidebarMenuButtonLabel>\n              <ChevronRightSm className="ml-auto transition-transform" />\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuSub>\n            <SidebarMenuSubItem>\n              <SidebarMenuSubButton isActive>Introduction</SidebarMenuSubButton>\n            </SidebarMenuSubItem>\n            ...\n          </SidebarMenuSub>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "Build collapsible nested menus with chevron toggles for documentation and API reference sidebars."
+        },
+        {
+          name: "Mobile Menu",
+          code: '// Desktop: standard sidebar with icon collapse\n<SidebarProvider collapsible="icon">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar>...</Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>\n\n// Mobile: phone-sized container with hamburger menu\n<SidebarProvider collapsible="offcanvas">\n  <header>\n    <SidebarMobileMenuButton />\n  </header>\n  {openMobile ? <SidebarContent>...</SidebarContent> : <div>Page content</div>}\n</SidebarProvider>',
+          details: "Mobile behavior is handled automatically when using SidebarProvider. The SidebarMobileMenuButton provides a standard animated hamburger trigger."
+        },
+        {
+          name: "Search",
+          code: '<SidebarProvider collapsible="none">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar variant="docs" style={{ width: "220px" }}>\n      <SidebarHeader>\n        <SidebarInput\n          placeholder="Search"\n          value={searchValue}\n          onChange={(e) => setSearchValue(e.target.value)}\n          onClear={() => setSearchValue("")}\n        />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Get started</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuSubButton indent={0} isActive>Overview</SidebarMenuSubButton>\n              </SidebarMenuItem>\n              ...\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "The sidebar provides a dedicated SidebarInput component for search functionality."
+        },
+        {
+          name: "Skeleton",
+          code: '<SidebarProvider>\n  <SidebarLayout style={{ height: 300 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem><SidebarMenuSkeleton labelWidth="70%" /></SidebarMenuItem>\n              <SidebarMenuItem><SidebarMenuSkeleton labelWidth="55%" /></SidebarMenuItem>\n              <SidebarMenuItem><SidebarMenuSkeleton labelWidth="80%" /></SidebarMenuItem>\n              <SidebarMenuItem><SidebarMenuSkeleton labelWidth="45%" /></SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "Loading skeleton states while navigation data is loading."
+        },
+        {
+          name: "Group Label Sizes",
+          code: '<SidebarProvider collapsible="none">\n  <SidebarLayout style={{ height: 350 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel size="sm">Project</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>...</SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "SidebarGroupLabel supports two size variants:sm &ndash; Compact, tertiary color. For dashboard navigation, settings panels, sidebars with fewer items.lg (default) &ndash; Larger, primary color, more spacing. For documentation, API reference, content-heavy sections."
+        },
+        {
+          name: "Badges",
+          code: '<SidebarProvider collapsible="none">\n  <SidebarLayout style={{ height: 400 }}>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Navigation</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton isActive>\n                  <SidebarMenuButtonIcon><Home /></SidebarMenuButtonIcon>\n                  <SidebarMenuButtonLabel>Overview</SidebarMenuButtonLabel>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton>\n                  <SidebarMenuButtonIcon><Code /></SidebarMenuButtonIcon>\n                  <SidebarMenuButtonLabel>API Reference</SidebarMenuButtonLabel>\n                  <SidebarMenuBadge>\n                    <Badge size="sm" color="info">New</Badge>\n                  </SidebarMenuBadge>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              ...\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "Use SidebarMenuBadge with the Badge component to display status indicators, counts, or labels alongside menu items."
+        },
+        {
+          name: "Footer Cards",
+          code: '<SidebarProvider collapsible="icon">\n  <SidebarLayout style={{ height: 500 }}>\n    <Sidebar>\n      <SidebarContent>...</SidebarContent>\n      <SidebarFooter>\n        <SidebarCard dismissible onDismiss={() => {}}>\n          <SidebarCardTitleLink href="#">Upgrade to Pro</SidebarCardTitleLink>\n          <SidebarCardContent>\n            Unlock higher rate limits, priority support, and advanced features.\n          </SidebarCardContent>\n          <SidebarCardFooter>\n            <Button size="sm" pill color="primary">View Plans</Button>\n          </SidebarCardFooter>\n        </SidebarCard>\n        <SidebarTrigger />\n      </SidebarFooter>\n    </Sidebar>\n    <SidebarInset>...</SidebarInset>\n  </SidebarLayout>\n</SidebarProvider>',
+          details: "Use SidebarCard to display promotional content, upgrade CTAs, or announcements in the sidebar footer."
+        }
+      ],
+      subComponents: [
+        {
+          name: "SidebarProvider",
+          description: "Handles sidebar state and provides context to all child components. Wrap your application layout in this provider.",
+          props: [
+            {
+              name: "collapsible",
+              type: '"offcanvas" | "icon" | "none"',
+              default: '"offcanvas"',
+              description: "Collapse behavior: offcanvas (drawer on mobile, full collapse on desktop), icon (icon rail), or none"
+            },
+            {
+              name: "defaultOpen",
+              type: "boolean",
+              default: "true",
+              description: "Initial open state (uncontrolled)"
+            },
+            {
+              name: "open",
+              type: "boolean",
+              description: "Controlled open state"
+            },
+            {
+              name: "onOpenChange",
+              type: "(open: boolean) => void",
+              description: "Called when open state changes"
+            }
+          ]
+        },
+        {
+          name: "Sidebar",
+          description: "The main sidebar container. Renders as an `` element.",
+          props: [
+            {
+              name: "variant",
+              type: '"sidebar" | "docs"',
+              default: '"sidebar"',
+              description: "Visual variant"
+            },
+            {
+              name: "side",
+              type: '"left" | "right"',
+              default: '"left"',
+              description: "Which side the sidebar is on"
+            }
+          ]
+        },
+        {
+          name: "SidebarMenuButton",
+          description: "Renders a menu item button. Use `isActive` to highlight the current page.",
+          props: [
+            {
+              name: "isActive",
+              type: "boolean",
+              default: "false",
+              description: "Highlight the current page"
+            },
+            {
+              name: "tooltip",
+              type: "string | ReactNode",
+              description: "Label shown on hover when collapsed (icon mode). Hidden on mobile."
+            }
+          ]
+        },
+        {
+          name: "SidebarGroupLabel",
+          description: "Renders a section label within a `SidebarGroup`. Supports two size variants.",
+          props: [
+            {
+              name: "size",
+              type: '"sm" | "lg"',
+              default: '"lg"',
+              description: "sm \u2014 compact, tertiary; lg \u2014 larger, primary, more spacing"
+            }
+          ]
+        },
+        {
+          name: "SidebarMenuSub",
+          description: "Renders a collapsible submenu container for nested navigation.",
+          props: [
+            {
+              name: "open",
+              type: "boolean",
+              default: "true",
+              description: "Whether submenu is expanded"
+            },
+            {
+              name: "hasIcons",
+              type: "boolean",
+              default: "false",
+              description: "Align child items with parent text that has icons"
+            }
+          ]
+        },
+        {
+          name: "SidebarCard",
+          description: "Renders a promotional card in the sidebar footer for CTAs, upgrades, or announcements.",
+          props: [
+            {
+              name: "dismissible",
+              type: "boolean",
+              description: "Shows dismiss button"
+            },
+            {
+              name: "onDismiss",
+              type: "() => void",
+              description: "Callback when dismissed"
+            }
+          ]
+        }
+      ],
+      hooks: [
+        {
+          name: "useSidebar",
+          description: "Hook to access sidebar state and controls from any component within `SidebarProvider`.",
+          properties: [
+            {
+              name: "state",
+              description: 'ndash; Current state: `"expanded"` or `"collapsed"`'
+            },
+            {
+              name: "open",
+              description: "/ `setOpen` - Desktop sidebar open state"
+            },
+            {
+              name: "openMobile",
+              description: "/ `setOpenMobile` - Mobile menu open state"
+            },
+            {
+              name: "isMobile",
+              description: "ndash; Whether the viewport is mobile"
+            },
+            {
+              name: "collapsible",
+              description: "ndash; Current collapsible mode"
+            },
+            {
+              name: "toggleSidebar",
+              description: "ndash; Toggle function for both desktop and mobile"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/sidebar"
+    },
+    {
+      slug: "skeleton",
+      name: "Skeleton",
+      description: "Use to show a placeholder while content is loading",
+      importPath: "@plexui/ui/components/Skeleton",
+      exports: [
+        "Skeleton"
+      ],
+      props: [
+        {
+          name: "circle",
+          type: "boolean",
+          default: "false",
+          description: "Render a circular skeleton"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Set dimensions and custom styling"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex items-center gap-4">\n  <Skeleton circle className="size-12" />\n  <div className="flex flex-col gap-2">\n    <Skeleton className="h-4 w-[200px]" />\n    <Skeleton className="h-4 w-[150px]" />\n  </div>\n</div>',
+          details: "Use a circular skeleton to represent loading avatars, combined with text placeholders."
+        },
+        {
+          name: "Card",
+          code: '<div className="flex flex-col gap-3 w-[300px] p-4 border border-default rounded-xl">\n  <Skeleton className="h-[150px] w-full rounded-lg" />\n  <Skeleton className="h-4 w-3/4" />\n  <Skeleton className="h-4 w-1/2" />\n</div>',
+          details: "Compose multiple skeletons to represent loading cards with images and text content."
+        },
+        {
+          name: "Text",
+          code: '<div className="flex flex-col gap-2 w-[300px]">\n  <Skeleton className="h-4 w-full" />\n  <Skeleton className="h-4 w-full" />\n  <Skeleton className="h-4 w-4/5" />\n</div>',
+          details: "Multiple text lines with varying widths create natural-looking paragraph placeholders."
+        },
+        {
+          name: "Form",
+          code: '<div className="flex flex-col gap-4 w-[300px]">\n  <div className="flex flex-col gap-2">\n    <Skeleton className="h-4 w-[80px]" />\n    <Skeleton className="h-10 w-full rounded-lg" />\n  </div>\n  <div className="flex flex-col gap-2">\n    <Skeleton className="h-4 w-[100px]" />\n    <Skeleton className="h-10 w-full rounded-lg" />\n  </div>\n  <Skeleton className="h-10 w-[120px] rounded-lg" />\n</div>',
+          details: "Form skeletons use Plex UI control sizing (32px height for inputs and buttons)."
+        },
+        {
+          name: "Table",
+          code: '<div className="flex flex-col gap-2 w-[400px]">\n  <div className="flex gap-4 pb-2 border-b border-default">\n    <Skeleton className="h-4 w-[100px]" />\n    <Skeleton className="h-4 w-[150px]" />\n    <Skeleton className="h-4 w-[80px]" />\n  </div>\n  {Array.from({ length: 4 }).map((_, i) => (\n    <div key={i} className="flex gap-4 py-2">\n      <Skeleton className="h-4 w-[100px]" />\n      <Skeleton className="h-4 w-[150px]" />\n      <Skeleton className="h-4 w-[80px]" />\n    </div>\n  ))}\n</div>',
+          details: "Table skeletons show header and row structure while data loads."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/skeleton"
+    },
+    {
+      slug: "slider",
+      name: "Slider",
+      description: "Fine-tune values within a set range",
+      importPath: "@plexui/ui/components/Slider",
+      exports: [
+        "Slider"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "number | number[]",
+          description: "Current value; array when range is true"
+        },
+        {
+          name: "min",
+          type: "number",
+          description: "Minimum value"
+        },
+        {
+          name: "max",
+          type: "number",
+          description: "Maximum value"
+        },
+        {
+          name: "step",
+          type: "number",
+          description: "Step increment"
+        },
+        {
+          name: "range",
+          type: "boolean",
+          default: "false",
+          description: "Enable multi-thumb range mode"
+        },
+        {
+          name: "orientation",
+          type: '"horizontal" | "vertical"',
+          default: '"horizontal"',
+          description: "Layout direction of the slider"
+        },
+        {
+          name: "resetValue",
+          type: "number",
+          description: "Value for reset option (single mode only)"
+        },
+        {
+          name: "unit",
+          type: "string",
+          description: "Unit displayed (e.g. ms, px)"
+        },
+        {
+          name: "prefixUnit",
+          type: "string",
+          description: "Unit displayed before the value (e.g. $)"
+        },
+        {
+          name: "label",
+          type: "ReactNode",
+          description: "Label (string or JSX)"
+        },
+        {
+          name: "marks",
+          type: "Array<{ value: number, label: string }>",
+          description: "Marks below track (horizontal only)"
+        },
+        {
+          name: "onChange",
+          type: "(value: number | number[]) => void",
+          description: "Change handler; receives array when range is true"
+        },
+        {
+          name: "minStepsBetweenThumbs",
+          type: "number",
+          description: "Minimum steps between thumbs (range mode only)"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable slider"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [value, setValue] = useState(1000)\n<Slider\n  label="Example field"\n  min={0}\n  max={2000}\n  resetValue={1000}\n  step={10}\n  unit="ms"\n  value={value}\n  onChange={setValue}\n/>'
+        },
+        {
+          name: "Adding a tooltip",
+          code: '<Slider\n  label={\n    <Tooltip content="More details about this field">\n      <Tooltip.TriggerDecorator>Example field</Tooltip.TriggerDecorator>\n    </Tooltip>\n  }\n  value={value}\n  onChange={setValue}\n  ...\n/>',
+          details: "A tooltip can easily be added to the Slider label by providing JSX instead of a simple string."
+        },
+        {
+          name: "Marks",
+          code: '<Slider\n  value={value}\n  onChange={setValue}\n  label="Passing grade"\n  min={1}\n  max={5}\n  step={1}\n  marks={[\n    { value: 1, label: "1" },\n    { value: 2, label: "2" },\n    ...\n  ]}\n  trackColor="#61C454"\n  rangeColor="#EF4146"\n/>',
+          details: "Slider marks can be easily added by passing an array of values to the marks prop. Responsive behaviors are handled automatically."
+        },
+        {
+          name: "Range",
+          code: 'const [value, setValue] = useState([25, 75])\n<Slider\n  range\n  label="Price range"\n  min={0}\n  max={100}\n  step={1}\n  value={value}\n  onChange={setValue}\n  prefixUnit="$"\n/>',
+          details: "Set range to enable a dual-thumb slider for selecting a value range. The value and onChange props accept arrays instead of single numbers."
+        },
+        {
+          name: "Multiple thumbs",
+          code: 'const [value, setValue] = useState([10, 40, 70])\n<Slider\n  range\n  label="Breakpoints"\n  min={0}\n  max={100}\n  step={1}\n  value={value}\n  onChange={setValue}\n  minStepsBetweenThumbs={5}\n/>',
+          details: "Pass three or more values to create a multi-thumb slider. Use minStepsBetweenThumbs to enforce minimum spacing between thumbs."
+        },
+        {
+          name: "Vertical",
+          code: '<Slider\n  label="Volume"\n  min={0}\n  max={100}\n  step={1}\n  value={value}\n  onChange={setValue}\n  orientation="vertical"\n/>',
+          details: 'Set orientation="vertical" to render a vertical slider. Marks are not supported in vertical orientation.'
+        },
+        {
+          name: "Disabled",
+          code: '<Slider\n  label="Disabled"\n  min={0}\n  max={100}\n  step={1}\n  value={50}\n  onChange={() => {}}\n  disabled\n/>',
+          details: "Set disabled to prevent interaction with the slider."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/slider"
+    },
+    {
+      slug: "stat-card",
+      name: "StatCard",
+      description: "Display key metrics and KPIs with trend indicators",
+      importPath: "@plexui/ui/components/StatCard",
+      exports: [
+        "StatCard"
+      ],
+      props: [
+        {
+          name: "description",
+          type: "string",
+          description: "Subtitle below the value"
+        },
+        {
+          name: "trend",
+          type: "{ value: number; label?: string }",
+          description: "Trend indicator with percentage"
+        },
+        {
+          name: "invertTrend",
+          type: "boolean",
+          default: "false",
+          description: "Invert trend colors (positive = bad)"
+        },
+        {
+          name: "trendPosition",
+          type: '"value" | "header"',
+          default: '"value"',
+          description: "Where the trend indicator is rendered"
+        },
+        {
+          name: "trendVariant",
+          type: '"text" | "badge"',
+          default: '"text"',
+          description: "Render trend as text or badge"
+        },
+        {
+          name: "size",
+          type: '"default" | "sm"',
+          default: '"default"',
+          description: "Card size \u2014 sm for compact analytics layouts"
+        },
+        {
+          name: "icon",
+          type: "ReactNode",
+          description: "Icon displayed on the left with a soft background"
+        },
+        {
+          name: "sparkline",
+          type: "ReactNode",
+          description: "Chart rendered at the bottom"
+        },
+        {
+          name: "progress",
+          type: "number",
+          description: "Progress bar value (0-100)"
+        },
+        {
+          name: "progressLabel",
+          type: "string",
+          description: "Label next to progress bar"
+        },
+        {
+          name: "tooltip",
+          type: "string",
+          description: "Shows an info icon next to the label with tooltip text"
+        },
+        {
+          name: "variant",
+          type: '"default" | "accent"',
+          default: '"default"',
+          description: "Visual variant"
+        },
+        {
+          name: "accentColor",
+          type: '"primary" | "secondary" | "danger" | "info" | "discovery" | "success" | "caution" | "warning"',
+          default: '"primary"',
+          description: "Left border color (accent variant)"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [size, setSize] = useState("default")\nconst [variant, setVariant] = useState("default")\nconst [trendPosition, setTrendPosition] = useState("value")\nconst [trendVariant, setTrendVariant] = useState("text")\nconst [showTrend, setShowTrend] = useState(true)\nconst [showTooltip, setShowTooltip] = useState(false)\nconst [invertTrend, setInvertTrend] = useState(false)\n\n<StatCard\n  label="Total Revenue"\n  value="$45,231"\n  size={size}\n  variant={variant}\n  trendPosition={trendPosition}\n  trendVariant={trendVariant}\n  trend={showTrend ? { value: 12.5, label: "vs last month" } : undefined}\n  tooltip={showTooltip ? "Sum of all revenue streams" : undefined}\n  invertTrend={invertTrend}\n/>',
+          details: "Dashboard-ready stat cards with trends, icons, and progress bars. Use the controls below to explore all available props."
+        },
+        {
+          name: "Sizes",
+          code: '<div className="flex flex-col gap-6">\n  {/* Default size */}\n  <div className="grid grid-cols-3 gap-4">\n    <StatCard label="Total Revenue" value="$45,231" trend={{ value: 12.5 }} />\n    <StatCard label="Active Users" value="2,847" trend={{ value: 8.2 }} />\n    <StatCard label="Conversion Rate" value="3.24%" trend={{ value: -1.8 }} />\n  </div>\n  {/* Small size */}\n  <div className="grid grid-cols-3 gap-3">\n    <StatCard size="sm" label="Total Inquiries" value="3,544" trend={{ value: -2.6 }} tooltip="Total inquiries in period" />\n    <StatCard size="sm" label="Completion Rate" value="89.2%" trend={{ value: 0.5 }} tooltip="Average across templates" />\n    <StatCard size="sm" label="Approval Rate" value="84.6%" trend={{ value: 1.8 }} tooltip="Average across templates" />\n  </div>\n</div>',
+          details: 'Use size="sm" for compact analytics rows with denser spacing and smaller typography. The small size also pairs well with the tooltip prop for info icons.'
+        },
+        {
+          name: "Trend position",
+          code: '<div className="grid grid-cols-2 gap-4" style={{ maxWidth: 480 }}>\n  <StatCard label="Revenue" value="$45,231" trend={{ value: 12.5 }} trendPosition="value" />\n  <StatCard label="Revenue" value="$45,231" trend={{ value: 12.5 }} trendPosition="header" />\n</div>',
+          details: "Control where the trend appears: next to the value (default) or right-aligned in the header row."
+        },
+        {
+          name: "Trend variant",
+          code: '<div className="grid grid-cols-2 gap-4" style={{ maxWidth: 480 }}>\n  <StatCard label="Users" value="2,847" trend={{ value: 8.2 }} trendVariant="text" />\n  <StatCard label="Users" value="2,847" trend={{ value: 8.2 }} trendVariant="badge" />\n</div>',
+          details: "Display the trend as plain text or wrapped in a badge."
+        },
+        {
+          name: "Info tooltip",
+          code: '<StatCard label="Avg Completion Rate" value="89.2%" trend={{ value: 0.5 }} tooltip="Percentage of inquiries reaching final state" />',
+          details: "Pass a tooltip string to render an info icon next to the label with a tooltip on hover."
+        },
+        {
+          name: "With icon",
+          code: 'import { DollarCircle, Users, ShoppingBag } from "@plexui/ui/components/Icon"\n\n{/* Default size */}\n<div className="grid grid-cols-2 gap-4">\n  <StatCard icon={<DollarCircle />} label="Total Revenue" value="$45,231" trend={{ value: 12.5 }} />\n  <StatCard icon={<Users />} label="Active Users" value="2,847" trend={{ value: 8.2 }} />\n</div>\n\n{/* Small size */}\n<div className="grid grid-cols-3 gap-3">\n  <StatCard size="sm" icon={<DollarCircle />} label="Revenue" value="$45,231" trend={{ value: 12.5 }} />\n  <StatCard size="sm" icon={<Users />} label="Users" value="2,847" trend={{ value: 8.2 }} />\n  <StatCard size="sm" icon={<ShoppingBag />} label="Orders" value="1,234" trend={{ value: -3.1 }} />\n</div>',
+          details: "Pass an icon to display it on the left side with a soft background. The layout automatically switches to a horizontal icon + content arrangement. Works with both default and sm sizes."
+        },
+        {
+          name: "With progress",
+          code: '<StatCard label="Storage Used" value="7.2 GB" progress={72} progressLabel="72%" description="of 10 GB" />',
+          details: "Progress bars show a visual representation of completion or usage percentage."
+        },
+        {
+          name: "Accent border",
+          code: 'const [accentColor, setAccentColor] = useState("primary")\n\n<StatCard\n  label="Total Revenue"\n  value="$45,231"\n  variant="accent"\n  accentColor={accentColor}\n  trend={{ value: 12.5, label: "vs last month" }}\n/>',
+          details: "The accent variant adds a colored left border. Choose from six semantic colors."
+        },
+        {
+          name: "Inverted trend",
+          code: 'const [invertTrend, setInvertTrend] = useState(true)\n\n<StatCard\n  label="Avg Response Time"\n  value="234ms"\n  trend={{ value: 15.3, label: "vs last hour" }}\n  invertTrend={invertTrend}\n/>',
+          details: "Use invertTrend for metrics where positive values are bad (e.g., error rate, response time). Toggle the switch to see the color flip."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/stat-card"
+    },
+    {
+      slug: "switch",
+      name: "Switch",
+      description: "Toggle control for on and off states",
+      importPath: "@plexui/ui/components/Switch",
+      exports: [
+        "Switch"
+      ],
+      props: [
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controlled state"
+        },
+        {
+          name: "defaultChecked",
+          type: "boolean",
+          description: "Initial state (uncontrolled)"
+        },
+        {
+          name: "onCheckedChange",
+          type: "(next: boolean) => void",
+          description: "Called when toggled"
+        },
+        {
+          name: "label",
+          type: "ReactNode",
+          description: "Accessible label rendered next to the switch"
+        },
+        {
+          name: "description",
+          type: "ReactNode",
+          description: "Secondary text below the label, linked via aria-describedby"
+        },
+        {
+          name: "labelPosition",
+          type: '"start" | "end"',
+          default: '"end"',
+          description: "Label on left (start) or right (end)"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Prevent interaction"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          description: "Required for form submission"
+        },
+        {
+          name: "name",
+          type: "string",
+          description: "Form field name"
+        },
+        {
+          name: "value",
+          type: "string",
+          description: "Value when submitted"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "CSS classes applied to wrapper node"
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "The id of the switch element"
+        }
+      ],
+      examples: [
+        {
+          name: "Base",
+          code: "<Switch />"
+        },
+        {
+          name: "With label",
+          code: '<Switch label="Notifications" />',
+          details: "Add a label using the label prop. The label is automatically connected to the switch via id."
+        },
+        {
+          name: "With description",
+          code: '<Switch\n  label="Disable user API keys"\n  description="Disable user-based API keys across your entire organization."\n/>',
+          details: "Add a description below the label for additional context. Linked to the switch via aria-describedby."
+        },
+        {
+          name: "Label position",
+          code: '<Switch label="Right aligned" labelPosition="start" />',
+          details: `Set {'labelPosition="start"'} to place the label on the left side of the switch control.`
+        },
+        {
+          name: "Label position with description",
+          code: '<Switch\n  label="Dark mode"\n  description="Use dark theme across the entire application."\n  labelPosition="start"\n/>',
+          details: `The description follows the label position \u2014 both move together when {'labelPosition="start"'} is set.`
+        },
+        {
+          name: "Default checked",
+          code: '<Switch label="Enable notifications" name="notifications" defaultChecked />',
+          details: "Initialize the switch with defaultChecked when you don't need to control its state. Use the name prop to read the value on form submission."
+        },
+        {
+          name: "Controlled",
+          code: 'const [checked, setChecked] = useState(false)\n<Switch label="Airplane mode" checked={checked} onCheckedChange={setChecked} />',
+          details: "Pass checked and onCheckedChange to manage the state in a controlled manner."
+        },
+        {
+          name: "Disabled",
+          code: '<div className="flex gap-6">\n  <Switch disabled />\n  <Switch disabled checked />\n</div>',
+          details: "Use disabled to prevent the user from toggling the control."
+        },
+        {
+          name: "Disabled with label",
+          code: '<div className="flex flex-col gap-4">\n  <Switch label="Notifications" disabled />\n  <Switch label="Notifications" disabled defaultChecked />\n</div>',
+          details: "Disabled state works with labels \u2014 both the toggle and the label show a not-allowed cursor."
+        },
+        {
+          name: "Disabled with description",
+          code: '<div className="flex flex-col gap-4">\n  <Switch\n    label="Enable SSO"\n    description="Requires an Enterprise plan to configure."\n    disabled\n  />\n  <Switch\n    label="Two-factor authentication"\n    description="Enforced by organization policy."\n    disabled\n    defaultChecked\n  />\n</div>',
+          details: "Combine disabled with label and description for read-only settings that need explanation."
+        },
+        {
+          name: "With Field",
+          code: '<Field label="Marketing emails" orientation="horizontal">\n  {(fieldProps) => (\n    <Switch id={fieldProps.id} checked={enabled} onCheckedChange={setEnabled} />\n  )}\n</Field>',
+          details: 'Pair a Switch with Field using orientation="horizontal" for inline toggle settings.'
+        },
+        {
+          name: "With Field and description",
+          code: '<Field\n  label="Access Control"\n  description="Disable user-based API keys across your entire organization. You can also choose to disable them on a project-by-project basis if needed."\n>\n  {(fieldProps) => (\n    <Switch\n      id={fieldProps.id}\n      label="Disable user API keys"\n      checked={enabled}\n      onCheckedChange={setEnabled}\n    />\n  )}\n</Field>',
+          details: "Use Field with description for the settings pattern with a section heading, description, and a labeled switch underneath."
+        },
+        {
+          name: "Settings panel",
+          code: '<div className="flex w-full max-w-lg flex-col gap-8">\n  <Switch\n    label="Enable custom providers for evals"\n    description="Allow eval runs to use third-party models you configure under Custom model providers."\n  />\n  <Switch\n    label="Enable OpenRouter models"\n    description="Make OpenRouter models available for evaluation runs."\n  />\n  <Switch\n    label="Disable user API keys"\n    description="Disable user-based API keys across your entire organization."\n    defaultChecked\n  />\n</div>',
+          details: "Combine label and description to build settings-style toggle panels."
+        },
+        {
+          name: "Grouped sections",
+          code: '<div className="w-full max-w-lg divide-y divide-alpha/15">\n  <div className="pb-5">\n    <Field label="Notifications" description="Configure how you receive notifications.">\n      {() => (\n        <div className="flex flex-col gap-4">\n          <Switch\n            label="Push notifications"\n            description="Receive push notifications on your devices."\n            defaultChecked\n          />\n          <Switch\n            label="Email notifications"\n            description="Get notified via email for important updates."\n          />\n        </div>\n      )}\n    </Field>\n  </div>\n  <div className="pt-5">\n    <Field label="Privacy" description="Control your data sharing preferences.">\n      {() => (\n        <div className="flex flex-col gap-4">\n          <Switch\n            label="Share usage data"\n            description="Help us improve by sharing anonymous usage statistics."\n          />\n          <Switch\n            label="Personalized content"\n            description="Allow personalized recommendations based on your activity."\n            defaultChecked\n          />\n        </div>\n      )}\n    </Field>\n  </div>\n</div>',
+          details: "Use dividers to separate switch groups into logical sections. Each section can be wrapped in a Field with its own label and description."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/switch"
+    },
+    {
+      slug: "table",
+      name: "Table",
+      description: "Styled HTML table primitives and a full-featured data table powered by TanStack Table v8",
+      importPath: "@plexui/ui/components/Table",
+      exports: [
+        "Table",
+        "TableHeader",
+        "TableBody",
+        "TableRow",
+        "TableHead",
+        "TableCell"
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const invoices = [\n  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },\n  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },\n  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },\n  { invoice: "INV004", status: "Paid", method: "Credit Card", amount: "$450.00" },\n  { invoice: "INV005", status: "Paid", method: "PayPal", amount: "$550.00" },\n]\n\n<Table>\n  <TableCaption>A list of your recent invoices.</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Invoice</TableHead>\n      <TableHead>Status</TableHead>\n      <TableHead>Method</TableHead>\n      <TableHead className="text-right">Amount</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {invoices.map((invoice) => (\n      <TableRow key={invoice.invoice}>\n        <TableCell className="font-medium">{invoice.invoice}</TableCell>\n        <TableCell>{invoice.status}</TableCell>\n        <TableCell>{invoice.method}</TableCell>\n        <TableCell className="text-right">{invoice.amount}</TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colSpan={3}>Total</TableCell>\n      <TableCell className="text-right">$1,750.00</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>',
+          details: "A complete table with header, body, footer, and caption showing invoice data."
+        },
+        {
+          name: "With footer",
+          code: '<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Product</TableHead>\n      <TableHead className="text-right">Qty</TableHead>\n      <TableHead className="text-right">Price</TableHead>\n      <TableHead className="text-right">Total</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell className="font-medium">Pro Plan</TableCell>\n      <TableCell className="text-right">3</TableCell>\n      <TableCell className="text-right">$29.00</TableCell>\n      <TableCell className="text-right">$87.00</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell className="font-medium">Storage Add-on</TableCell>\n      <TableCell className="text-right">1</TableCell>\n      <TableCell className="text-right">$9.00</TableCell>\n      <TableCell className="text-right">$9.00</TableCell>\n    </TableRow>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colSpan={3}>Subtotal</TableCell>\n      <TableCell className="text-right font-semibold">$96.00</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>',
+          details: "A table with a footer row displaying subtotal information."
+        },
+        {
+          name: "Minimal",
+          code: 'const people = [\n  { name: "Lindsay Walton", title: "Front-end Developer", email: "lindsay@example.com" },\n  { name: "Courtney Henry", title: "Designer", email: "courtney@example.com" },\n  { name: "Tom Cook", title: "Director of Product", email: "tom@example.com" },\n]\n\n<Table>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Name</TableHead>\n      <TableHead>Title</TableHead>\n      <TableHead>Email</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    {people.map((person) => (\n      <TableRow key={person.email}>\n        <TableCell className="font-medium">{person.name}</TableCell>\n        <TableCell>{person.title}</TableCell>\n        <TableCell>{person.email}</TableCell>\n      </TableRow>\n    ))}\n  </TableBody>\n</Table>',
+          details: "A simple table without caption or footer, showing a list of people."
+        },
+        {
+          name: "Variant",
+          code: '<DataTable\n  columns={columns}\n  data={users}\n  variant="bordered"\n/>',
+          details: 'Use variant="bordered" for a card-like table with a rounded border and tinted header background.'
+        },
+        {
+          name: "Sorting",
+          code: 'const columns: ColumnDef<User>[] = [\n  {\n    accessorKey: "name",\n    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,\n  },\n  {\n    accessorKey: "role",\n    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,\n  },\n]\n\n<DataTable columns={columns} data={users} initialSorting={[{ id: "name", desc: false }]} />',
+          details: "Click column headers to toggle sort direction. Columns use DataTableColumnHeader for sort controls."
+        },
+        {
+          name: "Pagination",
+          code: 'const columns: ColumnDef<User>[] = [\n  { accessorKey: "id", header: "ID" },\n  { accessorKey: "name", header: "Name" },\n  { accessorKey: "department", header: "Department" },\n]\n\n<DataTable columns={columns} data={users} pageSize={5} />',
+          details: "Automatic pagination with rows-per-page selector and navigation controls. Set pageSize to control initial page size."
+        },
+        {
+          name: "Row click",
+          code: 'const [selected, setSelected] = useState<User | null>(null)\n\n<>\n  <DataTable columns={columns} data={users} onRowClick={setSelected} />\n  <p>{selected ? "Clicked: " + selected.name : "Click a row to select it."}</p>\n</>',
+          details: "Pass onRowClick to make rows clickable and interactive."
+        },
+        {
+          name: "Cell variants",
+          code: 'import { idCell, statusCell, dateTimeCell } from "@plexui/ui/components/DataTable"\n\nconst columns: ColumnDef<User>[] = [\n  { accessorKey: "id", header: "ID", cell: idCell<User>((row) => row.id) },\n  { accessorKey: "status", header: "Status", cell: statusCell<User>((row) => row.status) },\n  { accessorKey: "joined", header: "Joined", cell: dateTimeCell<User>((row) => row.joined) },\n]',
+          details: "Use column helper utilities for rich cell types: monospace IDs with copy-on-click, status badges, formatted dates, and currency values."
+        },
+        {
+          name: "Filtering",
+          code: 'const [globalFilter, setGlobalFilter] = useState("")\n\n<>\n  <Input value={globalFilter} onChange={(event) => setGlobalFilter(event.target.value)} />\n  <DataTable\n    columns={columns}\n    data={users}\n    globalFilter={globalFilter}\n    onGlobalFilterChange={setGlobalFilter}\n  />\n</>',
+          details: "Control search with globalFilter and onGlobalFilterChange. The filter searches across all columns."
+        },
+        {
+          name: "Column visibility",
+          code: "const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({\n  email: true,\n  role: true,\n})\n\n<DataTable\n  columns={columns}\n  data={users}\n  columnVisibility={columnVisibility}\n  onColumnVisibilityChange={setColumnVisibility}\n/>",
+          details: "Toggle column visibility with the columnVisibility and onColumnVisibilityChange props."
+        },
+        {
+          name: "Empty state",
+          code: '<DataTable columns={columns} data={[]} emptyMessage="No users found." />',
+          details: "Customize the empty state message with the emptyMessage prop."
+        }
+      ],
+      subComponents: [
+        {
+          name: "Table Primitives",
+          props: [
+            {
+              name: "Table",
+              type: "table",
+              description: "Root table container with horizontal scroll wrapper"
+            },
+            {
+              name: "TableHeader",
+              type: "thead",
+              description: "Table header group"
+            },
+            {
+              name: "TableBody",
+              type: "tbody",
+              description: "Table body group"
+            },
+            {
+              name: "TableFooter",
+              type: "tfoot",
+              description: "Table footer group"
+            },
+            {
+              name: "TableRow",
+              type: "tr",
+              description: "Table row"
+            },
+            {
+              name: "TableHead",
+              type: "th",
+              description: "Table header cell"
+            },
+            {
+              name: "TableCell",
+              type: "td",
+              description: "Table data cell"
+            },
+            {
+              name: "TableCaption",
+              type: "caption",
+              description: "Table caption"
+            }
+          ]
+        },
+        {
+          name: "DataTable",
+          props: [
+            {
+              name: "variant",
+              type: '"default" | "bordered"',
+              default: '"default"',
+              description: "Visual variant \u2014 bordered adds a rounded border and tinted header"
+            },
+            {
+              name: "pageSize",
+              type: "number",
+              default: "10",
+              description: "Rows per page. Set 0 or Infinity to disable pagination"
+            },
+            {
+              name: "initialSorting",
+              type: "SortingState",
+              description: "Initial column sorting state"
+            },
+            {
+              name: "globalFilter",
+              type: "string",
+              description: "Controlled search/filter string"
+            },
+            {
+              name: "onGlobalFilterChange",
+              type: "(value: string) => void",
+              description: "Callback when filter changes"
+            },
+            {
+              name: "onRowClick",
+              type: "(row: TData) => void",
+              description: "Click handler for rows, makes rows interactive"
+            },
+            {
+              name: "columnVisibility",
+              type: "VisibilityState",
+              description: "Controlled column visibility state"
+            },
+            {
+              name: "onColumnVisibilityChange",
+              type: "(visibility: VisibilityState) => void",
+              description: "Callback when visibility changes"
+            },
+            {
+              name: "enableRowSelection",
+              type: "boolean",
+              default: "false",
+              description: "Enable row selection checkboxes"
+            },
+            {
+              name: "rowSelection",
+              type: "RowSelectionState",
+              description: "Controlled row selection state"
+            },
+            {
+              name: "onRowSelectionChange",
+              type: "(selection: RowSelectionState) => void",
+              description: "Callback when selection changes"
+            },
+            {
+              name: "getRowId",
+              type: "(row: TData) => string",
+              description: "Custom row ID accessor"
+            },
+            {
+              name: "emptyMessage",
+              type: "ReactNode",
+              default: '"No results."',
+              description: "Shown when no rows"
+            },
+            {
+              name: "showPagination",
+              type: "boolean",
+              default: "true",
+              description: "Whether to show pagination controls"
+            },
+            {
+              name: "className",
+              type: "string",
+              description: "Class applied to outermost wrapper"
+            }
+          ]
+        },
+        {
+          name: "DataTableColumnHeader",
+          props: []
+        },
+        {
+          name: "Column helpers",
+          props: [
+            {
+              name: "idCell(accessor)",
+              type: "CellComponent",
+              description: "Monospace ID with copy-on-click tooltip"
+            },
+            {
+              name: "dateTimeCell(accessor, options?)",
+              type: "CellComponent",
+              description: "Formatted datetime with Intl.DateTimeFormat"
+            },
+            {
+              name: "statusCell(accessor, colorMap?)",
+              type: "CellComponent",
+              description: "Badge cell with automatic status-to-color mapping"
+            },
+            {
+              name: "tooltipHeader(label, description)",
+              type: "HeaderComponent",
+              description: "Header with dashed underline and info tooltip"
+            }
+          ]
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/table"
+    },
+    {
+      slug: "tabs",
+      name: "Tabs",
+      description: "Toggle through grouped options with segmented or underline styles",
+      importPath: "@plexui/ui/components/Tabs",
+      exports: [
+        "Tabs"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "string",
+          description: "Selected tab value (controlled)"
+        },
+        {
+          name: "onChange",
+          type: "(value: string) => void",
+          description: "Called when selection changes"
+        },
+        {
+          name: "variant",
+          type: '"segmented" | "underline"',
+          default: '"segmented"',
+          description: "Visual style \u2014 segmented (background highlight) or underline (line indicator)"
+        },
+        {
+          name: "orientation",
+          type: '"horizontal" | "vertical"',
+          default: '"horizontal"',
+          description: "Layout direction of the tab group"
+        },
+        {
+          name: "size",
+          type: "ControlSize",
+          default: '"md"',
+          description: "Control height (3xs through 3xl)"
+        },
+        {
+          name: "gutterSize",
+          type: "string",
+          description: "Horizontal padding of tabs"
+        },
+        {
+          name: "pill",
+          type: "boolean",
+          default: "true",
+          description: "Fully rounded control (segmented variant only)"
+        },
+        {
+          name: "flush",
+          type: "boolean",
+          default: "false",
+          description: "Text-width indicator, no border, gap spacing (underline variant only)"
+        },
+        {
+          name: "block",
+          type: "boolean",
+          default: "false",
+          description: "Full-width control with equal-width tabs"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable all tabs"
+        },
+        {
+          name: "aria-label",
+          type: "string",
+          description: "Accessible name (required)"
+        },
+        {
+          name: "icon",
+          type: "ReactNode",
+          description: "Icon element (sized automatically)"
+        },
+        {
+          name: "badge",
+          type: "number | { content: ReactNode; color?: string; variant?: string }",
+          description: "Badge/count or custom badge config"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: 'const [tab, setTab] = useState("overview")\n<Tabs value={tab} onChange={setTab} variant="underline" aria-label="Sections">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports">Reports</Tabs.Tab>\n</Tabs>',
+          details: "Tabs provides two visual variants: segmented (default) with a sliding background highlight, and underline with an animated line indicator. Both support horizontal and vertical orientations."
+        },
+        {
+          name: "Segmented with icons",
+          code: '<Tabs size="lg" value={tab} onChange={setTab} aria-label="Navigation">\n  <Tabs.Tab value="home" icon={<Home />}>Home</Tabs.Tab>\n  <Tabs.Tab value="settings" icon={<SettingsCog />}>Settings</Tabs.Tab>\n  <Tabs.Tab value="notifications" icon={<Bell />}>Notifications</Tabs.Tab>\n</Tabs>',
+          details: "Icons work with the segmented variant \u2014 use the icon prop on individual tabs. Icons are automatically sized to match the current size."
+        },
+        {
+          name: "Segmented with badge",
+          code: '<Tabs size="lg" value={tab} onChange={setTab} aria-label="Filter">\n  <Tabs.Tab value="all" badge={128}>All</Tabs.Tab>\n  <Tabs.Tab value="unread" badge={{ content: 12, color: "info" }}>Unread</Tabs.Tab>\n  <Tabs.Tab value="flagged" badge={{ content: 3, color: "danger" }}>Flagged</Tabs.Tab>\n</Tabs>',
+          details: "Pass a number or an object with content, color, and variant to the badge prop. Badges render inline after the tab label inside the segmented container."
+        },
+        {
+          name: "Underline",
+          code: '<Tabs variant="underline" value={tab} onChange={setTab} aria-label="Sections">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports">Reports</Tabs.Tab>\n  <Tabs.Tab value="settings">Settings</Tabs.Tab>\n</Tabs>',
+          details: 'Set variant="underline" for a minimal tab style with an animated line indicator under the active tab. No background container is rendered.'
+        },
+        {
+          name: "Underline flush",
+          code: '<Tabs variant="underline" flush value={tab} onChange={setTab} aria-label="Sections">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports">Reports</Tabs.Tab>\n  <Tabs.Tab value="settings">Settings</Tabs.Tab>\n</Tabs>',
+          details: 'Add flush with variant="underline" for minimal tabs where the indicator matches the text width exactly. No container border is rendered, and spacing between tabs uses gap instead of padding.'
+        },
+        {
+          name: "Underline block",
+          code: '<Tabs variant="underline" block value={tab} onChange={setTab} aria-label="Sections">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports">Reports</Tabs.Tab>\n</Tabs>',
+          details: "Use block with the underline variant for full-width tabs that stretch evenly across the container."
+        },
+        {
+          name: "Underline with icons",
+          code: '<Tabs variant="underline" size="lg" value={tab} onChange={setTab} aria-label="Navigation">\n  <Tabs.Tab value="home" icon={<Home />}>Home</Tabs.Tab>\n  <Tabs.Tab value="settings" icon={<SettingsCog />}>Settings</Tabs.Tab>\n  <Tabs.Tab value="notifications" icon={<Bell />}>Notifications</Tabs.Tab>\n</Tabs>',
+          details: "Icons work with the underline variant the same way as with segmented. Use the icon prop on individual tabs."
+        },
+        {
+          name: "Underline with badge",
+          code: '<Tabs variant="underline" size="lg" value={tab} onChange={setTab} aria-label="Filter">\n  <Tabs.Tab value="all" badge={128}>All</Tabs.Tab>\n  <Tabs.Tab value="unread" badge={{ content: 12, color: "info" }}>Unread</Tabs.Tab>\n  <Tabs.Tab value="flagged" badge={{ content: 3, color: "danger" }}>Flagged</Tabs.Tab>\n</Tabs>',
+          details: "Badges are supported with the underline variant. Pass a simple value or an object with content, color, and variant."
+        },
+        {
+          name: "Vertical segmented",
+          code: '<Tabs orientation="vertical" value={tab} onChange={setTab} aria-label="Settings">\n  <Tabs.Tab value="account">Account</Tabs.Tab>\n  <Tabs.Tab value="password">Password</Tabs.Tab>\n  <Tabs.Tab value="notifications">Notifications</Tabs.Tab>\n  <Tabs.Tab value="display">Display</Tabs.Tab>\n</Tabs>',
+          details: 'Set orientation="vertical" to stack tabs vertically. The sliding thumb animates up and down.'
+        },
+        {
+          name: "Vertical underline",
+          code: '<Tabs variant="underline" orientation="vertical" value={tab} onChange={setTab} aria-label="Settings">\n  <Tabs.Tab value="account">Account</Tabs.Tab>\n  <Tabs.Tab value="password">Password</Tabs.Tab>\n  <Tabs.Tab value="notifications">Notifications</Tabs.Tab>\n  <Tabs.Tab value="display">Display</Tabs.Tab>\n</Tabs>',
+          details: 'Combine variant="underline" with orientation="vertical" for a sidebar-style navigation pattern. The line indicator appears on the left side.'
+        },
+        {
+          name: "Vertical underline with icons",
+          code: '<Tabs variant="underline" orientation="vertical" size="lg" value={tab} onChange={setTab} aria-label="Navigation">\n  <Tabs.Tab value="home" icon={<Home />}>Home</Tabs.Tab>\n  <Tabs.Tab value="settings" icon={<SettingsCog />}>Settings</Tabs.Tab>\n  <Tabs.Tab value="notifications" icon={<Bell />}>Notifications</Tabs.Tab>\n</Tabs>',
+          details: "Vertical underline tabs with icons provide a rich navigation experience commonly used in settings or admin panels."
+        },
+        {
+          name: "Disabled tab",
+          code: '<Tabs variant="underline" value={tab} onChange={setTab} aria-label="Sections">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n  <Tabs.Tab value="reports" disabled>Reports</Tabs.Tab>\n  <Tabs.Tab value="settings">Settings</Tabs.Tab>\n</Tabs>',
+          details: "Use disabled on individual Tabs.Tab elements to prevent interaction. Disabled tabs appear dimmed and cannot be selected."
+        },
+        {
+          name: "Sizing",
+          code: '<Tabs variant="underline" size="lg" value={tab} onChange={setTab} aria-label="Demo">\n  <Tabs.Tab value="overview">Overview</Tabs.Tab>\n  <Tabs.Tab value="analytics">Analytics</Tabs.Tab>\n</Tabs>',
+          details: "Both variants support the full 9-step size scale. The size prop controls the height, font size, icon size, and spacing of tabs."
+        },
+        {
+          name: "Scrollable",
+          code: '<div className="max-w-[400px] flex">\n  <Tabs value={tab} onChange={setTab} aria-label="Scrollable tabs">\n    <Tabs.Tab value="1">Overview</Tabs.Tab>\n    <Tabs.Tab value="2">Analytics</Tabs.Tab>\n    <Tabs.Tab value="3">Reports</Tabs.Tab>\n    <Tabs.Tab value="4">Settings</Tabs.Tab>\n    <Tabs.Tab value="5">Members</Tabs.Tab>\n    <Tabs.Tab value="6">Billing</Tabs.Tab>\n    <Tabs.Tab value="7">Security</Tabs.Tab>\n    <Tabs.Tab value="8">Integrations</Tabs.Tab>\n  </Tabs>\n</div>',
+          details: "When tabs overflow their container, they automatically become horizontally scrollable. The active tab scrolls into view smoothly. No extra prop is needed \u2014 just constrain the container width."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/tabs"
+    },
+    {
+      slug: "tag-input",
+      name: "Tag Input",
+      description: "Enter multiple unique tags",
+      importPath: "@plexui/ui/components/TagInput",
+      exports: [
+        "TagInput"
+      ],
+      props: [
+        {
+          name: "value",
+          type: "Tag[]",
+          description: "Controlled value"
+        },
+        {
+          name: "defaultValue",
+          type: "Tag[]",
+          description: "Uncontrolled initial tags"
+        },
+        {
+          name: "onChange",
+          type: "(tags: Tag[]) => void",
+          description: "Change handler"
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Input placeholder"
+        },
+        {
+          name: "validator",
+          type: "(value: string) => boolean",
+          description: "Validates each tag; invalid tags shown in red"
+        },
+        {
+          name: "maxTags",
+          type: "number",
+          description: "Max tags before input is disabled"
+        },
+        {
+          name: "rows",
+          type: "number",
+          default: "1",
+          description: "Min rows"
+        },
+        {
+          name: "size",
+          type: "string",
+          default: "xl",
+          description: "Control height when rows=1"
+        },
+        {
+          name: "autoFocus",
+          type: "boolean",
+          default: "false",
+          description: "Focus on mount"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<TagInput\n  placeholder="example@example.com"\n  validator={(email) => /^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(email)}\n  rows={3}\n/>'
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/tag-input"
+    },
+    {
+      slug: "text-link",
+      name: "Text Link",
+      description: "Semantic link for internal and external links",
+      importPath: "@plexui/ui/components/TextLink",
+      exports: [
+        "TextLink"
+      ],
+      props: [
+        {
+          name: "children",
+          type: "ReactNode",
+          description: "Link content"
+        },
+        {
+          name: "href",
+          type: "string",
+          description: "URL"
+        },
+        {
+          name: "to",
+          type: "object",
+          description: "Router link destination (internal)"
+        },
+        {
+          name: "primary",
+          type: "boolean",
+          default: "false",
+          description: "Primary color, no default underline"
+        },
+        {
+          name: "underline",
+          type: "boolean",
+          default: "true",
+          description: "Underline (default true unless primary)"
+        },
+        {
+          name: "forceExternal",
+          type: "boolean",
+          description: "Force external link behavior"
+        },
+        {
+          name: "as",
+          type: "Component",
+          description: "Link component (e.g. Next Link)"
+        }
+      ],
+      examples: [
+        {
+          name: "Overview",
+          code: '<div className="flex gap-4">\n  <TextLink href="#">Read more</TextLink>\n  <TextLink href="#" primary>External link <ArrowUpRight /></TextLink>\n</div>'
+        },
+        {
+          name: "Inline usage",
+          code: '<p>\n  You can use the <TextLink href="#">responses endpoint</TextLink> to generate text.\n  Or use one of the <TextLink href="#">official SDKs</TextLink> for your language.\n</p>'
+        },
+        {
+          name: "Default inheritance",
+          code: '<p className="text-secondary">\n  <TextLink href="#">responses endpoint</TextLink> ... <TextLink href="#">official SDKs</TextLink>\n</p>',
+          details: "By default, TextLink uses currentcolor inheritance and text-decoration: underline to create subtle visual differentiation from surrounding text. The hover effect is a dynamic deemphasis of the currentcolor, with some special cases for text-secondary and text-tertiary contexts.You can see this behavior by changing the text color context of the paragraph the links are in below:"
+        },
+        {
+          name: "Primary color",
+          code: '<TextLink href="#" primary>primary link</TextLink>',
+          details: "You can create a colorful link style with the primary prop, which uses color for visual differentiation.Primary links also remove the default underline treatment - pass underline re-apply that style."
+        },
+        {
+          name: "Underline",
+          code: '<TextLink href="#" underline={false}>subtle link</TextLink>',
+          details: "Links have an underlined aesthetic by default.Pass {'underline={false}'} to remove the underline from the link."
+        },
+        {
+          name: "External links",
+          code: '<TextLink href="#" primary underline>\n  External link <ArrowUpRight />\n</TextLink>',
+          details: `When external paths are provided, {''} will be used with {'target="_blank"'} and {'rel="noopener noreferrer"'} included by default. You can also compose icons along with the text to add visual indication.`
+        },
+        {
+          name: "Font weight",
+          code: '<TextLink href="#" className="font-semibold" underline={false}>\n  Contact support <ArrowRight />\n</TextLink>',
+          details: "Use the className prop to customize font weight."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/text-link"
+    },
+    {
+      slug: "textarea",
+      name: "Textarea",
+      description: "Semantic multi-line text input collection",
+      importPath: "@plexui/ui/components/Textarea",
+      exports: [
+        "Textarea"
+      ],
+      props: [
+        {
+          name: "variant",
+          type: '"outline" | "soft"',
+          default: '"outline"',
+          description: "Visual style of the textarea"
+        },
+        {
+          name: "size",
+          type: '"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"',
+          default: '"md"',
+          description: "Control height for single-line equivalent"
+        },
+        {
+          name: "gutterSize",
+          type: "string",
+          description: "Horizontal padding; defaults from size"
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          default: "false",
+          description: "Disable the textarea"
+        },
+        {
+          name: "invalid",
+          type: "boolean",
+          default: "false",
+          description: "Mark as invalid"
+        },
+        {
+          name: "allowAutofillExtensions",
+          type: "boolean",
+          default: "false",
+          description: "Allow autofill extensions"
+        },
+        {
+          name: "autoSelect",
+          type: "boolean",
+          default: "false",
+          description: "Select all contents when mounted"
+        },
+        {
+          name: "rows",
+          type: "number",
+          default: "3",
+          description: "Initial row count"
+        },
+        {
+          name: "autoResize",
+          type: "boolean",
+          default: "false",
+          description: "Grow/shrink with content"
+        },
+        {
+          name: "maxRows",
+          type: "number",
+          description: "Max rows when autoResize"
+        }
+      ],
+      examples: [
+        {
+          name: "Base",
+          code: '<div className="w-[400px]">\n  <Textarea placeholder="Enter text..." autoResize rows={3} />\n</div>'
+        },
+        {
+          name: "Variants",
+          code: '<Textarea placeholder="Enter text..." variant="outline" className="w-[400px]" /> ... <Textarea placeholder="Enter text..." variant="soft" className="w-[400px]" />',
+          details: "Use variant to stylize the textarea."
+        },
+        {
+          name: "Auto resize",
+          code: 'const [value, setValue] = useState("Line 1\\\\nLine 2\\\\nLine 3")\n<div className="w-[400px]">\n  <Textarea value={value} onChange={(e) => setValue(e.target.value)} placeholder="Type to grow..." autoResize rows={3} maxRows={8} />\n</div>',
+          details: "Enable autoResize to automatically grow/shrink the textarea as the user types. Control the bounds with rows (initial height) and maxRows."
+        },
+        {
+          name: "Sizing",
+          code: '<div className="flex flex-col gap-2.5 justify-start items-start w-[400px]">\n  <Textarea placeholder="Write a message..." size="lg" />\n</div>',
+          details: "Sizing of the textarea is controlled with size and gutterSize props. size sets the textarea to a specific control height for single-line equivalent, and gutterSize sets the horizontal padding.Each size provides default values for gutterSize, as well as font-size and border-radius. Each of these values can be overridden independently."
+        },
+        {
+          name: "Disabled",
+          code: '<div className="w-[400px]">\n  <Textarea disabled defaultValue="Jane Doe" />\n</div>',
+          details: "Use the disabled prop to disable the textarea, greying it out and preventing user interactions."
+        },
+        {
+          name: "Invalid",
+          code: '<div className="w-[400px]">\n  <Textarea invalid placeholder="Invalid textarea" />\n</div>',
+          details: "Use the invalid prop to mark the textarea as invalid. You decide how this state is removed, whether that's through onFocus, onChange, an onSubmit handler, etc.Default visual styles will be applied, based on the variant. Additionally, [data-invalid] is applied to the container for custom styling."
+        },
+        {
+          name: "Auto select text",
+          code: '<div className="w-[400px]">\n  <Textarea defaultValue="Toggle to auto select" autoSelect={false} />\n</div>',
+          details: "Pass autoSelect to select all text in the textarea &ndash; useful when pairing with other copy actions. This prop behaves like an imperative action when toggled and allows selection to change."
+        },
+        {
+          name: "Autofill extensions",
+          code: '<div className="w-[400px]">\n  <Textarea key={String(allowAutofillExtensions)} name="email" placeholder={allowAutofillExtensions ? "Allowed" : "Not allowed"} allowAutofillExtensions={allowAutofillExtensions} />\n</div>',
+          details: "By default, autofill extensions are prevented by Textarea. For the occasions where you want browser extensions to be present, pass allowAutofillExtensions to remove the disabling.When name is passed this value will default to true."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/textarea"
+    },
+    {
+      slug: "tooltip",
+      name: "Tooltip",
+      description: "Brief and informative hover text",
+      importPath: "@plexui/ui/components/Tooltip",
+      exports: [
+        "Tooltip"
+      ],
+      props: [
+        {
+          name: "content",
+          type: "ReactNode",
+          description: "Tooltip content (null = no tooltip)"
+        },
+        {
+          name: "compact",
+          type: "boolean",
+          default: "false",
+          description: "Short 1\u20133 word tooltips, inverse styling"
+        },
+        {
+          name: "interactive",
+          type: "boolean",
+          default: "false",
+          description: "Content is interactive, stays open when hovered"
+        },
+        {
+          name: "openDelay",
+          type: "number",
+          default: "150",
+          description: "Delay before showing (ms)"
+        },
+        {
+          name: "side",
+          type: "string",
+          default: '"top"',
+          description: "Preferred side"
+        },
+        {
+          name: "sideOffset",
+          type: "number",
+          default: "5",
+          description: "Distance from trigger"
+        },
+        {
+          name: "align",
+          type: "string",
+          default: '"center"',
+          description: "Alignment"
+        },
+        {
+          name: "alignOffset",
+          type: "number",
+          default: "0",
+          description: "Alignment offset"
+        },
+        {
+          name: "gutterSize",
+          type: '"sm" | "md" | "lg"',
+          default: '"md"',
+          description: "Content padding"
+        },
+        {
+          name: "contentClassName",
+          type: "string",
+          description: "Class for tooltip content"
+        },
+        {
+          name: "forceOpen",
+          type: "boolean",
+          description: "Force open or closed"
+        }
+      ],
+      examples: [
+        {
+          name: "Base",
+          code: '<Tooltip content="This is additional context that appears when the trigger is hovered or focused">\n  <Tooltip.TriggerDecorator>Simple text with tooltip</Tooltip.TriggerDecorator>\n</Tooltip>'
+        },
+        {
+          name: "Different triggers",
+          code: '<div className="flex items-center gap-4">\n  <Tooltip content="Tooltip on button">\n    <Button color="primary" size="lg">Sample button</Button>\n  </Tooltip>\n  <Tooltip content="Tooltip on span">\n    <span>Inaccessible trigger</span>\n  </Tooltip>\n</div>',
+          details: "Tooltip provides an optional component, Tooltip.TriggerDecorator, to help create accessible tooltip triggers. However, any component can be used as a trigger."
+        },
+        {
+          name: "Conditionally enabled",
+          code: '<Tooltip\n  content={disabled ? "This action is disabled for reasons" : null}\n>\n  <Button color="primary" size="lg" disabled={disabled}>\n    Sample button\n  </Button>\n</Tooltip>',
+          details: "Sometimes a tooltip should only be disabled under certain conditions, such as when a component is disabled, providing more context as to why that is. Below is an example of how to do this by conditionally passing in null content."
+        },
+        {
+          name: "Compact tooltips",
+          code: '<Tooltip content="Copy to clipboard" compact>\n  <Button color="secondary" variant="ghost" size="md"><Copy /></Button>\n</Tooltip>',
+          details: "Compact tooltips are designed for short, 1-3 word tooltips with inverted styling. They feature minimal padding, a dark background with white text, and no box shadows. Use {'compact={true}'} for brief status messages."
+        }
+      ],
+      docsUrl: "https://plexui.com/docs/components/tooltip"
+    }
+  ],
+  generatedAt: "2026-03-21T15:31:38.907Z"
+};
+
+// src/index.ts
+var components = manifest_default.components;
+function formatProps(props) {
+  if (props.length === 0) return "No props documented.";
+  return props.map((p) => {
+    const parts = [`- \`${p.name}\``];
+    if (p.type) parts.push(`(${p.type})`);
+    if (p.default) parts.push(`default: ${p.default}`);
+    if (p.description) parts.push(`\u2014 ${p.description}`);
+    return parts.join(" ");
+  }).join("\n");
+}
+function formatComponent(comp, options) {
+  const lines = [];
+  lines.push(`# ${comp.name}`);
+  lines.push("");
+  lines.push(comp.description);
+  lines.push("");
+  if (comp.importPath) {
+    lines.push("## Import");
+    lines.push("");
+    lines.push("```tsx");
+    const names = comp.exports?.join(", ") || comp.name;
+    lines.push(`import { ${names} } from "${comp.importPath}";`);
+    lines.push("```");
+    lines.push("");
+  }
+  if (comp.props && comp.props.length > 0) {
+    lines.push("## Props");
+    lines.push("");
+    lines.push(formatProps(comp.props));
+    lines.push("");
+  }
+  if (comp.subComponents && comp.subComponents.length > 0) {
+    lines.push("## Sub-Components");
+    lines.push("");
+    for (const sub of comp.subComponents) {
+      lines.push(`### ${sub.name}`);
+      if (sub.description) lines.push(sub.description);
+      lines.push("");
+      lines.push(formatProps(sub.props));
+      lines.push("");
+    }
+  }
+  if (comp.hooks && comp.hooks.length > 0) {
+    lines.push("## Hooks");
+    lines.push("");
+    for (const hook of comp.hooks) {
+      lines.push(`### ${hook.name}`);
+      lines.push(hook.description);
+      if (hook.properties) {
+        lines.push("");
+        for (const prop of hook.properties) {
+          lines.push(`- \`${prop.name}\` \u2014 ${prop.description}`);
+        }
+      }
+      lines.push("");
+    }
+  }
+  if (!options?.brief && comp.examples && comp.examples.length > 0) {
+    lines.push("## Examples");
+    lines.push("");
+    for (const ex of comp.examples) {
+      lines.push(`### ${ex.name}`);
+      if (ex.details) {
+        lines.push(ex.details);
+      }
+      lines.push("");
+      lines.push("```tsx");
+      lines.push(ex.code);
+      lines.push("```");
+      lines.push("");
+    }
+  }
+  lines.push(`Docs: ${comp.docsUrl}`);
+  return lines.join("\n");
+}
+function fuzzyMatch(query, text) {
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  return t.includes(q);
+}
+var server = new McpServer({
+  name: "plexui",
+  version: manifest_default.version || "1.0.0"
+});
+server.tool(
+  "list_components",
+  "List all available PlexUI components with their descriptions and import paths",
+  {},
+  async () => {
+    const list = components.map((c) => {
+      const parts = [`- **${c.name}** \u2014 ${c.description}`];
+      if (c.importPath) parts.push(`  Import: \`${c.importPath}\``);
+      const propCount = c.props?.length || 0;
+      const exampleCount = c.examples?.length || 0;
+      parts.push(`  ${propCount} props, ${exampleCount} examples`);
+      return parts.join("\n");
+    }).join("\n\n");
+    const text = [
+      `# PlexUI Components (${components.length})`,
+      "",
+      manifest_default.description,
+      "",
+      `Install: \`${manifest_default.install}\``,
+      `Docs: ${manifest_default.docsUrl}`,
+      "",
+      list
+    ].join("\n");
+    return { content: [{ type: "text", text }] };
+  }
+);
+server.tool(
+  "get_component",
+  "Get detailed documentation for a PlexUI component including props, examples, and usage",
+  { name: z.string().describe("Component name (e.g. 'Button', 'Select', 'Sidebar')") },
+  async ({ name }) => {
+    const query = name.toLowerCase().replace(/[-_ ]/g, "");
+    const comp = components.find(
+      (c) => c.name.toLowerCase().replace(/[-_ ]/g, "") === query || c.slug.replace(/-/g, "") === query
+    );
+    if (!comp) {
+      const suggestions = components.filter((c) => fuzzyMatch(name, c.name) || fuzzyMatch(name, c.description)).slice(0, 5);
+      let text = `Component "${name}" not found.`;
+      if (suggestions.length > 0) {
+        text += `
+
+Did you mean:
+${suggestions.map((s) => `- ${s.name}`).join("\n")}`;
+      }
+      return { content: [{ type: "text", text }], isError: true };
+    }
+    return { content: [{ type: "text", text: formatComponent(comp) }] };
+  }
+);
+server.tool(
+  "search_components",
+  "Search PlexUI components by name, description, or functionality",
+  {
+    query: z.string().describe("Search query (e.g. 'dropdown', 'form input', 'navigation')"),
+    limit: z.number().optional().default(10).describe("Max results to return")
+  },
+  async ({ query, limit }) => {
+    const matches = components.filter(
+      (c) => fuzzyMatch(query, c.name) || fuzzyMatch(query, c.description) || fuzzyMatch(query, c.slug) || c.exports && c.exports.some((e) => fuzzyMatch(query, e)) || c.props && c.props.some((p) => fuzzyMatch(query, p.name))
+    );
+    if (matches.length === 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `No components found matching "${query}". Use list_components to see all available components.`
+          }
+        ]
+      };
+    }
+    const results = matches.slice(0, limit);
+    const text = results.map((c) => formatComponent(c, { brief: true })).join("\n\n---\n\n");
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Found ${matches.length} component${matches.length === 1 ? "" : "s"} matching "${query}":
+
+${text}`
+        }
+      ]
+    };
+  }
+);
+server.tool(
+  "get_setup_guide",
+  "Get the PlexUI installation and setup guide",
+  {},
+  async () => {
+    const text = `# PlexUI Setup Guide
+
+## Installation
+
+\`\`\`bash
+${manifest_default.install}
+\`\`\`
+
+## CSS Setup
+
+Add to your global stylesheet (e.g. \`app/globals.css\`):
+
+\`\`\`css
+${manifest_default.setup.css}
+\`\`\`
+
+## Provider
+
+${manifest_default.setup.provider}
+
+\`\`\`tsx
+import { PlexUIProvider } from "@plexui/ui/components/PlexUIProvider";
+
+export default function RootLayout({ children }) {
+  return (
+    <PlexUIProvider>
+      {children}
+    </PlexUIProvider>
+  );
+}
+\`\`\`
+
+## Design System
+
+- **Size scale**: ${manifest_default.sizeScale.join(", ")} (unified across Button, Input, Select, etc.)
+- **Colors**: ${manifest_default.colors.join(", ")}
+- **Variants**: ${manifest_default.variants.join(", ")}
+- **${manifest_default.componentCount} components** available
+
+## Quick Example
+
+\`\`\`tsx
+import { Button } from "@plexui/ui/components/Button";
+import { Input } from "@plexui/ui/components/Input";
+import { Select } from "@plexui/ui/components/Select";
+
+export function MyForm() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Input placeholder="Email" size="md" />
+      <Select options={[...]} placeholder="Role..." />
+      <Button color="primary" size="md">Submit</Button>
+    </div>
+  );
+}
+\`\`\`
+
+Docs: ${manifest_default.homepage}
+`;
+    return { content: [{ type: "text", text }] };
+  }
+);
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("PlexUI MCP server running on stdio");
+}
+main().catch((err) => {
+  console.error("Fatal error:", err);
+  process.exit(1);
+});