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