@weichenlin/swell-ui 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { Check, ChevronDown, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDashed, CircleX, Copy, Eye, EyeOff, Info, LoaderCircle, Menu, Moon, Search, Sun, TriangleAlert, X } from "lucide-react";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/cn.ts
 const tone = (name) => [
 	name,
@@ -45,6 +45,8 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 		"input-halo-invalid-focus",
 		"control-checked",
 		"control-checked-fg",
+		"switch-handle",
+		"switch-handle-checked",
 		"popover-bg",
 		"popover-border",
 		"popover-highlight",
@@ -57,15 +59,6 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 			"neutral"
 		].flatMap(tone)
 	],
-	radius: [
-		"sharp",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"2xl",
-		"3xl"
-	],
 	shadow: [
 		"input",
 		"input-lift",
@@ -85,67 +78,6 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-//#region src/components/badge/badge.tsx
-const toneClasses$1 = {
-	neutral: {
-		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
-		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
-		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
-	},
-	info: {
-		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
-		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
-		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
-	},
-	success: {
-		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
-		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
-		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
-	},
-	warning: {
-		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
-		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
-		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
-	},
-	danger: {
-		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
-		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
-		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
-	}
-};
-const sizeClasses$3 = {
-	sm: {
-		base: "h-5 px-1.5",
-		withIcon: "ps-1"
-	},
-	md: {
-		base: "h-6 px-2",
-		withIcon: "ps-1.5"
-	}
-};
-function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
-	const [toneClass, iconClass] = toneClasses$1[tone][variant];
-	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
-	return /* @__PURE__ */ jsxs("span", {
-		...props,
-		"data-slot": "badge",
-		className: cn("inline-flex items-center gap-1 rounded-sm border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
-		children: [hasIcon && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			"data-slot": "badge-icon",
-			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
-			children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
-		}), /* @__PURE__ */ jsxs("span", {
-			"data-slot": "badge-label",
-			className: "min-w-0 truncate leading-4",
-			children: [context && /* @__PURE__ */ jsxs("span", {
-				className: "sr-only",
-				children: [context, ": "]
-			}), children]
-		})]
-	});
-}
-//#endregion
 //#region src/hooks/use-press-feedback.ts
 const GROW_MS = 450;
 const FADE_MS = 300;
@@ -230,6 +162,61 @@ function usePressFeedback(ripple = true) {
 	return ref;
 }
 //#endregion
+//#region src/lib/slot.tsx
+function setRef(ref, node) {
+	if (typeof ref === "function") return ref(node);
+	if (ref) ref.current = node;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => setRef(ref, node));
+		return () => {
+			for (const [i, ref] of refs.entries()) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(ref, null);
+			}
+		};
+	};
+}
+function mergeProps(slot, child) {
+	const merged = {
+		...slot,
+		...child
+	};
+	for (const key of Object.keys(slot)) {
+		const own = slot[key];
+		const theirs = child[key];
+		if (/^on[A-Z]/.test(key) && typeof own === "function" && typeof theirs === "function") merged[key] = (...args) => {
+			theirs(...args);
+			own(...args);
+		};
+		else if (key === "className") merged.className = cn(own, theirs);
+		else if (key === "style") merged.style = {
+			...own,
+			...theirs
+		};
+	}
+	return merged;
+}
+/** Applies `wrap` to an element's children, or to what a render-prop child returns. */
+function wrapChildren(children, wrap) {
+	if (typeof children !== "function") return wrap(children);
+	return (...args) => wrap(children(...args));
+}
+/** Renders its only child with these props merged in (Radix Slot style). */
+function Slot({ children, ref, ...props }) {
+	const child = Children.only(children);
+	const childProps = isValidElement(child) ? child.props : {};
+	const childRef = childProps.ref;
+	const composedRef = useMemo(() => composeRefs(ref, childRef), [ref, childRef]);
+	if (!isValidElement(child)) return null;
+	return cloneElement(child, {
+		...mergeProps(props, childProps),
+		ref: composedRef
+	});
+}
+//#endregion
 //#region src/components/tooltip.tsx
 const OPEN_DELAY_MS = 300;
 const GAP_PX = 6;
@@ -374,7 +361,7 @@ function Tooltip({ content, side = "top", describe = true, className, children }
 			}[placed]),
 			children: /* @__PURE__ */ jsx("span", {
 				ref: bubbleRef,
-				className: cn("block w-max max-w-xs rounded-sm border border-border-strong bg-inverse px-2 py-1", "text-xs/snug font-medium text-inverse-fg shadow-whisper", "transition-[opacity,translate] duration-150 ease-out starting:opacity-0", {
+				className: cn("block w-max max-w-xs rounded-md border border-border-strong bg-inverse px-2 py-1", "text-xs/snug font-medium text-inverse-fg shadow-whisper", "transition-[opacity,translate] duration-150 ease-out starting:opacity-0", {
 					top: "starting:translate-y-0.5",
 					bottom: "starting:-translate-y-0.5",
 					left: "starting:translate-x-0.5",
@@ -401,11 +388,11 @@ const buttonVariants = cva([
 ], {
 	variants: {
 		intent: {
-			primary: "bg-primary text-primary-fg rounded-md shadow-[0_0_0_1px_var(--color-primary)] hover:not-aria-disabled:opacity-90",
-			secondary: "bg-surface-muted text-fg-strong rounded-md shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:bg-ring",
-			surface: "bg-surface-raised text-fg rounded-lg hover:not-aria-disabled:bg-surface-muted",
-			dark: "bg-inverse text-inverse-fg rounded-md shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:opacity-90",
-			ghost: "bg-transparent text-fg rounded-md hover:not-aria-disabled:bg-surface-muted"
+			primary: "bg-primary text-primary-fg rounded-lg shadow-[0_0_0_1px_var(--color-primary)] hover:not-aria-disabled:opacity-90",
+			secondary: "bg-surface-muted text-fg-strong rounded-lg shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:bg-ring",
+			surface: "bg-surface-raised text-fg rounded-xl hover:not-aria-disabled:bg-surface-muted",
+			dark: "bg-inverse text-inverse-fg rounded-lg shadow-[0_0_0_1px_var(--color-ring)] hover:not-aria-disabled:opacity-90",
+			ghost: "bg-transparent text-fg rounded-lg hover:not-aria-disabled:bg-surface-muted"
 		},
 		size: {
 			sm: "h-8.5 px-3 text-sm",
@@ -523,22 +510,56 @@ function stateClass(disabled, loading) {
 	if (loading) return "cursor-progress opacity-70";
 	if (disabled) return "cursor-not-allowed opacity-50 forced-colors:opacity-100 forced-colors:text-[GrayText] forced-colors:after:border-[GrayText]";
 }
-function ButtonImpl({ className, intent, size, tone, fullWidth, square, loading = false, loadingText = "Loading", disabled = false, iconLeft, iconRight, ripple, tooltip, type = "button", onClick, children, ...props }) {
+function blockActivation(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+function ButtonImpl({ asChild = false, className, intent, size, tone, fullWidth, square, loading = false, loadingText = "Loading", disabled = false, iconLeft, iconRight, ripple, tooltip, type = "button", onClick, onClickCapture, onAuxClickCapture, children, ...props }) {
 	const s = size ?? "md";
 	const inert = disabled || loading;
+	const classes = cn(buttonVariants({
+		intent,
+		size,
+		tone,
+		fullWidth,
+		square
+	}), iconPadding(s, iconLeft, iconRight), stateClass(disabled, loading), className);
+	const content = (inner) => /* @__PURE__ */ jsx(ButtonContent, {
+		size: s,
+		ripple: ripple ?? true,
+		loading,
+		iconLeft,
+		iconRight,
+		children: inner
+	});
+	if (asChild) {
+		const child = Children.only(children);
+		if (!isValidElement(child)) return null;
+		const link = /* @__PURE__ */ jsx(Slot, {
+			...props,
+			"data-slot": "button",
+			"aria-disabled": disabled || void 0,
+			className: classes,
+			onClick,
+			onClickCapture: disabled ? blockActivation : onClickCapture,
+			onAuxClickCapture: disabled ? blockActivation : onAuxClickCapture,
+			children: cloneElement(child, { children: wrapChildren(child.props.children, content) })
+		});
+		return tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			...tooltip,
+			className: fullWidth ? "flex w-full" : void 0,
+			children: link
+		}) : link;
+	}
 	const button = /* @__PURE__ */ jsx("button", {
 		...props,
 		type,
 		"data-slot": "button",
 		"aria-disabled": inert || void 0,
 		"aria-busy": loading || void 0,
-		className: cn(buttonVariants({
-			intent,
-			size,
-			tone,
-			fullWidth,
-			square
-		}), iconPadding(s, iconLeft, iconRight), stateClass(disabled, loading), className),
+		className: classes,
+		onClickCapture,
+		onAuxClickCapture,
 		onClick: (e) => {
 			if (inert) {
 				e.preventDefault();
@@ -546,14 +567,7 @@ function ButtonImpl({ className, intent, size, tone, fullWidth, square, loading
 			}
 			onClick?.(e);
 		},
-		children: /* @__PURE__ */ jsx(ButtonContent, {
-			size: s,
-			ripple: ripple ?? true,
-			loading,
-			iconLeft,
-			iconRight,
-			children
-		})
+		children: content(children)
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
 		...tooltip,
@@ -566,7 +580,7 @@ function ButtonImpl({ className, intent, size, tone, fullWidth, square, loading
 		children: loading ? loadingText : ""
 	})] });
 }
-function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, className, size, ...props }) {
+function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, className, size, children, ...props }) {
 	const reason = props.disabled ? disabledReason : void 0;
 	const tip = reason ? {
 		content: reason,
@@ -576,13 +590,14 @@ function IconOnlyButton({ icon, tooltip = true, tooltipSide, disabledReason, cla
 		side: tooltipSide,
 		describe: false
 	} : disabledReason !== void 0 ? { content: void 0 } : void 0;
+	const child = Children.toArray(children)[0];
 	return /* @__PURE__ */ jsx(ButtonImpl, {
 		...props,
 		size,
 		tooltip: tip,
 		square: true,
 		className,
-		children: icon
+		children: props.asChild && isValidElement(child) ? cloneElement(child, void 0, icon) : icon
 	});
 }
 function Button(props) {
@@ -595,6 +610,135 @@ function Button(props) {
 	});
 }
 //#endregion
+//#region src/components/alert/alert.tsx
+const tones = {
+	neutral: {
+		Icon: Info,
+		iconClass: "text-neutral"
+	},
+	info: {
+		Icon: Info,
+		iconClass: "text-info"
+	},
+	success: {
+		Icon: CircleCheck,
+		iconClass: "text-success"
+	},
+	warning: {
+		Icon: TriangleAlert,
+		iconClass: "text-warning"
+	},
+	danger: {
+		Icon: CircleAlert,
+		iconClass: "text-danger"
+	}
+};
+/** A persistent message shown next to the content it describes. Use a live region for updates that need announcing. */
+function Alert({ tone = "neutral", title, action, onDismiss, dismissLabel = "Dismiss alert", className, children, ...props }) {
+	const { Icon, iconClass } = tones[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "alert",
+		"data-tone": tone,
+		className: cn("@container/alert flex items-start gap-3 rounded-xl border border-ring-deep px-4 py-3", "text-sm text-fg forced-colors:border-[CanvasText]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("grid min-w-0 flex-1 grid-cols-[1rem_minmax(0,1fr)] items-start gap-x-2.5 gap-y-3", action && "@md/alert:grid-cols-[1rem_minmax(0,1fr)_auto]"),
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					"data-slot": "alert-icon",
+					className: cn("mt-0.5 size-4", iconClass)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 space-y-0.5 wrap-anywhere",
+					children: [title != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-title",
+						className: "font-medium",
+						children: title
+					}), children != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-description",
+						className: title != null ? "text-fg-muted" : void 0,
+						children
+					})]
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					"data-slot": "alert-action",
+					className: "col-start-2 justify-self-start @md/alert:col-start-3 @md/alert:self-center",
+					children: action
+				})
+			]
+		}), onDismiss && /* @__PURE__ */ jsx(Button, {
+			"aria-label": dismissLabel,
+			className: "-my-1.5 -me-1.5 shrink-0 text-fg-muted @md/alert:self-center",
+			icon: /* @__PURE__ */ jsx(X, {}),
+			intent: "ghost",
+			size: "sm",
+			onClick: onDismiss
+		})]
+	});
+}
+//#endregion
+//#region src/components/badge/badge.tsx
+const toneClasses$1 = {
+	neutral: {
+		subtle: ["border-neutral-border bg-neutral-subtle-bg text-neutral-subtle-fg", "text-neutral"],
+		outline: ["border-neutral-border bg-transparent text-neutral-subtle-fg", "text-neutral"],
+		solid: ["border-neutral bg-neutral text-neutral-fg", "text-neutral-fg"]
+	},
+	info: {
+		subtle: ["border-info-border bg-info-subtle-bg text-info-subtle-fg", "text-info"],
+		outline: ["border-info-border bg-transparent text-info-subtle-fg", "text-info"],
+		solid: ["border-info bg-info text-info-fg", "text-info-fg"]
+	},
+	success: {
+		subtle: ["border-success-border bg-success-subtle-bg text-success-subtle-fg", "text-success"],
+		outline: ["border-success-border bg-transparent text-success-subtle-fg", "text-success"],
+		solid: ["border-success bg-success text-success-fg", "text-success-fg"]
+	},
+	warning: {
+		subtle: ["border-warning-border bg-warning-subtle-bg text-warning-subtle-fg", "text-warning"],
+		outline: ["border-warning-border bg-transparent text-warning-subtle-fg", "text-warning"],
+		solid: ["border-warning bg-warning text-warning-fg", "text-warning-fg"]
+	},
+	danger: {
+		subtle: ["border-danger-border bg-danger-subtle-bg text-danger-subtle-fg", "text-danger"],
+		outline: ["border-danger-border bg-transparent text-danger-subtle-fg", "text-danger"],
+		solid: ["border-danger bg-danger text-danger-fg", "text-danger-fg"]
+	}
+};
+const sizeClasses$3 = {
+	sm: {
+		base: "h-5 px-1.5",
+		withIcon: "ps-1"
+	},
+	md: {
+		base: "h-6 px-2",
+		withIcon: "ps-1.5"
+	}
+};
+function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, busy = false, context, className, children, ...props }) {
+	const [toneClass, iconClass] = toneClasses$1[tone][variant];
+	const hasIcon = busy || icon !== void 0 && icon !== null && icon !== false;
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-slot": "badge",
+		className: cn("inline-flex items-center gap-1 rounded-md border text-xs leading-none font-medium whitespace-nowrap", "forced-colors:border-[CanvasText]", sizeClasses$3[size].base, hasIcon && sizeClasses$3[size].withIcon, toneClass, className),
+		children: [hasIcon && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "badge-icon",
+			className: cn("inline-flex shrink-0 items-center [&_svg]:size-3 [&_svg]:shrink-0", iconClass),
+			children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] }) : icon
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "badge-label",
+			className: "min-w-0 truncate leading-4",
+			children: [context && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [context, ": "]
+			}), children]
+		})]
+	});
+}
+//#endregion
 //#region src/components/card/card.tsx
 const CardContext = createContext({
 	titleId: "",
@@ -616,7 +760,7 @@ function Card({ as: Comp = "div", className, ...props }) {
 			"aria-labelledby": (Comp === "section" || Comp === "article") && titled && !props["aria-label"] ? titleId : void 0,
 			...props,
 			"data-slot": "card",
-			className: cn("rounded-lg border border-border-strong bg-surface", className)
+			className: cn("rounded-xl border border-border-strong bg-surface", className)
 		})
 	});
 }
@@ -738,7 +882,7 @@ function Notch({ ring, size, disabled, children }) {
 	const halo = ring === "halo";
 	return /* @__PURE__ */ jsx("fieldset", {
 		"aria-hidden": true,
-		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-md)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
+		className: cn("pointer-events-none absolute m-0 min-w-0 p-0", "transition-[border-color] duration-200 ease-in-out motion-reduce:transition-none", notchPadding[ring][size], halo ? ["-inset-1 rounded-[calc(var(--radius-lg)+3px)] border-[3px] border-(--field-halo)", "forced-colors:invisible forced-colors:group-has-[:is(input,select):is(:focus,:open)]/control:visible forced-colors:border-[Highlight]"] : ["-inset-px rounded-[inherit] border border-(--field-border)", disabled && "forced-colors:border-[GrayText]"]),
 		children: /* @__PURE__ */ jsx("legend", {
 			className: cn("invisible float-none block w-auto max-w-[0.01px] overflow-hidden p-0 text-xs whitespace-nowrap", halo ? "h-0.75" : "h-px", "transition-[max-width] duration-50 ease-out motion-reduce:transition-none", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:max-w-full", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:delay-50", "[[data-slot=input-control]:is([data-start],:has(input:focus),:has(input:not(:placeholder-shown)),:has(input:autofill),:has(input:-webkit-autofill),:has(select:focus),:has(select:open),:has(select):not(:has(option[value=\"\"]:checked)))_&]:duration-100"),
 			children: /* @__PURE__ */ jsx("span", {
@@ -805,7 +949,7 @@ function FieldShell({ label, floating = false, helperText, error, size, id: idPr
 				"data-slot": "input-control",
 				"data-start": hasStart ? "" : void 0,
 				onMouseDown: forwardClick,
-				className: cn("group/control relative isolate flex items-center rounded-md border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
+				className: cn("group/control relative isolate flex items-center rounded-lg border", floatingLabel ? "bg-transparent" : "[--field-bg:var(--color-input-bg)] bg-(--field-bg)", "transition-[border-color,box-shadow,background-color] duration-200 ease-in-out motion-reduce:transition-none", controlHeight[size], invalid ? ["[--field-border:var(--color-danger)] [--field-halo:var(--color-input-halo-invalid)]", "has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo-invalid-focus)]"] : ["[--field-border:var(--color-input-border)] [--field-halo:transparent]", "has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-focus)] has-[:is(input,select):is(:focus,:open)]:[--field-halo:var(--color-input-halo)]"], "[--field-lift:0_0_#0000]", !invalid && !disabled && !readOnly && [
 					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-border:var(--color-input-border-hover)]",
 					!floatingLabel && "hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-bg:var(--color-input-bg-hover)]",
 					"hover:not-has-[:is(input,select):is(:focus,:open)]:[--field-lift:var(--shadow-input-lift)]"
@@ -1006,7 +1150,7 @@ function Checkbox({ label, description, error, indeterminate = false, className,
 					"aria-labelledby": props["aria-labelledby"] ?? row.labelledBy,
 					"aria-describedby": row.describedBy,
 					"aria-invalid": row.invalid ? true : ariaInvalid,
-					className: cn("peer col-start-1 row-start-1 m-0 size-4 cursor-pointer appearance-none rounded-sharp border outline-hidden", "disabled:cursor-not-allowed", "border-(--checkbox-border) bg-(--checkbox-bg) [box-shadow:0_0_0_3px_var(--checkbox-halo)]", "transition-[background-color,border-color,box-shadow] duration-200 ease-in-out", "[--checkbox-bg:var(--color-input-bg)] [--checkbox-halo:transparent]", "checked:[--checkbox-bg:var(--color-control-checked)] indeterminate:[--checkbox-bg:var(--color-control-checked)]", row.invalid ? [
+					className: cn("peer col-start-1 row-start-1 m-0 size-4 cursor-pointer appearance-none rounded-sm border outline-hidden", "disabled:cursor-not-allowed", "border-(--checkbox-border) bg-(--checkbox-bg) [box-shadow:0_0_0_3px_var(--checkbox-halo)]", "transition-[background-color,border-color,box-shadow] duration-200 ease-in-out", "[--checkbox-bg:var(--color-input-bg)] [--checkbox-halo:transparent]", "checked:[--checkbox-bg:var(--color-control-checked)] indeterminate:[--checkbox-bg:var(--color-control-checked)]", row.invalid ? [
 						"[--checkbox-border:var(--color-danger)] [--checkbox-halo:var(--color-input-halo-invalid)]",
 						"focus-visible:[--checkbox-halo:var(--color-input-halo-invalid-focus)]",
 						"not-forced-colors:checked:focus-visible:outline-danger not-forced-colors:indeterminate:focus-visible:outline-danger"
@@ -1331,7 +1475,7 @@ function Dialog({ size = "md", className, children, ...props }) {
 		className: cn("m-auto w-[calc(100%-2rem)] max-h-[calc(100dvh-64px)] overflow-visible border-0 bg-transparent p-0 text-fg", "overscroll-contain outline-none", sizeClasses$2[size], motionClasses$1, sheetClasses, className),
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "dialog-panel",
-			className: cn("flex max-h-[inherit] flex-col rounded-lg border border-popover-border bg-popover-bg shadow-dialog", "forced-colors:border-[CanvasText]", "max-sm:rounded-b-none max-sm:border-b-0 max-sm:pb-[env(safe-area-inset-bottom)]"),
+			className: cn("flex max-h-[inherit] flex-col rounded-xl border border-popover-border bg-popover-bg shadow-dialog", "forced-colors:border-[CanvasText]", "max-sm:rounded-b-none max-sm:border-b-0 max-sm:pb-[env(safe-area-inset-bottom)]"),
 			children
 		})
 	});
@@ -1349,7 +1493,7 @@ function DialogHeader({ title, description, closeButton, className, ...props })
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("h2", {
 				id: context.titleId,
-				className: "m-0 text-xl/tight text-fg",
+				className: "m-0 text-xl/tight font-medium text-fg",
 				children: title
 			}), hasDescription && /* @__PURE__ */ jsx("p", {
 				id: context.descriptionId,
@@ -1455,7 +1599,7 @@ function DrawerHeader({ title, description, className, ...props }) {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("h2", {
 				id: context.titleId,
-				className: "m-0 text-xl/tight wrap-anywhere text-fg",
+				className: "m-0 text-xl/tight font-medium wrap-anywhere text-fg",
 				children: title
 			}), hasDescription && /* @__PURE__ */ jsx("p", {
 				id: context.descriptionId,
@@ -1708,9 +1852,9 @@ const labelRestingWidth = {
 	lg: "max-w-[calc(100%-50px)]"
 };
 const isGroup = (item) => "options" in item;
-const pickerClasses = cn("supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker-icon]:hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-area:block-end_span-inline-end]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-try-fallbacks:flip-block]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:mt-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:min-w-[anchor-size(width)]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:max-h-[max(10rem,calc(100%-12px))]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:overflow-y-auto", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:rounded-lg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border-popover-border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:bg-popover-bg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:p-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:shadow-popover", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:origin-top", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-[opacity,scale,display,overlay]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-discrete", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:duration-80", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:ease-out", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:opacity-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:scale-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:duration-120", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:motion-reduce:[&::picker(select)]:transition-none");
+const pickerClasses = cn("supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[appearance:base-select]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker-icon]:hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-area:block-end_span-inline-end]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:[position-try-fallbacks:flip-block]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:mt-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:min-w-[anchor-size(width)]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:max-h-[max(10rem,calc(100%-12px))]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:overflow-y-auto", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:rounded-xl", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:border-popover-border", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:bg-popover-bg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:p-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:shadow-popover", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:origin-top", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-[opacity,scale,display,overlay]", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:transition-discrete", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:duration-80", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::picker(select)]:ease-out", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:opacity-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:scale-100", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:duration-120", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:opacity-0", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:open:[&::picker(select)]:starting:scale-96", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:motion-reduce:[&::picker(select)]:transition-none");
 function optionClasses(size, mono) {
-	return cn("bg-popover-bg text-fg checked:font-medium disabled:text-fg-subtle", textSize[size], mono && "font-mono", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:flex", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:cursor-default", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:items-center", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:gap-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:rounded-md", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:bg-transparent", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:px-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:py-1.5", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:not-disabled:hover:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:outline-hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:opacity-50", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:order-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:ms-auto");
+	return cn("bg-popover-bg text-fg checked:font-medium disabled:text-fg-subtle", textSize[size], mono && "font-mono", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:flex", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:cursor-default", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:items-center", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:gap-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:rounded-lg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:bg-transparent", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:px-2", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:py-1.5", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:not-disabled:hover:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:bg-popover-highlight", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:focus-visible:outline-hidden", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:text-fg", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:disabled:opacity-50", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:order-1", "supports-[appearance:base-select]:[@media(hover:hover)_and_(pointer:fine)]:[&::checkmark]:ms-auto");
 }
 function openPicker(select) {
 	select.focus();
@@ -1811,61 +1955,6 @@ function Select({ options, placeholder, helperText, error, size = "md", start, m
 	});
 }
 //#endregion
-//#region src/lib/slot.tsx
-function setRef(ref, node) {
-	if (typeof ref === "function") return ref(node);
-	if (ref) ref.current = node;
-}
-function composeRefs(...refs) {
-	return (node) => {
-		const cleanups = refs.map((ref) => setRef(ref, node));
-		return () => {
-			for (const [i, ref] of refs.entries()) {
-				const cleanup = cleanups[i];
-				if (typeof cleanup === "function") cleanup();
-				else setRef(ref, null);
-			}
-		};
-	};
-}
-function mergeProps(slot, child) {
-	const merged = {
-		...slot,
-		...child
-	};
-	for (const key of Object.keys(slot)) {
-		const own = slot[key];
-		const theirs = child[key];
-		if (/^on[A-Z]/.test(key) && typeof own === "function" && typeof theirs === "function") merged[key] = (...args) => {
-			theirs(...args);
-			own(...args);
-		};
-		else if (key === "className") merged.className = cn(own, theirs);
-		else if (key === "style") merged.style = {
-			...own,
-			...theirs
-		};
-	}
-	return merged;
-}
-/** Applies `wrap` to an element's children, or to what a render-prop child returns. */
-function wrapChildren(children, wrap) {
-	if (typeof children !== "function") return wrap(children);
-	return (...args) => wrap(children(...args));
-}
-/** Renders its only child with these props merged in (Radix Slot style). */
-function Slot({ children, ref, ...props }) {
-	const child = Children.only(children);
-	const childProps = isValidElement(child) ? child.props : {};
-	const childRef = childProps.ref;
-	const composedRef = useMemo(() => composeRefs(ref, childRef), [ref, childRef]);
-	if (!isValidElement(child)) return null;
-	return cloneElement(child, {
-		...mergeProps(props, childProps),
-		ref: composedRef
-	});
-}
-//#endregion
 //#region src/components/tabs/shared.tsx
 const listBase = [
 	"relative isolate max-w-full overflow-x-auto overscroll-x-contain scroll-px-6",
@@ -1882,7 +1971,7 @@ const listVariant = {
 		"before:bottom-0 before:h-0.5 before:bg-fg before:[translate:var(--tabs-indicator-x)_0]",
 		"before:transition-[translate,width]",
 		"forced-colors:before:bg-[Highlight] forced-colors:before:[forced-color-adjust:none]",
-		"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-md",
+		"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-lg",
 		"after:bg-fg/7 after:opacity-0 data-hover:after:opacity-100",
 		"after:h-(--tabs-hover-h) after:w-(--tabs-hover-w)",
 		"after:[translate:var(--tabs-hover-x)_var(--tabs-hover-y)]",
@@ -1891,8 +1980,8 @@ const listVariant = {
 		"data-hover-enter:after:transition-opacity"
 	],
 	segmented: [
-		"inline-flex w-fit rounded-sm p-1 shadow-[inset_0_0_0_1px_var(--color-ring)]",
-		"before:top-0 before:h-(--tabs-indicator-h) before:rounded-sharp before:bg-fg/8",
+		"inline-flex w-fit rounded-md p-1 shadow-[inset_0_0_0_1px_var(--color-ring)]",
+		"before:top-0 before:h-(--tabs-indicator-h) before:rounded-sm before:bg-fg/8",
 		"before:[translate:var(--tabs-indicator-x)_var(--tabs-indicator-y)]",
 		"before:transition-[translate,width,height]",
 		"forced-colors:before:border-2 forced-colors:before:border-[Highlight]"
@@ -1930,8 +2019,8 @@ const itemBase = [
 	"forced-colors:aria-disabled:text-[GrayText] forced-colors:aria-disabled:opacity-100"
 ];
 const itemVariant = {
-	line: ["rounded-md data-selected:font-medium aria-[current=page]:font-medium"],
-	segmented: ["h-full rounded-sharp font-medium"]
+	line: ["rounded-lg data-selected:font-medium aria-[current=page]:font-medium"],
+	segmented: ["h-full rounded-sm font-medium"]
 };
 const itemSize = {
 	line: {
@@ -2254,7 +2343,7 @@ function useHoverPill() {
 }
 const bodyClasses = [
 	"relative isolate flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-3 py-2",
-	"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-sm",
+	"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1 after:rounded-md",
 	"after:bg-fg/5 after:opacity-0 data-hover:after:opacity-100",
 	"after:h-(--sidebar-hover-h) after:w-(--sidebar-hover-w)",
 	"after:[translate:var(--sidebar-hover-x)_var(--sidebar-hover-y)]",
@@ -2309,7 +2398,7 @@ function SidebarGroup({ label, className, children, ...props }) {
 	});
 }
 const itemClasses = [
-	"flex h-9 w-full items-center gap-2 rounded-sm ps-2.5 pe-2",
+	"flex h-9 w-full items-center gap-2 rounded-md ps-2.5 pe-2",
 	"text-sm leading-5 font-medium text-fg-muted no-underline select-none",
 	"touch-manipulation [-webkit-tap-highlight-color:transparent]",
 	"transition-[color,background-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]",
@@ -2441,13 +2530,240 @@ function Switch({ label, description, error, size = "md", loading = false, label
 				], "checked:focus-visible:[--switch-ring:transparent] checked:focus-visible:[--switch-halo:transparent]", "checked:focus-visible:outline-solid checked:focus-visible:outline-2 checked:focus-visible:outline-offset-2", row.invalid && "not-forced-colors:checked:focus-visible:outline-danger", "forced-colors:forced-color-adjust-none forced-colors:[box-shadow:none]", "forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:disabled:checked:bg-[GrayText]", "forced-colors:focus-visible:outline-[CanvasText]", inputClassName)
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("pointer-events-none absolute inset-s-0.5 top-0.5 grid place-items-center rounded-full", "h-(--switch-thumb) w-(--switch-thumb-w) bg-control-checked-fg text-control-checked shadow-switch-thumb", "[--switch-dir:1] rtl:[--switch-dir:-1] [translate:calc(var(--switch-x)*var(--switch-dir))_0]", "[--switch-x:0px] [--switch-thumb-w:var(--switch-thumb)] peer-checked:[--switch-x:var(--switch-travel)]", "transition-[translate,width] duration-150 ease-in-out", pressable && ["peer-active:[--switch-thumb-w:calc(var(--switch-thumb)+var(--switch-stretch))]", "peer-checked:peer-active:[--switch-x:calc(var(--switch-travel)-var(--switch-stretch))]"], "peer-disabled:shadow-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none", "forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]", "forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-checked:text-[Highlight]", "forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-disabled:peer-checked:bg-[Canvas]", s.icon),
+				className: cn("pointer-events-none absolute inset-s-0.5 top-0.5 grid place-items-center rounded-full", "h-(--switch-thumb) w-(--switch-thumb-w) bg-switch-handle peer-checked:bg-switch-handle-checked text-control-checked shadow-switch-thumb", "[--switch-dir:1] rtl:[--switch-dir:-1] [translate:calc(var(--switch-x)*var(--switch-dir))_0]", "[--switch-x:0px] [--switch-thumb-w:var(--switch-thumb)] peer-checked:[--switch-x:var(--switch-travel)]", "transition-[translate,width] duration-150 ease-in-out", pressable && ["peer-active:[--switch-thumb-w:calc(var(--switch-thumb)+var(--switch-stretch))]", "peer-checked:peer-active:[--switch-x:calc(var(--switch-travel)-var(--switch-stretch))]"], "peer-disabled:shadow-none", "forced-colors:forced-color-adjust-none forced-colors:shadow-none", "forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]", "forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-checked:text-[Highlight]", "forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-disabled:peer-checked:bg-[Canvas]", s.icon),
 				children: loading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin motion-reduce:hidden" }), /* @__PURE__ */ jsx(CircleDashed, { className: "hidden motion-reduce:block" })] })
 			})]
 		})
 	});
 }
 //#endregion
+//#region src/components/table/table.tsx
+const labels = {
+	search: "Search rows",
+	clearSelection: "Clear selection",
+	selectPage: "Select all rows on this page",
+	selectRow: (id) => `Select row ${id}`,
+	selectionCount: (count) => `${count} selected`,
+	scrollRegion: "Table",
+	pagination: "Pagination",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	page: (page, count) => `${page} / ${count}`,
+	range: (first, last, total) => total === 0 ? "0 rows" : `${first}–${last} of ${total}`,
+	emptyState: "No rows yet",
+	noResults: "No matching rows"
+};
+const alignClasses = {
+	start: "text-start",
+	center: "text-center",
+	end: "text-end"
+};
+const sortIcons = {
+	asc: ArrowUp,
+	desc: ArrowDown
+};
+function Table({ data, columns, getRowId, title, emptyState, noResults, filtered = false, search, sorting, pagination, selection, className, tableClassName, labels: labelOverrides, ...props }) {
+	const titleId = useId();
+	const scrollRef = useRef(null);
+	const searchRef = useRef(null);
+	const emptyRef = useRef(null);
+	const text = {
+		...labels,
+		...labelOverrides
+	};
+	const tableName = props["aria-labelledby"] ?? (title != null && !props["aria-label"] ? titleId : void 0);
+	const showEmpty = data.length === 0 && !filtered && !search?.value.trim() && (!pagination || pagination.rowCount === 0);
+	const showSearch = !showEmpty && search != null;
+	const hasControls = showSearch || !!selection?.ids.size;
+	const hasToolbar = title != null || hasControls;
+	const rows = data.map((row) => ({
+		row,
+		id: getRowId(row),
+		canSelect: selection?.canSelectRow?.(row) ?? true
+	}));
+	const selectableIds = selection ? rows.filter((row) => row.canSelect).map((row) => row.id) : [];
+	const selectedOnPage = selectableIds.filter((id) => selection?.ids.has(id)).length;
+	const allOnPageSelected = selectableIds.length > 0 && selectedOnPage === selectableIds.length;
+	const updateSelection = (ids, checked) => {
+		if (!selection) return;
+		const next = new Set(selection.ids);
+		for (const id of ids) if (checked) next.add(id);
+		else next.delete(id);
+		selection.onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-root",
+		className: cn("w-full min-w-0 bg-surface text-fg", className),
+		children: [hasToolbar && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "table-toolbar",
+			className: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3",
+			children: [title != null && /* @__PURE__ */ jsx("span", {
+				id: titleId,
+				className: "text-sm font-semibold",
+				children: title
+			}), hasControls && /* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-2",
+				children: [
+					selection && /* @__PURE__ */ jsx("output", {
+						className: "text-xs text-fg-muted",
+						children: selection.ids.size > 0 && text.selectionCount(selection.ids.size)
+					}),
+					!!selection?.ids.size && /* @__PURE__ */ jsx(Button, {
+						intent: "ghost",
+						size: "sm",
+						ripple: false,
+						onClick: () => {
+							selection.onChange(/* @__PURE__ */ new Set());
+							(searchRef.current ?? scrollRef.current ?? emptyRef.current)?.focus();
+						},
+						children: text.clearSelection
+					}),
+					showSearch && /* @__PURE__ */ jsx(SearchInput, {
+						ref: searchRef,
+						"aria-label": text.search,
+						placeholder: `${text.search}…`,
+						size: "sm",
+						className: "w-48 max-w-full",
+						value: search.value,
+						onChange: (event) => search.onChange(event.currentTarget.value)
+					})
+				]
+			})]
+		}), showEmpty ? /* @__PURE__ */ jsx("div", {
+			ref: emptyRef,
+			"data-slot": "table-empty",
+			tabIndex: -1,
+			className: "grid min-h-48 place-items-center px-4 py-8 text-center text-sm text-fg-muted outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+			children: emptyState === void 0 ? text.emptyState : emptyState
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("section", {
+			ref: scrollRef,
+			"data-slot": "table-scroll",
+			"aria-labelledby": tableName,
+			"aria-label": tableName ? void 0 : props["aria-label"] ?? text.scrollRegion,
+			tabIndex: 0,
+			className: "relative w-full overflow-x-auto outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+			children: /* @__PURE__ */ jsxs("table", {
+				...props,
+				"aria-labelledby": tableName,
+				"data-slot": "table",
+				className: cn("w-full border-separate border-spacing-0 text-sm", tableClassName),
+				children: [/* @__PURE__ */ jsx("thead", {
+					"data-slot": "table-header",
+					children: /* @__PURE__ */ jsxs("tr", { children: [selection && /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "w-12 border-b border-border px-3",
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							"aria-label": text.selectPage,
+							checked: allOnPageSelected,
+							indeterminate: selectedOnPage > 0 && !allOnPageSelected,
+							disabled: selectableIds.length === 0,
+							onChange: (event) => updateSelection(selectableIds, event.currentTarget.checked),
+							className: "mx-auto justify-center"
+						})
+					}), columns.map((column) => {
+						const direction = sorting?.value?.id === column.id ? sorting.value.direction : void 0;
+						const SortIcon = direction ? sortIcons[direction] : ArrowUpDown;
+						const align = column.align ?? (column.numeric ? "end" : "start");
+						return /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							"aria-sort": direction ? direction === "asc" ? "ascending" : "descending" : void 0,
+							className: cn("h-10 border-b border-border px-4 text-xs font-medium whitespace-nowrap text-fg-muted", alignClasses[align], column.headerClassName),
+							children: sorting && column.sortable ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: cn("inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-sm hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11", direction && "text-fg"),
+								onClick: () => sorting.onChange(direction === "desc" ? null : {
+									id: column.id,
+									direction: direction === "asc" ? "desc" : "asc"
+								}),
+								children: [column.header, /* @__PURE__ */ jsx(SortIcon, {
+									"aria-hidden": true,
+									className: "size-3.5 shrink-0"
+								})]
+							}) : column.header
+						}, column.id);
+					})] })
+				}), /* @__PURE__ */ jsxs("tbody", {
+					"data-slot": "table-body",
+					className: "[&>tr:not(:last-child)>*]:border-b [&>tr>*]:border-border",
+					children: [rows.map(({ row, id, canSelect }) => {
+						const selected = selection?.ids.has(id) ?? false;
+						return /* @__PURE__ */ jsxs("tr", {
+							"data-slot": "table-row",
+							"data-selected": selected || void 0,
+							className: "hover:bg-surface-muted data-selected:bg-surface-muted",
+							children: [selection && /* @__PURE__ */ jsx("td", {
+								className: "w-12 px-3",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									"aria-label": text.selectRow(id),
+									checked: selected,
+									disabled: !canSelect,
+									onChange: (event) => updateSelection([id], event.currentTarget.checked),
+									className: "mx-auto justify-center"
+								})
+							}), columns.map((column) => {
+								const Cell = column.rowHeader ? "th" : "td";
+								const align = column.align ?? (column.numeric ? "end" : "start");
+								return /* @__PURE__ */ jsx(Cell, {
+									scope: column.rowHeader ? "row" : void 0,
+									className: cn("h-13 px-4 py-2 align-middle", alignClasses[align], column.numeric && "tabular-nums", column.rowHeader && "font-medium", column.className),
+									children: column.cell(row)
+								}, column.id);
+							})]
+						}, id);
+					}), rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(1, columns.length + Number(Boolean(selection))),
+						children: /* @__PURE__ */ jsx("div", {
+							"data-slot": "table-no-results",
+							className: "sticky inset-s-0 w-max max-w-[min(100%,18rem)] px-4 py-12 text-sm text-fg-muted",
+							children: noResults === void 0 ? /* @__PURE__ */ jsx("output", { children: text.noResults }) : noResults
+						})
+					}) })]
+				})]
+			})
+		}), pagination && /* @__PURE__ */ jsx(TablePagination, {
+			...pagination,
+			visibleCount: rows.length,
+			text
+		})] })]
+	});
+}
+function TablePagination({ pageIndex, pageSize, rowCount, visibleCount, onPageChange, text }) {
+	const count = Math.ceil(rowCount / pageSize);
+	const first = visibleCount ? pageIndex * pageSize + 1 : 0;
+	const last = first ? first + visibleCount - 1 : 0;
+	const canGoBack = pageIndex > 0;
+	const canGoForward = pageIndex + 1 < count;
+	return /* @__PURE__ */ jsxs("nav", {
+		"data-slot": "table-pagination",
+		"aria-label": text.pagination,
+		className: "flex min-h-12 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-t border-border px-4 py-1 text-xs text-fg-muted tabular-nums",
+		children: [/* @__PURE__ */ jsx("output", { children: text.range(first, last, rowCount) }), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(ChevronLeft, { className: "rtl:rotate-180" }),
+					"aria-label": text.previousPage,
+					intent: "ghost",
+					size: "sm",
+					ripple: false,
+					disabled: !canGoBack,
+					onClick: () => onPageChange(pageIndex - 1)
+				}),
+				/* @__PURE__ */ jsx("span", { children: count === 0 ? "—" : text.page(pageIndex + 1, count) }),
+				/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180" }),
+					"aria-label": text.nextPage,
+					intent: "ghost",
+					size: "sm",
+					ripple: false,
+					disabled: !canGoForward,
+					onClick: () => onPageChange(pageIndex + 1)
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/components/tabs/tab-nav.tsx
 const TabNavContext = createContext(null);
 /**
@@ -3402,7 +3718,7 @@ function ToastCard({ record, layout, total, expanded, paused, frontHeight, ownHe
 		onPointerMove: handlePointerMove,
 		onPointerUp: (event) => endDrag(event, false),
 		onPointerCancel: (event) => endDrag(event, true),
-		className: cn("group/toast absolute inset-x-0 rounded-lg outline-none select-none", edge === "bottom" ? "bottom-0 origin-top" : "top-0 origin-bottom", "transform-[translateY(var(--toast-y))_scale(var(--toast-scale))]", "[translate:var(--toast-swipe-x,0px)_var(--toast-swipe-y,0px)]", "transition-[transform,translate,scale,opacity] duration-350 ease-[cubic-bezier(0.25,0.75,0.6,0.98)]", enterFrom[edge], "starting:opacity-0", "after:absolute after:inset-x-0 after:h-3.75", edge === "bottom" ? "after:bottom-full" : "after:top-full", "data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0", "data-removed:pointer-events-none data-removed:scale-99 data-removed:opacity-0 data-removed:duration-150", "data-removed:data-swipe-out:duration-200 data-removed:data-swipe-out:ease-out", "data-[swipe-out=right]:[translate:calc(100%+24px)_0]", "data-[swipe-out=left]:[translate:calc(-100%-24px)_0]", "data-[swipe-out=bottom]:[translate:0_calc(100%+24px)]", "data-[swipe-out=top]:[translate:0_calc(-100%-24px)]", "data-swiping:transition-none", "group-data-moving/viewport:data-entered:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", touchAction),
+		className: cn("group/toast absolute inset-x-0 rounded-xl outline-none select-none", edge === "bottom" ? "bottom-0 origin-top" : "top-0 origin-bottom", "transform-[translateY(var(--toast-y))_scale(var(--toast-scale))]", "[translate:var(--toast-swipe-x,0px)_var(--toast-swipe-y,0px)]", "transition-[transform,translate,scale,opacity] duration-350 ease-[cubic-bezier(0.25,0.75,0.6,0.98)]", enterFrom[edge], "starting:opacity-0", "after:absolute after:inset-x-0 after:h-3.75", edge === "bottom" ? "after:bottom-full" : "after:top-full", "data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0", "data-removed:pointer-events-none data-removed:scale-99 data-removed:opacity-0 data-removed:duration-150", "data-removed:data-swipe-out:duration-200 data-removed:data-swipe-out:ease-out", "data-[swipe-out=right]:[translate:calc(100%+24px)_0]", "data-[swipe-out=left]:[translate:calc(-100%-24px)_0]", "data-[swipe-out=bottom]:[translate:0_calc(100%+24px)]", "data-[swipe-out=top]:[translate:0_calc(-100%-24px)]", "data-swiping:transition-none", "group-data-moving/viewport:data-entered:transition-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", touchAction),
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "toast-card",
 			style: { height },
@@ -3459,4 +3775,4 @@ function ToastCard({ record, layout, total, expanded, paused, frontHeight, ownHe
 	});
 }
 //#endregion
-export { Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, Input, Meter, PasswordInput, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Tabs, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };
+export { Alert, Badge, Button, Card, CardContent, CardHeader, Checkbox, CheckboxGroup, CopyInput, Dialog, DialogBody, DialogFooter, DialogHeader, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, Input, Meter, PasswordInput, SearchInput, Select, Sidebar, SidebarBadge, SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarIcon, SidebarItem, SidebarProvider, SidebarTrigger, Switch, Tab, TabList, TabNav, TabNavLink, TabPanel, Table, Tabs, ThemeSwitcher, Toaster, Tooltip, cn, toast, useTheme };