@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/InputSection-B5ty4Onb.js

@@ -0,0 +1,280 @@
+import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { H as g, C as a, a as i, T as t, I as r, P as N, A as v, c as y } from "../index-19KsCnyX.js";
+import { TextCursorInput as f } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const P = () => {
+  const [d, c] = o(""), [p, m] = o(""), h = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], u = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ];
+  return /* @__PURE__ */ l(b, { children: [
+    /* @__PURE__ */ e(
+      g,
+      {
+        title: "Input",
+        description: "A versatile input component that supports various input types including text, email, password, date, and more.",
+        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-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(f, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Input" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Name",
+            placeholder: "Enter your name",
+            value: d,
+            onChange: (s) => c(s.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Email",
+            type: "email",
+            placeholder: "Enter your email",
+            helperText: "We'll never share your email"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Password",
+            type: "password",
+            placeholder: "Enter password",
+            error: "Password is required"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(r, { label: "Disabled", placeholder: "Disabled input", disabled: !0 })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Date Input" }),
+        /* @__PURE__ */ e(r, { label: "Date", type: "date", dateFormat: "DD-MM-YYYY" })
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Number Input" }),
+        /* @__PURE__ */ e(r, { label: "Age", type: "number", placeholder: "Enter age" })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", 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-3 gap-4", children: [
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Ghost Variant",
+            placeholder: "Enter text",
+            variant: "ghost"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Solid Variant",
+            placeholder: "Enter text",
+            variant: "solid"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: "Transparent Variant",
+            placeholder: "Enter text",
+            variant: "transparent"
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: h.map(({ label: s, color: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          label: `${s} Input`,
+          placeholder: "Enter text",
+          color: n
+        }
+      )
+    ] }, n)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: u.map(({ label: s, size: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
+      /* @__PURE__ */ e(
+        r,
+        {
+          label: `${s} Input`,
+          placeholder: "Enter text",
+          size: n
+        }
+      )
+    ] }, n)) }) }) }) }),
+    /* @__PURE__ */ e(
+      N,
+      {
+        componentName: "Input",
+        defaultValues: {
+          label: "Preview Input",
+          placeholder: "Enter text",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          type: "text",
+          dateFormat: "DD/MM/YYYY",
+          locale: "en-US",
+          helperText: "",
+          error: "",
+          useUppercaseLabel: !1,
+          disabled: !1
+        },
+        controlOverrides: [
+          {
+            name: "placeholder",
+            type: "text",
+            description: "Placeholder text rendered inside the input"
+          },
+          {
+            name: "color",
+            type: "select",
+            options: [
+              "primary",
+              "secondary",
+              "danger",
+              "info",
+              "success",
+              "warning"
+            ],
+            description: "Color treatment applied to the control"
+          },
+          {
+            name: "type",
+            type: "select",
+            options: ["text", "email", "password", "number", "date"],
+            description: "Native input type used for the preview"
+          },
+          {
+            name: "disabled",
+            type: "boolean",
+            description: "Disables the input and prevents interaction"
+          }
+        ],
+        includeProps: [
+          "label",
+          "placeholder",
+          "variant",
+          "color",
+          "size",
+          "type",
+          "dateFormat",
+          "locale",
+          "helperText",
+          "error",
+          "useUppercaseLabel",
+          "disabled"
+        ],
+        excludeProps: [
+          "inputClassName",
+          "labelClassName",
+          "suffix",
+          "suffixClassName",
+          "icon",
+          "dateFormat",
+          "locale"
+        ],
+        children: (s) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
+          r,
+          {
+            ...s,
+            placeholder: s.placeholder || "Enter text",
+            value: p,
+            onChange: (n) => m(n.target.value)
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(v, { componentName: "Input" }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      y,
+      {
+        language: "tsx",
+        code: `import { Input } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Input
+  label="Name"
+  placeholder="Enter your name"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// With helper text
+<Input
+  label="Email"
+  type="email"
+  placeholder="Enter your email"
+  helperText="We'll never share your email"
+/>
+
+// With error
+<Input
+  label="Password"
+  type="password"
+  placeholder="Enter password"
+  error="Password is required"
+/>
+
+// Variants
+<Input label="Ghost" variant="ghost" />
+<Input label="Solid" variant="solid" />
+<Input label="Transparent" variant="transparent" />
+
+// Colors
+<Input label="Primary" color="primary" />
+<Input label="Secondary" color="secondary" />
+<Input label="Danger" color="danger" />
+<Input label="Info" color="info" />
+<Input label="Success" color="success" />
+<Input label="Warning" color="warning" />
+
+// Sizes
+<Input label="Small" size="sm" />
+<Input label="Medium" size="md" />
+<Input label="Large" size="lg" />
+
+// Date input
+<Input
+  label="Date"
+  type="date"
+  dateFormat="DD-MM-YYYY"
+/>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  P as default
+};

package/documentation/InputSection-DLQ6hyWl.js

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),a=require("../index-DMs_SmPq.js"),p=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[t,n]=s.useState(""),[i,o]=s.useState(""),d=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Input",description:"A versatile input component that supports various input types including text, email, password, date, and more.",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-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(p.TextCursorInput,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 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-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Input"}),e.jsx(a.Input,{label:"Name",placeholder:"Enter your name",value:t,onChange:l=>n(l.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Input,{label:"Email",type:"email",placeholder:"Enter your email",helperText:"We'll never share your email"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Input,{label:"Password",type:"password",placeholder:"Enter password",error:"Password is required"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Input,{label:"Disabled",placeholder:"Disabled input",disabled:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Date Input"}),e.jsx(a.Input,{label:"Date",type:"date",dateFormat:"DD-MM-YYYY"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Number Input"}),e.jsx(a.Input,{label:"Age",type:"number",placeholder:"Enter age"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",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-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Input,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Input,{label:"Solid Variant",placeholder:"Enter text",variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Input,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:d.map(({label:l,color:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",color:r})]},r))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:c.map(({label:l,size:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",size:r})]},r))})})})}),e.jsx(a.PropPlayground,{componentName:"Input",defaultValues:{label:"Preview Input",placeholder:"Enter text",variant:"ghost",color:"primary",size:"md",type:"text",dateFormat:"DD/MM/YYYY",locale:"en-US",helperText:"",error:"",useUppercaseLabel:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the input"},{name:"color",type:"select",options:["primary","secondary","danger","info","success","warning"],description:"Color treatment applied to the control"},{name:"type",type:"select",options:["text","email","password","number","date"],description:"Native input type used for the preview"},{name:"disabled",type:"boolean",description:"Disables the input and prevents interaction"}],includeProps:["label","placeholder","variant","color","size","type","dateFormat","locale","helperText","error","useUppercaseLabel","disabled"],excludeProps:["inputClassName","labelClassName","suffix","suffixClassName","icon","dateFormat","locale"],children:l=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.Input,{...l,placeholder:l.placeholder||"Enter text",value:i,onChange:r=>o(r.target.value)})})}),e.jsx(a.AutoPropsTable,{componentName:"Input"}),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 { Input } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Input
+  label="Name"
+  placeholder="Enter your name"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// With helper text
+<Input
+  label="Email"
+  type="email"
+  placeholder="Enter your email"
+  helperText="We'll never share your email"
+/>
+
+// With error
+<Input
+  label="Password"
+  type="password"
+  placeholder="Enter password"
+  error="Password is required"
+/>
+
+// Variants
+<Input label="Ghost" variant="ghost" />
+<Input label="Solid" variant="solid" />
+<Input label="Transparent" variant="transparent" />
+
+// Colors
+<Input label="Primary" color="primary" />
+<Input label="Secondary" color="secondary" />
+<Input label="Danger" color="danger" />
+<Input label="Info" color="info" />
+<Input label="Success" color="success" />
+<Input label="Warning" color="warning" />
+
+// Sizes
+<Input label="Small" size="sm" />
+<Input label="Medium" size="md" />
+<Input label="Large" size="lg" />
+
+// Date input
+<Input
+  label="Date"
+  type="date"
+  dateFormat="DD-MM-YYYY"
+/>`})})})})]})};exports.default=m;

package/documentation/KeyValueRowSection-BgKXD67j.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.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-CJWvh1z_.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-19KsCnyX.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-B38QXuO1.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.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-B8IX8HhB.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-19KsCnyX.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
+};