@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/TahoeWindowSection-dmucU8bq.js

@@ -1,289 +0,0 @@
-import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { H as x, C as h, a as f, bE as o, T as u, c as w, P as C, A as N } from "../index-BOVWnu1L.js";
-import { AppWindow as v, RotateCcw as y } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-function d({ onClick: i }) {
-  return /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      onClick: i,
-      className: "mt-3 flex items-center gap-2 rounded-lg bg-(--color-brand) px-3 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-80",
-      children: [
-        /* @__PURE__ */ e(y, { className: "h-3.5 w-3.5" }),
-        "Restore Window"
-      ]
-    }
-  );
-}
-function n() {
-  const [i, a] = g(0), [s, l] = g(!1);
-  return { key: i, closed: s, onClose: () => l(!0), restore: () => {
-    l(!1), a((r) => r + 1);
-  } };
-}
-const L = () => {
-  const i = n(), a = n(), s = n(), l = n(), c = n(), m = n(), r = n();
-  return /* @__PURE__ */ t(p, { children: [
-    /* @__PURE__ */ e(
-      x,
-      {
-        title: "Window",
-        description: "Liquid Glass window with translucent title bar, traffic lights, and optional resize handles. Supports close, minimize, fullscreen, and portal rendering.",
-        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-slate-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-slate-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(h, { children: /* @__PURE__ */ e(f, { title: "Default Window", className: "mt-2 mb-2", children: /* @__PURE__ */ t(
-      "div",
-      {
-        className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-blue-500/20 to-purple-500/20 p-8",
-        style: { minHeight: 320 },
-        children: [
-          /* @__PURE__ */ e(
-            o,
-            {
-              title: "Liquid Glass Window",
-              width: 420,
-              defaultState: i.closed ? "closed" : "normal",
-              onClose: i.onClose,
-              children: /* @__PURE__ */ t("div", { className: "p-6 text-sm text-(--macos-tahoe-text)", children: [
-                /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Glass Material Window" }),
-                /* @__PURE__ */ t("p", { className: "text-[12px] text-(--macos-tahoe-text-muted) leading-relaxed", children: [
-                  "This window uses ",
-                  /* @__PURE__ */ e("code", { children: "--macos-glass-regular-bg" }),
-                  " for its translucent background and ",
-                  /* @__PURE__ */ e("code", { children: "--macos-glass-clear-bg" }),
-                  " ",
-                  "for the title bar, creating the characteristic Tahoe layered glass effect."
-                ] })
-              ] })
-            },
-            i.key
-          ),
-          i.closed && /* @__PURE__ */ e(d, { onClick: i.restore })
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Traffic Lights Behavior", className: "mt-2 mb-2", children: [
-      /* @__PURE__ */ t(
-        u,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
-          children: [
-            "🔴 Close hides the window  ·  🟡 Minimize collapses to header only  ·  🟢 Maximize restores or toggles fullscreen (with ",
-            /* @__PURE__ */ e("code", { children: "fullSize" }),
-            "). Use ",
-            /* @__PURE__ */ e("code", { children: "defaultState" }),
-            " to restore programmatically."
-          ]
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
-          /* @__PURE__ */ e(
-            o,
-            {
-              title: "Try the buttons",
-              width: "100%",
-              fullSize: !0,
-              defaultState: a.closed ? "closed" : "normal",
-              onClose: a.onClose,
-              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Click 🔴 to close, 🟡 to minimize, 🟢 to fullscreen." })
-            },
-            a.key
-          ),
-          a.closed && /* @__PURE__ */ e(d, { onClick: a.restore })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
-          /* @__PURE__ */ e(
-            o,
-            {
-              title: "Disabled Close",
-              width: "100%",
-              disableClose: !0,
-              defaultState: s.closed ? "closed" : "normal",
-              onClose: s.onClose,
-              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "The close button is disabled. Minimize and maximize still work." })
-            },
-            s.key
-          ),
-          s.closed && /* @__PURE__ */ e(d, { onClick: s.restore })
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Traffic Lights Positions", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
-        /* @__PURE__ */ e(
-          o,
-          {
-            title: "Left (default)",
-            width: "100%",
-            defaultState: l.closed ? "closed" : "normal",
-            onClose: l.onClose,
-            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the left side." })
-          },
-          l.key
-        ),
-        l.closed && /* @__PURE__ */ e(d, { onClick: l.restore })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
-        /* @__PURE__ */ e(
-          o,
-          {
-            title: "Right",
-            width: "100%",
-            trafficLightsPosition: "right",
-            defaultState: c.closed ? "closed" : "normal",
-            onClose: c.onClose,
-            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the right side." })
-          },
-          c.key
-        ),
-        c.closed && /* @__PURE__ */ e(d, { onClick: c.restore })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "No Traffic Lights", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-amber-500/20 to-orange-500/20 p-6", children: [
-      /* @__PURE__ */ e(
-        o,
-        {
-          title: "Clean Window",
-          width: 360,
-          showTrafficLights: !1,
-          defaultState: m.closed ? "closed" : "normal",
-          onClose: m.onClose,
-          children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Window without traffic light controls — ideal for utility panels or embedded views." })
-        },
-        m.key
-      ),
-      m.closed && /* @__PURE__ */ e(d, { onClick: m.restore })
-    ] }) }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Draggable Window", className: "mt-2 mb-2", children: [
-      /* @__PURE__ */ t(
-        u,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
-          children: [
-            "With ",
-            /* @__PURE__ */ e("code", { children: "draggable" }),
-            ", grab the title bar to move the window freely across the viewport. It automatically portals when dragged."
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-rose-500/20 to-pink-500/20 p-8",
-          style: { minHeight: 280 },
-          children: [
-            /* @__PURE__ */ e(
-              o,
-              {
-                title: "Drag me!",
-                width: 380,
-                draggable: !0,
-                defaultState: r.closed ? "closed" : "normal",
-                onClose: r.onClose,
-                children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Grab the title bar and drag this window anywhere on the screen." })
-              },
-              r.key
-            ),
-            r.closed && /* @__PURE__ */ e(d, { onClick: r.restore })
-          ]
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
-      w,
-      {
-        code: `import { MacOSTahoeWindow } from '@e-burgos/tucu-ui';
-
-<MacOSTahoeWindow
-  title="My Window"
-  showTrafficLights
-  trafficLightsPosition="left"   // 'left' | 'right'
-  resizable
-  fullSize                        // 🟢 second click = fullscreen
-  portal                          // renders via portal
-  defaultState="normal"           // 'normal' | 'minimized' | 'fullscreen' | 'closed'
-  width={480}
-  height={320}
-  minWidth={200}
-  minHeight={120}
-  disableClose                    // disable 🔴
-  disableMinimize                 // disable 🟡
-  disableMaximize                 // disable 🟢
-  draggable                        // drag by title bar
-  onClose={() => setClosed(true)}
-  onMinimize={() => console.log('minimize')}
-  onMaximize={() => console.log('maximize')}
->
-  <div className="p-6">Window content</div>
-</MacOSTahoeWindow>`,
-        language: "tsx"
-      }
-    ) }) }),
-    /* @__PURE__ */ e(
-      C,
-      {
-        componentName: "MacOSTahoeWindow",
-        defaultValues: {
-          title: "My Window",
-          defaultState: "normal",
-          trafficLightsPosition: "left",
-          showTrafficLights: !0,
-          disableClose: !1,
-          disableMinimize: !1,
-          disableMaximize: !1,
-          draggable: !1,
-          fullSize: !1,
-          resizable: !1,
-          portal: !1,
-          width: 380,
-          minWidth: 200,
-          minHeight: 120
-        },
-        includeProps: [
-          "title",
-          "defaultState",
-          "trafficLightsPosition",
-          "showTrafficLights",
-          "disableClose",
-          "disableMinimize",
-          "disableMaximize",
-          "draggable",
-          "fullSize",
-          "resizable",
-          "portal",
-          "width",
-          "minWidth",
-          "minHeight"
-        ],
-        excludeProps: [
-          "className",
-          "height",
-          "titleBarClassName",
-          "onClose",
-          "onMinimize",
-          "onMaximize"
-        ],
-        children: (b) => /* @__PURE__ */ e(
-          "div",
-          {
-            className: "relative rounded-xl bg-linear-to-br from-slate-500/20 to-indigo-500/20 p-8",
-            style: { minHeight: 220 },
-            children: /* @__PURE__ */ e(o, { ...b, children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Interactive window — adjust props above." }) })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(N, { componentName: "MacOSTahoeWindow" })
-  ] });
-};
-export {
-  L as TahoeWindowSection,
-  L as default
-};

package/documentation/TailwindConfigSection-BZMbbrq5.js

@@ -1,128 +0,0 @@
-import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { H as l, T as r, ax as n, C as c, a as s, c as o, aj as u } from "../index-BOVWnu1L.js";
-import { Code as d, Circle as m, Layers as p, Moon as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => /* @__PURE__ */ a(t, { children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      title: "Tailwind CSS Configuration",
-      description: "Built on Tailwind CSS v4 with Tucu UI Design Tokens for a CSS-first configuration system.",
-      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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Design Tokens" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Primitive color tokens organized into spectrums"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
-      {
-        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "Color Spectrums",
-        description: "Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse — 11 spectrums total.",
-        iconBgClassName: "from-indigo-500 to-purple-500"
-      },
-      {
-        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "Scale 0-100",
-        description: "Each spectrum has values from 0 to 100 in steps of 5/10 (e.g., blue-0, blue-5, blue-10 ... blue-100).",
-        iconBgClassName: "from-cyan-500 to-blue-500"
-      },
-      {
-        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "Light & Dark Variants",
-        description: "Separate color sets for light and dark modes (e.g., --color-tucu-ui-blue-60 vs --color-tucu-ui-dark-blue-70).",
-        iconBgClassName: "from-violet-500 to-purple-500"
-      }
-    ].map((i) => /* @__PURE__ */ e(n, { layout: "horizontal", ...i }, i.title)) })
-  ] }),
-  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Semantic Colors" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Design tokens mapped to functional purposes"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Semantic Color Variables", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e(
-      o,
-      {
-        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);
-
-/* Dark mode variants */
---color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
---color-semantic-dark-bg-secondary: var(--color-tucu-ui-dark-gray-20);`
-      }
-    ) }) }) })
-  ] }),
-  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Spacing Scale" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Pixel-based spacing mapped to Tucu UI Design Tokens"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(s, { title: "Spacing Tokens", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ e(
-        o,
-        {
-          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__ */ e(u, { variant: "info", children: /* @__PURE__ */ a(r, { tag: "p", className: "text-sm", children: [
-        /* @__PURE__ */ e("strong", { children: "Note:" }),
-        " Components use arbitrary values like",
-        " ",
-        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-[16px]" }),
-        " ",
-        "instead of",
-        " ",
-        /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "p-4" }),
-        " ",
-        "to maintain original spacing values consistently."
-      ] }) })
-    ] }) }) })
-  ] })
-] });
-export {
-  w as default
-};

package/documentation/TailwindConfigSection-Ttg7FR_l.js

@@ -1,23 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-CQ1tqJiQ.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const i=[{icon:e.jsx(s.Circle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Spectrums",description:"Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse — 11 spectrums total.",iconBgClassName:"from-indigo-500 to-purple-500"},{icon:e.jsx(s.Layers,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Scale 0-100",description:"Each spectrum has values from 0 to 100 in steps of 5/10 (e.g., blue-0, blue-5, blue-10 ... blue-100).",iconBgClassName:"from-cyan-500 to-blue-500"},{icon:e.jsx(s.Moon,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Light & Dark Variants",description:"Separate color sets for light and dark modes (e.g., --color-tucu-ui-blue-60 vs --color-tucu-ui-dark-blue-70).",iconBgClassName:"from-violet-500 to-purple-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Tailwind CSS Configuration",description:"Built on Tailwind CSS v4 with Tucu UI Design Tokens for a CSS-first configuration 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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Code,{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:"Design Tokens"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Primitive color tokens organized into spectrums"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map(r=>e.jsx(a.FeatureCard,{layout:"horizontal",...r},r.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:"Semantic Colors"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Design tokens mapped to functional purposes"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Semantic Color Variables",children:e.jsx("div",{className:"space-y-4",children:e.jsx(a.CodeBlock,{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);
-
-/* Dark mode variants */
---color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
---color-semantic-dark-bg-secondary: var(--color-tucu-ui-dark-gray-20);`})})})})]}),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:"Spacing Scale"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Pixel-based spacing mapped to Tucu UI Design Tokens"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Spacing Tokens",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.CodeBlock,{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 */`}),e.jsx(a.Alert,{variant:"info",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Note:"})," Components use arbitrary values like"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"p-[16px]"})," ","instead of"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"p-4"})," ","to maintain original spacing values consistently."]})})]})})})]})]})};exports.default=c;

package/documentation/TestingSection-B2FcntZ4.js

@@ -1,150 +0,0 @@
-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-BOVWnu1L.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/TestingSection-DeW3JIPr.js

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