@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/AreaChartSection-CzLGWCua.js

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,18 @@
+"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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,6 @@
+"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;