@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/InstallationSection-Pi9lzZwp.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(t.HeroCard,{title:"Installation & Setup",description:"Get the MCP server running in seconds — use npx for zero-install, or install globally for persistent use.",icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Download,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"Quick Start (npx)",children:[e.jsx(t.Typography,{className:"text-sm text-foreground/70 mb-3",children:"Run directly without installing — perfect for trying it out or CI environments:"}),e.jsx(t.CodeBlock,{code:`# Start in stdio mode (for IDE integration)
+npx @e-burgos/tucu-ui-mcp
+
+# Start in HTTP mode (for remote agents)
+npx @e-burgos/tucu-ui-mcp --http --port 3100`})]})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"Global Install",children:[e.jsx(t.Typography,{className:"text-sm text-foreground/70 mb-3",children:"Install globally for faster startup and permanent availability:"}),e.jsx(t.CodeBlock,{code:`# Install globally
+npm install -g @e-burgos/tucu-ui-mcp
+
+# Now available as binary commands:
+tucu-ui-mcp          # stdio transport (local IDE)
+tucu-ui-mcp-http     # HTTP+SSE transport (port 3100)`})]})}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Binary Commands",children:e.jsx(t.BasicTable,{columns:[{key:"command",label:"Command",render:r=>e.jsx("code",{className:"px-1.5 py-0.5 bg-muted rounded text-xs font-mono",children:String(r)})},{key:"transport",label:"Transport",render:r=>e.jsx(t.Badge,{variant:"soft",className:String(r)==="stdio"?"bg-blue-500/10 text-blue-500":"bg-purple-500/10 text-purple-500",children:String(r)})},{key:"useCase",label:"Use Case"}],data:[{command:"tucu-ui-mcp",transport:"stdio",useCase:"VS Code, Cursor, Claude Desktop (local)"},{command:"tucu-ui-mcp-http",transport:"HTTP+SSE",useCase:"Remote agents, Docker, Fly.io, cloud"}]})})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"npm Package",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-3",children:[e.jsx(s.ExternalLink,{className:"w-4 h-4 text-foreground/50"}),e.jsx(t.Typography,{className:"text-sm text-foreground/70",children:e.jsx("a",{href:"https://www.npmjs.com/package/@e-burgos/tucu-ui-mcp",target:"_blank",rel:"noopener noreferrer",className:"text-blue-500 hover:underline",children:"npmjs.com/package/@e-burgos/tucu-ui-mcp"})})]}),e.jsx(t.CodeBlock,{code:`{
+  "name": "@e-burgos/tucu-ui-mcp",
+  "version": "1.0.0",
+  "bin": {
+    "tucu-ui-mcp": "./dist/stdio.js",
+    "tucu-ui-mcp-http": "./dist/http.js"
+  }
+}`})]})}),e.jsx(t.CardContainer,{children:e.jsxs(t.CardTitle,{title:"Verify Installation",children:[e.jsx(t.Typography,{className:"text-sm text-foreground/70 mb-3",children:"Test that the server is working correctly:"}),e.jsx(t.CodeBlock,{code:`# Test stdio transport (should output JSON-RPC response)
+echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"capabilities":{}}}' | tucu-ui-mcp
+
+# Test HTTP transport
+curl http://localhost:3100/health
+# → {"status":"ok","version":"1.0.0"}`})]})})]});exports.default=a;

package/documentation/InstallationSection-t5nTJfBu.js

@@ -0,0 +1,125 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { H as l, C as r, a, T as o, c as n, y as i, K as c } from "../index-DoxeCFUJ.js";
+import { Download as u, ExternalLink as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: [
+  /* @__PURE__ */ t(
+    l,
+    {
+      title: "Installation & Setup",
+      description: "Get the MCP server running in seconds — use npx for zero-install, or install globally for persistent use.",
+      icon: /* @__PURE__ */ t("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ t(u, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
+    }
+  ),
+  /* @__PURE__ */ t(r, { children: /* @__PURE__ */ e(a, { title: "Quick Start (npx)", children: [
+    /* @__PURE__ */ t(o, { className: "text-sm text-foreground/70 mb-3", children: "Run directly without installing — perfect for trying it out or CI environments:" }),
+    /* @__PURE__ */ t(
+      n,
+      {
+        code: `# Start in stdio mode (for IDE integration)
+npx @e-burgos/tucu-ui-mcp
+
+# Start in HTTP mode (for remote agents)
+npx @e-burgos/tucu-ui-mcp --http --port 3100`
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ t(r, { children: /* @__PURE__ */ e(a, { title: "Global Install", children: [
+    /* @__PURE__ */ t(o, { className: "text-sm text-foreground/70 mb-3", children: "Install globally for faster startup and permanent availability:" }),
+    /* @__PURE__ */ t(
+      n,
+      {
+        code: `# Install globally
+npm install -g @e-burgos/tucu-ui-mcp
+
+# Now available as binary commands:
+tucu-ui-mcp          # stdio transport (local IDE)
+tucu-ui-mcp-http     # HTTP+SSE transport (port 3100)`
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(a, { title: "Binary Commands", children: /* @__PURE__ */ t(
+    i,
+    {
+      columns: [
+        {
+          key: "command",
+          label: "Command",
+          render: (s) => /* @__PURE__ */ t("code", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: String(s) })
+        },
+        {
+          key: "transport",
+          label: "Transport",
+          render: (s) => /* @__PURE__ */ t(
+            c,
+            {
+              variant: "soft",
+              className: String(s) === "stdio" ? "bg-blue-500/10 text-blue-500" : "bg-purple-500/10 text-purple-500",
+              children: String(s)
+            }
+          )
+        },
+        { key: "useCase", label: "Use Case" }
+      ],
+      data: [
+        {
+          command: "tucu-ui-mcp",
+          transport: "stdio",
+          useCase: "VS Code, Cursor, Claude Desktop (local)"
+        },
+        {
+          command: "tucu-ui-mcp-http",
+          transport: "HTTP+SSE",
+          useCase: "Remote agents, Docker, Fly.io, cloud"
+        }
+      ]
+    }
+  ) }) }),
+  /* @__PURE__ */ t(r, { children: /* @__PURE__ */ e(a, { title: "npm Package", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-3 mb-3", children: [
+      /* @__PURE__ */ t(m, { className: "w-4 h-4 text-foreground/50" }),
+      /* @__PURE__ */ t(o, { className: "text-sm text-foreground/70", children: /* @__PURE__ */ t(
+        "a",
+        {
+          href: "https://www.npmjs.com/package/@e-burgos/tucu-ui-mcp",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-blue-500 hover:underline",
+          children: "npmjs.com/package/@e-burgos/tucu-ui-mcp"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(
+      n,
+      {
+        code: `{
+  "name": "@e-burgos/tucu-ui-mcp",
+  "version": "1.0.0",
+  "bin": {
+    "tucu-ui-mcp": "./dist/stdio.js",
+    "tucu-ui-mcp-http": "./dist/http.js"
+  }
+}`
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ t(r, { children: /* @__PURE__ */ e(a, { title: "Verify Installation", children: [
+    /* @__PURE__ */ t(o, { className: "text-sm text-foreground/70 mb-3", children: "Test that the server is working correctly:" }),
+    /* @__PURE__ */ t(
+      n,
+      {
+        code: `# Test stdio transport (should output JSON-RPC response)
+echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"capabilities":{}}}' | tucu-ui-mcp
+
+# Test HTTP transport
+curl http://localhost:3100/health
+# → {"status":"ok","version":"1.0.0"}`
+      }
+    )
+  ] }) })
+] });
+export {
+  x as default
+};

package/documentation/KeyValueRowSection-CGEK8RAk.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"KeyValueRow",description:`A simple row component for displaying label-value pairs, ideal for
+          detail panels, summaries, and settings views.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Rows3,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Usage"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Name",value:"John Doe"}),e.jsx(a.KeyValueRow,{label:"Email",value:"john@example.com"}),e.jsx(a.KeyValueRow,{label:"Role",value:"Administrator"}),e.jsx(a.KeyValueRow,{label:"Status",value:"Active"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Monospace & Accent"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Balance",value:"$12,450.00",mono:!0}),e.jsx(a.KeyValueRow,{label:"Interest Rate",value:"3.5%",mono:!0,accent:!0}),e.jsx(a.KeyValueRow,{label:"Account ID",value:"ACC-0042891",mono:!0}),e.jsx(a.KeyValueRow,{label:"Next Payment",value:"Jun 15, 2026",accent:!0})]})]}),e.jsxs(a.CardContainer,{className:"p-4 md:col-span-2",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Custom Values (ReactNode)"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Health",value:e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-green-500 text-xs font-medium",children:[e.jsx("span",{className:"h-2 w-2 rounded-full bg-green-500"}),"Healthy"]})}),e.jsx(a.KeyValueRow,{label:"Progress",value:e.jsx("div",{className:"w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full w-3/4 bg-brand rounded-full"})})}),e.jsx(a.KeyValueRow,{label:"Tags",value:e.jsxs("div",{className:"flex gap-1",children:[e.jsx("span",{className:"px-1.5 py-0.5 text-[10px] rounded bg-brand/10 text-brand",children:"React"}),e.jsx("span",{className:"px-1.5 py-0.5 text-[10px] rounded bg-blue-500/10 text-blue-500",children:"TypeScript"})]})})]})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"KeyValueRow",title:"KeyValueRow Playground",defaultValues:{label:"Status",value:"Active",accent:!1,mono:!1},excludeProps:["className"],children:l=>e.jsx(a.KeyValueRow,{...l})}),e.jsx(a.AutoPropsTable,{componentName:"KeyValueRow"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { KeyValueRow } from '@e-burgos/tucu-ui';
+
+// Basic
+<KeyValueRow label="Name" value="John Doe" />
+
+// Monospace numbers
+<KeyValueRow label="Balance" value="$12,450.00" mono />
+
+// Accent color
+<KeyValueRow label="Rate" value="3.5%" mono accent />
+
+// Custom ReactNode value
+<KeyValueRow
+  label="Status"
+  value={<span className="text-green-500">Active</span>}
+/>`})})})})]});exports.default=r;

package/documentation/KeyValueRowSection-wAQ2xSoa.js

@@ -0,0 +1,117 @@
+import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as t, C as s, a as r, T as d, a0 as a, P as n, A as c, c as m } from "../index-DoxeCFUJ.js";
+import { Rows3 as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ l(i, { children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      title: "KeyValueRow",
+      description: `A simple row component for displaying label-value pairs, ideal for
+          detail panels, summaries, and settings views.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+    /* @__PURE__ */ l(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Basic Usage" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(a, { label: "Name", value: "John Doe" }),
+        /* @__PURE__ */ e(a, { label: "Email", value: "john@example.com" }),
+        /* @__PURE__ */ e(a, { label: "Role", value: "Administrator" }),
+        /* @__PURE__ */ e(a, { label: "Status", value: "Active" })
+      ] })
+    ] }),
+    /* @__PURE__ */ l(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Monospace & Accent" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(a, { label: "Balance", value: "$12,450.00", mono: !0 }),
+        /* @__PURE__ */ e(a, { label: "Interest Rate", value: "3.5%", mono: !0, accent: !0 }),
+        /* @__PURE__ */ e(a, { label: "Account ID", value: "ACC-0042891", mono: !0 }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Next Payment",
+            value: "Jun 15, 2026",
+            accent: !0
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ l(s, { className: "p-4 md:col-span-2", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "With Custom Values (ReactNode)" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Health",
+            value: /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1.5 text-green-500 text-xs font-medium", children: [
+              /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-green-500" }),
+              "Healthy"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Progress",
+            value: /* @__PURE__ */ e("div", { className: "w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full w-3/4 bg-brand rounded-full" }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Tags",
+            value: /* @__PURE__ */ l("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-brand/10 text-brand", children: "React" }),
+              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-blue-500/10 text-blue-500", children: "TypeScript" })
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    n,
+    {
+      componentName: "KeyValueRow",
+      title: "KeyValueRow Playground",
+      defaultValues: {
+        label: "Status",
+        value: "Active",
+        accent: !1,
+        mono: !1
+      },
+      excludeProps: ["className"],
+      children: (o) => /* @__PURE__ */ e(a, { ...o })
+    }
+  ),
+  /* @__PURE__ */ e(c, { componentName: "KeyValueRow" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { KeyValueRow } from '@e-burgos/tucu-ui';
+
+// Basic
+<KeyValueRow label="Name" value="John Doe" />
+
+// Monospace numbers
+<KeyValueRow label="Balance" value="$12,450.00" mono />
+
+// Accent color
+<KeyValueRow label="Rate" value="3.5%" mono accent />
+
+// Custom ReactNode value
+<KeyValueRow
+  label="Status"
+  value={<span className="text-green-500">Active</span>}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  y as default
+};

package/documentation/KeyboardNavigationSection-B5JFQ5NE.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const s=[{category:"General",items:[{key:"Tab",action:"Move focus to next interactive element"},{key:"Shift + Tab",action:"Move focus to previous element"},{key:"Enter / Space",action:"Activate focused button or link"},{key:"Escape",action:"Close Modal, Drawer, Select dropdown"}]},{category:"Tabs Component",items:[{key:"ArrowRight",action:"Focus next tab"},{key:"ArrowLeft",action:"Focus previous tab"},{key:"Home",action:"Focus first tab"},{key:"End",action:"Focus last tab"}]},{category:"Select / Dropdown",items:[{key:"ArrowDown",action:"Open dropdown / highlight next option"},{key:"ArrowUp",action:"Highlight previous option"},{key:"Enter / Space",action:"Select highlighted option"},{key:"Escape",action:"Close dropdown, restore focus to trigger"}]},{category:"Modal & Drawer",items:[{key:"Escape",action:"Close the dialog"},{key:"Tab (Drawer)",action:"Cycles within focus trap"},{key:"Shift+Tab (Drawer)",action:"Reverse cycle within trap"},{key:"Tab (Modal)",action:"Standard focus movement (no trap)"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Keyboard Navigation",description:"Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Keyboard,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Keyboard Shortcuts"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Keyboard mappings for each component category"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:s.map((a,r)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category}),e.jsx("div",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("div",{className:"flex items-center justify-between gap-2 py-1 border-b border-[var(--color-border)] last:border-0",children:[e.jsx("code",{className:"text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap",children:o.key}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400 text-right",children:o.action})]},n))})]})},r))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Usage Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Components that respond to keyboard interactions"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Button keyboard interaction
+<Button onClick={handleAction} aria-label="Submit form">
+  Submit
+</Button>
+// Enter or Space activates, Tab navigates
+
+// Select keyboard interaction
+<Select
+  options={options}
+  value={selected}
+  onSelect={handleSelect}
+  label="Choose option"
+/>
+// ArrowDown opens, Arrow keys navigate, Enter selects, Escape closes
+
+// Tabs keyboard interaction
+<TabGroup defaultIndex={0}>
+  <TabList>
+    <TabItem>Tab 1</TabItem>
+    <TabItem>Tab 2</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+  </TabPanels>
+</TabGroup>
+// ArrowRight/Left cycles tabs, Home/End jumps to first/last`})]})]})};exports.default=c;

package/documentation/KeyboardNavigationSection-_hqOBAEW.js

@@ -0,0 +1,130 @@
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as c, T as a, C as l, c as d } from "../index-DoxeCFUJ.js";
+import { Keyboard as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => /* @__PURE__ */ t(i, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Keyboard Navigation",
+      description: "Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Keyboard Shortcuts" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Keyboard mappings for each component category"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        category: "General",
+        items: [
+          { key: "Tab", action: "Move focus to next interactive element" },
+          { key: "Shift + Tab", action: "Move focus to previous element" },
+          { key: "Enter / Space", action: "Activate focused button or link" },
+          { key: "Escape", action: "Close Modal, Drawer, Select dropdown" }
+        ]
+      },
+      {
+        category: "Tabs Component",
+        items: [
+          { key: "ArrowRight", action: "Focus next tab" },
+          { key: "ArrowLeft", action: "Focus previous tab" },
+          { key: "Home", action: "Focus first tab" },
+          { key: "End", action: "Focus last tab" }
+        ]
+      },
+      {
+        category: "Select / Dropdown",
+        items: [
+          { key: "ArrowDown", action: "Open dropdown / highlight next option" },
+          { key: "ArrowUp", action: "Highlight previous option" },
+          { key: "Enter / Space", action: "Select highlighted option" },
+          { key: "Escape", action: "Close dropdown, restore focus to trigger" }
+        ]
+      },
+      {
+        category: "Modal & Drawer",
+        items: [
+          { key: "Escape", action: "Close the dialog" },
+          { key: "Tab (Drawer)", action: "Cycles within focus trap" },
+          { key: "Shift+Tab (Drawer)", action: "Reverse cycle within trap" },
+          { key: "Tab (Modal)", action: "Standard focus movement (no trap)" }
+        ]
+      }
+    ].map((o, s) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+      /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: o.category }),
+      /* @__PURE__ */ e("div", { className: "space-y-2", children: o.items.map((r, n) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 py-1 border-b border-[var(--color-border)] last:border-0",
+          children: [
+            /* @__PURE__ */ e("code", { className: "text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap", children: r.key }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400 text-right",
+                children: r.action
+              }
+            )
+          ]
+        },
+        n
+      )) })
+    ] }) }, s)) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Usage Examples" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Components that respond to keyboard interactions"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(d, { language: "tsx", code: `// Button keyboard interaction
+<Button onClick={handleAction} aria-label="Submit form">
+  Submit
+</Button>
+// Enter or Space activates, Tab navigates
+
+// Select keyboard interaction
+<Select
+  options={options}
+  value={selected}
+  onSelect={handleSelect}
+  label="Choose option"
+/>
+// ArrowDown opens, Arrow keys navigate, Enter selects, Escape closes
+
+// Tabs keyboard interaction
+<TabGroup defaultIndex={0}>
+  <TabList>
+    <TabItem>Tab 1</TabItem>
+    <TabItem>Tab 2</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+  </TabPanels>
+</TabGroup>
+// ArrowRight/Left cycles tabs, Home/End jumps to first/last` })
+  ] })
+] });
+export {
+  f as default
+};

package/documentation/LayoutPrinciplesSection-D5lu96bu.js

@@ -0,0 +1,148 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { H as c, C as l, a as d, T as i, K as n } from "../index-DoxeCFUJ.js";
+import { Layout as t, Layers3 as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => {
+  const r = [
+    {
+      name: "xs",
+      value: "480px",
+      description: "Extra small devices"
+    },
+    {
+      name: "sm",
+      value: "640px",
+      description: "Small devices (landscape phones)"
+    },
+    {
+      name: "md",
+      value: "768px",
+      description: "Medium devices (tablets)"
+    },
+    {
+      name: "lg",
+      value: "1024px",
+      description: "Large devices (desktops)"
+    },
+    {
+      name: "xl",
+      value: "1280px",
+      description: "Extra large devices"
+    },
+    {
+      name: "2xl",
+      value: "1440px",
+      description: "2X large screens"
+    },
+    {
+      name: "3xl",
+      value: "1780px",
+      description: "3X large screens"
+    },
+    {
+      name: "4xl",
+      value: "2160px",
+      description: "4X large screens (4K UHD)"
+    }
+  ], o = [
+    {
+      name: "Base",
+      value: "0",
+      description: "Default layer for most elements"
+    },
+    {
+      name: "Dropdown",
+      value: "10",
+      description: "Dropdown menus and popovers"
+    },
+    { name: "Sticky", value: "20", description: "Sticky positioned elements" },
+    { name: "Fixed", value: "30", description: "Fixed positioned elements" },
+    {
+      name: "Modal Backdrop",
+      value: "40",
+      description: "Modal overlay backgrounds"
+    },
+    { name: "Modal", value: "50", description: "Modal dialogs and drawers" },
+    { name: "Popover", value: "60", description: "Tooltips and popovers" },
+    { name: "Toast", value: "70", description: "Toast notifications" },
+    {
+      name: "Tooltip",
+      value: "80",
+      description: "Tooltips (highest priority)"
+    }
+  ];
+  return /* @__PURE__ */ a("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+    /* @__PURE__ */ e(
+      c,
+      {
+        title: "Layout Principles",
+        description: "Responsive design patterns and layout guidelines for consistent experiences.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(t, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Responsive Breakpoints", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md", children: /* @__PURE__ */ e(t, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Responsive Breakpoints" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: r.map((s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "space-y-3 p-4 bg-muted/20 rounded-lg border border-border",
+            children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(n, { variant: "outline", className: "font-mono", children: s.name }),
+                /* @__PURE__ */ e(i, { tag: "h3", className: "font-semibold", children: s.description })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "space-y-1", children: /* @__PURE__ */ a(
+                i,
+                {
+                  tag: "h4",
+                  className: "text-muted text-sm font-semibold",
+                  children: [
+                    "Min-width: ",
+                    s.value
+                  ]
+                }
+              ) })
+            ] })
+          },
+          s.name
+        )) })
+      ] }) }) }),
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Z-Index Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md", children: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Z-Index Scale" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "space-y-2", children: o.map((s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex items-center justify-between p-3 bg-muted/20 rounded",
+            children: /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ e(
+                n,
+                {
+                  variant: "outline",
+                  className: "font-mono w-12 justify-center",
+                  children: s.value
+                }
+              ),
+              /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ e("div", { className: "font-semibold", children: s.name }),
+                /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: s.description })
+              ] })
+            ] })
+          },
+          s.name
+        )) })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  f as default
+};

package/documentation/LayoutPrinciplesSection-U-wTD-h4.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const l=[{name:"xs",value:"480px",description:"Extra small devices"},{name:"sm",value:"640px",description:"Small devices (landscape phones)"},{name:"md",value:"768px",description:"Medium devices (tablets)"},{name:"lg",value:"1024px",description:"Large devices (desktops)"},{name:"xl",value:"1280px",description:"Extra large devices"},{name:"2xl",value:"1440px",description:"2X large screens"},{name:"3xl",value:"1780px",description:"3X large screens"},{name:"4xl",value:"2160px",description:"4X large screens (4K UHD)"}],d=[{name:"Base",value:"0",description:"Default layer for most elements"},{name:"Dropdown",value:"10",description:"Dropdown menus and popovers"},{name:"Sticky",value:"20",description:"Sticky positioned elements"},{name:"Fixed",value:"30",description:"Fixed positioned elements"},{name:"Modal Backdrop",value:"40",description:"Modal overlay backgrounds"},{name:"Modal",value:"50",description:"Modal dialogs and drawers"},{name:"Popover",value:"60",description:"Tooltips and popovers"},{name:"Toast",value:"70",description:"Toast notifications"},{name:"Tooltip",value:"80",description:"Tooltips (highest priority)"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(s.HeroCard,{title:"Layout Principles",description:"Responsive design patterns and layout guidelines for consistent experiences.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Layout,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Responsive Breakpoints",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(i.Layout,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Responsive Breakpoints"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:l.map(a=>e.jsx("div",{className:"space-y-3 p-4 bg-muted/20 rounded-lg border border-border",children:e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono",children:a.name}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.description})]}),e.jsx("div",{className:"space-y-1",children:e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-sm font-semibold",children:["Min-width: ",a.value]})})]})},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Z-Index Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md",children:e.jsx(i.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Z-Index Scale"})]}),e.jsx("div",{className:"space-y-2",children:d.map(a=>e.jsx("div",{className:"flex items-center justify-between p-3 bg-muted/20 rounded",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono w-12 justify-center",children:a.value}),e.jsxs("div",{children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-sm text-muted-foreground",children:a.description})]})]})},a.name))})]})})})]})]})};exports.default=n;