@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/ArchitectureOverviewSection-C8sgSFI-.js

@@ -1,210 +0,0 @@
-import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as r, ax as o, C as l, K as s } from "../index-DoxeCFUJ.js";
-import { Layers as i, Box as c, GitBranch as h, AlertCircle as p, TextCursorInput as g, Link as x, Eye as u, Activity as f, RotateCcw as y, Info as N, Shield as v, Zap as w } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const I = () => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ e(
-    m,
-    {
-      title: "Architecture Overview",
-      description: "The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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: "Core Layers" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Four architectural layers that compose the form system"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
-      {
-        title: "Form Container",
-        description: "Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",
-        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6" })
-      },
-      {
-        title: "FormField Wrapper",
-        description: "Connects any input to the form state. Handles registration, error display, and label rendering automatically.",
-        icon: /* @__PURE__ */ e(i, { className: "w-6 h-6" })
-      },
-      {
-        title: "Validation System",
-        description: "Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",
-        icon: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
-      },
-      {
-        title: "Performance",
-        description: "Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",
-        icon: /* @__PURE__ */ e(w, { className: "w-6 h-6" })
-      }
-    ].map((t, n) => /* @__PURE__ */ e(
-      o,
-      {
-        title: t.title,
-        description: t.description,
-        icon: t.icon
-      },
-      n
-    )) })
-  ] }),
-  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Component Tree" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "How Form, FormField, and useFormContext relate to each other"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 flex items-center gap-3", children: [
-        /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(
-            r,
-            {
-              tag: "h3",
-              className: "font-semibold text-blue-700 dark:text-blue-300",
-              children: "<Form>"
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2 mt-1", children: [
-            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "useFormProps" }),
-            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "validationSchema" }),
-            /* @__PURE__ */ e(s, { variant: "soft", color: "info", children: "onSubmit" })
-          ] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600" }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl", children: [
-        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
-          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(i, { className: "w-4 h-4 text-purple-600 dark:text-purple-400" }) }),
-              /* @__PURE__ */ e(
-                r,
-                {
-                  tag: "h3",
-                  className: "font-semibold text-purple-700 dark:text-purple-300",
-                  children: "<FormField>"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(h, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ e(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: "Controller (react-hook-form)"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ e(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: "Error display (automatic)"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(g, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ a(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: [
-                      "<Input />",
-                      " (any input)"
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
-          /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-center gap-2", children: ["Input", "Select", "Checkbox", "Switch", "Radio"].map(
-            (t) => /* @__PURE__ */ e(s, { variant: "outline", color: "primary", children: t }, t)
-          ) })
-        ] }),
-        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-3", children: [
-          /* @__PURE__ */ e(l, { children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-5 space-y-3", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(x, { className: "w-4 h-4 text-emerald-600 dark:text-emerald-400" }) }),
-              /* @__PURE__ */ e(
-                r,
-                {
-                  tag: "h3",
-                  className: "font-semibold text-emerald-700 dark:text-emerald-300",
-                  children: "useFormContext()"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ a("div", { className: "space-y-2 pl-12", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ e(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: "watch, setValue, getValues"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ e(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: "formState: errors, isDirty"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e(y, { className: "w-3.5 h-3.5 text-gray-400" }),
-                /* @__PURE__ */ e(
-                  r,
-                  {
-                    tag: "span",
-                    className: "text-sm text-gray-600 dark:text-gray-400",
-                    children: "reset, trigger, clearErrors"
-                  }
-                )
-              ] })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ e("div", { className: "w-px h-4 bg-gray-300 dark:bg-gray-600" }),
-          /* @__PURE__ */ a(s, { variant: "soft", color: "success", children: [
-            /* @__PURE__ */ e(N, { className: "w-3.5 h-3.5" }),
-            "Available in any child component"
-          ] })
-        ] })
-      ] })
-    ] })
-  ] })
-] });
-export {
-  I as default
-};

package/documentation/ArchitectureOverviewSection-D0tlNXWy.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const t=[{title:"Form Container",description:"Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",icon:e.jsx(s.Box,{className:"w-6 h-6"})},{title:"FormField Wrapper",description:"Connects any input to the form state. Handles registration, error display, and label rendering automatically.",icon:e.jsx(s.Layers,{className:"w-6 h-6"})},{title:"Validation System",description:"Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",icon:e.jsx(s.Shield,{className:"w-6 h-6"})},{title:"Performance",description:"Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",icon:e.jsx(s.Zap,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Architecture Overview",description:"The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(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 Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Four architectural layers that compose the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:t.map((r,i)=>e.jsx(a.FeatureCard,{title:r.title,description:r.description,icon:r.icon},i))})]}),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:"Component Tree"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How Form, FormField, and useFormContext relate to each other"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0",children:e.jsx(s.Box,{className:"w-5 h-5 text-blue-600 dark:text-blue-400"})}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-blue-700 dark:text-blue-300",children:"<Form>"}),e.jsxs("div",{className:"flex flex-wrap gap-2 mt-1",children:[e.jsx(a.Badge,{variant:"soft",color:"info",children:"useFormProps"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"validationSchema"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"onSubmit"})]})]})]})}),e.jsx("div",{className:"w-px h-6 bg-gray-300 dark:bg-gray-600"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Layers,{className:"w-4 h-4 text-purple-600 dark:text-purple-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-purple-700 dark:text-purple-300",children:"<FormField>"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.GitBranch,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Controller (react-hook-form)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.AlertCircle,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Error display (automatic)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.TextCursorInput,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsxs(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:["<Input />"," (any input)"]})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2",children:["Input","Select","Checkbox","Switch","Radio"].map(r=>e.jsx(a.Badge,{variant:"outline",color:"primary",children:r},r))})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Link,{className:"w-4 h-4 text-emerald-600 dark:text-emerald-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-emerald-700 dark:text-emerald-300",children:"useFormContext()"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Eye,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"watch, setValue, getValues"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Activity,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"formState: errors, isDirty"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.RotateCcw,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"reset, trigger, clearErrors"})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsxs(a.Badge,{variant:"soft",color:"success",children:[e.jsx(s.Info,{className:"w-3.5 h-3.5"}),"Available in any child component"]})]})]})]})]})]})};exports.default=l;

package/documentation/AreaChartSection-BOwKYw6Y.js

@@ -1,22 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=[{name:"Jan",users:400,sessions:2400,pageViews:4400},{name:"Feb",users:300,sessions:1398,pageViews:3210},{name:"Mar",users:500,sessions:3800,pageViews:5400},{name:"Apr",users:780,sessions:3908,pageViews:6200},{name:"May",users:890,sessions:4800,pageViews:7100},{name:"Jun",users:1200,sessions:5800,pageViews:9400},{name:"Jul",users:1500,sessions:6300,pageViews:11e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"AreaChart"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Area Chart with Gradient",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],height:300,gradient:!0})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Stacked Area Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users",stackId:"a"},{dataKey:"sessions",name:"Sessions",stackId:"a"},{dataKey:"pageViews",name:"Page Views",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Without Gradient (Flat)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],gradient:!1,curved:!1,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{code:`import { AreaChart } from '@e-burgos/tucu-ui';
-
-const data = [
-  { name: 'Jan', users: 400, sessions: 2400 },
-  { name: 'Feb', users: 300, sessions: 1398 },
-  { name: 'Mar', users: 500, sessions: 3800 },
-];
-
-<AreaChart
-  data={data}
-  series={[
-    { dataKey: 'users', name: 'Users' },
-    { dataKey: 'sessions', name: 'Sessions' },
-  ]}
-  height={300}
-  curved
-  gradient
-  stacked={false}
-  showGrid
-  showTooltip
-  showLegend
-/>`,language:"tsx"})})})}),e.jsx(s.PropPlayground,{componentName:"AreaChart",defaultValues:{height:300,curved:!0,gradient:!0,stacked:!1,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],...r})}),e.jsx(s.AutoPropsTable,{componentName:"AreaChart"})]});exports.default=t;

package/documentation/AreaChartSection-CzLGWCua.js

@@ -1,132 +0,0 @@
-import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a, m as t, c as m, P as l, A as c } from "../index-DoxeCFUJ.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const r = [
-  { name: "Jan", users: 400, sessions: 2400, pageViews: 4400 },
-  { name: "Feb", users: 300, sessions: 1398, pageViews: 3210 },
-  { name: "Mar", users: 500, sessions: 3800, pageViews: 5400 },
-  { name: "Apr", users: 780, sessions: 3908, pageViews: 6200 },
-  { name: "May", users: 890, sessions: 4800, pageViews: 7100 },
-  { name: "Jun", users: 1200, sessions: 5800, pageViews: 9400 },
-  { name: "Jul", users: 1500, sessions: 6300, pageViews: 11e3 }
-], y = () => /* @__PURE__ */ i(o, { children: [
-  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(n, { tag: "h2", className: "text-base md:text-base font-semibold", children: "AreaChart" }),
-    /* @__PURE__ */ e(
-      n,
-      {
-        tag: "p",
-        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Area Chart with Gradient", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: r,
-      series: [
-        { dataKey: "users", name: "Users" },
-        { dataKey: "sessions", name: "Sessions" }
-      ],
-      height: 300,
-      gradient: !0
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Stacked Area Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: r,
-      series: [
-        { dataKey: "users", name: "Users", stackId: "a" },
-        { dataKey: "sessions", name: "Sessions", stackId: "a" },
-        { dataKey: "pageViews", name: "Page Views", stackId: "a" }
-      ],
-      stacked: !0,
-      height: 300
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Without Gradient (Flat)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: r,
-      series: [
-        { dataKey: "users", name: "Users" },
-        { dataKey: "sessions", name: "Sessions" }
-      ],
-      gradient: !1,
-      curved: !1,
-      height: 300
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    m,
-    {
-      code: `import { AreaChart } from '@e-burgos/tucu-ui';
-
-const data = [
-  { name: 'Jan', users: 400, sessions: 2400 },
-  { name: 'Feb', users: 300, sessions: 1398 },
-  { name: 'Mar', users: 500, sessions: 3800 },
-];
-
-<AreaChart
-  data={data}
-  series={[
-    { dataKey: 'users', name: 'Users' },
-    { dataKey: 'sessions', name: 'Sessions' },
-  ]}
-  height={300}
-  curved
-  gradient
-  stacked={false}
-  showGrid
-  showTooltip
-  showLegend
-/>`,
-      language: "tsx"
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(
-    l,
-    {
-      componentName: "AreaChart",
-      defaultValues: {
-        height: 300,
-        curved: !0,
-        gradient: !0,
-        stacked: !1,
-        showGrid: !0,
-        showTooltip: !0,
-        showLegend: !0,
-        animate: !0
-      },
-      excludeProps: [
-        "data",
-        "series",
-        "colors",
-        "className",
-        "xAxisKey",
-        "emptyMessage"
-      ],
-      children: (d) => /* @__PURE__ */ e(
-        t,
-        {
-          data: r,
-          series: [
-            { dataKey: "users", name: "Users" },
-            { dataKey: "sessions", name: "Sessions" }
-          ],
-          ...d
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ e(c, { componentName: "AreaChart" })
-] });
-export {
-  y as default
-};

package/documentation/AuthorCardSection-CHuq5QLN.js

@@ -1,18 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
-          and role.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.UserCircle,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic 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:"With Name and Role"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>e.jsx(a.AuthorCard,{...t})}),e.jsx(a.AutoPropsTable,{componentName:"AuthorCard"}),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 { AuthorCard } from '@e-burgos/tucu-ui';
-
-// With name and role
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="John Doe"
-  authorRole="Senior Developer"
-/>
-
-// With name only
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="Jane Smith"
-/>
-
-// Avatar only
-<AuthorCard image="/path/to/avatar.jpg" />`})})})})]});exports.default=s;

package/documentation/AuthorCardSection-CrxUxl7Q.js

@@ -1,79 +0,0 @@
-import { jsxs as e, Fragment as s, jsx as a } from "react/jsx-runtime";
-import { H as n, C as r, a as l, T as t, G as o, P as d, A as h, c } from "../index-DoxeCFUJ.js";
-import { UserCircle as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-import { a as m } from "../1-Df9CGZha.js";
-const A = () => /* @__PURE__ */ e(s, { children: [
-  /* @__PURE__ */ a(
-    n,
-    {
-      title: "AuthorCard",
-      description: `A card component for displaying author information with avatar, name,
-          and role.`,
-      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ a(r, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ e(r, { className: "p-4", children: [
-      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "With Name and Role" }),
-      /* @__PURE__ */ a(
-        o,
-        {
-          image: m,
-          name: "John Doe",
-          authorRole: "Senior Developer"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(r, { className: "p-4", children: [
-      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "With Name Only" }),
-      /* @__PURE__ */ a(o, { image: m, name: "Jane Smith" })
-    ] }),
-    /* @__PURE__ */ e(r, { className: "p-4", children: [
-      /* @__PURE__ */ a(t, { tag: "h5", className: "mb-3", children: "Avatar Only" }),
-      /* @__PURE__ */ a(o, { image: m })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(
-    d,
-    {
-      componentName: "AuthorCard",
-      defaultValues: {
-        name: "John Doe",
-        authorRole: "Developer",
-        image: "https://randomuser.me/api/portraits/men/1.jpg"
-      },
-      excludeProps: [],
-      children: (i) => /* @__PURE__ */ a(o, { ...i })
-    }
-  ),
-  /* @__PURE__ */ a(h, { componentName: "AuthorCard" }),
-  /* @__PURE__ */ a(r, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    c,
-    {
-      language: "tsx",
-      code: `import { AuthorCard } from '@e-burgos/tucu-ui';
-
-// With name and role
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="John Doe"
-  authorRole="Senior Developer"
-/>
-
-// With name only
-<AuthorCard
-  image="/path/to/avatar.jpg"
-  name="Jane Smith"
-/>
-
-// Avatar only
-<AuthorCard image="/path/to/avatar.jpg" />`
-    }
-  ) }) }) })
-] });
-export {
-  A as default
-};

package/documentation/AvatarSection-BG9u4AUq.js

@@ -1,89 +0,0 @@
-import { jsxs as s, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-DoxeCFUJ.js";
-import { CircleUser as h } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-import { a as r } from "../1-Df9CGZha.js";
-const b = () => /* @__PURE__ */ s(d, { children: [
-  /* @__PURE__ */ a(
-    c,
-    {
-      title: "Avatar",
-      description: `A versatile avatar component for displaying user profile images with
-          multiple sizes and shapes.`,
-      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ a(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ s(i, { className: "p-4", children: [
-      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Default Avatar" }),
-      /* @__PURE__ */ a(e, { image: r, alt: "User avatar" })
-    ] }),
-    /* @__PURE__ */ s(i, { className: "p-4", children: [
-      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Without Border" }),
-      /* @__PURE__ */ a(e, { image: r, alt: "User avatar", border: !1 })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ s("div", { children: [
-      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Sizes" }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ a(e, { image: r, alt: "XS", size: "xs" }),
-        /* @__PURE__ */ a(e, { image: r, alt: "SM", size: "sm" }),
-        /* @__PURE__ */ a(e, { image: r, alt: "MD", size: "md" }),
-        /* @__PURE__ */ a(e, { image: r, alt: "LG", size: "lg" }),
-        /* @__PURE__ */ a(e, { image: r, alt: "XL", size: "xl" })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("div", { children: [
-      /* @__PURE__ */ a(l, { tag: "h5", className: "mb-3", children: "Shapes" }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ a(e, { image: r, alt: "Circle", shape: "circle" }),
-        /* @__PURE__ */ a(e, { image: r, alt: "Rounded", shape: "rounded" })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(
-    o,
-    {
-      componentName: "Avatar",
-      defaultValues: {
-        size: "md",
-        shape: "circle",
-        border: !0,
-        image: "https://randomuser.me/api/portraits/men/1.jpg",
-        alt: "Avatar"
-      },
-      children: (m) => /* @__PURE__ */ a(e, { ...m })
-    }
-  ),
-  /* @__PURE__ */ a(n, { componentName: "Avatar" }),
-  /* @__PURE__ */ a(i, { className: "overflow-hidden", children: /* @__PURE__ */ a(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    g,
-    {
-      language: "tsx",
-      code: `import { Avatar } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Avatar image="/path/to/image.jpg" alt="User name" />
-
-// Different sizes
-<Avatar image={image} alt="User" size="xs" />
-<Avatar image={image} alt="User" size="sm" />
-<Avatar image={image} alt="User" size="md" />
-<Avatar image={image} alt="User" size="lg" />
-<Avatar image={image} alt="User" size="xl" />
-
-// Different shapes
-<Avatar image={image} alt="User" shape="circle" />
-<Avatar image={image} alt="User" shape="rounded" />
-
-// Without border
-<Avatar image={image} alt="User" border={false} />`
-    }
-  ) }) }) })
-] });
-export {
-  b as default
-};

package/documentation/AvatarSection-DevddyMw.js

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DWDUS-PU.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
-          multiple sizes and shapes.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(i.CircleUser,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Avatar image="/path/to/image.jpg" alt="User name" />
-
-// Different sizes
-<Avatar image={image} alt="User" size="xs" />
-<Avatar image={image} alt="User" size="sm" />
-<Avatar image={image} alt="User" size="md" />
-<Avatar image={image} alt="User" size="lg" />
-<Avatar image={image} alt="User" size="xl" />
-
-// Different shapes
-<Avatar image={image} alt="User" shape="circle" />
-<Avatar image={image} alt="User" shape="rounded" />
-
-// Without border
-<Avatar image={image} alt="User" border={false} />`})})})})]});exports.default=t;

package/documentation/BackgroundsSection-CC7L7uIS.js

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=[{id:"base",name:"Base",type:"css",desc:"Spatial radial gradient. Default body/window background that adapts between light and dark.",usage:"Body, root window, app shell"},{id:"sonoma",name:"Sonoma",type:"css",desc:"Flat neutral surface matching macOS Sonoma system colors.",usage:"System-like flat interfaces"},{id:"radial",name:"Radial",type:"css",desc:"Vibrant radial gradient with brand colors for expressive surfaces.",usage:"Hero sections, expressive cards"},{id:"aurora",name:"Aurora",type:"css",desc:"Spatial aurora with animated-style blurred color orbs.",usage:"Landing pages, immersive UIs"},{id:"depth",name:"Depth",type:"css",desc:"Sober linear gradient, data-focused and subtle.",usage:"Dashboards, data-heavy layouts"},{id:"demo",name:"Demo",type:"css",desc:"Expressive dual-ellipse gradient for showcases and presentations.",usage:"Demos, showcases, marketing"},{id:"window",name:"Window",type:"css",desc:"Frosted glass surface with subtle backdrop blur.",usage:"Modal backdrops, floating panels"},{id:"wave",name:"Wave",type:"svg",desc:"Full-width decorative flowing shapes for desktop/tablet viewports.",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",type:"svg",desc:"Compact landscape format for banners and contained sections.",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",type:"svg",desc:"Portrait-oriented asset optimized for mobile viewports.",usage:"Mobile screens, narrow containers, portrait layouts"}],o=d.filter(t=>t.type==="css"),n=()=>{const{mode:t}=a.useTheme(),r=t==="dark";return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(a.HeroCard,{title:"Backgrounds",description:"Unified background system with 10 variants available across all theme layouts. CSS-only gradients and SVG assets that adapt automatically between light and dark modes.",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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{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:"All Background Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","component supports ",e.jsx("strong",{children:"10 variants"})," (7 CSS-only + 3 SVG assets). All are available in every theme layout via the"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"backgroundVariant"})," ","store value."]}),e.jsx(a.BasicTable,{columns:[{key:"name",label:"Variant"},{key:"type",label:"Type",className:"font-mono"},{key:"desc",label:"Description"},{key:"usage",label:"Usage"}],data:d.map(s=>({name:s.name,type:s.type.toUpperCase(),desc:s.desc,usage:s.usage})),hoverable:!0,striped:!1})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Pure CSS backgrounds generated with gradients and custom properties. No image downloads required."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",children:o.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-32 rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:s.id,className:"!z-0"})}),e.jsx("p",{className:"text-xs font-semibold text-center text-gray-700 dark:text-gray-300",children:s.name}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:s.desc})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"SVG Asset Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"SVG backgrounds loaded from CDN. Optimized for specific viewport sizes. The component handles loading states and fallback gracefully."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wave"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1512 × 982 — Landscape (desktop full-screen)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[200px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wave",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wave",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wallpaper"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1080 × 560 — Landscape (contained sections)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[180px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wallpaper",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wallpaper",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Mobile"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"402 × 874 — Portrait (mobile screens)"})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"mobile",className:"!z-0"})})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("mobile",r)]})})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","with two positioning modes:"]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Fixed Mode (Default Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Fullscreen fixed layer behind content. Content is wrapped automatically."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<ThemeBackground>
-  {children}
-</ThemeBackground>`})]}),e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Absolute Mode (macOS Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Absolute layer within parent container. No children wrapper."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<div className="relative">
-  <ThemeBackground mode="absolute" />
-  {/* your content */}
-</div>`})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"ThemeBackground Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:[{key:"prop",label:"Prop"},{key:"type",label:"Type",className:"font-mono text-xs"},{key:"default",label:"Default",className:"font-mono"},{key:"desc",label:"Description"}],data:[{prop:"mode",type:"'fixed' | 'absolute'",default:"'fixed'",desc:"Positioning mode."},{prop:"variant",type:"BackgroundVariant",default:"store value",desc:"Override variant (defaults to theme store)."},{prop:"cdnBase",type:"string",default:"CDN URL",desc:"Override CDN base for SVG assets."},{prop:"className",type:"string",default:"—",desc:"Additional CSS class for the bg container."},{prop:"style",type:"CSSProperties",default:"—",desc:"Inline styles for the bg container."},{prop:"children",type:"ReactNode",default:"—",desc:"Content (only wrapped in fixed mode)."}],hoverable:!0,striped:!1})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Viewport Recommendations",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Recommended SVG background variant per viewport breakpoint for responsive implementations."}),e.jsx(a.BasicTable,{columns:[{key:"viewport",label:"Viewport"},{key:"breakpoint",label:"Breakpoint",className:"font-mono"},{key:"variant",label:"Variant"},{key:"asset",label:"Asset",className:"font-mono"}],data:[{viewport:"Mobile",breakpoint:"< 640px",variant:"mobile",asset:`${r?"dark":"light"}-mobile.svg`},{viewport:"Tablet",breakpoint:"640–1024px",variant:"wallpaper",asset:`${r?"dark":"light"}-wallpaper.svg`},{viewport:"Desktop",breakpoint:"> 1024px",variant:"wave",asset:`${r?"dark":"light"}-wave.svg`},{viewport:"Any",breakpoint:"All",variant:"CSS variants",asset:"No asset needed"}],hoverable:!0,striped:!1})]})})})]})};exports.default=n;