@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/TailwindConfigSection-C-PDB_22.mjs

@@ -0,0 +1,152 @@
+import { jsxs as a, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as s, C as c, a as l, c as t, a4 as n } from "./index-Hq6IUBmn.mjs";
+import { Palette as o, Circle as r, Code as d, Ruler as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ a(i, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      s,
+      {
+        tag: "h2",
+        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+        children: "Tailwind CSS Configuration"
+      }
+    ),
+    /* @__PURE__ */ e(
+      s,
+      {
+        tag: "p",
+        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+        children: "Built on Tailwind CSS v4 with Tucu UI Design Tokens"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+    l,
+    {
+      title: "Design Tokens & Configuration",
+      className: "mt-2 mb-6",
+      children: /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-6", children: [
+          /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+              /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Color Spectrums" })
+            ] }),
+            /* @__PURE__ */ e(
+              s,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400 text-sm",
+                children: "The system uses Tucu UI Design Tokens organized into color spectrums:"
+              }
+            ),
+            /* @__PURE__ */ a("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [
+              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
+                /* @__PURE__ */ a("span", { children: [
+                  /* @__PURE__ */ e("strong", { children: "Color Spectrums:" }),
+                  " Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse"
+                ] })
+              ] }),
+              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
+                /* @__PURE__ */ a("span", { children: [
+                  /* @__PURE__ */ e("strong", { children: "Color Scale:" }),
+                  " Each spectrum has values from 0-100 (e.g., blue-0 to blue-100)"
+                ] })
+              ] }),
+              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
+                /* @__PURE__ */ a("span", { children: [
+                  /* @__PURE__ */ e("strong", { children: "Light & Dark Variants:" }),
+                  " Separate color sets for light and dark modes"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-4 mt-4", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+              /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Semantic Colors" })
+            ] }),
+            /* @__PURE__ */ e(
+              s,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400 text-sm mb-3",
+                children: "Semantic colors map design tokens to functional purposes:"
+              }
+            ),
+            /* @__PURE__ */ e(
+              t,
+              {
+                language: "css",
+                code: `/* Semantic Background Colors */
+--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
+--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
+--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
+--color-semantic-bg-negative: var(--color-tucu-ui-red-60);
+
+/* Semantic Foreground Colors */
+--color-semantic-fg: var(--color-tucu-ui-gray-100);
+--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
+--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);`
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-4 mt-4", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+            /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Spacing Scale" })
+          ] }),
+          /* @__PURE__ */ e(
+            s,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 text-sm mb-3",
+              children: "The spacing scale is mapped to Tucu UI Design Tokens. All spacing values use arbitrary values in pixels to maintain consistency:"
+            }
+          ),
+          /* @__PURE__ */ e(
+            t,
+            {
+              language: "css",
+              code: `/* Spacing Scale - Mapped to Tucu UI Design Tokens */
+--spacing-0: 0px;
+--spacing-1: 8px;    /* --spacing-tucu-ui-1 */
+--spacing-2: 16px;   /* --spacing-tucu-ui-2 */
+--spacing-3: 24px;   /* --spacing-tucu-ui-3 */
+--spacing-4: 32px;   /* --spacing-tucu-ui-4 */
+--spacing-5: 40px;   /* --spacing-tucu-ui-5 */
+--spacing-6: 48px;   /* --spacing-tucu-ui-6 */
+--spacing-8: 64px;   /* --spacing-tucu-ui-8 */
+--spacing-10: 80px;  /* --spacing-tucu-ui-10 */`
+            }
+          ),
+          /* @__PURE__ */ a(n, { variant: "info", children: [
+            " ",
+            /* @__PURE__ */ a(s, { tag: "p", className: "text-sm", children: [
+              /* @__PURE__ */ e("strong", { children: "Note:" }),
+              " Components use arbitrary values like",
+              " ",
+              /* @__PURE__ */ e("code", { className: "p-1 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "p-[16px]" }),
+              " ",
+              "instead of",
+              " ",
+              /* @__PURE__ */ e("code", { className: "p-1 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "p-4" }),
+              " ",
+              "to maintain original Tailwind spacing values."
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  ) })
+] });
+export {
+  N as default
+};

package/TestingSection-BW3pNxaB.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Accessibility Testing",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-orange-500 via-amber-500 to-yellow-500 shadow-lg",children:e.jsx(a.TestTube,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Testing Guidelines"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Manual Testing Checklist"}),e.jsx("div",{className:"space-y-2",children:["Navigate using only keyboard","Test with screen reader (NVDA, JAWS, VoiceOver)","Check color contrast ratios","Verify focus indicators are visible","Test at 200% zoom level","Validate HTML markup","Check for proper heading hierarchy","Test form labels and error messages"].map((i,t)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500"}),e.jsx(s.Typography,{tag:"p",className:"text-sm",children:i})]},t))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Automated Testing Example"}),e.jsx(s.CodeBlock,{code:`import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+test('Input has no accessibility violations', async () => {
+  const { container } = render(
+    <Input label="Email" required error="Invalid email" />
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});`,language:"js"})]})]})]})})})});exports.default=r;

package/TestingSection-BwmJOUpE.mjs

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { C as r, a as l, T as s, c as o } from "./index-Hq6IUBmn.mjs";
+import { TestTube as c, Check as n } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Accessibility Testing", 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-orange-500 via-amber-500 to-yellow-500 shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(s, { tag: "h3", className: "text-xl font-semibold", children: "Testing Guidelines" })
+  ] }),
+  /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Manual Testing Checklist" }),
+      /* @__PURE__ */ e("div", { className: "space-y-2", children: [
+        "Navigate using only keyboard",
+        "Test with screen reader (NVDA, JAWS, VoiceOver)",
+        "Check color contrast ratios",
+        "Verify focus indicators are visible",
+        "Test at 200% zoom level",
+        "Validate HTML markup",
+        "Check for proper heading hierarchy",
+        "Test form labels and error messages"
+      ].map((t, i) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500" }),
+        /* @__PURE__ */ e(s, { tag: "p", className: "text-sm", children: t })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Automated Testing Example" }),
+      /* @__PURE__ */ e(o, { code: `import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+test('Input has no accessibility violations', async () => {
+  const { container } = render(
+    <Input label="Email" required error="Invalid email" />
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});`, language: "js" })
+    ] })
+  ] })
+] }) }) }) });
+export {
+  f as default
+};

package/TextareaSection-BfNhLRBw.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[t,l]=o.useState(""),i=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const s=String(r);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],n=[{prop:"label",type:"string",default:"-",description:"Field label text"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the textarea"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the textarea"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the textarea field"},{prop:"rows",type:"number",default:"-",description:"Number of visible text lines"},{prop:"useUppercaseLabel",type:"boolean",default:"false",description:"Display label in uppercase"},{prop:"className",type:"string",default:"-",description:"Custom CSS classes for the container"},{prop:"inputClassName",type:"string",default:"-",description:"Custom CSS classes for the textarea element"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Textarea"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A multi-line text input component for longer text content."})]}),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 Textarea"}),e.jsx(a.Textarea,{label:"Message",placeholder:"Write your message here",value:t,onChange:r=>l(r.target.value),rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Textarea,{label:"Description",placeholder:"Enter description",helperText:"Provide a detailed description",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Textarea,{label:"Comments",placeholder:"Enter comments",error:"Comments are required",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Textarea,{label:"Notes",placeholder:"Disabled textarea",disabled:!0,rows:4})]})]})})})}),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.Textarea,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Textarea,{label:"Solid Variant",placeholder:"Enter text",variant:"solid",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Textarea,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent",rows:3})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:i,data:n})})})}),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 { Textarea } from '@e-burgos/tucu-ui';
+
+<Textarea
+  label="Message"
+  placeholder="Write your message here"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  rows={4}
+/>
+
+<Textarea
+  label="Description"
+  placeholder="Enter description"
+  helperText="Provide a detailed description"
+  rows={4}
+/>
+
+// Variants
+<Textarea label="Ghost" variant="ghost" rows={4} />
+<Textarea label="Solid" variant="solid" rows={4} />
+<Textarea label="Transparent" variant="transparent" rows={4} />`})})})})]})};exports.default=d;

package/TextareaSection-kn20lUc6.mjs

@@ -0,0 +1,220 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { T as t, C as r, a as i, q as s, B as m, c as h } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const T = () => {
+  const [n, d] = p("");
+  return /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Textarea" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A multi-line text input component for longer text content."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(r, { 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__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Textarea" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Message",
+            placeholder: "Write your message here",
+            value: n,
+            onChange: (l) => d(l.target.value),
+            rows: 4
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Description",
+            placeholder: "Enter description",
+            helperText: "Provide a detailed description",
+            rows: 4
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Comments",
+            placeholder: "Enter comments",
+            error: "Comments are required",
+            rows: 4
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Notes",
+            placeholder: "Disabled textarea",
+            disabled: !0,
+            rows: 4
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { 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__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Ghost Variant",
+            placeholder: "Enter text",
+            variant: "ghost",
+            rows: 3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Solid Variant",
+            placeholder: "Enter text",
+            variant: "solid",
+            rows: 3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(r, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Transparent Variant",
+            placeholder: "Enter text",
+            variant: "transparent",
+            rows: 3
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(m, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (l) => {
+          const o = String(l);
+          return o === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: o });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "label",
+        type: "string",
+        default: "-",
+        description: "Field label text"
+      },
+      {
+        prop: "variant",
+        type: "'ghost' | 'solid' | 'transparent'",
+        default: "'ghost'",
+        description: "Visual variant of the textarea"
+      },
+      {
+        prop: "error",
+        type: "string",
+        default: "-",
+        description: "Error message to display"
+      },
+      {
+        prop: "helperText",
+        type: "string",
+        default: "-",
+        description: "Helper text displayed below the textarea"
+      },
+      {
+        prop: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "Disables the textarea field"
+      },
+      {
+        prop: "rows",
+        type: "number",
+        default: "-",
+        description: "Number of visible text lines"
+      },
+      {
+        prop: "useUppercaseLabel",
+        type: "boolean",
+        default: "false",
+        description: "Display label in uppercase"
+      },
+      {
+        prop: "className",
+        type: "string",
+        default: "-",
+        description: "Custom CSS classes for the container"
+      },
+      {
+        prop: "inputClassName",
+        type: "string",
+        default: "-",
+        description: "Custom CSS classes for the textarea element"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { 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(
+      h,
+      {
+        language: "tsx",
+        code: `import { Textarea } from '@e-burgos/tucu-ui';
+
+<Textarea
+  label="Message"
+  placeholder="Write your message here"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  rows={4}
+/>
+
+<Textarea
+  label="Description"
+  placeholder="Enter description"
+  helperText="Provide a detailed description"
+  rows={4}
+/>
+
+// Variants
+<Textarea label="Ghost" variant="ghost" rows={4} />
+<Textarea label="Solid" variant="solid" rows={4} />
+<Textarea label="Transparent" variant="transparent" rows={4} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as default
+};

package/ThemeArchitectureSection-C7b32fMB.mjs

@@ -0,0 +1,86 @@
+import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as r, C as n, D as c } from "./index-Hq6IUBmn.mjs";
+import { Zap as d, Palette as m, Moon as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "h2",
+        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+        children: "Theme Architecture"
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+        children: "Built on modern technologies for flexibility and performance"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
+    {
+      icon: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Zustand State Management",
+      description: "Centralized theme state with minimal boilerplate and excellent TypeScript support",
+      color: "from-yellow-500 via-amber-500 to-orange-500",
+      features: ["Lightweight", "TypeScript First", "DevTools Support"]
+    },
+    {
+      icon: /* @__PURE__ */ e(m, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "CSS Custom Properties",
+      description: "Dynamic brand colors using CSS variables for real-time theme updates",
+      color: "from-blue-500 via-cyan-500 to-teal-500",
+      features: ["Dynamic Colors", "Alpha Support", "No Rebuilds"]
+    },
+    {
+      icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Dark Mode Support",
+      description: "Automatic dark/light mode switching with smooth transitions",
+      color: "from-purple-500 via-violet-500 to-indigo-500",
+      features: ["Auto Detection", "Smooth Transitions", "System Sync"]
+    }
+  ].map((t, o) => /* @__PURE__ */ e(
+    n,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-gradient-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: t.features.map((i, l) => /* @__PURE__ */ e(c, { variant: "outline", className: "text-xs", children: i }, l)) })
+      ] })
+    },
+    o
+  )) })
+] });
+export {
+  y as default
+};

package/ThemeArchitectureSection-C8pBxgU3.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Architecture"}),e.jsx(t.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on modern technologies for flexibility and performance"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[{icon:e.jsx(a.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Zustand State Management",description:"Centralized theme state with minimal boilerplate and excellent TypeScript support",color:"from-yellow-500 via-amber-500 to-orange-500",features:["Lightweight","TypeScript First","DevTools Support"]},{icon:e.jsx(a.Palette,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"CSS Custom Properties",description:"Dynamic brand colors using CSS variables for real-time theme updates",color:"from-blue-500 via-cyan-500 to-teal-500",features:["Dynamic Colors","Alpha Support","No Rebuilds"]},{icon:e.jsx(a.Moon,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Dark Mode Support",description:"Automatic dark/light mode switching with smooth transitions",color:"from-purple-500 via-violet-500 to-indigo-500",features:["Auto Detection","Smooth Transitions","System Sync"]}].map((r,i)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-gradient-to-br ${r.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:r.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description}),e.jsx("div",{className:"flex flex-wrap gap-2",children:r.features.map((s,o)=>e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:s},o))})]})},i))})]});exports.default=l;

package/ThemeConfigurationSection-HI8FyfUk.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("./index-CjRk4ezu.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsx(l.CardContainer,{children:e.jsx(l.CardTitle,{title:"Theme Configuration",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-8",children:e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg shadow-lg",children:e.jsx(o.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Available Options"})]}),e.jsx("div",{className:"space-y-3",children:[{label:"Mode",value:"'light' | 'dark'"},{label:"Direction",value:"'ltr' | 'rtl'"},{label:"Layout",value:"'clean' | 'admin' | 'horizontal'"},{label:"Primary Color",value:"34+ predefined colors"},{label:"Dark Primary Color",value:"34+ predefined colors"},{label:"Secondary Color",value:"34+ predefined colors"},{label:"Dark Secondary Color",value:"34+ predefined colors"},{label:"Accent Color",value:"34+ predefined colors"},{label:"Dark Accent Color",value:"34+ predefined colors"},{label:"Muted Color",value:"34+ predefined colors"},{label:"Dark Muted Color",value:"34+ predefined colors"},{label:"Dark Background",value:"Theme base colors"},{label:"Light Background",value:"Theme base colors"},{label:"Light Dark",value:"Theme base colors"},{label:"Dark Light Dark",value:"Theme base colors"},{label:"Language",value:"'en' | 'es' | 'fr'"}].map((a,r)=>e.jsxs("div",{className:"flex justify-between items-center py-2 px-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"font-medium",children:a.label}),e.jsx("code",{className:"text-sm text-gray-600 dark:text-gray-400",children:a.value})]},r))})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg shadow-lg",children:e.jsx(o.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Color Presets"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 overflow-y-auto",children:[{name:"DEFAULT_PRIMARY",color:"#0052ff"},{name:"DEFAULT_DARK_PRIMARY",color:"#578bfa"},{name:"DEFAULT_SECONDARY",color:"#eef0f3"},{name:"DEFAULT_DARK_SECONDARY",color:"#282b31"},{name:"DEFAULT_ACCENT",color:"#f7d21a"},{name:"DEFAULT_DARK_ACCENT",color:"#936000"},{name:"DEFAULT_MUTED",color:"#5b616e"},{name:"DEFAULT_DARK_MUTED",color:"#8a919e"},{name:"DEFAULT_LIGHT_BG",color:"#ffffff"},{name:"DEFAULT_DARK_BG",color:"#0a0b0d"},{name:"DEFAULT_LIGHT_DARK",color:"#f7f8f9"},{name:"DEFAULT_DARK_LIGHT_DARK",color:"#141519"},{name:"BLUE",color:"#105eff"},{name:"DARK_BLUE",color:"#2162ee"},{name:"GREEN",color:"#129961"},{name:"DARK_GREEN",color:"#159962"},{name:"ORANGE",color:"#e1591b"},{name:"DARK_ORANGE",color:"#e66020"},{name:"GRAY",color:"#717886"},{name:"DARK_GRAY",color:"#727886"},{name:"INDIGO",color:"#596ff2"},{name:"DARK_INDIGO",color:"#5c71ee"},{name:"PINK",color:"#cb51bb"},{name:"DARK_PINK",color:"#d058c1"},{name:"PURPLE",color:"#9d6bf2"},{name:"DARK_PURPLE",color:"#bc7bfb"},{name:"RED",color:"#e13947"},{name:"DARK_RED",color:"#e6404e"},{name:"TEAL",color:"#0093cb"},{name:"DARK_TEAL",color:"#0095cd"},{name:"YELLOW",color:"#cf9700"},{name:"DARK_YELLOW",color:"#c79e00"},{name:"CHARTREUSE",color:"#56b340"},{name:"DARK_CHARTREUSE",color:"#7bc869"}].map((a,r)=>e.jsxs("div",{className:"flex items-center gap-2 p-2 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",children:[e.jsx("div",{className:"w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 shadow-sm",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-xs font-medium truncate",children:a.name})]},r))}),e.jsx(l.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400 mt-2",children:"34 total color presets available (12 default + 22 spectrum colors)"})]})]})})})});exports.default=s;