import { jsx as e, jsxs as a } from "react/jsx-runtime";
/* empty css              */
/* empty css             */
import { SunIcon as h, MoonIcon as p, TypeIcon as f, PaletteIcon as x, CheckIcon as u } from "lucide-react";
import { useState as g } from "react";
import { Badge as i } from "../atoms/badge.js";
import { Button as r } from "../atoms/button.js";
import { Card as c } from "../atoms/card.js";
import { Checkbox as N } from "../atoms/checkbox.js";
import { Arcade as o } from "../atoms/icons/arcade.js";
import { Github as v } from "../atoms/icons/github.js";
import { Slack as y } from "../atoms/icons/slack.js";
import { Input as b } from "../atoms/input.js";
import { Label as d } from "../atoms/label.js";
import { Separator as l } from "../atoms/separator.js";
import { Switch as m } from "../atoms/switch.js";
function s({ name: t, variable: n }) {
  return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
    /* @__PURE__ */ e(
      "div",
      {
        className: "size-8 rounded-md border",
        style: { backgroundColor: `var(--${n})` }
      }
    ),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e("p", { className: "font-medium text-sm", children: t }),
      /* @__PURE__ */ a("p", { className: "font-mono text-muted-foreground text-xs", children: [
        "--",
        n
      ] })
    ] })
  ] });
}
function W() {
  const [t, n] = g(!1);
  return /* @__PURE__ */ e("div", { className: t ? "dark" : "", children: /* @__PURE__ */ e("div", { className: "min-h-screen bg-background p-8 text-foreground transition-colors", children: /* @__PURE__ */ a("div", { className: "mx-auto max-w-4xl space-y-12", children: [
    /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ e(o, { className: "size-8 text-primary" }),
        /* @__PURE__ */ e("h1", { className: "font-bold text-2xl", children: "Arcade Design System" })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(h, { className: "size-4" }),
        /* @__PURE__ */ e(m, { checked: t, onCheckedChange: n }),
        /* @__PURE__ */ e(p, { className: "size-4" })
      ] })
    ] }),
    /* @__PURE__ */ e("p", { className: "text-muted-foreground", children: "Registry verification page. If you can see this correctly, your theme, fonts, and components are working." }),
    /* @__PURE__ */ e(l, {}),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-2 font-semibold text-lg", children: [
        /* @__PURE__ */ e(f, { className: "size-5" }),
        "Fonts"
      ] }),
      /* @__PURE__ */ a(c, { className: "space-y-4 p-6", children: [
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: "GT Sectra (Serif)" }),
          /* @__PURE__ */ e(
            "p",
            {
              className: "text-3xl",
              style: { fontFamily: '"GT Sectra", serif' },
              children: "The quick brown fox jumps over the lazy dog"
            }
          )
        ] }),
        /* @__PURE__ */ e(l, {}),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: "GT Cinetype (Sans-serif)" }),
          /* @__PURE__ */ e(
            "p",
            {
              className: "text-3xl",
              style: { fontFamily: '"GT Cinetype", sans-serif' },
              children: "The quick brown fox jumps over the lazy dog"
            }
          )
        ] }),
        /* @__PURE__ */ e(l, {}),
        /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: "GT Cinetype Mono (Monospace)" }),
          /* @__PURE__ */ e(
            "p",
            {
              className: "text-3xl",
              style: { fontFamily: '"GT Cinetype Mono", monospace' },
              children: "The quick brown fox jumps over the lazy dog"
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ a("h2", { className: "flex items-center gap-2 font-semibold text-lg", children: [
        /* @__PURE__ */ e(x, { className: "size-5" }),
        "Theme Colors"
      ] }),
      /* @__PURE__ */ e(c, { className: "p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4", children: [
        /* @__PURE__ */ e(s, { name: "Primary", variable: "primary" }),
        /* @__PURE__ */ e(s, { name: "Secondary", variable: "secondary" }),
        /* @__PURE__ */ e(s, { name: "Tertiary", variable: "tertiary" }),
        /* @__PURE__ */ e(s, { name: "Destructive", variable: "destructive" }),
        /* @__PURE__ */ e(s, { name: "Warning", variable: "warning" }),
        /* @__PURE__ */ e(s, { name: "Success", variable: "success" }),
        /* @__PURE__ */ e(s, { name: "Muted", variable: "muted" }),
        /* @__PURE__ */ e(s, { name: "Accent", variable: "accent" }),
        /* @__PURE__ */ e(s, { name: "Background", variable: "background" }),
        /* @__PURE__ */ e(s, { name: "Foreground", variable: "foreground" }),
        /* @__PURE__ */ e(s, { name: "Card", variable: "card" }),
        /* @__PURE__ */ e(s, { name: "Border", variable: "border" })
      ] }) })
    ] }),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold text-lg", children: "Buttons" }),
      /* @__PURE__ */ a(c, { className: "space-y-4 p-6", children: [
        /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3", children: [
          /* @__PURE__ */ e(r, { children: "Default" }),
          /* @__PURE__ */ e(r, { variant: "secondary", children: "Secondary" }),
          /* @__PURE__ */ e(r, { variant: "tertiary", children: "Tertiary" }),
          /* @__PURE__ */ e(r, { variant: "destructive", children: "Destructive" }),
          /* @__PURE__ */ e(r, { variant: "warning", children: "Warning" }),
          /* @__PURE__ */ e(r, { variant: "outline", children: "Outline" }),
          /* @__PURE__ */ e(r, { variant: "ghost", children: "Ghost" }),
          /* @__PURE__ */ e(r, { variant: "link", children: "Link" })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3", children: [
          /* @__PURE__ */ e(r, { size: "sm", children: "Small" }),
          /* @__PURE__ */ e(r, { size: "default", children: "Default" }),
          /* @__PURE__ */ e(r, { size: "lg", children: "Large" }),
          /* @__PURE__ */ e(r, { size: "icon", children: /* @__PURE__ */ e(u, {}) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold text-lg", children: "Badges" }),
      /* @__PURE__ */ e(c, { className: "p-6", children: /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3", children: [
        /* @__PURE__ */ e(i, { children: "Default" }),
        /* @__PURE__ */ e(i, { variant: "secondary", children: "Secondary" }),
        /* @__PURE__ */ e(i, { variant: "destructive", children: "Destructive" }),
        /* @__PURE__ */ e(i, { variant: "outline", children: "Outline" }),
        /* @__PURE__ */ e(i, { variant: "success", children: "Success" }),
        /* @__PURE__ */ e(i, { variant: "warning", children: "Warning" })
      ] }) })
    ] }),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold text-lg", children: "Form Controls" }),
      /* @__PURE__ */ a(c, { className: "space-y-6 p-6", children: [
        /* @__PURE__ */ a("div", { className: "grid max-w-sm gap-2", children: [
          /* @__PURE__ */ e(d, { htmlFor: "demo-input", children: "Input" }),
          /* @__PURE__ */ e(b, { id: "demo-input", placeholder: "Type something..." })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(N, { id: "demo-checkbox" }),
          /* @__PURE__ */ e(d, { htmlFor: "demo-checkbox", children: "Accept terms" })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(m, { id: "demo-switch" }),
          /* @__PURE__ */ e(d, { htmlFor: "demo-switch", children: "Enable notifications" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("section", { className: "space-y-4", children: [
      /* @__PURE__ */ e("h2", { className: "font-semibold text-lg", children: "Icons" }),
      /* @__PURE__ */ e(c, { className: "p-6", children: /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-6", children: [
        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-2", children: [
          /* @__PURE__ */ e(o, { className: "size-10" }),
          /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "Arcade" })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-2", children: [
          /* @__PURE__ */ e(v, { className: "size-10" }),
          /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "GitHub" })
        ] }),
        /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-2", children: [
          /* @__PURE__ */ e(y, { className: "size-10" }),
          /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: "Slack" })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ e(l, {}),
    /* @__PURE__ */ e("p", { className: "text-center text-muted-foreground text-sm", children: "Arcade Design System Registry — All checks passed" })
  ] }) }) });
}
export {
  W as ArcadeDemo
};
