raft-ui 0.0.7 → 0.0.8

package/dist/index.mjs

@@ -1,11 +1,14 @@
-import { a as useThemeFamily, c as tv, i as useTheme, n as buttonVariants, o as ThemeContext, r as Spinner, s as ThemeStateContext, t as Button } from "./button-CJqMhTPQ.mjs";
 import { cn } from "./cn.mjs";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { a as tv, i as ThemeStateContext, n as useThemeFamily, r as ThemeContext, t as useTheme } from "./use-theme-Y_h1DKll.mjs";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, Copy, Info, Minus, X } from "lucide-react";
+import { createContext, use, useCallback, useContext, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { Button as Button$1 } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "foxact/use-clipboard";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
-import { AlertTriangle, Check, CheckCircle2, ChevronDown, Info, Minus, X } from "lucide-react";
 import { Avatar as Avatar$1, ContextMenu as ContextMenu$1 } from "@base-ui/react";
 import { Menu } from "@base-ui/react/menu";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
@@ -16,10 +19,1083 @@ import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/components/spinner/spinner.tsx
+const SPINNER_STYLE = `
+@keyframes raft-braille-spinner {
+  0%,
+  9.99% {
+    content: "⠋";
+  }
+  10%,
+  19.99% {
+    content: "⠙";
+  }
+  20%,
+  29.99% {
+    content: "⠹";
+  }
+  30%,
+  39.99% {
+    content: "⠸";
+  }
+  40%,
+  49.99% {
+    content: "⠼";
+  }
+  50%,
+  59.99% {
+    content: "⠴";
+  }
+  60%,
+  69.99% {
+    content: "⠦";
+  }
+  70%,
+  79.99% {
+    content: "⠧";
+  }
+  80%,
+  89.99% {
+    content: "⠇";
+  }
+  90%,
+  100% {
+    content: "⠏";
+  }
+}
+
+[data-slot="spinner"] [data-spinner-glyph]::before {
+  content: "⠋";
+  animation: raft-braille-spinner 800ms steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-glyph]::before {
+    animation-duration: 1600ms;
+  }
+}
+
+@keyframes raft-elegant-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-elegant-spinner-dash {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-ring] {
+  animation: raft-elegant-spinner-spin 1600ms linear infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+  will-change: transform;
+}
+
+[data-slot="spinner"] [data-spinner-arc] {
+  animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  stroke-dasharray: 1 150;
+  stroke-dashoffset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-ring] {
+    animation-duration: 2400ms;
+    will-change: auto;
+  }
+
+  [data-slot="spinner"] [data-spinner-arc] {
+    animation: none;
+    stroke-dasharray: 72 150;
+    stroke-dashoffset: -30;
+  }
+}
+`;
+const spinner = tv({
+	slots: {
+		root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
+		glyph: "inline-block min-w-[1ch] font-mono tabular-nums",
+		ring: "block size-full shrink-0"
+	},
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {}
+		},
+		size: {
+			sm: {},
+			lg: {}
+		}
+	},
+	defaultVariants: { size: "sm" },
+	compoundVariants: [
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-4 text-base" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-6 text-xl" }
+		},
+		{
+			theme: "elegant",
+			size: "sm",
+			class: { root: "size-3.5" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "size-[18px]" }
+		}
+	]
+});
+const spinnerStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-spinner",
+	precedence: "default",
+	children: SPINNER_STYLE
+});
+function Spinner({ size = "sm", className, render, ...props }) {
+	const theme = useThemeFamily();
+	const { root, glyph, ring } = spinner({
+		theme,
+		size
+	});
+	const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
+		"data-spinner-ring": "",
+		"aria-hidden": "true",
+		className: ring(),
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-20",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			"data-spinner-arc": "",
+			className: "opacity-80",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			fill: "none",
+			pathLength: "150",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeWidth: "2.5"
+		})]
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsx("span", {
+		"data-spinner-glyph": "",
+		"aria-hidden": "true",
+		className: glyph()
+	})] });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			role: "status",
+			"aria-label": "Loading",
+			className: root({ className }),
+			children
+		}, props),
+		state: {
+			slot: "spinner",
+			size
+		}
+	});
+}
+//#endregion
+//#region src/components/button/button.tsx
+const buttonVariants = tv({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"font-heading leading-none whitespace-nowrap select-none",
+			"border-line rounded-none",
+			"shadow-sm transition-all duration-100",
+			"outline outline-[1px] outline-offset-2 outline-transparent",
+			"data-[loading=true]:cursor-wait",
+			"disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
+			"disabled:transform-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+		],
+		content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	},
+	variants: {
+		theme: {
+			brutal: { root: ["border-2 font-bold focus-visible:outline-transparent"] },
+			elegant: { root: [
+				"overflow-clip border-0 font-sans font-medium antialiased",
+				"focus-visible:outline-[var(--button-focus-outline,transparent)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
+				"active:not-aria-[haspopup]:scale-[0.985]"
+			] }
+		},
+		variant: {
+			primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
+			default: { root: ["border-line-strong bg-layer-panel text-foreground-strong", "hover:bg-layer-panel"] },
+			information: { root: ["border-line-strong bg-info-base text-foreground-inverse", "hover:bg-info-base"] },
+			muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:border-line-strong hover:bg-secondary-400"] },
+			accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
+			warning: { root: ["border-line-strong bg-warning-base text-foreground-inverse", "hover:bg-warning-base"] },
+			outline: { root: [
+				"border-line-strong bg-transparent text-foreground-strong",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] },
+			ghost: { root: ["border-transparent bg-transparent text-foreground shadow-none", "hover:border-line-strong hover:bg-layer-muted"] },
+			link: { root: ["border-transparent bg-transparent text-foreground-strong shadow-none underline-offset-4", "hover:underline"] },
+			"danger-secondary": { root: ["border-line-strong bg-danger-lighter text-danger-base", "hover:bg-danger-lighter"] },
+			danger: { root: ["border-line-strong bg-danger-base text-foreground-inverse", "hover:border-[oklch(0.595_0.241_26.758)] hover:bg-[oklch(0.595_0.241_26.758)]"] },
+			"danger-outline": { root: [
+				"border-line-strong bg-transparent text-danger-base",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] }
+		},
+		size: {
+			xs: { root: [
+				"gap-1 px-2 py-[5px] text-[11px]",
+				"has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
+				"[&_svg:not([class*='size-'])]:size-3"
+			] },
+			sm: { root: [
+				"gap-1.5 px-2.5 py-[6px] text-xs",
+				"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
+				"[&_svg:not([class*='size-'])]:size-3.5"
+			] },
+			md: { root: ["gap-2 px-3 py-[7px] text-sm", "has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5"] },
+			lg: { root: [
+				"gap-2 px-3.5 py-2 text-base",
+				"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
+				"[&_svg:not([class*='size-'])]:size-4"
+			] },
+			"icon-xs": { root: ["p-[5px] text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
+			"icon-sm": { root: ["p-[6px] text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
+			"icon-md": { root: ["p-2 text-sm", "[&_svg:not([class*='size-'])]:size-4"] },
+			"icon-lg": { root: ["p-3 text-sm", "[&_svg:not([class*='size-'])]:size-4"] }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			theme: "elegant",
+			size: ["xs", "icon-xs"],
+			class: { root: "rounded-sm" }
+		},
+		{
+			theme: "elegant",
+			size: ["sm", "icon-sm"],
+			class: { root: "rounded" }
+		},
+		{
+			theme: "elegant",
+			size: ["md", "icon-md"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "elegant",
+			size: "md",
+			class: { root: "py-1.5" }
+		},
+		{
+			theme: "elegant",
+			size: ["lg", "icon-lg"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "py-[7px]" }
+		},
+		{
+			theme: "brutal",
+			variant: "primary",
+			class: { root: "bg-brutal-yellow text-black hover:bg-brutal-yellow" }
+		},
+		{
+			theme: "brutal",
+			variant: "default",
+			class: { root: "bg-white text-black hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "outline",
+			class: { root: "bg-white text-black shadow-sm hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "information",
+			class: { root: "bg-brutal-cyan text-black hover:bg-brutal-cyan" }
+		},
+		{
+			theme: "brutal",
+			variant: "muted",
+			class: { root: "bg-brutal-stone text-black hover:bg-brutal-stone" }
+		},
+		{
+			theme: "brutal",
+			variant: "accent",
+			class: { root: "bg-brutal-pink text-black hover:bg-brutal-pink" }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: "bg-brutal-red text-black hover:bg-brutal-red" }
+		},
+		{
+			theme: "brutal",
+			variant: "warning",
+			class: { root: "bg-[oklch(0.785_0.123_50.11)] text-black hover:bg-[oklch(0.785_0.123_50.11)]" }
+		},
+		{
+			theme: "brutal",
+			size: "xs",
+			class: { root: "h-6 px-2 py-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-7 px-2.5 py-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { root: "h-8 px-3 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-10 px-4 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-xs",
+			class: { root: "size-6 p-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-sm",
+			class: { root: "size-7 p-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-md",
+			class: { root: "size-8 p-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-lg",
+			class: { root: "size-10 p-0 text-sm" }
+		},
+		{
+			theme: "elegant",
+			variant: "default",
+			class: { root: [
+				"bg-foreground-strong text-foreground-inverse",
+				"[--button-focus-outline:var(--foreground-strong)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--foreground-strong)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.31_0.006_285)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "primary",
+			class: { root: [
+				"bg-primary-400 text-primary-950",
+				"[--button-focus-outline:var(--primary-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.15),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.83)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_11%)_0%,oklab(100%_0_0_/_0%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.86_0.15_91.89)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "outline",
+			class: { root: [
+				"bg-layer-panel text-foreground-strong",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-layer-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "ghost",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:var(--line-muted)]",
+				"before:bg-transparent hover:bg-line-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-secondary",
+			class: { root: [
+				"bg-danger-lighter text-danger-base",
+				"[--button-focus-outline:var(--state-danger-lighter)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.18),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_9%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-light"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger",
+			class: { root: [
+				"bg-danger-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-danger-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-danger-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.56_0.23_26.758)]"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: [
+				"border-line-strong bg-brutal-red text-black",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-brutal-red",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger-secondary",
+			class: { root: [
+				"border-line-strong bg-danger-lighter text-[color-mix(in_oklab,var(--state-danger-base)_72%,transparent)]",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-danger-lighter",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-outline",
+			class: { root: [
+				"bg-layer-panel text-danger-base",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-lighter"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "accent",
+			class: { root: [
+				"bg-accent-400 text-white",
+				"[--button-focus-outline:var(--accent-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--accent-400)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.72_0.15_0.71)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "warning",
+			class: { root: [
+				"bg-warning-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-warning-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.14),0_0_0_1px_var(--state-warning-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.65_0.19_44.441)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "link",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:transparent]",
+				"before:bg-transparent hover:bg-transparent hover:text-foreground-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "information",
+			class: { root: [
+				"bg-info-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-info-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-info-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.74_0.13_219.2)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "muted",
+			class: { root: [
+				"bg-layer-muted text-foreground-placeholder",
+				"[--button-focus-outline:var(--layer-muted)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_5%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-line-subtle"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"outline"
+			],
+			class: { root: [
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		}
+	]
+});
+function defaultNativeButton(render) {
+	if (!render || typeof render !== "object" || !("type" in render)) return;
+	const element = render;
+	if (typeof element.type === "string") return element.type === "button";
+}
+function Button({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+	const { root, content, loadingIndicator } = buttonVariants({
+		theme: useThemeFamily(),
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Button$1, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "button",
+		className: root({ className }),
+		"data-loading": loading ? "true" : void 0,
+		disabled: disabled || loading,
+		"aria-disabled": loading || void 0,
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.tsx
+const alertDialog = tv({
+	slots: {
+		overlay: [
+			"fixed inset-0 z-50",
+			"transition-opacity duration-100",
+			"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+		],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[408px] -translate-x-1/2 -translate-y-1/2",
+			"outline-none transition-[opacity,transform] duration-100",
+			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+			"data-[ending-style]:scale-95 data-[ending-style]:opacity-0"
+		],
+		header: ["grid grid-cols-[minmax(0,1fr)_max-content] items-center gap-3 min-w-0"],
+		body: ["min-w-0"],
+		footer: ["flex items-center justify-end gap-3"],
+		title: ["m-0 min-w-0 text-foreground-strong"],
+		description: ["m-0 text-foreground-muted"]
+	},
+	variants: { theme: {
+		brutal: {
+			overlay: ["bg-black/60"],
+			content: ["gap-4 border-2 border-line-strong bg-layer-panel px-6 py-4 shadow-xl"],
+			body: ["py-2 font-medium"],
+			title: ["font-heading text-lg leading-none font-bold uppercase"],
+			description: ["font-sans text-sm leading-5 text-foreground/60"]
+		},
+		elegant: {
+			overlay: ["bg-black/20"],
+			content: ["overflow-clip rounded-lg bg-layer-popover shadow-xl"],
+			header: ["border-b border-line-subtle bg-black/[0.02] px-6 py-2"],
+			body: ["px-6 py-5"],
+			footer: ["border-t border-line-subtle bg-black/[0.015] px-6 py-3"],
+			title: ["font-sans text-sm leading-5 font-medium tracking-[-0.005em]"],
+			description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]"]
+		}
+	} }
+});
+function AlertDialog(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogClose({ className, variant, size, children, ...props }) {
+	const isBrutal = useThemeFamily() === "brutal";
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "alert-dialog-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? (isBrutal ? "outline" : "ghost"),
+			size: size ?? (isBrutal ? "icon-md" : "icon-sm"),
+			"aria-label": "Close",
+			className: isBrutal ? className : cn("text-foreground-placeholder hover:text-foreground", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: isBrutal ? "size-5" : "size-4" })
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	const { overlay } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: overlay({ className }),
+		...props
+	});
+}
+function AlertDialogContent({ className, children, portalProps, overlay, ...props }) {
+	const { content } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, {
+		...portalProps,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(AlertDialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+			"data-slot": "alert-dialog-content",
+			className: content({ className }),
+			...props,
+			role: "alertdialog",
+			children
+		})]
+	});
+}
+function AlertDialogHeader({ className, ...props }) {
+	const { header } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: header({ className }),
+		...props
+	});
+}
+function AlertDialogBody({ className, ...props }) {
+	const { body } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-body",
+		className: body({ className }),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	const { footer } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	const { title } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: title({ className }),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	const { description } = alertDialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: description({ className }),
+		...props
+	});
+}
+function AlertDialogAction(props) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "alert-dialog-cancel",
+		render: /* @__PURE__ */ jsx(Button, {
+			className,
+			variant,
+			size
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/dialog/dialog.tsx
+const dialog = tv({
+	slots: {
+		overlay: [
+			"fixed inset-0 z-50",
+			"transition-opacity duration-100",
+			"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+		],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2",
+			"outline-none transition-[opacity,transform] duration-100",
+			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+			"data-[ending-style]:scale-95 data-[ending-style]:opacity-0"
+		],
+		header: ["grid grid-cols-[minmax(0,1fr)_max-content] items-center gap-3 min-w-0"],
+		body: ["min-w-0"],
+		footer: ["flex items-center justify-end gap-3"],
+		title: ["m-0 min-w-0 text-foreground-strong"],
+		description: ["m-0 text-foreground-muted"]
+	},
+	variants: { theme: {
+		brutal: {
+			overlay: ["bg-black/60"],
+			content: ["gap-4 border-2 border-line-strong bg-layer-panel px-6 py-4 shadow-xl"],
+			body: ["py-2 font-medium"],
+			title: ["font-heading text-lg leading-none font-bold uppercase"],
+			description: ["font-sans text-sm leading-5 text-foreground/60"]
+		},
+		elegant: {
+			overlay: ["bg-black/20"],
+			content: ["overflow-clip rounded-lg bg-layer-popover shadow-xl"],
+			header: ["border-b border-line-subtle bg-black/[0.02] px-6 py-2"],
+			body: ["px-6 py-5"],
+			footer: ["border-t border-line-subtle bg-black/[0.015] px-6 py-3"],
+			title: ["font-sans text-sm leading-5 font-medium tracking-[-0.005em]"],
+			description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]"]
+		}
+	} }
+});
+function Dialog(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	const { overlay } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: overlay({ className }),
+		...props
+	});
+}
+function DialogContent({ className, children, portalProps, overlay, ...props }) {
+	const { content } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		...portalProps,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+			"data-slot": "dialog-content",
+			className: content({ className }),
+			...props,
+			children
+		})]
+	});
+}
+function DialogClose({ className, variant, size, children, render, ...props }) {
+	const isBrutal = useThemeFamily() === "brutal";
+	if (render) return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		render,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? (isBrutal ? "outline" : "ghost"),
+			size: size ?? (isBrutal ? "icon-md" : "icon-sm"),
+			"aria-label": "Close",
+			className: isBrutal ? className : cn("text-foreground-placeholder hover:text-foreground", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: isBrutal ? "size-5" : "size-4" })
+	});
+}
+function DialogHeader({ className, ...props }) {
+	const { header } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: header({ className }),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	const { body } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: body({ className }),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	const { footer } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const { title } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: title({ className }),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const { description } = dialog({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: description({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/copyable-code/copyable-code.tsx
+const copyableCode = tv({
+	slots: {
+		root: ["group/copyable-code flex w-full min-w-0 items-center gap-2"],
+		code: ["min-w-0 flex-1 font-mono text-xs"],
+		codeInner: ["block w-full min-w-0 max-w-full break-all"],
+		action: [
+			"shrink-0",
+			"[&_[data-slot=button]]:transition-[color,background-color,box-shadow]",
+			"[&_[data-slot=button]]:duration-150 [&_[data-slot=button]]:ease-out"
+		],
+		iconSwap: [
+			"relative inline-grid size-3",
+			"[&_[data-slot=copyable-code-icon]]:col-start-1 [&_[data-slot=copyable-code-icon]]:row-start-1",
+			"[&_[data-slot=copyable-code-icon]]:origin-center",
+			"[&_[data-slot=copyable-code-icon]]:transition-[opacity,filter,scale]",
+			"[&_[data-slot=copyable-code-icon]]:duration-[170ms]",
+			"[&_[data-slot=copyable-code-icon]]:ease-[cubic-bezier(0.16,1,0.3,1)]",
+			"[&_[data-slot=copyable-code-icon]]:will-change-[opacity,filter,scale]",
+			"motion-reduce:[&_[data-slot=copyable-code-icon]]:transition-none",
+			"data-[state=idle]:[&_[data-icon=copy]]:scale-100 data-[state=idle]:[&_[data-icon=copy]]:opacity-100 data-[state=idle]:[&_[data-icon=copy]]:blur-0",
+			"data-[state=idle]:[&_[data-icon=check]]:scale-[0.72] data-[state=idle]:[&_[data-icon=check]]:opacity-0 data-[state=idle]:[&_[data-icon=check]]:blur-[1px]",
+			"data-[state=copied]:[&_[data-icon=check]]:scale-100 data-[state=copied]:[&_[data-icon=check]]:opacity-100 data-[state=copied]:[&_[data-icon=check]]:blur-0",
+			"data-[state=copied]:[&_[data-icon=copy]]:scale-[0.72] data-[state=copied]:[&_[data-icon=copy]]:opacity-0 data-[state=copied]:[&_[data-icon=copy]]:blur-[1px]"
+		]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				code: ["border-2 border-line-strong bg-black text-[oklch(0.88_0.18_132)] shadow-sm"],
+				codeInner: "break-all"
+			},
+			elegant: {
+				code: [
+					"bg-[oklch(0.988_0.002_286)] text-[oklch(0.45_0.04_74)]",
+					"shadow-[0_0_0_0.5px_oklch(0_0_0_/_0.22)]",
+					"dark:bg-layer-panel dark:text-[oklch(0.82_0.06_90)] dark:shadow-[0_0_0_0.5px_oklch(1_0_0_/_0.16)]"
+				],
+				codeInner: ["border-x border-dashed border-[oklch(0_0_0_/_0.12)] bg-white px-1", "dark:border-[oklch(1_0_0_/_0.14)] dark:bg-layer-popover"],
+				action: [
+					"[&_[data-slot=button]]:text-foreground-muted",
+					"[&_[data-slot=button]]:shadow-none",
+					"[&_[data-slot=button]]:hover:bg-transparent [&_[data-slot=button]]:hover:text-foreground-strong [&_[data-slot=button]]:hover:before:bg-transparent"
+				]
+			}
+		},
+		size: {
+			sm: { code: "px-3 py-1.5 leading-5" },
+			md: { code: "px-3 py-2 leading-5" }
+		}
+	},
+	defaultVariants: { size: "md" },
+	compoundVariants: [{
+		theme: "elegant",
+		size: "sm",
+		class: {
+			code: "px-2 py-0",
+			codeInner: "py-1.5 leading-5"
+		}
+	}, {
+		theme: "elegant",
+		size: "md",
+		class: {
+			code: "px-2 py-0",
+			codeInner: "py-2 leading-5"
+		}
+	}]
+});
+const CopyableCodeContext = createContext(null);
+function useCopyableCode(part) {
+	const context = useContext(CopyableCodeContext);
+	if (!context) throw new Error(`${part} must be used inside CopyableCode.Root.`);
+	return context;
+}
+function CopyableCodeRoot({ copied, onCopy, size = "md", className, ...props }) {
+	const { root } = copyableCode({
+		theme: useThemeFamily(),
+		size
+	});
+	const { copied: clipboardCopied, copy } = useClipboard({ timeout: 1400 });
+	const effectiveCopied = copied ?? clipboardCopied;
+	const copyValue = useCallback(async (value) => {
+		await copy(value);
+		await onCopy?.(value);
+	}, [copy, onCopy]);
+	const context = useMemo(() => ({
+		copied: effectiveCopied,
+		copyValue,
+		size
+	}), [
+		copyValue,
+		effectiveCopied,
+		size
+	]);
+	return /* @__PURE__ */ jsx(CopyableCodeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "copyable-code",
+			"data-size": size,
+			"data-state": effectiveCopied ? "copied" : "idle",
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function CopyableCodeCode({ children, className, truncate, ...props }) {
+	const { size } = useCopyableCode("CopyableCode.Code");
+	const { code, codeInner } = copyableCode({
+		theme: useThemeFamily(),
+		size
+	});
+	const scrollClassName = "overflow-x-auto overflow-y-hidden break-normal whitespace-nowrap text-clip [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "copyable-code-code",
+		"data-truncate": truncate ? "true" : void 0,
+		className: code({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "copyable-code-code-inner",
+			className: codeInner({ className: [truncate && scrollClassName] }),
+			children
+		})
+	});
+}
+function CopyableCodeAction({ ariaLabel = "Copy code", children, buttonClassName, className, copiedAriaLabel = "Copied code", onClick, size, variant, ...props }) {
+	const { copied, copyValue } = useCopyableCode("CopyableCode.Action");
+	const theme = useThemeFamily();
+	const { action } = copyableCode({ theme });
+	const accessibleLabel = copied ? copiedAriaLabel : ariaLabel;
+	const buttonSize = size ?? (theme === "elegant" ? "icon-xs" : "icon-sm");
+	const buttonVariant = variant ?? (theme === "elegant" ? "ghost" : "outline");
+	const handleClick = async (event) => {
+		await copyValue(event.currentTarget.closest("[data-slot=\"copyable-code\"]")?.querySelector("[data-slot=\"copyable-code-code\"]")?.textContent ?? "");
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "copyable-code-action",
+		className: action({ className }),
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: buttonVariant,
+			size: buttonSize,
+			"aria-label": accessibleLabel,
+			"aria-live": "polite",
+			onClick: handleClick,
+			className: buttonClassName,
+			...props,
+			children: typeof children === "function" ? children({ copied }) : children ?? /* @__PURE__ */ jsx(CopyableCodeActionIcon, { copied })
+		})
+	});
+}
+function CopyableCodeActionIcon({ copied }) {
+	const { iconSwap } = copyableCode();
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "copyable-code-icon-swap",
+		"data-state": copied ? "copied" : "idle",
+		className: iconSwap(),
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx(Copy, {
+			"data-slot": "copyable-code-icon",
+			"data-icon": "copy",
+			className: "size-3",
+			strokeWidth: 1.75
+		}), /* @__PURE__ */ jsx(Check, {
+			"data-slot": "copyable-code-icon",
+			"data-icon": "check",
+			className: "size-3",
+			strokeWidth: 1.75
+		})]
+	});
+}
+function CopyableCodePreset({ actionClassName, ariaLabel, codeClassName, children, copiedAriaLabel, truncate, ...props }) {
+	return /* @__PURE__ */ jsxs(CopyableCodeRoot, {
+		...props,
+		children: [/* @__PURE__ */ jsx(CopyableCodeCode, {
+			className: codeClassName,
+			truncate,
+			children
+		}), /* @__PURE__ */ jsx(CopyableCodeAction, {
+			ariaLabel,
+			className: actionClassName,
+			copiedAriaLabel
+		})]
+	});
+}
+const CopyableCode = Object.assign(CopyableCodePreset, {
+	Action: CopyableCodeAction,
+	Code: CopyableCodeCode,
+	Root: CopyableCodeRoot
+});
+//#endregion
 //#region src/components/checkbox/checkbox-indicator.tsx
 const checkboxIndicator = tv({
 	slots: { root: [
@@ -2751,6 +3827,114 @@ function RadioGroupItem({ appearance = "default", className, children, ...props
 	});
 }
 //#endregion
+//#region src/components/switch/switch.tsx
+const switchRecipe = tv({
+	slots: {
+		root: [
+			"group/switch relative inline-flex shrink-0 touch-manipulation items-center outline-none",
+			"transition-[background-color,box-shadow,transform] duration-[180ms] ease-out",
+			"motion-reduce:transition-none",
+			"not-data-[disabled]:cursor-pointer",
+			"data-[disabled]:cursor-not-allowed data-[disabled]:active:scale-100",
+			"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']"
+		],
+		thumb: [
+			"pointer-events-none block",
+			"transition-transform duration-[180ms] ease-out",
+			"motion-reduce:transition-none"
+		]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: [
+					"rounded-none border-[2.5px] border-line-strong bg-layer-panel",
+					"hover:bg-layer-panel data-[checked]:bg-primary-400",
+					"data-[checked]:hover:bg-primary-400",
+					"data-[disabled]:border-line-muted data-[disabled]:bg-layer-panel data-[disabled]:opacity-50 data-[disabled]:hover:bg-layer-panel",
+					"data-[checked]:data-[disabled]:border-line-muted data-[checked]:data-[disabled]:bg-primary-400",
+					"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+					"active:scale-[0.98] motion-reduce:active:scale-100"
+				],
+				thumb: [
+					"rounded-none bg-line-strong shadow-none",
+					"data-[checked]:bg-line-strong",
+					"data-[disabled]:bg-line-muted",
+					"data-[checked]:data-[disabled]:bg-line-subtle"
+				]
+			},
+			elegant: {
+				root: [
+					"rounded-full bg-foreground/[0.12]",
+					"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_1px_1.5px_-1px_oklch(0_0_0_/_0.08)]",
+					"hover:bg-foreground/[0.16]",
+					"data-[checked]:bg-foreground-strong data-[checked]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_1px_1.5px_-1px_oklch(0_0_0_/_0.12)]",
+					"data-[checked]:hover:bg-foreground-strong",
+					"data-[disabled]:bg-layer-panel data-[disabled]:shadow-[inset_0_0_0_1px_var(--line-subtle)]",
+					"data-[checked]:data-[disabled]:bg-layer-panel data-[checked]:data-[disabled]:shadow-[inset_0_0_0_1px_var(--line-subtle)]",
+					"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+					"active:scale-[0.96] motion-reduce:active:scale-100"
+				],
+				thumb: [
+					"rounded-full bg-layer-popover",
+					"shadow-[0_1px_1.5px_-0.5px_oklch(0_0_0_/_0.18),0_0_0_1px_oklch(0_0_0_/_0.04)]",
+					"data-[disabled]:bg-[oklch(0.88_0.004_286)] data-[disabled]:shadow-none",
+					"data-[checked]:data-[disabled]:bg-[oklch(0.88_0.004_286)]"
+				]
+			}
+		},
+		size: {
+			sm: {
+				root: "h-4 w-7 p-0.5",
+				thumb: "size-3 data-[checked]:translate-x-3"
+			},
+			md: {
+				root: "h-5 w-9 p-0.5",
+				thumb: "size-4 data-[checked]:translate-x-4"
+			}
+		}
+	},
+	compoundVariants: [{
+		theme: "brutal",
+		size: "sm",
+		class: {
+			root: "h-5 w-9 p-0",
+			thumb: "size-3.5 translate-x-px data-[checked]:translate-x-4"
+		}
+	}, {
+		theme: "brutal",
+		size: "md",
+		class: {
+			root: "h-6 w-11 p-0",
+			thumb: "size-[18px] translate-x-px data-[checked]:translate-x-5"
+		}
+	}],
+	defaultVariants: { size: "sm" }
+});
+function Switch({ size, className, children, ...props }) {
+	const { root } = switchRecipe({
+		theme: useThemeFamily(),
+		size
+	});
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		className: root({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, { size })
+	});
+}
+function SwitchThumb({ size, className, ...props }) {
+	const { thumb } = switchRecipe({
+		theme: useThemeFamily(),
+		size
+	});
+	return /* @__PURE__ */ jsx(Switch$1.Thumb, {
+		"data-slot": "switch-thumb",
+		className: thumb({ className }),
+		...props
+	});
+}
+//#endregion
 //#region src/components/segmented-control/segmented-control.tsx
 const segmentedControl = tv({
 	slots: {
@@ -3494,12 +4678,15 @@ const banner = tv({
 					"group/banner grid grid-cols-[0_minmax(0,1fr)] items-start border-2 border-line-strong",
 					"has-[>[data-slot=banner-action]]:grid-cols-[0_minmax(0,1fr)_auto]",
 					"has-[>svg]:grid-cols-[18px_minmax(0,1fr)]",
+					"has-[>[data-slot=status]]:grid-cols-[auto_minmax(0,1fr)]",
 					"[&:has(>svg):has(>[data-slot=banner-action])]:grid-cols-[18px_minmax(0,1fr)_auto]",
+					"[&:has(>[data-slot=status]):has(>[data-slot=banner-action])]:grid-cols-[auto_minmax(0,1fr)_auto]",
 					"[&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5",
-					"[&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-foreground-strong"
+					"[&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-foreground-strong",
+					"[&>[data-slot=status]]:col-start-1 [&>[data-slot=status]]:row-start-1 [&>[data-slot=status]]:row-span-2 [&>[data-slot=status]]:self-center"
 				],
 				title: ["col-start-2 mb-0.5 text-sm font-bold text-foreground-strong", "group-data-[size=sm]/banner:text-xs"],
-				description: ["col-start-2 min-w-0 text-sm text-foreground-strong", "group-data-[size=sm]/banner:text-xs"],
+				description: ["col-start-2 min-w-0 text-sm font-semibold text-foreground-strong", "group-data-[size=sm]/banner:text-xs"],
 				action: ["col-start-3 row-span-2 row-start-1 shrink-0"]
 			},
 			elegant: {
@@ -3508,16 +4695,20 @@ const banner = tv({
 					"text-[0.8125rem] leading-5 tracking-[-0.005em] text-foreground-strong",
 					"grid-cols-[minmax(0,1fr)]",
 					"has-[>svg]:grid-cols-[auto_minmax(0,1fr)]",
+					"has-[>[data-slot=status]]:grid-cols-[auto_minmax(0,1fr)]",
 					"has-[>[data-slot=banner-action]]:grid-cols-[minmax(0,1fr)_auto]",
 					"has-[>svg]:has-[>[data-slot=banner-action]]:grid-cols-[auto_minmax(0,1fr)_auto]",
+					"has-[>[data-slot=status]]:has-[>[data-slot=banner-action]]:grid-cols-[auto_minmax(0,1fr)_auto]",
 					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:items-start",
 					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:grid-rows-[auto_auto]",
 					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:gap-y-1",
-					"[&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:self-center"
+					"[&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:self-center",
+					"[&>[data-slot=status]]:col-start-1 [&>[data-slot=status]]:row-start-1 [&>[data-slot=status]]:self-center"
 				],
 				title: [
 					"col-start-1 row-start-1 flex h-5 min-w-0 items-center text-[0.84375rem] font-medium leading-5 text-foreground-strong",
 					"group-has-[>svg]/banner:col-start-2",
+					"group-has-[>[data-slot=status]]/banner:col-start-2",
 					"group-data-[size=sm]/banner:h-4 group-data-[size=sm]/banner:text-[0.8125rem] group-data-[size=sm]/banner:leading-4",
 					"group-data-[size=lg]/banner:h-6 group-data-[size=lg]/banner:text-[0.90625rem] group-data-[size=lg]/banner:leading-6",
 					"group-data-[status=warning]/banner:text-[oklch(0.476_0.114_61.907)]"
@@ -3525,6 +4716,7 @@ const banner = tv({
 				description: [
 					"col-start-1 row-start-1 min-w-0 font-normal leading-4 text-foreground-muted",
 					"group-has-[>svg]/banner:col-start-2",
+					"group-has-[>[data-slot=status]]/banner:col-start-2",
 					"group-has-[>[data-slot=banner-title]]/banner:row-start-2",
 					"group-data-[size=sm]/banner:text-xs group-data-[size=sm]/banner:leading-4",
 					"group-data-[size=lg]/banner:text-[0.875rem] group-data-[size=lg]/banner:leading-5",
@@ -3533,6 +4725,7 @@ const banner = tv({
 				action: [
 					"col-start-2 row-start-1 flex h-5 shrink-0 items-center gap-2",
 					"group-has-[>svg]/banner:col-start-3",
+					"group-has-[>[data-slot=status]]/banner:col-start-3",
 					"group-has-[>[data-slot=banner-title]+[data-slot=banner-description]]/banner:row-span-2",
 					"[&>button:has(svg):last-child]:size-5 [&>button:has(svg):last-child]:min-h-5 [&>button:has(svg):last-child]:min-w-5",
 					"[&>button:has(svg):last-child]:rounded-sm",
@@ -3585,7 +4778,7 @@ const banner = tv({
 		{
 			theme: "brutal",
 			status: "warning",
-			class: { root: "bg-warning-base/20" }
+			class: { root: "bg-brutal-yellow/30" }
 		},
 		{
 			theme: "brutal",
@@ -3600,17 +4793,17 @@ const banner = tv({
 		{
 			theme: "brutal",
 			size: "sm",
-			class: { root: "gap-y-0 p-2 has-[>svg]:gap-x-2 has-[>[data-slot=banner-action]]:gap-x-2" }
+			class: { root: "gap-y-0 p-2 has-[>svg]:gap-x-2 has-[>[data-slot=banner-action]]:gap-x-2 has-[>[data-slot=status]]:gap-x-1.5" }
 		},
 		{
 			theme: "brutal",
 			size: "md",
-			class: { root: "gap-y-0 p-3 has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3" }
+			class: { root: "gap-y-0 p-3 has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3 has-[>[data-slot=status]]:gap-x-2" }
 		},
 		{
 			theme: "brutal",
 			size: "lg",
-			class: { root: "gap-y-0 p-4 shadow-sm has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3" }
+			class: { root: "gap-y-0 p-4 shadow-sm has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3 has-[>[data-slot=status]]:gap-x-2" }
 		},
 		{
 			theme: "elegant",
@@ -4591,4 +5784,4 @@ function ThemeProvider({ theme, defaultTheme = "brutal", onThemeChange, mode, de
 	});
 }
 //#endregion
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Checkbox, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerIndicator, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, RadioGroup, RadioGroupIndicator, RadioGroupItem, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Separator, SortableTabsList, SortableTabsTab, Spinner, Status, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, useOrderedTabs, useTheme, useThemeFamily };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Checkbox, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerIndicator, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, CopyableCode, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, RadioGroup, RadioGroupIndicator, RadioGroupItem, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Separator, SortableTabsList, SortableTabsTab, Spinner, Status, Switch, SwitchThumb, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, useOrderedTabs, useTheme, useThemeFamily };