raft-ui 0.0.10 → 0.0.12

package/dist/index.mjs

@@ -1,15 +1,18 @@
 import { cn } from "./cn.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 { 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 { cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "vaul";
 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 { useHotkey } from "@tanstack/react-hotkeys";
 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";
@@ -26,6 +29,690 @@ 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$1, { 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$1, { 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",
+				"[&_[data-icon]]:size-[1em]",
+				"[&_svg:not([class*='size-'])]:size-3"
+			] },
+			sm: { root: [
+				"gap-[5px] px-2.5 py-[6px] text-xs",
+				"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
+				"[&_[data-icon]]:size-[1em]",
+				"[&_svg:not([class*='size-'])]:size-3.5"
+			] },
+			md: { root: [
+				"gap-[5.5px] px-3 py-[7px] text-sm",
+				"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
+				"[&_[data-icon]]:size-[1em]"
+			] },
+			lg: { root: [
+				"gap-[6px] px-3.5 py-2 text-base",
+				"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
+				"[&_[data-icon]]:size-[1em]",
+				"[&_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: "elegant",
+			variant: ["outline", "danger-outline"],
+			size: "xs",
+			class: { root: "py-[6px]" }
+		},
+		{
+			theme: "elegant",
+			variant: ["outline", "danger-outline"],
+			size: "sm",
+			class: { root: "py-[6.75px]" }
+		},
+		{
+			theme: "elegant",
+			variant: ["outline", "danger-outline"],
+			size: "md",
+			class: { root: "py-[7.25px]" }
+		},
+		{
+			theme: "elegant",
+			variant: ["outline", "danger-outline"],
+			size: "lg",
+			class: { root: "py-[7.75px]" }
+		},
+		{
+			theme: "elegant",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"danger-secondary",
+				"danger"
+			],
+			size: "xs",
+			class: { root: "py-[5.75px]" }
+		},
+		{
+			theme: "elegant",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"danger-secondary",
+				"danger"
+			],
+			size: "sm",
+			class: { root: "py-[6.75px]" }
+		},
+		{
+			theme: "elegant",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"danger-secondary",
+				"danger"
+			],
+			size: "md",
+			class: { root: "py-[6.75px]" }
+		},
+		{
+			theme: "elegant",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"danger-secondary",
+				"danger"
+			],
+			size: "lg",
+			class: { root: "py-[7.75px]" }
+		},
+		{
+			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]", "has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5"] }
+		},
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: ["h-7 px-2.5 py-0 text-xs", "has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2"] }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { root: ["h-8 px-3 py-0 text-sm", "has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5"] }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: ["h-10 px-4 py-0 text-sm", "has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5"] }
+		},
+		{
+			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: {
@@ -324,6 +1011,202 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/bottom-sheet/bottom-sheet.tsx
+const bottomSheet = tv({
+	slots: {
+		portal: [],
+		overlay: ["fixed inset-0 z-50", "![animation-duration:0.2s]"],
+		positioner: ["contents"],
+		content: [
+			"fixed z-50 flex h-auto flex-col outline-none",
+			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 md:data-[vaul-drawer-direction=bottom]:inset-x-3",
+			"data-[vaul-drawer-direction=bottom]:mx-auto data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:min-h-64 data-[vaul-drawer-direction=bottom]:max-h-[82vh] data-[vaul-drawer-direction=bottom]:max-w-lg md:data-[vaul-drawer-direction=bottom]:max-w-md",
+			"data-[vaul-drawer-direction=top]:inset-x-3 data-[vaul-drawer-direction=top]:top-3",
+			"data-[vaul-drawer-direction=top]:mx-auto data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:max-w-md",
+			"data-[vaul-drawer-direction=left]:inset-y-3 data-[vaul-drawer-direction=left]:left-3 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:max-w-sm",
+			"data-[vaul-drawer-direction=right]:inset-y-3 data-[vaul-drawer-direction=right]:right-3 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:max-w-sm",
+			"!duration-200 ![animation-duration:0.2s]"
+		],
+		header: ["flex flex-col items-center px-6 pt-8 pb-2 text-center"],
+		body: ["flex flex-1 flex-col items-center px-6 pt-4 pb-6 text-center"],
+		footer: ["mt-auto px-6 py-5 md:pb-11"],
+		actions: ["mx-auto w-full items-center justify-center gap-2.5", "[&_[data-slot=button]]:w-full"],
+		title: ["max-w-sm text-pretty text-center text-2xl leading-8 text-foreground-strong"],
+		description: ["max-w-sm text-pretty text-center text-sm leading-5 text-foreground/60"]
+	},
+	variants: { theme: {
+		brutal: {
+			overlay: ["bg-layer-backdrop"],
+			title: ["font-bold"],
+			content: [
+				"border-2 border-black bg-white text-black shadow-[var(--shadow-lg)]",
+				"data-[vaul-drawer-direction=bottom]:border-x-0 md:data-[vaul-drawer-direction=bottom]:border-x-2",
+				"data-[vaul-drawer-direction=bottom]:border-b-0 md:data-[vaul-drawer-direction=bottom]:border-b-2"
+			]
+		},
+		elegant: {
+			overlay: ["bg-layer-backdrop backdrop-blur-[2px]"],
+			content: [
+				"overflow-clip rounded-lg bg-layer-popover text-foreground shadow-xl md:rounded-xl",
+				"data-[vaul-drawer-direction=bottom]:rounded-b-none",
+				"md:data-[vaul-drawer-direction=bottom]:max-w-md",
+				"md:data-[vaul-drawer-direction=top]:max-w-md",
+				"md:data-[vaul-drawer-direction=left]:max-w-md",
+				"md:data-[vaul-drawer-direction=right]:max-w-md"
+			],
+			header: ["bg-white px-8 pt-9 pb-2"],
+			body: ["bg-white px-8 pt-4 pb-7"],
+			footer: ["mt-0 px-8 py-5 md:pb-11"],
+			actions: ["flex w-fit max-w-none flex-row justify-center", "[&_[data-slot=button]]:w-auto"],
+			title: ["font-sans text-2xl leading-8 font-semibold text-[oklch(0.22_0_0)]"],
+			description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)]"]
+		}
+	} }
+});
+function BottomSheet({ direction = "bottom", ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		direction,
+		...props
+	});
+}
+function BottomSheetTrigger({ children, render, ...props }) {
+	if (render) return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "bottom-sheet-trigger",
+		asChild: true,
+		...props,
+		children: cloneElement(render, void 0, children ?? render.props.children)
+	});
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "bottom-sheet-trigger",
+		...props,
+		children
+	});
+}
+function BottomSheetPortal({ className, children, ...props }) {
+	const portalChildren = Children.map(children, (child) => {
+		if (isValidElement(child) && child.type === BottomSheetPositioner) return Children.map(child.props.children, (positionerChild) => withPortalClassName(positionerChild, className));
+		return withPortalClassName(child, className);
+	});
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		...props,
+		children: portalChildren
+	});
+}
+function withPortalClassName(child, className) {
+	if (!className || !isValidElement(child)) return child;
+	return cloneElement(child, { className: cn(child.props.className, className) });
+}
+function BottomSheetPositioner({ className, ...props }) {
+	const { positioner } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bottom-sheet-positioner",
+		className: positioner({ className }),
+		...props
+	});
+}
+function BottomSheetOverlay({ className, ...props }) {
+	const theme = useThemeFamily();
+	const { overlay } = bottomSheet({ theme });
+	return /* @__PURE__ */ jsx(Drawer.Overlay, {
+		"data-slot": "bottom-sheet-overlay",
+		"data-theme": theme,
+		className: overlay({ className }),
+		...props
+	});
+}
+function BottomSheetContent({ className, ...props }) {
+	const { content } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		"data-slot": "bottom-sheet-content",
+		className: content({ className }),
+		...props
+	});
+}
+function BottomSheetClose({ className, variant, size, children, render, ...props }) {
+	const isBrutal = useThemeFamily() === "brutal";
+	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "bottom-sheet-close",
+		asChild: true,
+		...props,
+		children: cloneElement(render, void 0, children ?? render.props.children)
+	});
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "bottom-sheet-close",
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? (isBrutal ? "outline" : "ghost"),
+			size: size ?? (isBrutal ? "icon-sm" : "icon-sm"),
+			"aria-label": "Close",
+			className: cn(isBrutal ? "absolute top-3 right-3" : "absolute top-4 right-6", isBrutal ? "bg-white" : "p-0 text-foreground-placeholder hover:bg-transparent hover:text-foreground", className),
+			children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4" })
+		})
+	});
+}
+function BottomSheetHeader({ className, render, ...props }) {
+	const { header } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "bottom-sheet-header" }
+	});
+}
+function BottomSheetFooter({ className, render, ...props }) {
+	const { footer } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: footer({ className }) }, props),
+		state: { slot: "bottom-sheet-footer" }
+	});
+}
+function BottomSheetBody({ className, render, ...props }) {
+	const { body } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "bottom-sheet-body" }
+	});
+}
+function BottomSheetActions({ className, render, children, ...props }) {
+	const theme = useThemeFamily();
+	const { actions } = bottomSheet({ theme });
+	const count = Math.min(3, countActionChildren(children));
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className: actions({ className: cn(theme === "elegant" ? "flex-row" : count <= 1 ? "flex max-w-64 flex-col" : count === 2 ? "flex max-w-64 flex-col-reverse" : "grid max-w-[32rem] grid-cols-3", className) }),
+			children
+		}, props),
+		state: { slot: "bottom-sheet-actions" }
+	});
+}
+function countActionChildren(children) {
+	return Children.toArray(children).reduce((count, child) => {
+		if (isValidElement(child) && child.type === Fragment) return count + countActionChildren(child.props.children);
+		return count + 1;
+	}, 0);
+}
+function BottomSheetTitle({ className, ...props }) {
+	const { title } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "bottom-sheet-title",
+		className: title({ className }),
+		...props
+	});
+}
+function BottomSheetDescription({ className, ...props }) {
+	const { description } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "bottom-sheet-description",
+		className: description({ className }),
+		...props
+	});
+}
+//#endregion
 //#region src/components/copyable-code/copyable-code.tsx
 const copyableCode = tv({
 	slots: {
@@ -1565,6 +2448,11 @@ const dropdownMenu = tv({
 			indicator: []
 		},
 		elegant: {
+			trigger: [
+				"hover:bg-[color-mix(in_oklch,var(--line-subtle)_22%,var(--layer-panel))]",
+				"data-[popup-open]:[--button-focus-outline:transparent] focus-visible:[--button-focus-outline:transparent]",
+				"data-[popup-open]:shadow-[0_0_0_0.5px_oklch(0.21_0.006_285_/_0.14),0_0_0_3px_color-mix(in_oklch,var(--primary-400)_35%,transparent)] focus-visible:shadow-[0_0_0_0.5px_oklch(0.21_0.006_285_/_0.14),0_0_0_3px_color-mix(in_oklch,var(--primary-400)_35%,transparent)]"
+			],
 			content: [
 				"gap-0.5 rounded-md bg-layer-popover p-1",
 				"shadow-lg outline-none",
@@ -1631,10 +2519,14 @@ function DropdownMenuSubmenu(props) {
 		...props
 	});
 }
-function DropdownMenuTrigger({ className, ...props }) {
+function DropdownMenuTrigger({ className, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "md"
+}), ...props }) {
 	const { trigger } = dropdownMenu({ theme: useThemeFamily() });
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		"data-slot": "dropdown-menu-trigger",
+		render,
 		className: trigger({ className }),
 		...props
 	});
@@ -1653,8 +2545,10 @@ function DropdownMenuPopup({ className, ...props }) {
 		...props
 	});
 }
-function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, className, ...props }) {
-	const { positioner, content } = dropdownMenu({ theme: useThemeFamily() });
+function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+	const theme = useThemeFamily();
+	const resolvedSideOffset = sideOffset ?? (theme === "elegant" ? 6 : 4);
+	const { positioner, content } = dropdownMenu({ theme });
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
@@ -1668,7 +2562,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPa
 			disableAnchorTracking,
 			positionMethod,
 			side,
-			sideOffset,
+			sideOffset: resolvedSideOffset,
 			sticky,
 			className: positioner(),
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
@@ -1789,6 +2683,241 @@ function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/lightbox/lightbox.tsx
+const lightbox = tv({
+	slots: {
+		backdrop: ["fixed inset-0 z-[70] bg-layer-backdrop data-[closed]:hidden"],
+		content: ["pointer-events-none fixed inset-0 z-[71] data-[closed]:hidden"],
+		header: ["safe-top safe-left safe-right pointer-events-auto shrink-0"],
+		title: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
+		actions: ["flex shrink-0 items-center gap-1.5"],
+		stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
+		media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-2"],
+		navigationButton: [
+			"pointer-events-auto absolute z-10 inline-flex items-center justify-center",
+			"border-2 border-line-strong bg-layer-panel text-foreground-strong shadow-sm",
+			"transition-[background-color,color,opacity,box-shadow,transform] duration-150",
+			"outline outline-[1px] outline-offset-2 outline-transparent",
+			"focus-visible:outline-foreground-strong",
+			"data-[disabled=true]:cursor-default",
+			"[&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0"
+		],
+		infoBar: [
+			"pointer-events-auto flex min-w-0 items-center",
+			"bg-layer-panel text-foreground-strong",
+			"shadow-[0_12px_32px_-18px_oklch(0_0_0_/_0.55)]"
+		],
+		infoTitle: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
+		infoActions: ["flex shrink-0 items-center gap-1.5"],
+		close: []
+	},
+	variants: { theme: {
+		brutal: {
+			header: ["bg-transparent shadow-none"],
+			title: ["text-foreground-strong"],
+			media: ["border-line-strong bg-layer-panel shadow-xl"],
+			navigationButton: [
+				"size-8 rounded-none",
+				"hover:bg-layer-panel data-[disabled=true]:text-black/35",
+				"[&_svg]:size-6"
+			],
+			infoBar: [
+				"w-[clamp(9rem,20vw,14rem)] max-w-[calc(100vw-3rem)] min-w-[9rem]",
+				"gap-2 rounded-none border-2 border-black py-0.5 pr-0.5 pl-2.5 shadow-[var(--shadow)]",
+				"[&_[data-slot=button]_svg]:stroke-2"
+			],
+			infoTitle: ["text-xs text-black"]
+		},
+		elegant: {
+			backdrop: ["bg-[oklch(0_0_0_/_0.72)] backdrop-blur-[2px]"],
+			header: ["bg-transparent shadow-none"],
+			title: ["font-sans font-medium text-foreground-strong"],
+			actions: ["gap-2"],
+			media: ["border border-line-subtle bg-layer-panel shadow-none"],
+			navigationButton: [
+				"size-8 rounded-full border-0",
+				"bg-white/75 backdrop-blur-md",
+				"text-foreground-muted",
+				"shadow-none",
+				"hover:bg-white/85 hover:text-foreground-strong",
+				"active:scale-[0.97]",
+				"data-[disabled=true]:bg-white/35 data-[disabled=true]:text-black/30 data-[disabled=true]:shadow-none",
+				"data-[disabled=true]:hover:bg-white/35 data-[disabled=true]:active:scale-100",
+				"[&_svg]:size-5"
+			],
+			infoBar: [
+				"w-[clamp(9rem,20vw,14rem)] max-w-[calc(100vw-3rem)] min-w-[9rem]",
+				"gap-2 rounded py-0.5 pr-0.5 pl-2.5",
+				"bg-[rgba(245,245,245,0.8)] text-neutral-900 shadow-none backdrop-blur-[10px]",
+				"[&_[data-slot=button]]:text-neutral-600 [&_[data-slot=button]]:hover:bg-neutral-900/10 [&_[data-slot=button]]:hover:text-neutral-800"
+			],
+			infoTitle: ["font-sans text-xs font-medium text-neutral-800"],
+			infoActions: ["gap-1"]
+		}
+	} }
+});
+function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
+	const dialogRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const effectiveOpen = open ?? uncontrolledOpen;
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [onOpenChange, open]);
+	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
+	return /* @__PURE__ */ jsxs(Dialog$1.Root, {
+		actionsRef: dialogRef,
+		defaultOpen,
+		modal,
+		onOpenChange: handleOpenChange,
+		open,
+		...props,
+		children: [modWClose, children]
+	});
+}
+function LightboxModWClose({ dialogRef }) {
+	useHotkey("Mod+W", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dialogRef.current?.close();
+	}, { meta: {
+		name: "Close lightbox",
+		description: "Close the active lightbox before the browser closes the tab."
+	} });
+	return null;
+}
+function LightboxTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "lightbox-trigger",
+		...props
+	});
+}
+function LightboxPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "lightbox-portal",
+		...props
+	});
+}
+function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
+	const theme = useThemeFamily();
+	const { backdrop, content } = lightbox({ theme });
+	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		"data-theme": theme,
+		className: backdrop()
+	}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+		"data-slot": "lightbox-content",
+		"data-theme": theme,
+		initialFocus,
+		finalFocus,
+		className: content({ className }),
+		...props
+	})] });
+}
+function LightboxHeader({ render, className, ...props }) {
+	const { header } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "lightbox-header" }
+	});
+}
+function LightboxTitle({ render, className, ...props }) {
+	const { title } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "lightbox-title" }
+	});
+}
+function LightboxActions({ render, className, ...props }) {
+	const { actions } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actions({ className }) }, props),
+		state: { slot: "lightbox-actions" }
+	});
+}
+function LightboxStage({ render, className, ...props }) {
+	const { stage } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: stage({ className }) }, props),
+		state: { slot: "lightbox-stage" }
+	});
+}
+function LightboxMedia({ render, className, ...props }) {
+	const { media } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: media({ className }) }, props),
+		state: { slot: "lightbox-media" }
+	});
+}
+function LightboxNavigationButton({ className, direction, disabled, onClick, type = "button", ...props }) {
+	const { navigationButton } = lightbox({ theme: useThemeFamily() });
+	const handleClick = useCallback((event) => {
+		event.stopPropagation();
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	}, [disabled, onClick]);
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-disabled": disabled,
+		className: navigationButton({ className: cn(direction === "previous" ? "left-8" : "right-8", className) }),
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "lightbox-navigation-button",
+		"data-direction": direction,
+		onClick: handleClick,
+		size: "icon-lg",
+		type,
+		variant: "outline",
+		...props
+	});
+}
+function LightboxInfoBar({ render, className, ...props }) {
+	const { infoBar } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoBar({ className }) }, props),
+		state: { slot: "lightbox-info-bar" }
+	});
+}
+function LightboxInfoTitle({ render, className, ...props }) {
+	const { infoTitle } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoTitle({ className }) }, props),
+		state: { slot: "lightbox-info-title" }
+	});
+}
+function LightboxInfoActions({ render, className, ...props }) {
+	const { infoActions } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoActions({ className }) }, props),
+		state: { slot: "lightbox-info-actions" }
+	});
+}
+function LightboxClose({ className, ...props }) {
+	const { close } = lightbox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "lightbox-close",
+		className: close({ className }),
+		...props
+	});
+}
+//#endregion
 //#region src/components/tooltip/tooltip.tsx
 const tooltip = tv({
 	slots: {
@@ -1831,7 +2960,7 @@ const tooltip = tv({
 		},
 		elegant: {
 			content: [
-				"rounded-xl bg-[oklch(0.263_0.009_294.9)] text-[oklch(0.965_0.002_286)]",
+				"rounded-md 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-['']",
@@ -6033,4 +7162,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, 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 };
+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, BottomSheet, BottomSheetActions, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetPositioner, BottomSheetTitle, BottomSheetTrigger, 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, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxInfoActions, LightboxInfoBar, LightboxInfoTitle, LightboxMedia, LightboxNavigationButton, LightboxPortal, LightboxStage, LightboxTitle, LightboxTrigger, 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 };