raft-ui 0.0.8 → 0.0.10

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import { cn } from "./cn.mjs";
-import { a as tv, i as ThemeStateContext, n as useThemeFamily, r as ThemeContext, t as useTheme } from "./use-theme-Y_h1DKll.mjs";
+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-jUlaK4eN.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 { cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "foxact/use-clipboard";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 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";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 import { Input as Input$1 } from "@base-ui/react/input";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -20,616 +20,25 @@ 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 { Progress as Progress$1 } from "@base-ui/react/progress";
+import { Toast } from "@base-ui/react/toast";
 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",
+			"transition-opacity duration-150 ease-out",
 			"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"
+			"origin-center transform-gpu outline-none transition-[opacity,transform] duration-150 ease-out",
+			"data-[starting-style]:scale-[.98] data-[starting-style]:opacity-0",
+			"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"],
@@ -639,18 +48,18 @@ const alertDialog = tv({
 	},
 	variants: { theme: {
 		brutal: {
-			overlay: ["bg-black/60"],
+			overlay: ["bg-layer-backdrop"],
 			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"],
+			overlay: ["bg-layer-backdrop backdrop-blur-[2px]"],
 			content: ["overflow-clip rounded-lg bg-layer-popover shadow-xl"],
-			header: ["border-b border-line-subtle bg-black/[0.02] px-6 py-2"],
+			header: ["border-b border-line-subtle bg-black/[0.02] px-5 py-3"],
 			body: ["px-6 py-5"],
-			footer: ["border-t border-line-subtle bg-black/[0.015] px-6 py-3"],
+			footer: ["border-t border-line-subtle bg-black/[0.015] px-5 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)]"]
 		}
@@ -682,27 +91,32 @@ function AlertDialogClose({ className, variant, size, children, ...props }) {
 			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)
+			className: isBrutal ? className : cn("p-0 text-foreground-placeholder hover:border-transparent hover:bg-transparent 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() });
+	const theme = useThemeFamily();
+	const { overlay } = alertDialog({ theme });
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-slot": "alert-dialog-overlay",
+		"data-theme": theme,
 		className: overlay({ className }),
 		...props
 	});
 }
 function AlertDialogContent({ className, children, portalProps, overlay, ...props }) {
-	const { content } = alertDialog({ theme: useThemeFamily() });
+	const theme = useThemeFamily();
+	const { resolvedMode } = useTheme();
+	const { content } = alertDialog({ theme });
 	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 }),
+			"data-theme": theme,
+			className: cn(content({ className }), resolvedMode === "dark" && "dark"),
 			...props,
 			role: "alertdialog",
 			children
@@ -772,14 +186,14 @@ const dialog = tv({
 	slots: {
 		overlay: [
 			"fixed inset-0 z-50",
-			"transition-opacity duration-100",
+			"transition-opacity duration-150 ease-out",
 			"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"
+			"origin-center transform-gpu outline-none transition-[opacity,transform] duration-150 ease-out",
+			"data-[starting-style]:scale-[.98] data-[starting-style]:opacity-0",
+			"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"],
@@ -789,16 +203,16 @@ const dialog = tv({
 	},
 	variants: { theme: {
 		brutal: {
-			overlay: ["bg-black/60"],
+			overlay: ["bg-layer-backdrop"],
 			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"],
+			overlay: ["bg-layer-backdrop backdrop-blur-[2px]"],
 			content: ["overflow-clip rounded-lg bg-layer-popover shadow-xl"],
-			header: ["border-b border-line-subtle bg-black/[0.02] px-6 py-2"],
+			header: ["border-b border-line-subtle bg-black/[0.02] px-6 py-3"],
 			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]"],
@@ -825,20 +239,25 @@ function DialogPortal(props) {
 	});
 }
 function DialogOverlay({ className, ...props }) {
-	const { overlay } = dialog({ theme: useThemeFamily() });
+	const theme = useThemeFamily();
+	const { overlay } = dialog({ theme });
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-slot": "dialog-overlay",
+		"data-theme": theme,
 		className: overlay({ className }),
 		...props
 	});
 }
 function DialogContent({ className, children, portalProps, overlay, ...props }) {
-	const { content } = dialog({ theme: useThemeFamily() });
+	const theme = useThemeFamily();
+	const { resolvedMode } = useTheme();
+	const { content } = dialog({ theme });
 	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 }),
+			"data-theme": theme,
+			className: cn(content({ className }), resolvedMode === "dark" && "dark"),
 			...props,
 			children
 		})]
@@ -858,7 +277,7 @@ function DialogClose({ className, variant, size, children, render, ...props }) {
 			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)
+			className: isBrutal ? className : cn("p-0 text-foreground-placeholder hover:border-transparent hover:bg-transparent hover:text-foreground", className)
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(X, { className: isBrutal ? "size-5" : "size-4" })
@@ -2376,60 +1795,52 @@ const tooltip = tv({
 		trigger: ["select-none"],
 		positioner: ["isolate z-50 outline-none"],
 		content: [
-			"relative inline-flex max-w-xs items-center gap-1.5 px-3 py-2",
-			"text-[13px] leading-[18px] whitespace-normal",
+			"relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-3 py-2",
+			"text-[13px] leading-[18px] whitespace-normal break-words",
 			"origin-[var(--transform-origin)] 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",
+			"transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0",
+			"data-[ending-style]:scale-[0.99] data-[ending-style]:opacity-0",
 			"data-[instant]:transition-none",
-			"[&>svg]:size-3.5 [&>svg]:shrink-0",
+			"motion-reduce:transition-none",
+			"[&>svg]:mr-1.5 [&>svg]:inline-block [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:align-[-0.125em]",
 			"has-[[data-slot=kbd]]:py-1.5 has-[[data-slot=kbd]]:pr-1.5",
-			"[&_[data-slot=kbd]]:relative [&_[data-slot=kbd]]:z-10",
+			"[&_[data-slot=kbd]]:relative [&_[data-slot=kbd]]:z-10 [&_[data-slot=kbd]]:ml-1.5",
 			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
 			"[&_[data-slot=kbd]]:text-[10px] [&_[data-slot=kbd]]:font-semibold [&_[data-slot=kbd]]:leading-none"
 		],
 		arrow: [
-			"pointer-events-none flex",
-			"data-[side=top]:bottom-[-6px]",
-			"data-[side=bottom]:top-[-6px] data-[side=bottom]:rotate-180",
+			"pointer-events-none flex overflow-visible",
+			"data-[side=top]:bottom-[-5px]",
+			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
 			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
 			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
 			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
 			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
 		]
 	},
-	variants: {
-		theme: {
-			brutal: {
-				content: [
-					"border-2 border-black bg-white",
-					"font-sans font-bold text-black",
-					"shadow-none",
-					"[&_[data-slot=kbd]]:text-black/60"
-				],
-				arrow: ["hidden"]
-			},
-			elegant: {
-				content: [
-					"rounded-md bg-layer-popover",
-					"font-sans text-[13px] font-medium tracking-[-0.005em] text-foreground-strong",
-					"shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
-					"[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0"
-				],
-				arrow: []
-			}
+	variants: { theme: {
+		brutal: {
+			content: [
+				"border-2 border-black bg-soft-signal",
+				"font-sans font-bold text-black",
+				"shadow-[var(--shadow-brutal-sm)]",
+				"[&_[data-slot=kbd]]:border-black/70 [&_[data-slot=kbd]]:bg-white [&_[data-slot=kbd]]:text-black/70 [&_[data-slot=kbd]]:ring-0"
+			],
+			arrow: ["hidden"]
 		},
-		variant: {
-			default: {},
-			inverse: { content: [
-				"bg-foreground-strong text-foreground-inverse",
-				"!shadow-[0_12px_24px_0_oklch(0.21_0.006_285_/_0.045),0_1px_2px_0_oklch(0.21_0.006_285_/_0.035)]",
-				"[&_[data-slot=kbd]]:bg-white/10 [&_[data-slot=kbd]]:text-foreground-inverse [&_[data-slot=kbd]]:ring-0"
-			] }
+		elegant: {
+			content: [
+				"rounded-xl bg-[oklch(0.263_0.009_294.9)] text-[oklch(0.965_0.002_286)]",
+				"font-sans text-[13px] font-medium tracking-[-0.005em]",
+				"shadow-[0_18px_42px_-18px_oklch(0_0_0_/_0.54)]",
+				"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-white/35 after:mix-blend-overlay after:content-['']",
+				"dark:bg-[oklch(0.230_0.010_294.8)] dark:shadow-[0_18px_42px_-18px_oklch(0_0_0_/_0.68)]",
+				"[&_[data-slot=kbd]]:bg-white/[0.08] [&_[data-slot=kbd]]:text-white/72 [&_[data-slot=kbd]]:ring-0"
+			],
+			arrow: []
 		}
-	},
-	defaultVariants: { variant: "default" }
+	} }
 });
 function TooltipProvider({ delay = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
@@ -2454,43 +1865,38 @@ function TooltipPortal(props) {
 		...props
 	});
 }
-function TooltipArrow({ className, variant, ...props }) {
-	const { arrow } = tooltip({
-		theme: useThemeFamily(),
-		variant
-	});
+function TooltipArrow({ className, ...props }) {
+	const theme = useThemeFamily();
+	const { arrow } = tooltip({ theme });
 	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 		"data-slot": "tooltip-arrow",
 		className: arrow({ className }),
 		...props,
-		children: /* @__PURE__ */ jsx(TooltipArrowSvg, { variant })
+		children: /* @__PURE__ */ jsx(TooltipArrowSvg, { theme })
 	});
 }
-function TooltipArrowSvg({ variant, ...props }) {
-	const isInverse = variant === "inverse";
-	return /* @__PURE__ */ jsxs("svg", {
+function TooltipArrowSvg({ theme, ...props }) {
+	const isElegant = theme === "elegant";
+	return /* @__PURE__ */ jsx("svg", {
 		width: "12",
 		height: "6",
 		viewBox: "0 0 12 6",
 		fill: "none",
 		...props,
-		children: [/* @__PURE__ */ jsx("path", {
+		children: /* @__PURE__ */ jsx("path", {
 			d: "M1 0H11L6 5.25Z",
-			className: isInverse ? "fill-foreground-strong" : "fill-layer-popover"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M1 0.5L6 5.25L11 0.5",
-			className: isInverse ? "stroke-[oklch(0_0_0_/_0.18)]" : "stroke-[oklch(0.21_0.006_285_/_0.10)]",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			vectorEffect: "non-scaling-stroke"
-		})]
+			className: isElegant ? "fill-[oklch(0.263_0.009_294.9)] dark:fill-[oklch(0.230_0.010_294.8)]" : "fill-layer-popover"
+		})
 	});
 }
-function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset = 6, sticky, portalProps, variant, className, children, ...props }) {
-	const { positioner, content } = tooltip({
-		theme: useThemeFamily(),
-		variant
-	});
+function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = {
+	side: "shift",
+	align: "shift",
+	fallbackAxisSide: "none"
+}, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset, sticky, portalProps, className, children, ...props }) {
+	const theme = useThemeFamily();
+	const { positioner, content } = tooltip({ theme });
+	const resolvedSideOffset = sideOffset ?? (theme === "elegant" ? 8 : 6);
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
@@ -2504,14 +1910,14 @@ function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPaddin
 			disableAnchorTracking,
 			positionMethod,
 			side,
-			sideOffset,
+			sideOffset: resolvedSideOffset,
 			sticky,
 			className: positioner(),
 			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 				"data-slot": "tooltip-content",
 				className: content({ className }),
 				...props,
-				children: [children, /* @__PURE__ */ jsx(TooltipArrow, { variant })]
+				children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
 			})
 		})
 	});
@@ -2553,7 +1959,7 @@ const popover = tv({
 			description: ["text-xs leading-5 text-foreground-muted"],
 			close: ["text-[11px] font-medium tracking-[-0.005em]", "text-foreground-muted transition-colors duration-150 hover:text-foreground-strong"],
 			arrow: ["border-l border-t border-line-muted bg-layer-popover"],
-			backdrop: ["bg-black/20"]
+			backdrop: ["bg-layer-backdrop backdrop-blur-[2px]"]
 		}
 	} }
 });
@@ -2670,14 +2076,152 @@ function PopoverArrow({ className, ...props }) {
 	});
 }
 function PopoverBackdrop({ className, ...props }) {
-	const { backdrop } = popover({ theme: useThemeFamily() });
+	const theme = useThemeFamily();
+	const { backdrop } = popover({ theme });
 	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
 		"data-slot": "popover-backdrop",
+		"data-theme": theme,
 		className: backdrop({ className }),
 		...props
 	});
 }
 //#endregion
+//#region src/components/preview-card/preview-card.tsx
+const previewCard = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		popup: [
+			"max-h-[var(--available-height)] min-w-[220px] overflow-hidden",
+			"outline-none",
+			"origin-[var(--transform-origin)] transform-gpu opacity-100 will-change-[transform,opacity]",
+			"transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0",
+			"data-[ending-style]:scale-[0.99] data-[ending-style]:opacity-0 data-[ending-style]:duration-150",
+			"data-[instant]:transition-none motion-reduce:transition-none"
+		],
+		header: ["flex items-start gap-3 px-3 pt-3 pb-2"],
+		separator: ["border-t"],
+		title: ["m-0 truncate text-sm leading-none"],
+		description: ["m-0 truncate px-3 py-2 text-xs leading-5"],
+		arrow: ["size-2 rotate-45"]
+	},
+	variants: { theme: {
+		brutal: {
+			popup: ["border-2 border-black bg-white shadow-lg"],
+			separator: ["border-black"],
+			title: ["font-sans font-bold text-black"],
+			description: ["font-sans text-black/70"],
+			arrow: ["hidden"]
+		},
+		elegant: {
+			popup: ["rounded-md bg-layer-popover shadow-xl"],
+			separator: ["border-line-subtle"],
+			title: ["font-sans font-medium text-foreground-strong"],
+			description: ["bg-black/[0.015] font-sans", "text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]"],
+			arrow: ["border-l border-t border-line-muted bg-layer-popover"]
+		}
+	} }
+});
+function PreviewCard(props) {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Root, {
+		"data-slot": "preview-card",
+		...props
+	});
+}
+function PreviewCardTrigger({ delay = 80, closeDelay = 40, className, ...props }) {
+	const { trigger } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
+		"data-slot": "preview-card-trigger",
+		delay,
+		closeDelay,
+		className: trigger({ className }),
+		...props
+	});
+}
+function PreviewCardPortal(props) {
+	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
+		"data-slot": "preview-card-portal",
+		...props
+	});
+}
+function PreviewCardPopup({ className, ...props }) {
+	const { popup } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-content",
+		className: popup({ className }),
+		...props
+	});
+}
+function PreviewCardContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 6, sticky, portalProps, className, ...props }) {
+	const { positioner, popup } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(PreviewCard$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
+				"data-slot": "preview-card-content",
+				className: popup({ className }),
+				...props
+			})
+		})
+	});
+}
+function PreviewCardHeader({ className, ...props }) {
+	const { header } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "preview-card-header",
+		className: header({ className }),
+		...props
+	});
+}
+function PreviewCardSeparator({ className, ...props }) {
+	const { separator } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "preview-card-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function PreviewCardTitle({ className, ...props }) {
+	const { title } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-title",
+		className: title({ className }),
+		...props
+	});
+}
+function PreviewCardDescription({ className, ...props }) {
+	const { description } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "preview-card-description",
+		className: description({ className }),
+		...props
+	});
+}
+function PreviewCardArrow({ className, ...props }) {
+	const { arrow } = previewCard({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(PreviewCard$1.Arrow, {
+		"data-slot": "preview-card-arrow",
+		className: arrow({ className }),
+		...props
+	});
+}
+//#endregion
 //#region src/components/label/label.tsx
 const label = tv({
 	slots: {
@@ -4627,41 +4171,242 @@ const status = tv({
 			pulse: true,
 			class: { root: "animate-pulse" }
 		},
-		{
-			theme: "elegant",
-			pulse: true,
-			class: { root: "[animation:raft-status-pulse-background_1.4s_ease-out_infinite] motion-reduce:animate-none" }
+		{
+			theme: "elegant",
+			pulse: true,
+			class: { root: "[animation:raft-status-pulse-background_1.4s_ease-out_infinite] motion-reduce:animate-none" }
+		}
+	]
+});
+const statusStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-status",
+	precedence: "default",
+	children: STATUS_STYLE
+});
+function StatusRoot({ size, variant, pulse, className, render, ...props }) {
+	const { root } = status({
+		theme: useThemeFamily(),
+		size,
+		variant,
+		pulse
+	});
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: root({ className }),
+			children: statusStyle
+		}, props),
+		state: {
+			slot: "status",
+			variant,
+			pulse,
+			size
+		}
+	});
+}
+const Status = StatusRoot;
+//#endregion
+//#region src/components/progress/progress.tsx
+const PROGRESS_STYLE = `
+@keyframes raft-progress-indeterminate {
+  0% {
+    transform: translateX(-65%) scaleX(0.35);
+  }
+  50% {
+    transform: translateX(70%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(185%) scaleX(0.35);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="progress-indicator"][data-indeterminate] {
+    animation-duration: 2400ms;
+  }
+}
+`;
+const progress = tv({
+	slots: {
+		root: [
+			"group/progress grid w-full min-w-0 gap-1.5",
+			"[--progress-color:var(--foreground-strong)]",
+			"[--progress-light:var(--layer-muted)]",
+			"[--progress-indicator:var(--progress-color)]",
+			"[--progress-track:var(--layer-muted)]"
+		],
+		header: ["flex min-w-0 items-center justify-between gap-3"],
+		label: ["min-w-0 truncate"],
+		value: ["shrink-0 tabular-nums"],
+		track: ["relative w-full overflow-hidden bg-[var(--progress-track)]"],
+		indicator: [
+			"block h-full bg-[var(--progress-indicator)]",
+			"transition-[width,background-color] duration-200 ease-out",
+			"data-[indeterminate]:absolute data-[indeterminate]:inset-y-0 data-[indeterminate]:w-1/2",
+			"data-[indeterminate]:origin-left data-[indeterminate]:[animation:raft-progress-indeterminate_1.4s_ease-in-out_infinite]"
+		]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: ["font-heading"],
+				label: ["text-xs font-bold text-foreground-strong"],
+				value: ["font-mono text-xs font-bold text-foreground/70"],
+				track: [
+					"border-2 border-line-strong bg-layer-panel",
+					"shadow-xs",
+					"group-data-[complete]/progress:shadow-none"
+				]
+			},
+			elegant: {
+				root: [
+					"font-sans",
+					"[--progress-indicator:color-mix(in_oklab,var(--progress-color)_90%,transparent)]",
+					"[--progress-track:color-mix(in_oklab,var(--line-subtle)_35%,var(--layer-panel))]",
+					"data-[indeterminate]:[--progress-track:color-mix(in_oklab,var(--line-subtle)_65%,var(--layer-panel))]"
+				],
+				label: ["text-[13px] font-medium leading-5 text-foreground"],
+				value: ["font-mono text-[11px] font-medium leading-5 text-foreground-placeholder"],
+				track: ["rounded-full"],
+				indicator: ["rounded-full"]
+			}
+		},
+		variant: {
+			primary: { root: ["[--progress-color:var(--color-primary-400)]", "[--progress-light:var(--color-primary-200)]"] },
+			information: { root: ["[--progress-color:var(--color-info-base)]", "[--progress-light:var(--color-info-light)]"] },
+			accent: { root: ["[--progress-color:var(--color-accent-400)]", "[--progress-light:var(--color-accent-200)]"] },
+			success: { root: ["[--progress-color:var(--color-success-base)]", "[--progress-light:var(--color-success-light)]"] },
+			warning: { root: ["[--progress-color:var(--color-warning-base)]", "[--progress-light:var(--color-warning-light)]"] },
+			danger: { root: ["[--progress-color:var(--color-danger-base)]", "[--progress-light:var(--color-danger-light)]"] }
+		},
+		size: {
+			sm: { track: ["h-1.5"] },
+			md: { track: ["h-2"] },
+			lg: { track: ["h-2.5"] }
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { track: "h-3" }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { track: "h-4" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { track: "h-5" }
+		}
+	]
+});
+const progressStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-progress",
+	precedence: "default",
+	children: PROGRESS_STYLE
+});
+function Progress({ size = "md", variant = "primary", className, ...props }) {
+	const { root } = progress({
+		theme: useThemeFamily(),
+		size,
+		variant
+	});
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		"data-slot": "progress",
+		"data-size": size,
+		"data-variant": variant,
+		className: root({ className }),
+		...props
+	});
+}
+function ProgressHeader({ className, ...props }) {
+	const { header } = progress({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-header",
+		className: header({ className }),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	const { label } = progress({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		"data-slot": "progress-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	const { value } = progress({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		"data-slot": "progress-value",
+		className: value({ className }),
+		...props
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	const { track } = progress({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		"data-slot": "progress-track",
+		className: track({ className }),
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	const { indicator } = progress({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		"data-slot": "progress-indicator",
+		className: indicator({ className }),
+		...props,
+		children: progressStyle
+	});
+}
+//#endregion
+//#region src/components/skeleton/skeleton.tsx
+const skeleton = tv({
+	slots: { root: ["animate-pulse", "aria-hidden:pointer-events-none"] },
+	variants: {
+		theme: {
+			brutal: { root: ["data-[variant=line]:bg-black/10", "data-[variant=block]:bg-black/10"] },
+			elegant: { root: ["data-[variant=line]:rounded-full data-[variant=line]:bg-foreground/[0.08]", "data-[variant=block]:rounded-md data-[variant=block]:bg-foreground/[0.08]"] }
+		},
+		variant: {
+			line: { root: "h-3" },
+			block: { root: "" },
+			circle: { root: "rounded-full" }
 		}
-	]
-});
-const statusStyle = /* @__PURE__ */ jsx("style", {
-	href: "raft-ui-status",
-	precedence: "default",
-	children: STATUS_STYLE
+	},
+	compoundVariants: [{
+		theme: "brutal",
+		variant: "circle",
+		class: { root: "bg-black/10" }
+	}, {
+		theme: "elegant",
+		variant: "circle",
+		class: { root: "bg-foreground/[0.08]" }
+	}],
+	defaultVariants: { variant: "block" }
 });
-function StatusRoot({ size, variant, pulse, className, render, ...props }) {
-	const { root } = status({
+function Skeleton({ variant = "block", className, ...props }) {
+	const { root } = skeleton({
 		theme: useThemeFamily(),
-		size,
-		variant,
-		pulse
+		variant
 	});
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps({
-			className: root({ className }),
-			children: statusStyle
-		}, props),
-		state: {
-			slot: "status",
-			variant,
-			pulse,
-			size
-		}
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "skeleton",
+		"data-variant": variant,
+		className: root({ className }),
+		...props
 	});
 }
-const Status = StatusRoot;
 //#endregion
 //#region src/components/banner/banner.tsx
 const banner = tv({
@@ -5329,6 +5074,478 @@ function NotificationCenterEmptyState(props) {
 	});
 }
 //#endregion
+//#region src/components/toast/toast.tsx
+const toastStyles = tv({
+	slots: {
+		viewport: ["pointer-events-none isolate z-[70] w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
+		positioner: ["isolate z-[70] outline-none"],
+		root: [
+			"group/toast pointer-events-auto",
+			"select-text overflow-hidden text-foreground-strong",
+			"outline outline-1 outline-offset-2 outline-transparent",
+			"[--toast-scale:calc(max(0.84,1-(var(--toast-index)*0.04)))]",
+			"[--toast-peek:0.5rem]",
+			"[--toast-gap:0.5rem]",
+			"[--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]",
+			"[--toast-y:calc((var(--toast-offset-y)*-1)-(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]",
+			"transition-[transform,opacity,height] duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-[limited]:opacity-0",
+			"data-[starting-style]:opacity-0",
+			"data-[ending-style]:opacity-0",
+			"motion-reduce:transition-none"
+		],
+		content: [
+			"relative grid grid-cols-[minmax(0,1fr)] items-center gap-x-3 overflow-hidden",
+			"[&:has([data-slot=toast-description])_[data-slot=toast-body]]:self-start [&:has([data-slot=toast-description])_[data-slot=toast-icon]]:self-start",
+			"[&:not(:has([data-slot=toast-icon])):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:min-h-[var(--toast-title-only-min-h,2.25rem)]",
+			"[&:not(:has([data-slot=toast-icon])):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:min-w-[var(--toast-title-only-min-w,7rem)]",
+			"[&:not(:has([data-slot=toast-icon])):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:px-[var(--toast-title-only-px,0.75rem)]",
+			"[&:not(:has([data-slot=toast-icon])):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:py-[var(--toast-title-only-py,0.5rem)]",
+			"[&:not(:has([data-slot=toast-description]))>[data-slot=toast-body]:only-child]:justify-self-center [&:not(:has([data-slot=toast-description]))>[data-slot=toast-body]:only-child]:text-center",
+			"transition-opacity duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-[behind]:opacity-0 data-[expanded]:opacity-100",
+			"motion-reduce:transition-none"
+		],
+		icon: ["flex size-5 shrink-0 items-center justify-center", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+		body: ["min-w-0"],
+		title: ["m-0 truncate text-sm leading-5"],
+		description: ["m-0 text-sm leading-5"],
+		actions: ["flex items-center justify-end gap-1.5"],
+		close: [
+			"absolute top-1.5 right-1.5 inline-flex size-7 shrink-0 items-center justify-center",
+			"outline outline-1 outline-offset-2 outline-transparent",
+			"transition-[background-color,color,border-color,box-shadow,transform] duration-150",
+			"disabled:pointer-events-none disabled:opacity-40",
+			"focus-visible:outline-line-strong",
+			"[&_svg]:size-3.5"
+		],
+		arrow: [
+			"pointer-events-none flex",
+			"data-[side=top]:bottom-[-6px]",
+			"data-[side=bottom]:top-[-6px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
+		]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: ["border-2 border-black bg-soft-signal text-black shadow-[var(--shadow-brutal)]", "focus-visible:outline-transparent"],
+				content: [
+					"min-h-0 min-w-0 grid-cols-1 px-3 py-2 font-sans",
+					"gap-y-1.5",
+					"[&:has([data-slot=toast-icon])]:grid-cols-[auto_minmax(0,1fr)]"
+				],
+				icon: ["size-7 border-2 border-black bg-white p-1.5 text-black shadow-[2px_2px_0_0_black]", "[&_svg]:size-4 [&_svg]:stroke-[2.5]"],
+				title: ["font-bold text-black"],
+				description: ["font-semibold text-black/75"],
+				actions: ["col-start-1 row-start-2 col-span-full w-full justify-self-stretch justify-end gap-1"],
+				close: ["static order-1 size-auto min-h-7 shrink-0 whitespace-nowrap border-2 border-line-strong bg-white px-2 text-xs font-bold text-black/70 shadow-xs", "hover:bg-brutal-yellow hover:text-black active:translate-x-px active:translate-y-px active:shadow-none"],
+				arrow: ["hidden"]
+			},
+			elegant: {
+				root: [
+					"relative rounded-xl bg-[oklch(0.263_0.009_294.9_/_0.50)] text-[oklch(0.965_0.002_286)] backdrop-blur-2xl saturate-150",
+					"shadow-[0_18px_42px_-18px_oklch(0_0_0_/_0.54)]",
+					"data-[expanded]:bg-[oklch(0.254_0.010_298_/_0.54)] data-[expanded]:shadow-[0_18px_40px_-18px_oklch(0_0_0_/_0.54)]",
+					"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-white/35 after:mix-blend-overlay after:content-['']",
+					"dark:bg-[oklch(0.230_0.010_294.8_/_0.50)] dark:shadow-[0_18px_42px_-18px_oklch(0_0_0_/_0.68)] dark:data-[expanded]:bg-[oklch(0.220_0.010_294.7_/_0.54)]"
+				],
+				content: [
+					"gap-x-3.5 font-sans",
+					"[&:has([data-slot=toast-icon])]:grid-cols-[auto_minmax(0,1fr)]",
+					"[&:has([data-slot=toast-actions])]:min-w-[18rem]",
+					"[&:has([data-slot=toast-actions])]:min-h-14",
+					"[&:has([data-slot=toast-actions])]:py-3",
+					"[&:has([data-slot=toast-actions])]:pl-3.5",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:min-h-14",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:min-w-[18rem]",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:py-3",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:pl-3.5",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-icon])]:min-h-14",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-icon])]:min-w-[18rem]",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-icon])]:py-3",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-icon])]:pl-3.5",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-close])]:min-h-14",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-close])]:min-w-[18rem]",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-close])]:py-3",
+					"[&:has([data-slot=toast-description]):has([data-slot=toast-close])]:pl-3.5",
+					"[&:has([data-slot=toast-close])]:pr-3",
+					"[&:has([data-slot=toast-icon]):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:min-w-0",
+					"[&:has([data-slot=toast-icon]):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:min-h-10",
+					"[&:has([data-slot=toast-icon]):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:pl-3.5",
+					"[&:has([data-slot=toast-icon]):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:py-2",
+					"[&:has([data-slot=toast-icon]):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:pr-3.5",
+					"[&:has([data-slot=toast-actions])]:grid-cols-[minmax(0,1fr)]",
+					"[&:has([data-slot=toast-actions])]:gap-y-2",
+					"[&:has([data-slot=toast-icon]):has([data-slot=toast-actions])]:grid-cols-[auto_minmax(0,1fr)]"
+				],
+				icon: ["text-white/85", "[&_svg]:size-[1.125rem] [&_svg]:stroke-[1.5]"],
+				title: ["font-medium text-[oklch(0.985_0.001_286)]"],
+				description: ["text-white/62"],
+				actions: ["col-start-1 row-start-2 col-span-full w-full justify-self-stretch justify-end"],
+				close: ["static order-1 size-auto min-h-7 shrink-0 whitespace-nowrap rounded-full border-0 bg-transparent px-2 text-xs font-medium text-white/52 shadow-none", "hover:bg-white/[0.05] hover:text-white/72 active:scale-[0.985]"],
+				arrow: []
+			}
+		},
+		placement: {
+			"bottom-center": { viewport: "bottom-4 left-1/2 -translate-x-1/2" },
+			"bottom-right": { viewport: "right-4 bottom-4" },
+			"top-center": { viewport: "top-4 left-1/2 -translate-x-1/2" },
+			"top-right": { viewport: "top-4 right-4" },
+			none: { viewport: "contents" }
+		},
+		strategy: {
+			fixed: { viewport: "fixed" },
+			absolute: { viewport: "absolute" }
+		},
+		layout: {
+			stacked: { root: [
+				"absolute right-0 bottom-0 left-0 mx-auto h-[var(--toast-stack-height)] w-full origin-bottom",
+				"z-[calc(70-var(--toast-index))]",
+				"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))))_scale(var(--toast-scale))]",
+				"data-[expanded]:h-[var(--toast-height)]",
+				"data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-y))_scale(1)]",
+				"data-[starting-style]:[transform:translateY(120%)_scale(0.98)]",
+				"[&[data-ending-style]:not([data-swipe-direction])]:[transform:translateY(120%)_scale(0.98)]",
+				"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+120%))_translateY(var(--toast-y))]",
+				"data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-120%))_translateY(var(--toast-y))]",
+				"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+120%))]",
+				"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-120%))]"
+			] },
+			inline: { root: [
+				"relative mx-auto w-max max-w-[min(24rem,var(--available-width,calc(100vw-2rem)))] overflow-visible",
+				"origin-[var(--transform-origin)]",
+				"data-[starting-style]:[transform:scale(0.97)]",
+				"data-[ending-style]:[transform:scale(0.99)]"
+			] }
+		},
+		tone: {
+			info: {},
+			success: {},
+			warning: {},
+			error: {}
+		}
+	},
+	defaultVariants: {
+		placement: "bottom-center",
+		layout: "stacked",
+		strategy: "fixed"
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			tone: "success",
+			class: { root: "bg-brutal-lime" }
+		},
+		{
+			theme: "brutal",
+			tone: "warning",
+			class: { root: "bg-brutal-orange" }
+		},
+		{
+			theme: "brutal",
+			tone: "error",
+			class: { root: "bg-brutal-orange shadow-[var(--shadow-brutal-sm)]" }
+		},
+		{
+			theme: "brutal",
+			layout: "stacked",
+			class: { root: "w-max max-w-full" }
+		}
+	]
+});
+const toastAction = tv({
+	extend: buttonVariants,
+	slots: { root: [
+		"inline-flex min-h-7 shrink-0 items-center justify-center whitespace-nowrap px-2 text-xs leading-none",
+		"font-sans shadow-none",
+		"outline outline-1 outline-offset-2 outline-transparent",
+		"transition-[background-color,color,border-color,box-shadow,transform] duration-150",
+		"disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
+		"focus-visible:outline-line-strong",
+		"[&_[data-icon]]:size-[1em] [&_svg:not([class*='size-'])]:size-3"
+	] },
+	variants: { toastTheme: {
+		brutal: { root: ["order-2 border-2 border-line-strong bg-black font-bold text-white shadow-xs", "hover:bg-black/85 active:translate-x-px active:translate-y-px active:shadow-none"] },
+		elegant: { root: [
+			"toast-gradient-border order-2 min-h-7 rounded-full bg-white/[0.06] px-3 font-medium text-white/74",
+			"[--toast-gradient-border-angle:to_bottom] [--toast-gradient-border-from:rgb(255_255_255_/_0.1)] [--toast-gradient-border-to:rgb(255_255_255_/_0)] [--toast-gradient-border-via:rgb(255_255_255_/_0.05)]",
+			"hover:bg-white/[0.075] hover:text-white/88 hover:[--toast-gradient-border-from:rgb(255_255_255_/_0.24)] hover:[--toast-gradient-border-via:rgb(255_255_255_/_0.08)] active:scale-[0.985]"
+		] }
+	} },
+	defaultVariants: {
+		variant: void 0,
+		size: void 0
+	}
+});
+const createToastManager = Toast.createToastManager;
+const useToastManager = Toast.useToastManager;
+const defaultToastManager = createToastManager();
+function addDefaultToast(intent, title, options = {}) {
+	const { action, dismissible, icon, priority, ...toastOptions } = options;
+	return defaultToastManager.add({
+		...toastOptions,
+		actionProps: action ? {
+			children: action.label,
+			onClick: action.onClick
+		} : void 0,
+		title,
+		type: intent,
+		priority: priority ?? (intent === "error" ? "high" : void 0),
+		data: {
+			intent,
+			hasClose: dismissible,
+			hasIcon: icon
+		}
+	});
+}
+const toast = {
+	add(options) {
+		const { title, type = "info", ...toastOptions } = options;
+		return addDefaultToast(type, title, toastOptions);
+	},
+	info(title, options) {
+		return addDefaultToast("info", title, options);
+	},
+	success(title, options) {
+		return addDefaultToast("success", title, options);
+	},
+	warning(title, options) {
+		return addDefaultToast("warning", title, options);
+	},
+	error(title, options) {
+		return addDefaultToast("error", title, options);
+	},
+	dismiss(id) {
+		return defaultToastManager.close(id);
+	}
+};
+function getToastTone(type) {
+	if (type === "success" || type === "warning" || type === "error") return type;
+	return "info";
+}
+function ToastProvider({ children, portalContainer, renderViewport = true, toastManager = defaultToastManager, viewportClassName, viewportPlacement = "bottom-center", viewportStrategy = "fixed", ...props }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager,
+		...props,
+		children: [children, renderViewport ? /* @__PURE__ */ jsx(DefaultToastLayer, {
+			placement: viewportPlacement,
+			portalContainer,
+			strategy: viewportStrategy,
+			viewportClassName
+		}) : null]
+	});
+}
+function ToastPortal(props) {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		...props
+	});
+}
+function ToastViewport({ placement = "bottom-center", strategy = "fixed", className, ...props }) {
+	const { viewport } = toastStyles({
+		theme: useThemeFamily(),
+		placement,
+		strategy
+	});
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		"data-slot": "toast-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function ToastPositioner({ className, ...props }) {
+	const { positioner } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Toast.Positioner, {
+		"data-slot": "toast-positioner",
+		className: positioner({ className }),
+		...props
+	});
+}
+function ToastRoot({ layout = "stacked", className, toast: toastObject, ...props }) {
+	const { root } = toastStyles({
+		theme: useThemeFamily(),
+		layout,
+		tone: getToastTone(toastObject.type)
+	});
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		"data-slot": "toast",
+		"data-toast-type": toastObject.type ?? "info",
+		toast: toastObject,
+		className: root({ className }),
+		...props
+	});
+}
+function ToastContent({ children, className, ...props }) {
+	const { content } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Toast.Content, {
+		"data-slot": "toast-content",
+		className: content({ className }),
+		...props,
+		children
+	});
+}
+function ToastIcon({ className, ...props }) {
+	const { icon } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-icon",
+		className: icon({ className }),
+		...props
+	});
+}
+function ToastBody({ className, ...props }) {
+	const { body } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-body",
+		className: body({ className }),
+		...props
+	});
+}
+function ToastActions({ className, ...props }) {
+	const { actions } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+function ToastTitle({ className, ...props }) {
+	const { title } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-slot": "toast-title",
+		className: title({ className }),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	const { description } = toastStyles({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		"data-slot": "toast-description",
+		className: description({ className }),
+		...props
+	});
+}
+function ToastAction({ className, children, disabled, loading = false, loadingLabel = "Loading", render, ...props }) {
+	const { root, content, loadingIndicator } = toastAction({ toastTheme: useThemeFamily() });
+	const renderActionContent = (actionChildren) => /* @__PURE__ */ jsxs(Fragment$1, { children: [loading ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "toast-action-loading-indicator",
+		className: loadingIndicator(),
+		children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+	}) : null, /* @__PURE__ */ jsx("span", {
+		"data-slot": "toast-action-content",
+		"data-loading": loading ? "true" : void 0,
+		className: content(),
+		children: actionChildren
+	})] });
+	const renderAction = (renderProps, state) => {
+		const actionChildren = renderActionContent(renderProps.children);
+		const nextRenderProps = {
+			...renderProps,
+			children: actionChildren
+		};
+		if (typeof render === "function") return render(nextRenderProps, state);
+		if (isValidElement(render)) {
+			const renderElement = render;
+			return cloneElement(renderElement, {
+				...nextRenderProps,
+				className: cn(renderProps.className, renderElement.props.className),
+				children: actionChildren
+			});
+		}
+		return /* @__PURE__ */ jsx("button", { ...nextRenderProps });
+	};
+	return /* @__PURE__ */ jsx(Toast.Action, {
+		"data-slot": "toast-action",
+		"data-loading": loading ? "true" : void 0,
+		className: root({ className }),
+		disabled: disabled || loading,
+		"aria-disabled": loading || void 0,
+		render: renderAction,
+		...props,
+		children
+	});
+}
+function ToastClose({ className, children, ...props }) {
+	const { close } = toastStyles({ theme: useThemeFamily() });
+	const usesDefaultText = children == null;
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		"aria-label": usesDefaultText ? void 0 : "Dismiss toast",
+		"data-slot": "toast-close",
+		className: close({ className }),
+		...props,
+		children: children ?? "Dismiss"
+	});
+}
+function ToastArrow({ className, ...props }) {
+	const theme = useThemeFamily();
+	const { arrow } = toastStyles({ theme });
+	return /* @__PURE__ */ jsx(Toast.Arrow, {
+		"data-slot": "toast-arrow",
+		className: arrow({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(ToastArrowSvg, { theme })
+	});
+}
+function DefaultToastLayer({ placement, portalContainer, strategy, viewportClassName }) {
+	return /* @__PURE__ */ jsx(ToastPortal, {
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(ToastViewport, {
+			placement,
+			strategy,
+			className: viewportClassName,
+			children: /* @__PURE__ */ jsx(DefaultToastList, {})
+		})
+	});
+}
+function DefaultToastList() {
+	const { toasts } = useToastManager();
+	return toasts.map((toastObject) => /* @__PURE__ */ jsx(DefaultToastItem, { toast: toastObject }, toastObject.id));
+}
+function DefaultToastItem({ toast: toastObject }) {
+	const showDescription = Boolean(toastObject.description);
+	const showAction = Boolean(toastObject.actionProps?.children);
+	const showClose = toastObject.data?.hasClose !== false;
+	const showIcon = toastObject.data?.hasIcon !== false;
+	return /* @__PURE__ */ jsx(ToastRoot, {
+		toast: toastObject,
+		layout: !showIcon && !showDescription && !showAction && !showClose ? "inline" : "stacked",
+		children: /* @__PURE__ */ jsxs(ToastContent, {
+			className: toastObject.data?.contentClassName,
+			children: [
+				showIcon ? /* @__PURE__ */ jsx(DefaultToastIcon, { toast: toastObject }) : null,
+				/* @__PURE__ */ jsxs(ToastBody, { children: [/* @__PURE__ */ jsx(ToastTitle, {}), showDescription ? /* @__PURE__ */ jsx(ToastDescription, {}) : null] }),
+				showAction || showClose ? /* @__PURE__ */ jsxs(ToastActions, { children: [showClose ? /* @__PURE__ */ jsx(ToastClose, {}) : null, showAction ? /* @__PURE__ */ jsx(ToastAction, {}) : null] }) : null
+			]
+		})
+	});
+}
+function DefaultToastIcon({ toast: toastObject }) {
+	const intent = toastObject.data?.intent ?? getToastTone(toastObject.type);
+	return /* @__PURE__ */ jsx(ToastIcon, { children: /* @__PURE__ */ jsx(intent === "success" ? CheckCircle2 : intent === "warning" || intent === "error" ? AlertTriangle : Info, { "aria-hidden": true }) });
+}
+function ToastArrowSvg({ theme, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "12",
+		height: "6",
+		viewBox: "0 0 12 6",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M1 0H11L6 5.25Z",
+			className: theme === "elegant" ? "fill-[oklch(0.263_0.009_294.9_/_0.50)] dark:fill-[oklch(0.230_0.010_294.8_/_0.50)]" : "fill-soft-signal"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M1 0.5L6 5.25L11 0.5",
+			className: theme === "elegant" ? "stroke-white/28" : "stroke-line-strong",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	});
+}
+//#endregion
 //#region src/components/tabs/tabs.tsx
 const tabs = tv({
 	slots: {
@@ -5664,28 +5881,60 @@ function reconcileTabOrder(items, order) {
 //#endregion
 //#region src/components/separator/separator.tsx
 const separator = tv({
-	base: [
-		"shrink-0",
-		"data-[orientation=horizontal]:w-full",
-		"data-[orientation=vertical]:self-stretch"
-	],
+	slots: {
+		root: [
+			"shrink-0",
+			"data-[orientation=horizontal]:w-full",
+			"data-[orientation=vertical]:self-stretch"
+		],
+		labeledRoot: ["grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 py-3"],
+		labeledLine: ["w-full shrink-0"],
+		labeledContent: ["min-w-0 font-mono text-xs font-medium"]
+	},
 	variants: { theme: {
-		brutal: ["data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:border-t-2 data-[orientation=horizontal]:border-black", "data-[orientation=vertical]:w-0 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-black"],
-		elegant: [
-			"bg-line-muted",
-			"data-[orientation=horizontal]:h-px",
-			"data-[orientation=vertical]:w-px"
-		]
+		brutal: {
+			root: ["data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:border-t-2 data-[orientation=horizontal]:border-line-strong", "data-[orientation=vertical]:w-0 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-line-strong"],
+			labeledLine: ["h-0 border-t-2 border-line-strong"],
+			labeledContent: ["font-medium text-foreground/70"]
+		},
+		elegant: {
+			root: [
+				"bg-line-muted",
+				"data-[orientation=horizontal]:h-px",
+				"data-[orientation=vertical]:w-px"
+			],
+			labeledLine: ["h-px bg-line-muted"],
+			labeledContent: ["text-foreground-placeholder"]
+		}
 	} }
 });
-function Separator({ className, orientation = "horizontal", ...props }) {
+function Separator({ children, className, orientation = "horizontal", ...props }) {
+	const { labeledContent, labeledLine, labeledRoot, root } = separator({ theme: useThemeFamily() });
+	if (children != null && orientation === "horizontal") return /* @__PURE__ */ jsxs(Separator$1, {
+		"data-slot": "separator",
+		orientation,
+		className: labeledRoot({ className }),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: labeledLine()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "separator-content",
+				className: labeledContent(),
+				children
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: labeledLine()
+			})
+		]
+	});
 	return /* @__PURE__ */ jsx(Separator$1, {
 		"data-slot": "separator",
 		orientation,
-		className: separator({
-			theme: useThemeFamily(),
-			className
-		}),
+		className: root({ className }),
 		...props
 	});
 }
@@ -5784,4 +6033,4 @@ function ThemeProvider({ theme, defaultTheme = "brutal", onThemeChange, mode, de
 	});
 }
 //#endregion
-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 };
+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, PreviewCard, PreviewCardArrow, PreviewCardContent, PreviewCardDescription, PreviewCardHeader, PreviewCardPopup, PreviewCardPortal, PreviewCardSeparator, PreviewCardTitle, PreviewCardTrigger, Progress, ProgressHeader, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, 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, Skeleton, SortableTabsList, SortableTabsTab, Spinner, Status, Switch, SwitchThumb, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Text, TextHeading, TextMono, TextSans, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, ToastAction, ToastActions, ToastArrow, ToastBody, ToastClose, ToastContent, ToastDescription, ToastIcon, ToastPortal, ToastPositioner, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, createToastManager, toast, useOrderedTabs, useTheme, useThemeFamily, useToastManager };