import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { ay as p, H as g, C as s, a as l, T as d, y as i, az as o, aA as c } from "../index-sdOMz8GW.js";
import { Image as y } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const m = [
  {
    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"
  }
], h = m.filter((n) => n.type === "css"), k = () => {
  const { mode: n } = p(), t = n === "dark";
  return /* @__PURE__ */ a("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: [
    /* @__PURE__ */ e(
      g,
      {
        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: /* @__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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50", children: /* @__PURE__ */ e(y, { 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "All Background Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        d,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
          children: [
            "The",
            " ",
            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "ThemeBackground" }),
            " ",
            "component supports ",
            /* @__PURE__ */ e("strong", { children: "10 variants" }),
            " (7 CSS-only + 3 SVG assets). All are available in every theme layout via the",
            " ",
            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "backgroundVariant" }),
            " ",
            "store value."
          ]
        }
      ),
      /* @__PURE__ */ e(
        i,
        {
          columns: [
            { key: "name", label: "Variant" },
            { key: "type", label: "Type", className: "font-mono" },
            { key: "desc", label: "Description" },
            { key: "usage", label: "Usage" }
          ],
          data: m.map((r) => ({
            name: r.name,
            type: r.type.toUpperCase(),
            desc: r.desc,
            usage: r.usage
          })),
          hoverable: !0,
          striped: !1
        }
      )
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "CSS Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        d,
        {
          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."
        }
      ),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: h.map((r) => /* @__PURE__ */ a("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e("div", { className: "relative w-full h-32 rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
          o,
          {
            mode: "absolute",
            variant: r.id,
            className: "!z-0"
          }
        ) }),
        /* @__PURE__ */ e("p", { className: "text-xs font-semibold text-center text-gray-700 dark:text-gray-300", children: r.name }),
        /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: r.desc })
      ] }, r.id)) })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "SVG Asset Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        d,
        {
          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."
        }
      ),
      /* @__PURE__ */ a("div", { className: "space-y-6", children: [
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ a("p", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: [
            "Wave",
            " ",
            /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "1512 × 982 — Landscape (desktop full-screen)" })
          ] }),
          /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border h-[200px]", children: /* @__PURE__ */ e(
            o,
            {
              mode: "absolute",
              variant: "wave",
              className: "!z-0"
            }
          ) }),
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate", children: [
            /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
            " ",
            c("wave", t)
          ] }) })
        ] }),
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ a("p", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: [
            "Wallpaper",
            " ",
            /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "1080 × 560 — Landscape (contained sections)" })
          ] }),
          /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border h-[180px]", children: /* @__PURE__ */ e(
            o,
            {
              mode: "absolute",
              variant: "wallpaper",
              className: "!z-0"
            }
          ) }),
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate", children: [
            /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
            " ",
            c("wallpaper", t)
          ] }) })
        ] }),
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ a("p", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300", children: [
            "Mobile",
            " ",
            /* @__PURE__ */ e("span", { className: "text-[10px] font-mono font-normal text-gray-400", children: "402 × 874 — Portrait (mobile screens)" })
          ] }),
          /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: "relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]", children: /* @__PURE__ */ e(
            o,
            {
              mode: "absolute",
              variant: "mobile",
              className: "!z-0"
            }
          ) }) }),
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate", children: [
            /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
            " ",
            c("mobile", t)
          ] }) })
        ] })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
      /* @__PURE__ */ a(
        d,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400",
          children: [
            "Use",
            " ",
            /* @__PURE__ */ e("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:"
          ]
        }
      ),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ a("div", { className: "p-4 rounded-xl border border-border space-y-2", children: [
          /* @__PURE__ */ e("p", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300", children: "Fixed Mode (Default Layouts)" }),
          /* @__PURE__ */ e("p", { className: "text-[11px] text-gray-500 dark:text-gray-400", children: "Fullscreen fixed layer behind content. Content is wrapped automatically." }),
          /* @__PURE__ */ e("pre", { className: "text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto", children: `<ThemeBackground>
  {children}
</ThemeBackground>` })
        ] }),
        /* @__PURE__ */ a("div", { className: "p-4 rounded-xl border border-border space-y-2", children: [
          /* @__PURE__ */ e("p", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300", children: "Absolute Mode (macOS Layouts)" }),
          /* @__PURE__ */ e("p", { className: "text-[11px] text-gray-500 dark:text-gray-400", children: "Absolute layer within parent container. No children wrapper." }),
          /* @__PURE__ */ e("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>` })
        ] })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "ThemeBackground Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      i,
      {
        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
      }
    ) }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Viewport Recommendations", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        d,
        {
          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."
        }
      ),
      /* @__PURE__ */ e(
        i,
        {
          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: `${t ? "dark" : "light"}-mobile.svg`
            },
            {
              viewport: "Tablet",
              breakpoint: "640–1024px",
              variant: "wallpaper",
              asset: `${t ? "dark" : "light"}-wallpaper.svg`
            },
            {
              viewport: "Desktop",
              breakpoint: "> 1024px",
              variant: "wave",
              asset: `${t ? "dark" : "light"}-wave.svg`
            },
            {
              viewport: "Any",
              breakpoint: "All",
              variant: "CSS variants",
              asset: "No asset needed"
            }
          ],
          hoverable: !0,
          striped: !1
        }
      )
    ] }) }) })
  ] });
};
export {
  k as default
};
