@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/TestingSection-4eyjrj1_.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{icon:e.jsx(s.Scan,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"jest-axe",description:"Automated WCAG violation detection in unit tests. Run axe-core checks on rendered components.",iconBgClassName:"from-red-500 to-pink-500"},{icon:e.jsx(s.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Lighthouse",description:"Full page accessibility audit with scoring. Available in Chrome DevTools or CI pipelines.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(s.Accessibility,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Screen Reader Testing",description:"Manual testing with VoiceOver (macOS), NVDA (Windows), or Orca (Linux) to verify announcements.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(s.Keyboard,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Keyboard-Only Testing",description:"Navigate the entire interface using only Tab, Arrow keys, Enter, and Escape. No mouse allowed.",iconBgClassName:"from-teal-500 to-cyan-500"}],o=`import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Input, Modal, Alert, Select } from '@e-burgos/tucu-ui';
+
+expect.extend(toHaveNoViolations);
+
+describe('Accessibility Tests', () => {
+  it('Input has no violations', async () => {
+    const { container } = render(
+      <Input label="Email" required helperText="Enter your email" />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Alert has no violations', async () => {
+    const { container } = render(
+      <Alert variant="warning">Important message</Alert>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Select has no violations', async () => {
+    const { container } = render(
+      <Select
+        label="Country"
+        options={[{ name: 'Argentina', value: 'ar' }]}
+        value=""
+        onSelect={() => {}}
+      />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});`,n=["Tab through all interactive elements — verify logical order","Press Escape on modals, drawers, selects — verify they close","Arrow keys in Tabs and Select — verify correct navigation","Check visible focus rings on all focusable elements","Verify color contrast ≥ 4.5:1 (use browser inspector)","Test with VoiceOver/NVDA — verify announcements make sense","Resize to 200% zoom — verify no content is hidden or overlapping","Disable CSS — verify content order is logical"];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Accessibility Testing",description:"Strategies for testing accessibility — automated tools catch ~30% of issues, manual testing catches the rest.",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-teal-500 via-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.TestTube,{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:"Testing Tools"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Recommended tools for accessibility validation"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:r.map(a=>e.jsx(t.FeatureCard,{layout:"horizontal",...a},a.title))})]}),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:"Automated Tests with jest-axe"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Add axe-core checks to your existing test suite"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:o})]}),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:"Manual Testing Checklist"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Steps to manually verify accessibility"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-3",children:n.map((a,i)=>e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 shrink-0 mt-0.5",children:e.jsx(t.Typography,{tag:"span",className:"text-xs font-semibold text-blue-600 dark:text-blue-400",children:i+1})}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:a})]},i))})})]})]})};exports.default=l;

package/documentation/TestingSection-laVHmYZE.js

@@ -0,0 +1,150 @@
+import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as c, T as a, ax as m, c as d, C as h } from "../index-19KsCnyX.js";
+import { TestTube as u, Scan as g, Monitor as p, Accessibility as x, Keyboard as y } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => {
+  const o = [
+    {
+      icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "jest-axe",
+      description: "Automated WCAG violation detection in unit tests. Run axe-core checks on rendered components.",
+      iconBgClassName: "from-red-500 to-pink-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Lighthouse",
+      description: "Full page accessibility audit with scoring. Available in Chrome DevTools or CI pipelines.",
+      iconBgClassName: "from-blue-500 to-indigo-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(x, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Screen Reader Testing",
+      description: "Manual testing with VoiceOver (macOS), NVDA (Windows), or Orca (Linux) to verify announcements.",
+      iconBgClassName: "from-purple-500 to-violet-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(y, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Keyboard-Only Testing",
+      description: "Navigate the entire interface using only Tab, Arrow keys, Enter, and Escape. No mouse allowed.",
+      iconBgClassName: "from-teal-500 to-cyan-500"
+    }
+  ], r = `import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Input, Modal, Alert, Select } from '@e-burgos/tucu-ui';
+
+expect.extend(toHaveNoViolations);
+
+describe('Accessibility Tests', () => {
+  it('Input has no violations', async () => {
+    const { container } = render(
+      <Input label="Email" required helperText="Enter your email" />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Alert has no violations', async () => {
+    const { container } = render(
+      <Alert variant="warning">Important message</Alert>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Select has no violations', async () => {
+    const { container } = render(
+      <Select
+        label="Country"
+        options={[{ name: 'Argentina', value: 'ar' }]}
+        value=""
+        onSelect={() => {}}
+      />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});`, n = [
+    "Tab through all interactive elements — verify logical order",
+    "Press Escape on modals, drawers, selects — verify they close",
+    "Arrow keys in Tabs and Select — verify correct navigation",
+    "Check visible focus rings on all focusable elements",
+    "Verify color contrast ≥ 4.5:1 (use browser inspector)",
+    "Test with VoiceOver/NVDA — verify announcements make sense",
+    "Resize to 200% zoom — verify no content is hidden or overlapping",
+    "Disable CSS — verify content order is logical"
+  ];
+  return /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ e(
+      c,
+      {
+        title: "Accessibility Testing",
+        description: "Strategies for testing accessibility — automated tools catch ~30% of issues, manual testing catches the rest.",
+        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-teal-500 via-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { 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: "Testing Tools" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Recommended tools for accessibility validation"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((s) => /* @__PURE__ */ e(m, { layout: "horizontal", ...s }, s.title)) })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Automated Tests with jest-axe" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Add axe-core checks to your existing test suite"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(d, { language: "tsx", code: r })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Manual Testing Checklist" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Steps to manually verify accessibility"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 space-y-3", children: n.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 shrink-0 mt-0.5", children: /* @__PURE__ */ e(
+          a,
+          {
+            tag: "span",
+            className: "text-xs font-semibold text-blue-600 dark:text-blue-400",
+            children: i + 1
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: s
+          }
+        )
+      ] }, i)) }) })
+    ] })
+  ] });
+};
+export {
+  C as default
+};

package/documentation/TextareaSection-D_4-b9Jx.js

@@ -0,0 +1,258 @@
+import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { H as x, C as a, a as i, T as t, v as s, P as u, A as w, c as N } from "../index-19KsCnyX.js";
+import { AlignLeft as v } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const P = () => {
+  const [n, d] = c(""), [m, h] = c(""), p = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], g = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ];
+  return /* @__PURE__ */ l(b, { children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        title: "Textarea",
+        description: "A multi-line text input component for longer text content.",
+        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-rose-500 via-pink-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-rose-500/50", children: /* @__PURE__ */ e(v, { 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 Textarea" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Message",
+            placeholder: "Write your message here",
+            value: n,
+            onChange: (r) => d(r.target.value),
+            rows: 4
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { 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__ */ l(a, { 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__ */ l(a, { 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(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(
+          s,
+          {
+            label: "Ghost Variant",
+            placeholder: "Enter text",
+            variant: "ghost",
+            rows: 3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { 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__ */ l(a, { 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(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: p.map(({ label: r, color: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: r }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          label: `${r} Textarea`,
+          placeholder: "Enter text",
+          rows: 3,
+          color: o
+        }
+      )
+    ] }, o)) }) }) }) }),
+    /* @__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: g.map(({ label: r, size: o }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: r }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          label: `${r} Textarea`,
+          placeholder: "Enter text",
+          rows: 3,
+          size: o
+        }
+      )
+    ] }, o)) }) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        componentName: "Textarea",
+        defaultValues: {
+          label: "Preview Textarea",
+          placeholder: "Enter text",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          rows: 4,
+          helperText: "",
+          error: "",
+          useUppercaseLabel: !1,
+          disabled: !1
+        },
+        controlOverrides: [
+          {
+            name: "placeholder",
+            type: "text",
+            description: "Placeholder text rendered inside the textarea"
+          },
+          {
+            name: "color",
+            type: "select",
+            options: [
+              "primary",
+              "secondary",
+              "danger",
+              "info",
+              "success",
+              "warning"
+            ],
+            description: "Color treatment applied to the control"
+          },
+          {
+            name: "rows",
+            type: "number",
+            description: "Visible row count for the textarea preview"
+          },
+          {
+            name: "disabled",
+            type: "boolean",
+            description: "Disables the textarea and prevents interaction"
+          }
+        ],
+        includeProps: [
+          "label",
+          "placeholder",
+          "variant",
+          "color",
+          "size",
+          "rows",
+          "helperText",
+          "error",
+          "useUppercaseLabel",
+          "disabled"
+        ],
+        excludeProps: ["inputClassName"],
+        children: (r) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
+          s,
+          {
+            ...r,
+            rows: typeof r.rows == "number" ? r.rows : 4,
+            placeholder: r.placeholder || "Enter text",
+            value: m,
+            onChange: (o) => h(o.target.value)
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(w, { componentName: "Textarea" }),
+    /* @__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(
+      N,
+      {
+        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} />
+
+// Colors
+<Textarea label="Primary" color="primary" rows={4} />
+<Textarea label="Secondary" color="secondary" rows={4} />
+<Textarea label="Danger" color="danger" rows={4} />
+<Textarea label="Info" color="info" rows={4} />
+<Textarea label="Success" color="success" rows={4} />
+<Textarea label="Warning" color="warning" rows={4} />
+
+// Sizes
+<Textarea label="Small" size="sm" rows={3} />
+<Textarea label="Medium" size="md" rows={4} />
+<Textarea label="Large" size="lg" rows={5} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  P as default
+};

package/documentation/TextareaSection-Dx8UEgUG.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-DMs_SmPq.js"),m=require("lucide-react");require("react-router-dom");require("react-dom");const x=()=>{const[t,o]=l.useState(""),[i,n]=l.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:"Textarea",description:"A multi-line text input component for longer text content.",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-rose-500 via-pink-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-rose-500/50",children:e.jsx(m.AlignLeft,{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 Textarea"}),e.jsx(a.Textarea,{label:"Message",placeholder:"Write your message here",value:t,onChange:r=>o(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:"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:r,color:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.Textarea,{label:`${r} Textarea`,placeholder:"Enter text",rows:3,color:s})]},s))})})})}),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:r,size:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.Textarea,{label:`${r} Textarea`,placeholder:"Enter text",rows:3,size:s})]},s))})})})}),e.jsx(a.PropPlayground,{componentName:"Textarea",defaultValues:{label:"Preview Textarea",placeholder:"Enter text",variant:"ghost",color:"primary",size:"md",rows:4,helperText:"",error:"",useUppercaseLabel:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the textarea"},{name:"color",type:"select",options:["primary","secondary","danger","info","success","warning"],description:"Color treatment applied to the control"},{name:"rows",type:"number",description:"Visible row count for the textarea preview"},{name:"disabled",type:"boolean",description:"Disables the textarea and prevents interaction"}],includeProps:["label","placeholder","variant","color","size","rows","helperText","error","useUppercaseLabel","disabled"],excludeProps:["inputClassName"],children:r=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.Textarea,{...r,rows:typeof r.rows=="number"?r.rows:4,placeholder:r.placeholder||"Enter text",value:i,onChange:s=>n(s.target.value)})})}),e.jsx(a.AutoPropsTable,{componentName:"Textarea"}),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} />
+
+// Colors
+<Textarea label="Primary" color="primary" rows={4} />
+<Textarea label="Secondary" color="secondary" rows={4} />
+<Textarea label="Danger" color="danger" rows={4} />
+<Textarea label="Info" color="info" rows={4} />
+<Textarea label="Success" color="success" rows={4} />
+<Textarea label="Warning" color="warning" rows={4} />
+
+// Sizes
+<Textarea label="Small" size="sm" rows={3} />
+<Textarea label="Medium" size="md" rows={4} />
+<Textarea label="Large" size="lg" rows={5} />`})})})})]})};exports.default=x;

package/documentation/ThemeArchitectureSection-BJt75CEU.js

@@ -0,0 +1,27 @@
+"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=()=>{const o=[{icon:e.jsx(s.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Zustand State Management",description:"Centralized theme state with minimal boilerplate, localStorage persistence, and excellent TypeScript support.",iconBgClassName:"from-yellow-500 via-amber-500 to-orange-500"},{icon:e.jsx(s.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"CSS Custom Properties",description:"Dynamic brand colors using 12 CSS variables (6 light/dark pairs) for real-time theme updates without rebuilds.",iconBgClassName:"from-blue-500 via-cyan-500 to-teal-500"},{icon:e.jsx(s.Moon,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Dark Mode Support",description:"Automatic dark/light mode switching with smooth transitions and system preference detection.",iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"}],i=[{icon:e.jsx(s.Layout,{className:"w-5 h-5"}),title:"Default",description:"Standard theme with Clean, Admin, and Horizontal layouts.",color:"blue"},{icon:e.jsx(s.Monitor,{className:"w-5 h-5"}),title:"macOS (Sonoma)",description:"macOS-inspired dock layout with Sonoma visual style.",color:"purple"},{icon:e.jsx(s.Sparkles,{className:"w-5 h-5"}),title:"macOS Tahoe",description:"Latest macOS Tahoe style with Tahoe and Tahoe Dock layouts.",color:"teal"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Theme Architecture",description:"Built on Zustand, CSS custom properties, and Tailwind CSS v4 for a flexible, performant, and type-safe theming system.",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(s.Layers,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Core Technologies"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three pillars that power the theming system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map(t=>e.jsx(a.FeatureCard,{layout:"horizontal",...t},t.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Theme Variants"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three visual styles with their own layout constraints"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map(t=>e.jsx(a.ColorCard,{icon:t.icon,title:t.title,description:t.description,color:t.color},t.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Layout Constraint Map"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Each theme variant restricts which layouts are available"})]}),e.jsx(a.CodeBlock,{language:"typescript",code:`// THEME_STYLE_LAYOUTS mapping
+const THEME_STYLE_LAYOUTS: Record<THEME_VARIANT, ThemeStyleConfig> = {
+  default: {
+    validLayouts: [CLEAN, ADMIN, HORIZONTAL],
+    defaultLayout: HORIZONTAL,
+  },
+  macos: {
+    validLayouts: [MACOS, MACOS_CLEAN],
+    defaultLayout: MACOS,
+  },
+  'macos-tahoe': {
+    validLayouts: [MACOS_TAHOE, MACOS_TAHOE_DOCK, MACOS_TAHOE_CLEAN],
+    defaultLayout: MACOS_TAHOE,
+  },
+};
+
+// LAYOUT_OPTIONS enum (8 values)
+enum LAYOUT_OPTIONS {
+  CLEAN = 'clean',
+  ADMIN = 'admin',
+  HORIZONTAL = 'horizontal',
+  MACOS = 'macos',
+  MACOS_CLEAN = 'macos-clean',
+  MACOS_TAHOE = 'macos-tahoe',
+  MACOS_TAHOE_DOCK = 'macos-tahoe-dock',
+  MACOS_TAHOE_CLEAN = 'macos-tahoe-clean',
+}`})]})]})};exports.default=r;