@weichenlin/swell-ui 0.2.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",
@@ -76,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-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/hooks/use-press-feedback.ts
 const GROW_MS = 450;
 const FADE_MS = 300;
@@ -221,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;
@@ -514,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();
@@ -537,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,
@@ -557,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,
@@ -567,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) {
@@ -586,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: "",
@@ -1802,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",
@@ -2432,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);
 /**
@@ -3450,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 };