@botiverse/raft-ui 0.11.0 → 0.12.0

package/dist/drawer-yZD16Ybl.mjs

@@ -1,988 +0,0 @@
-import { cn } from "./cn.mjs";
-import { Dialog } from "@base-ui/react/dialog";
-import { X } from "lucide-react";
-import { tv } from "tailwind-variants/lite";
-import { createContext, use, useContext, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@base-ui/react/button";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { Drawer } from "@base-ui/react/drawer";
-//#region src/lib/tv.ts
-const tv$1 = ((options) => {
-	const recipe = tv(options);
-	const wrappedRecipe = ((props) => {
-		const result = recipe(props);
-		if (result == null || typeof result === "string") return cn(result);
-		return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
-	});
-	return Object.assign(wrappedRecipe, recipe);
-});
-//#endregion
-//#region src/lib/theme/theme-context.ts
-const ThemeStateContext = createContext({
-	mode: "light",
-	resolvedMode: "light",
-	setMode: () => void 0
-});
-//#endregion
-//#region src/lib/theme/use-theme.ts
-/** Read and update the colour mode. */
-function useTheme() {
-	return use(ThemeStateContext);
-}
-//#endregion
-//#region src/lib/theme/theme-scope.ts
-/**
-* Carry the provider's resolved mode (`light` / `dark`) onto content that
-* renders outside its subtree (a portal), so a dark island's popup stays dark.
-*/
-function resolveThemeScopeProps({ className, ...props }, { resolvedMode }) {
-	const resolvedClassName = typeof className === "function" ? (state) => cn(className(state), resolvedMode) : typeof className === "string" ? cn(className, resolvedMode) : className ?? resolvedMode;
-	return {
-		...props,
-		className: resolvedClassName
-	};
-}
-function useThemeScopeProps(props) {
-	return resolveThemeScopeProps(props, useTheme());
-}
-//#endregion
-//#region src/lib/overlay-depth.tsx
-const OverlayStackContext = createContext([]);
-function OverlayLayerProvider({ kind, modal, children }) {
-	const stack = useContext(OverlayStackContext);
-	const value = useMemo(() => modal ? [...stack, kind] : stack, [
-		stack,
-		kind,
-		modal
-	]);
-	return /* @__PURE__ */ jsx(OverlayStackContext.Provider, {
-		value,
-		children
-	});
-}
-/**
-* The modal surface this overlay's own surface was opened from, or null when
-* it is the first. Called inside a surface, so the last entry is the surface
-* itself and the one before it is its parent.
-*/
-function useParentOverlayKind() {
-	const stack = useContext(OverlayStackContext);
-	return stack.length >= 2 ? stack[stack.length - 2] : null;
-}
-/**
-* Wraps a dialog or drawer root's children in its layer. Base UI lets those
-* children be a render function (`({ payload }) => …`), so keep that shape.
-*/
-function withOverlayLayer(kind, modal, children) {
-	if (typeof children === "function") return (...args) => /* @__PURE__ */ jsx(OverlayLayerProvider, {
-		kind,
-		modal,
-		children: children(...args)
-	});
-	return /* @__PURE__ */ jsx(OverlayLayerProvider, {
-		kind,
-		modal,
-		children
-	});
-}
-//#endregion
-//#region src/lib/default-native-button.ts
-function defaultNativeButton(render) {
-	if (!render || typeof render !== "object" || !("type" in render)) return;
-	const element = render;
-	if (typeof element.type === "string") return element.type === "button";
-}
-//#endregion
-//#region src/components/spinner/spinner.tsx
-const SPINNER_STYLE = `
-@keyframes raft-spinner-pixel {
-  0%,
-  24% {
-    opacity: 1;
-  }
-  25%,
-  100% {
-    opacity: 0.2;
-  }
-}
-
-[data-slot="spinner"] [data-spinner-pixel] {
-  animation: raft-spinner-pixel 1s steps(1) infinite;
-}
-
-[data-slot="spinner"] [data-spinner-pixel]:nth-child(2) {
-  animation-delay: 0.25s;
-}
-
-[data-slot="spinner"] [data-spinner-pixel]:nth-child(4) {
-  animation-delay: 0.5s;
-}
-
-[data-slot="spinner"] [data-spinner-pixel]:nth-child(3) {
-  animation-delay: 0.75s;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="spinner"] [data-spinner-pixel] {
-    animation: none;
-  }
-
-  [data-slot="spinner"] [data-spinner-pixel]:first-child {
-    opacity: 1;
-  }
-}
-`;
-const spinner = tv$1({
-	slots: {
-		root: [
-			"relative inline-flex shrink-0 items-center justify-center",
-			"leading-none text-current",
-			"[--spinner-pixel:5px] [--spinner-gap:2px]"
-		],
-		ring: ["shrink-0", "grid size-auto grid-cols-[repeat(2,var(--spinner-pixel))] gap-(--spinner-gap)"],
-		pixel: ["block size-(--spinner-pixel) rounded-[1px] bg-current opacity-20"]
-	},
-	variants: {
-		size: {
-			xs: { root: ["[--spinner-pixel:4px] [--spinner-gap:1.5px]"] },
-			sm: {},
-			md: { root: ["[--spinner-pixel:6px] [--spinner-gap:2px]"] },
-			lg: { root: ["[--spinner-pixel:8px] [--spinner-gap:3px]"] }
-		},
-		variant: {
-			default: {},
-			inverse: { root: ["text-foreground-inverse"] }
-		}
-	},
-	defaultVariants: { size: "sm" }
-});
-const spinnerStyle = /* @__PURE__ */ jsx("style", {
-	href: "raft-ui-spinner",
-	precedence: "default",
-	children: SPINNER_STYLE
-});
-function Spinner({ size = "sm", variant = "default", className, render, ...props }) {
-	const { root, ring, pixel } = spinner({
-		size,
-		variant
-	});
-	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [spinnerStyle, /* @__PURE__ */ jsxs("span", {
-		"data-spinner-grid": "",
-		"aria-hidden": "true",
-		className: ring(),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"data-spinner-pixel": "",
-				className: pixel()
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"data-spinner-pixel": "",
-				className: pixel()
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"data-spinner-pixel": "",
-				className: pixel()
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"data-spinner-pixel": "",
-				className: pixel()
-			})
-		]
-	})] });
-	const defaultProps = {
-		role: "status",
-		"aria-label": "Loading",
-		className: root({ className }),
-		children
-	};
-	return useRender({
-		defaultTagName: "span",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: {
-			slot: "spinner",
-			size
-		}
-	});
-}
-//#endregion
-//#region src/components/button/button.tsx
-const sticker = (fill) => [`border-sticker-ink ${fill} text-sticker-ink ring-[1.5px] ring-sticker-edge`, "hover:press-overlay-sticker active:press-overlay-sticker"];
-const outline = (ink) => [`border-line-strong bg-layer-card ${ink}`, "hover:press-overlay active:press-overlay"];
-const textMd = [
-	"h-8 gap-2 rounded-control px-3 py-0 text-control",
-	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
-	"[&_svg:not([class*='size-'])]:size-4 **:data-icon:size-[1em]",
-	"after:absolute after:inset-x-0 after:-inset-y-1.5"
-];
-const iconMd = ["size-8 rounded-control p-0 [&_svg:not([class*='size-'])]:size-[18px]", "after:absolute after:-inset-1.5"];
-const buttonVariants = tv$1({
-	slots: {
-		root: [
-			"relative inline-flex shrink-0 items-center justify-center",
-			"whitespace-nowrap select-none",
-			"rounded-none border-[1.5px] font-sans font-bold shadow-none",
-			"transition-colors duration-100",
-			"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-transparent",
-			"focus-visible:shadow-focus",
-			"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
-			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-			"disabled:pointer-events-none aria-disabled:cursor-not-allowed",
-			"disabled:transform-none aria-disabled:transform-none",
-			"aria-disabled:hover:translate-none",
-			"aria-disabled:active:translate-none aria-disabled:active:scale-none",
-			"disabled:opacity-100 aria-disabled:opacity-100",
-			"disabled:border-line-hairline disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled disabled:ring-0",
-			"aria-disabled:border-line-hairline aria-disabled:bg-fill-muted aria-disabled:bg-none aria-disabled:text-foreground-disabled aria-disabled:ring-0"
-		],
-		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: {
-		variant: {
-			primary: { root: sticker("bg-attention-400") },
-			accent: { root: sticker("bg-attention-400") },
-			warning: { root: sticker("bg-warning") },
-			danger: { root: sticker("bg-danger") },
-			default: { root: outline("text-foreground") },
-			outline: { root: outline("text-foreground") },
-			information: { root: outline("text-foreground") },
-			muted: { root: outline("text-foreground") },
-			success: { root: outline("text-foreground") },
-			"danger-secondary": { root: outline("text-danger-strong") },
-			"danger-outline": { root: outline("text-danger-strong") },
-			ghost: { root: ["border-transparent bg-transparent text-foreground", "hover:bg-fill-pressed active:bg-fill-pressed"] },
-			"on-frame": { root: [
-				"border-transparent bg-transparent text-foreground-on-frame",
-				"hover:bg-fill-frame-pressed active:bg-fill-frame-pressed",
-				"aria-expanded:bg-fill-frame-pressed data-popup-open:bg-fill-frame-pressed",
-				"disabled:border-transparent disabled:bg-transparent",
-				"aria-disabled:border-transparent aria-disabled:bg-transparent"
-			] }
-		},
-		size: {
-			xs: { root: textMd },
-			sm: { root: textMd },
-			md: { root: textMd },
-			lg: { root: [
-				"h-control gap-2 rounded-control px-4 py-0 text-subhead",
-				"has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5",
-				"[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]",
-				"after:absolute after:inset-x-0 after:-inset-y-control-hit"
-			] },
-			xl: { root: ["h-control-cta gap-2 rounded-control px-5 py-0 text-body", "[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]"] },
-			"icon-xs": { root: iconMd },
-			"icon-sm": { root: iconMd },
-			"icon-md": { root: iconMd },
-			"icon-lg": { root: ["size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-control-hit"] }
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "md"
-	},
-	compoundVariants: [
-		{
-			variant: "ghost",
-			size: [
-				"icon-xs",
-				"icon-sm",
-				"icon-md",
-				"icon-lg"
-			],
-			class: { root: ["disabled:border-transparent disabled:bg-transparent", "aria-disabled:border-transparent aria-disabled:bg-transparent"] }
-		},
-		{
-			variant: "on-frame",
-			size: [
-				"xs",
-				"sm",
-				"md"
-			],
-			class: { root: "h-9 px-2.5 text-subhead after:-inset-y-1" }
-		},
-		{
-			variant: "on-frame",
-			size: [
-				"icon-xs",
-				"icon-sm",
-				"icon-md"
-			],
-			class: { root: "size-9 after:-inset-1 [&_svg:not([class*='size-'])]:size-5" }
-		}
-	]
-});
-function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
-	const { root, content, loadingIndicator } = buttonVariants({
-		variant,
-		size
-	});
-	return /* @__PURE__ */ jsxs(Button, {
-		...props,
-		render,
-		nativeButton: nativeButton ?? defaultNativeButton(render),
-		"data-slot": "button",
-		className: root({ className }),
-		"data-loading": loading ? "true" : void 0,
-		disabled: disabled || loading,
-		...loading ? { "aria-disabled": true } : {},
-		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/dialog/dialog.tsx
-const dialog = tv$1({
-	slots: {
-		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
-		content: [
-			"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
-			"max-h-[calc(100dvh-2rem)] outline-none",
-			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
-			"shadow-float ring-1 ring-line-seam"
-		],
-		header: ["grid shrink-0 grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0", "gap-2 px-5 pt-5"],
-		body: [
-			"min-w-0 flex-1 overflow-y-auto",
-			"px-5 pt-1.5 pb-5 first:pt-5",
-			"font-sans text-subhead text-foreground-muted"
-		],
-		footer: ["flex shrink-0 items-center justify-end", "gap-2 px-5 pb-5 first:pt-5 [[data-slot=dialog-header]+&]:pt-5"],
-		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
-		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
-	},
-	variants: {
-		size: {
-			sm: { content: ["max-w-sm"] },
-			md: { content: ["max-w-md"] },
-			lg: { content: ["max-w-lg"] },
-			wide: { content: ["max-w-4xl h-[min(760px,calc(100dvh-2rem))]"] }
-		},
-		bar: {
-			false: {},
-			true: {
-				header: ["flex h-14 shrink-0 items-center gap-2 border-b px-5 py-0", "border-line-seam pt-0 [&>[data-slot=dialog-close]]:my-0"],
-				body: ["flex min-h-0 flex-1 overflow-hidden p-0", "px-0 pt-0 pb-0 first:pt-0 text-foreground"],
-				footer: ["shrink-0 border-t px-5 py-3", "border-line-seam pt-3 pb-3 first:pt-3 [[data-slot=dialog-header]+&]:pt-3"]
-			}
-		},
-		layer: {
-			0: {
-				overlay: [],
-				content: []
-			},
-			1: {
-				overlay: ["z-60"],
-				content: ["z-60"]
-			}
-		},
-		nested: {
-			false: {},
-			true: { overlay: ["bg-layer-backdrop-nested"] }
-		}
-	},
-	defaultVariants: {
-		size: "md",
-		bar: false
-	}
-});
-function Dialog$1({ children, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		"data-slot": "dialog",
-		...props,
-		children: withOverlayLayer("dialog", props.modal !== false, children)
-	});
-}
-function DialogTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
-		"data-slot": "dialog-trigger",
-		...props
-	});
-}
-function DialogPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, {
-		"data-slot": "dialog-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function DialogOverlay({ className, layer, ...props }) {
-	const nested = useParentOverlayKind() != null;
-	const { overlay } = dialog({
-		layer,
-		nested
-	});
-	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
-		"data-slot": "dialog-overlay",
-		"data-nested": nested ? "" : void 0,
-		forceRender: true,
-		className: overlay({ className }),
-		...props
-	});
-}
-function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }) {
-	const { content } = dialog({
-		size,
-		layer
-	});
-	const overlayProps = typeof overlay === "object" ? overlay : {};
-	return /* @__PURE__ */ jsxs(DialogPortal, {
-		...portalProps,
-		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, {
-			layer,
-			...overlayProps
-		}), /* @__PURE__ */ jsx(Dialog.Popup, {
-			"data-slot": "dialog-content",
-			className: content({ className }),
-			...props,
-			children
-		})]
-	});
-}
-function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
-	if (render) return /* @__PURE__ */ jsx(Dialog.Close, {
-		"data-slot": "dialog-close",
-		render,
-		"aria-label": ariaLabel,
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsx(Dialog.Close, {
-		"data-slot": "dialog-close",
-		render: /* @__PURE__ */ jsx(Button$1, {
-			variant: variant ?? "ghost",
-			size: size ?? "icon-md",
-			"aria-label": ariaLabel ?? "Close",
-			className: cn("-my-1.5 -mr-1.5", className)
-		}),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
-	});
-}
-function DialogHeader({ className, bar = false, ...props }) {
-	const { header } = dialog({ bar });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-header",
-		className: header({ className }),
-		...props
-	});
-}
-function DialogBody({ className, bar = false, ...props }) {
-	const { body } = dialog({ bar });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-body",
-		className: body({ className }),
-		...props
-	});
-}
-function DialogFooter({ className, bar = false, ...props }) {
-	const { footer } = dialog({ bar });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-footer",
-		className: footer({ className }),
-		...props
-	});
-}
-function DialogTitle({ className, ...props }) {
-	const { title } = dialog();
-	return /* @__PURE__ */ jsx(Dialog.Title, {
-		"data-slot": "dialog-title",
-		className: title({ className }),
-		...props
-	});
-}
-function DialogDescription({ className, ...props }) {
-	const { description } = dialog();
-	return /* @__PURE__ */ jsx(Dialog.Description, {
-		"data-slot": "dialog-description",
-		className: description({ className }),
-		...props
-	});
-}
-const dialogSurface = tv$1({ slots: { root: [
-	"flex min-w-0 flex-col outline-none",
-	"overflow-clip rounded-dialog bg-layer-popover text-foreground",
-	"shadow-float ring-1 ring-line-seam"
-] } });
-/**
-* The dialog's frame — the popover layer, the dialog radius, the seam ring
-* and the float shadow — for a centred modal whose lifecycle the app owns
-* (its own backdrop, Escape and focus handling). It neither positions nor
-* animates itself: the host centres it, and a centred modal has no motion.
-* DialogContent draws the same frame for a Base UI dialog.
-*/
-function DialogSurface({ className, render, ...props }) {
-	const { root } = dialogSurface();
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({
-			"data-slot": "dialog-surface",
-			className: root({ className })
-		}, props)
-	});
-}
-const dialogNav = tv$1({ slots: { root: ["flex shrink-0 flex-col overflow-y-auto", "w-52 gap-0.5 border-r border-line-seam p-2 max-md:hidden"] } });
-/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
-function DialogNav({ className, render, ...props }) {
-	const { root } = dialogNav();
-	return useRender({
-		defaultTagName: "nav",
-		render,
-		props: mergeProps({
-			"data-slot": "dialog-nav",
-			className: root({ className })
-		}, props)
-	});
-}
-//#endregion
-//#region src/components/panel/panel-header.recipe.ts
-/**
-* Where a head's edge controls sit, shared by every head (panel, section,
-* drawer, thread). Phone: a filled thing (a sticker, a pill) puts its shape
-* on 16. A ghost button has no shape, so its empty 44px box overhangs, and
-* the two edge buttons mirror each other: the last action (6px padding,
-* `panelHeadActions`' -3px) and a leading Back (16px padding, -13px) both sit
-* 3px from their edge. Their 22px icon frames are then 14px in and every
-* glyph's centre 25px in, whatever the glyph (an arrow, a gear, a narrow ⋮);
-* aligning ink instead would move each button by its glyph's own side
-* bearing. A Button straight in the head (ghost ones are PanelActions) is a
-* filled control, so its shape ends on the content edge: 20 / 16.
-*/
-const panelHeadEdges = [
-	"pr-3 pl-5 max-md:pr-1.5 max-md:pl-4",
-	"max-md:[&>[data-slot=panel-action]:first-child]:-ml-[13px]",
-	"[&>[data-slot=button]:last-child]:mr-2 max-md:[&>[data-slot=button]:last-child]:mr-2.5"
-];
-/**
-* A head's trailing actions. The last glyph ends on the head's edge: 20px on
-* desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
-* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
-* margin and gap follow the button's size, not the layout: a touch screen
-* from 768px has the desktop head with 44px buttons, so -3px puts its last
-* glyph on 20px too.
-*/
-const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
-/**
-* `header` and `sectionHeader` share one bar, expressed through
-* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
-* On a phone the section head sits on the frame.
-*/
-const panelHeader = tv$1({
-	slots: {
-		header: [],
-		sectionHeader: [],
-		headerIcon: [
-			"flex size-[27px] shrink-0 items-center justify-center",
-			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
-			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
-			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
-		],
-		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
-		heading: "flex min-w-0 items-center gap-2",
-		title: "truncate font-sans text-headline font-bold text-foreground",
-		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
-		status: [
-			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
-			"font-sans text-caption font-medium normal-case text-foreground-hint",
-			"[&_svg]:size-3.5 [&_svg]:shrink-0"
-		],
-		activity: [
-			"inline-flex shrink-0 items-center gap-1.5",
-			"font-sans text-caption text-foreground-hint",
-			"[&_svg]:size-3.5 [&_svg]:shrink-0"
-		],
-		actions: panelHeadActions
-	},
-	variants: { size: {
-		sm: {},
-		md: { meta: ["text-footnote"] }
-	} },
-	compoundSlots: [{
-		slots: ["header", "sectionHeader"],
-		class: [
-			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
-			panelHeadEdges,
-			"border-b border-line-seam bg-layer-canvas text-foreground",
-			"max-md:sticky max-md:top-0 max-md:z-30"
-		]
-	}, {
-		slots: ["sectionHeader"],
-		class: [
-			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
-			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
-			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
-			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
-			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
-			"max-md:**:data-[slot=panel-action]:hover:bg-fill-frame-pressed max-md:**:data-[slot=panel-action]:active:bg-fill-frame-pressed"
-		]
-	}]
-});
-const drawer = tv$1({
-	extend: tv$1({
-		slots: {
-			overlay: [
-				"opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]",
-				"transition-opacity duration-200 ease-slide",
-				"data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-150",
-				"motion-reduce:transition-none"
-			],
-			popup: [
-				"[--drawer-blur:2px] [--drawer-ease:var(--ease-slide)]",
-				"[--closed-transform:translate3d(var(--drawer-exit-x,0px),var(--drawer-exit-y,0px),0)]",
-				"[--drawer-stack-peek:16px] [--drawer-stack-step:0.05]",
-				"[--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
-				"[--drawer-stack-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*var(--drawer-stack-peek)))]",
-				"[--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))]",
-				"[--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)]",
-				"[--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))]",
-				"[--drawer-stack-shrink-offset:calc(var(--drawer-stack-shrink)*var(--drawer-stack-size))]",
-				"origin-(--drawer-transform-origin)",
-				"transform-[translate3d(calc(var(--drawer-swipe-x,0px)+var(--drawer-stack-x,0px)),calc(var(--drawer-swipe-y,0px)+var(--drawer-stack-y,0px)),0)_scale(var(--drawer-stack-scale))]",
-				"opacity-100 blur-0",
-				"transition-[transform,height,opacity,filter] duration-240 ease-(--drawer-ease) will-change-transform",
-				"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*180ms)]",
-				"data-starting-style:transform-(--closed-transform) data-starting-style:opacity-0 data-starting-style:blur-(--drawer-blur)",
-				"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-0 data-ending-style:blur-(--drawer-blur)",
-				"data-swiping:duration-0 data-nested-drawer-swiping:duration-0 motion-reduce:transition-none"
-			],
-			content: ["transition-opacity duration-150 ease-slide motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"],
-			swipeHandle: ["transition-opacity duration-150 motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"]
-		},
-		variants: {
-			side: {
-				down: { popup: [
-					"[--drawer-exit-y:calc(100%+var(--drawer-inset)+2px)]",
-					"[--drawer-stack-y:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
-					"[--drawer-transform-origin:50%_100%]"
-				] },
-				up: { popup: [
-					"[--drawer-exit-y:calc(-100%-var(--drawer-inset)-2px)]",
-					"[--drawer-stack-y:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
-					"[--drawer-transform-origin:50%_0%]"
-				] },
-				left: { popup: [
-					"[--drawer-exit-x:calc(-100%-var(--drawer-inset)-2px)]",
-					"[--drawer-stack-x:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
-					"[--drawer-transform-origin:0%_50%]"
-				] },
-				right: { popup: [
-					"[--drawer-exit-x:calc(100%+var(--drawer-inset)+2px)]",
-					"[--drawer-stack-x:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
-					"[--drawer-transform-origin:100%_50%]"
-				] }
-			},
-			axis: {
-				x: { popup: ["[--drawer-stack-size:100%]", "[--drawer-swipe-x:var(--drawer-swipe-movement-x)]"] },
-				y: { popup: ["[--drawer-stack-size:max(0px,var(--drawer-frontmost-height,var(--drawer-height)))]", "[--drawer-swipe-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]"] }
-			},
-			snapPoints: { true: { overlay: ["[--drawer-overlay-min-opacity:0.5]"] } }
-		}
-	}),
-	slots: {
-		overlay: [
-			"fixed inset-0 z-50 min-h-dvh select-none",
-			"supports-[-webkit-touch-callout:none]:absolute",
-			"bg-layer-backdrop"
-		],
-		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
-		popup: [
-			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
-			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
-			"data-nested-drawer-open:overflow-hidden",
-			"bg-layer-popover text-foreground",
-			"shadow-float ring-1 ring-line-seam"
-		],
-		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
-		swipeHandle: [
-			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
-			"before:absolute before:content-['']",
-			"before:rounded-[1px] before:bg-line-seam"
-		],
-		close: ["shrink-0"],
-		closeIcon: ["size-5.5"],
-		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
-		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
-		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
-		actions: [
-			"flex w-full flex-col items-stretch",
-			"**:data-[slot=button]:w-full",
-			"gap-2"
-		],
-		title: ["text-pretty text-foreground", "max-w-none text-left font-sans text-headline font-bold"],
-		description: ["text-pretty", "max-w-none text-left font-sans text-callout text-foreground-muted"]
-	},
-	variants: {
-		nested: {
-			false: {},
-			true: { overlay: ["bg-layer-backdrop-nested"] }
-		},
-		side: {
-			down: {
-				popup: [
-					"bottom-(--drawer-inset) min-h-64 max-h-[82vh]",
-					"rounded-t-dialog [--drawer-inset:0px]",
-					"pb-[env(safe-area-inset-bottom,0px)]"
-				],
-				swipeHandle: ["before:top-3"]
-			},
-			up: {
-				popup: [
-					"top-(--drawer-inset) max-h-[80vh]",
-					"rounded-b-dialog [--drawer-inset:0px]",
-					"pt-[env(safe-area-inset-top,0px)]"
-				],
-				swipeHandle: ["order-last", "before:bottom-3"]
-			},
-			left: {
-				popup: ["left-(--drawer-inset)"],
-				swipeHandle: ["order-last", "before:right-3"]
-			},
-			right: {
-				popup: ["right-(--drawer-inset)"],
-				swipeHandle: ["before:left-3"]
-			}
-		},
-		axis: {
-			x: {
-				popup: ["flex-row", "inset-y-0 w-full max-w-[420px] [--drawer-inset:0px]"],
-				swipeHandle: [
-					"my-auto h-16 w-11",
-					"before:top-1/2 before:-translate-y-1/2",
-					"before:w-1 before:h-9"
-				],
-				header: [
-					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
-					"border-b border-line-seam",
-					panelHeadEdges
-				],
-				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
-				footer: ["border-t border-line-seam px-5 py-3"],
-				title: ["min-w-0 max-w-none flex-1 text-left"],
-				description: ["max-w-none text-left"],
-				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]
-			},
-			y: {
-				popup: [
-					"data-nested-drawer-open:h-(--drawer-frontmost-height)",
-					"mx-auto md:max-w-md",
-					"inset-x-0"
-				],
-				swipeHandle: [
-					"mx-auto w-16",
-					"before:left-1/2 before:-translate-x-1/2",
-					"h-4",
-					"before:top-1.5 before:h-1 before:w-9"
-				]
-			}
-		}
-	},
-	compoundVariants: [{
-		side: "down",
-		snapPoints: true,
-		class: { header: ["pt-2"] }
-	}, {
-		axis: "y",
-		snapPoints: true,
-		class: { popup: ["[--drawer-content-height:100dvh]"] }
-	}]
-});
-//#endregion
-//#region src/components/drawer/drawer.tsx
-const DrawerConfigContext = createContext(null);
-function useDrawerConfig() {
-	const context = useContext(DrawerConfigContext);
-	if (!context) throw new Error("Drawer parts must be used within Drawer.");
-	return context;
-}
-function Drawer$1({ modal = true, snapPoints, swipeDirection = "down", children, ...props }) {
-	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
-	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
-	const contextValue = useMemo(() => ({
-		hasSnapPoints,
-		modal,
-		swipeAxis,
-		swipeDirection
-	}), [
-		hasSnapPoints,
-		modal,
-		swipeAxis,
-		swipeDirection
-	]);
-	return /* @__PURE__ */ jsx(DrawerConfigContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(Drawer.Root, {
-			modal,
-			snapPoints,
-			swipeDirection,
-			...props,
-			children: withOverlayLayer("drawer", modal === true, children)
-		})
-	});
-}
-function DrawerTrigger(props) {
-	return /* @__PURE__ */ jsx(Drawer.Trigger, {
-		"data-slot": "drawer-trigger",
-		...props
-	});
-}
-function DrawerPortal(props) {
-	return /* @__PURE__ */ jsx(Drawer.Portal, {
-		"data-slot": "drawer-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function DrawerOverlay({ className, ...props }) {
-	const { hasSnapPoints } = useDrawerConfig();
-	const nested = useParentOverlayKind() === "dialog";
-	const { overlay } = drawer({
-		snapPoints: hasSnapPoints,
-		nested
-	});
-	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
-		"data-slot": "drawer-overlay",
-		"data-nested": nested ? "" : void 0,
-		forceRender: nested,
-		className: overlay({ className }),
-		...props
-	});
-}
-function DrawerSwipeHandle() {
-	const { swipeAxis, swipeDirection } = useDrawerConfig();
-	const { swipeHandle } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis
-	});
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "drawer-swipe-handle",
-		"aria-hidden": "true",
-		className: swipeHandle()
-	});
-}
-function DrawerContent({ className, children, portalProps, ...props }) {
-	const { hasSnapPoints, modal, swipeAxis, swipeDirection } = useDrawerConfig();
-	const { content, popup, viewport } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis,
-		snapPoints: hasSnapPoints
-	});
-	return /* @__PURE__ */ jsxs(DrawerPortal, {
-		...portalProps,
-		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer.Viewport, {
-			"data-slot": "drawer-viewport",
-			className: cn(viewport(), modal === true && "pointer-events-auto"),
-			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-				"data-slot": "drawer-popup",
-				className: popup({ className }),
-				...props,
-				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
-					"data-slot": "drawer-content",
-					className: content(),
-					children
-				})]
-			})
-		})]
-	});
-}
-function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
-	const { close, closeIcon } = drawer();
-	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
-		"data-slot": "drawer-close",
-		className,
-		render,
-		"aria-label": ariaLabel,
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsx(Drawer.Close, {
-		"data-slot": "drawer-close",
-		render: /* @__PURE__ */ jsx(Button$1, {
-			variant: variant ?? "ghost",
-			size: size ?? "icon-lg",
-			"aria-label": ariaLabel ?? "Close"
-		}),
-		className: close({ className }),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
-	});
-}
-function DrawerHeader({ className, render, ...props }) {
-	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
-	const { header } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis,
-		snapPoints: hasSnapPoints
-	});
-	const defaultProps = { className: header({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-header" }
-	});
-}
-function DrawerFooter({ className, render, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { footer } = drawer({ axis: swipeAxis });
-	const defaultProps = { className: footer({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-footer" }
-	});
-}
-function DrawerBody({ className, render, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { body } = drawer({ axis: swipeAxis });
-	const defaultProps = { className: body({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-body" }
-	});
-}
-function DrawerActions({ className, render, children, ...props }) {
-	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
-	const { actions } = drawer({ axis: swipeAxis });
-	const defaultProps = {
-		className: actions({ className }),
-		children
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-actions" }
-	});
-}
-function DrawerTitle({ className, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { title } = drawer({ axis: swipeAxis });
-	return /* @__PURE__ */ jsx(Drawer.Title, {
-		"data-slot": "drawer-title",
-		className: title({ className }),
-		...props
-	});
-}
-function DrawerDescription({ className, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { description } = drawer({ axis: swipeAxis });
-	return /* @__PURE__ */ jsx(Drawer.Description, {
-		"data-slot": "drawer-description",
-		className: description({ className }),
-		...props
-	});
-}
-//#endregion
-export { buttonVariants as A, DialogNav as C, DialogTitle as D, DialogSurface as E, resolveThemeScopeProps as F, useThemeScopeProps as I, useTheme as L, defaultNativeButton as M, useParentOverlayKind as N, DialogTrigger as O, withOverlayLayer as P, ThemeStateContext as R, DialogHeader as S, DialogPortal as T, DialogBody as _, DrawerContent as a, DialogDescription as b, DrawerHeader as c, DrawerTitle as d, DrawerTrigger as f, Dialog$1 as g, panelHeader as h, DrawerClose as i, Spinner as j, Button$1 as k, DrawerOverlay as l, panelHeadEdges as m, DrawerActions as n, DrawerDescription as o, panelHeadActions as p, DrawerBody as r, DrawerFooter as s, Drawer$1 as t, DrawerPortal as u, DialogClose as v, DialogOverlay as w, DialogFooter as x, DialogContent as y, tv$1 as z };