globalThis.process ??= {};
globalThis.process.env ??= {};
import { r as __exportAll } from "./rolldown-runtime_-UtK6b3T.mjs";
import { d as renderTemplate, f as maybeRenderHead, i as renderComponent, m as addAttribute } from "./server_DAChoow1.mjs";
import { t as createComponent } from "./compiler_CLrjY88v.mjs";
import { d as surface, h as require_jsx_runtime } from "./registry_BFIKyeP_.mjs";
import { t as $$Base } from "./Base_R5CwkVX6.mjs";
import { C as DialogTrigger, F as Button, S as DialogTitle, a as SelectValue, b as DialogContent, c as Tabs, d as TabsTrigger, i as SelectTrigger, l as TabsContent, n as SelectContent, r as SelectItem, t as Select, u as TabsList, v as Dialog, x as DialogDescription, y as DialogClose } from "./Select_DL8noTAu.mjs";
//#region src/components/UiKit.tsx
var import_jsx_runtime = require_jsx_runtime();
var TONES = [
	"fg",
	"fg-muted",
	"accent",
	"surface",
	"danger"
];
var RADII = ["md", "lg"];
var SIZES = [
	"sm",
	"base",
	"lg"
];
function variantLabel(tone, radius, size) {
	return `${tone} · ${radius} · ${size}`;
}
function UiKit() {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "uikit-root flex flex-col gap-10 py-4",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "text-2xl font-bold text-fg mb-2",
					children: "Buttons"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
					className: "text-fg-muted text-sm mb-4 max-w-prose",
					children: [
						"Every ",
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
							className: "text-fg-subtle",
							children: "surface()"
						}),
						" tone with two radii and all sizes."
					]
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "flex flex-col gap-6",
					children: TONES.map((tone) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
						className: "text-lg font-semibold text-fg mb-3 capitalize",
						children: tone
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "flex flex-wrap gap-3",
						children: RADII.flatMap((radius) => SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							tone,
							radius,
							size,
							type: "button",
							title: variantLabel(tone, radius, size),
							children: variantLabel(tone, radius, size)
						}, `${tone}-${radius}-${size}`)))
					})] }, tone))
				})
			] }),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "text-2xl font-bold text-fg mb-2",
					children: "Dialog"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
					className: "text-fg-muted text-sm mb-4 max-w-prose",
					children: [
						"Radix dialog with token-styled content via ",
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
							className: "text-fg-subtle",
							children: "surface()"
						}),
						"."
					]
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTrigger, {
					asChild: true,
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
						tone: "accent",
						radius: "md",
						size: "base",
						type: "button",
						children: "Open dialog"
					})
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, {
						className: surface({
							tone: "fg",
							size: "lg"
						}),
						children: "Confirm action"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, {
						className: `${surface({
							tone: "fg-muted",
							size: "sm"
						})} mt-2 mb-4`,
						children: "This dialog uses the shared primitives with token-driven styling."
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
						className: surface({
							tone: "fg",
							size: "base"
						}),
						children: "Dialog body content appears here. Close via the button or Escape."
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-4 flex justify-end gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogClose, {
							asChild: true,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
								tone: "surface",
								radius: "md",
								size: "sm",
								type: "button",
								children: "Cancel"
							})
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogClose, {
							asChild: true,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
								tone: "accent",
								radius: "md",
								size: "sm",
								type: "button",
								children: "Confirm"
							})
						})]
					})
				] })] })
			] }),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "text-2xl font-bold text-fg mb-2",
					children: "Tabs"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
					className: "text-fg-muted text-sm mb-4 max-w-prose",
					children: "Radix tabs with token classes on list, triggers, and panels."
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, {
					defaultValue: "overview",
					className: "max-w-lg",
					children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsList, {
							className: `${surface({
								tone: "surface",
								radius: "md"
							})} inline-flex gap-1 p-1`,
							"aria-label": "Example tabs",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, {
									className: `${surface({
										tone: "fg-muted",
										radius: "sm",
										size: "sm"
									})} px-3 py-1.5`,
									value: "overview",
									children: "Overview"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, {
									className: `${surface({
										tone: "fg-muted",
										radius: "sm",
										size: "sm"
									})} px-3 py-1.5`,
									value: "details",
									children: "Details"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, {
									className: `${surface({
										tone: "fg-muted",
										radius: "sm",
										size: "sm"
									})} px-3 py-1.5`,
									value: "settings",
									children: "Settings"
								})
							]
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
							value: "overview",
							className: `${surface({
								tone: "surface",
								radius: "md"
							})} mt-2 p-4`,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: surface({
									tone: "fg",
									size: "base"
								}),
								children: "Overview panel — summary content for the active section."
							})
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
							value: "details",
							className: `${surface({
								tone: "surface",
								radius: "md"
							})} mt-2 p-4`,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: surface({
									tone: "fg",
									size: "base"
								}),
								children: "Details panel — extended information and metadata."
							})
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
							value: "settings",
							className: `${surface({
								tone: "surface",
								radius: "md"
							})} mt-2 p-4`,
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: surface({
									tone: "fg",
									size: "base"
								}),
								children: "Settings panel — configuration options for this example."
							})
						})
					]
				})
			] }),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
					className: "text-2xl font-bold text-fg mb-2",
					children: "Select"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
					className: "text-fg-muted text-sm mb-4 max-w-prose",
					children: "Radix select with token-styled trigger and items."
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select, {
					defaultValue: "md",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
						className: surface({
							tone: "surface",
							radius: "md",
							size: "base"
						}),
						"aria-label": "Size",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Pick a size" })
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, {
						className: surface({
							tone: "surface",
							radius: "md"
						}),
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
								className: surface({
									tone: "fg",
									size: "sm"
								}),
								value: "sm",
								children: "Small"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
								className: surface({
									tone: "fg",
									size: "sm"
								}),
								value: "md",
								children: "Medium"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
								className: surface({
									tone: "fg",
									size: "sm"
								}),
								value: "lg",
								children: "Large"
							})
						]
					})]
				})
			] })
		]
	});
}
//#endregion
//#region src/pages/ui-kit.astro
var ui_kit_exports = /* @__PURE__ */ __exportAll({
	default: () => $$UiKit,
	file: () => $$file,
	prerender: () => false,
	url: () => $$url
});
var $$UiKit = createComponent(($$result, $$props, $$slots) => {
	const colorTokens = [
		"fg",
		"fg-muted",
		"fg-subtle",
		"bg",
		"surface",
		"surface-raised",
		"border",
		"border-strong",
		"accent",
		"accent-fg",
		"success",
		"warning",
		"danger",
		"info"
	];
	const fontSizeTokens = [
		"xs",
		"sm",
		"base",
		"lg",
		"xl",
		"2xl",
		"3xl"
	];
	const radiusTokens = [
		"none",
		"sm",
		"md",
		"lg",
		"xl",
		"full"
	];
	return renderTemplate`${renderComponent($$result, "Base", $$Base, {
		"title": "UI Kit · mod-cms",
		"description": "Design system showcase — components and tokens"
	}, { "default": ($$result) => renderTemplate`${maybeRenderHead($$result)}<div class="hero"><p class="hero__eyebrow">Design system</p><h1>UI Kit</h1><p class="section__lead">Live preview of shared UI primitives styled through the token contract and Tailwind v4 adapter.</p></div>${renderComponent($$result, "UiKit", UiKit, {
		"client:load": true,
		"client:component-hydration": "load",
		"client:component-path": "/home/user/runs/run-20260823T160250Z-gvdech/repo/apps/mod-cms/src/components/UiKit.tsx",
		"client:component-export": "default"
	})}<section class="section" aria-labelledby="tokens-heading"><h2 id="tokens-heading">Token reference</h2><p class="section__lead">Custom properties from the base token contract (<code class="mono">--mod-*</code>).</p><h3>Colors</h3><div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; margin-bottom: 2rem;">${colorTokens.map((name) => renderTemplate`<figure style="margin: 0;"><div${addAttribute(`height: 3rem; border-radius: var(--mod-radius-md); border: 1px solid var(--mod-color-border); background: var(--mod-color-${name});`, "style")} aria-hidden="true"></div><figcaption class="mono" style="margin-top: 0.35rem; font-size: var(--mod-font-size-xs);">--mod-color-${name}</figcaption></figure>`)}</div><h3>Font sizes</h3><ul style="list-style: none; padding: 0; margin: 0 0 2rem;">${fontSizeTokens.map((name) => renderTemplate`<li${addAttribute(`padding: 0.5rem 0; border-bottom: 1px dashed var(--mod-color-border); font-size: var(--mod-font-size-${name}); color: var(--mod-color-fg);`, "style")}><span class="mono" style="font-size: var(--mod-font-size-xs); color: var(--mod-color-fg-subtle);">--mod-font-size-${name}</span>${" — "}The quick brown fox</li>`)}</ul><h3>Radii</h3><div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem;">${radiusTokens.map((name) => renderTemplate`<figure style="margin: 0; text-align: center;"><div${addAttribute(`height: 3.5rem; background: var(--mod-color-accent); border-radius: var(--mod-radius-${name});`, "style")} aria-hidden="true"></div><figcaption class="mono" style="margin-top: 0.35rem; font-size: var(--mod-font-size-xs);">--mod-radius-${name}</figcaption></figure>`)}</div></section>` })}`;
}, "/home/user/runs/run-20260823T160250Z-gvdech/repo/apps/mod-cms/src/pages/ui-kit.astro", void 0);
var $$file = "/home/user/runs/run-20260823T160250Z-gvdech/repo/apps/mod-cms/src/pages/ui-kit.astro";
var $$url = "/ui-kit";
//#endregion
//#region \0virtual:astro:page:src/pages/ui-kit@_@astro
var page = () => ui_kit_exports;
//#endregion
export { page };
