@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/checkbox.js

@@ -0,0 +1,324 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Checkbox (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): an 18px square whose fill springs in
+* while the check draws itself, and whose check morphs into the dash of the indeterminate state instead of swapping.
+* Only the square answers a press, so the hit area and the label never move. With a `label` or `description` it renders
+* Arc's labelled field; without them it renders the bare control, for rows, tables and forms that place their own
+* label.
+*/
+import { useId, useState } from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { motion } from "motion/react";
+import { CHECKBOX_DESCRIPTION_ID_SUFFIX, CHECKBOX_FILL_HIDDEN_SCALE, CHECKBOX_MARK_PATH, CHECKBOX_MARK_STROKE_WIDTH, CHECKBOX_MARK_VIEW_BOX } from "../constants/checkbox.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's control recipe. The bare box keeps its 18px layout box and widens its hit area to 44px with a pseudo-element,
+* so existing rows keep their spacing; the labelled field gives the box Arc's full control height instead. The square
+* dips on press, hover answers only on hover-capable fine pointers, and keyboard focus uses the theme's outline.
+*/
+const checkboxClassName = "peer group/checkbox relative grid shrink-0 cursor-pointer place-items-center rounded-(--radius-control) border-0 bg-transparent p-0 text-(--control-glyph) [-webkit-tap-highlight-color:transparent] group-has-disabled/field:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 not-data-[labelled]:size-[18px] not-data-[labelled]:rounded-[5px] not-data-[labelled]:after:absolute not-data-[labelled]:after:-inset-[13px] data-[labelled]:size-(--control-height-md) hover-fine:data-[state=unchecked]:not-disabled:[&_[data-slot=checkbox-visual]]:border-text-muted active:not-disabled:[&_[data-slot=checkbox-visual]]:scale-95 active:not-disabled:[&_[data-slot=checkbox-visual]]:[transition:border-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-instant)_var(--ease-standard)] data-[state=checked]:[&_[data-slot=checkbox-visual]]:border-(--control-on) data-[state=indeterminate]:[&_[data-slot=checkbox-visual]]:border-(--control-on) aria-invalid:data-[state=unchecked]:[&_[data-slot=checkbox-visual]]:border-danger motion-reduce:[&_[data-slot=checkbox-visual]]:scale-100 motion-reduce:[&_[data-slot=checkbox-visual]]:transition-none";
+/** The square: a border on the surface that the fill covers when checked. */
+const visualClassName = "relative block size-[18px] rounded-[5px] border border-border-strong bg-surface [transition:border-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)]";
+/**
+* A choice that can be on, off or indeterminate, controlled or uncontrolled like Radix's checkbox.
+* @param checkboxProps - Every Radix checkbox prop, including `ref`, plus optional Arc `label` and `description`.
+* @returns The labelled field when `label` or `description` is passed, otherwise the bare control.
+*/
+function Checkbox(t0) {
+	const $ = _c(65);
+	let ariaDescribedBy;
+	let checked;
+	let className;
+	let defaultChecked;
+	let description;
+	let id;
+	let label;
+	let onCheckedChange;
+	let props;
+	if ($[0] !== t0) {
+		({className, label, description, id, checked, defaultChecked, onCheckedChange, "aria-describedby": ariaDescribedBy, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaDescribedBy;
+		$[2] = checked;
+		$[3] = className;
+		$[4] = defaultChecked;
+		$[5] = description;
+		$[6] = id;
+		$[7] = label;
+		$[8] = onCheckedChange;
+		$[9] = props;
+	} else {
+		ariaDescribedBy = $[1];
+		checked = $[2];
+		className = $[3];
+		defaultChecked = $[4];
+		description = $[5];
+		id = $[6];
+		label = $[7];
+		onCheckedChange = $[8];
+		props = $[9];
+	}
+	const generatedId = useId();
+	const controlId = id ?? generatedId;
+	const descriptionId = `${controlId}-${CHECKBOX_DESCRIPTION_ID_SUFFIX}`;
+	const reduceMotion = usePrefersReducedMotion();
+	const [uncontrolledState, setUncontrolledState] = useState(defaultChecked ?? false);
+	const state = checked ?? uncontrolledState;
+	const isOn = state !== false;
+	const isField = Boolean(label || description);
+	const t1 = isOn ? ARC_DURATION.instant : ARC_DURATION.fast;
+	let t2;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [...ARC_EASE.standard];
+		$[10] = t2;
+	} else {
+		t2 = $[10];
+	}
+	let t3;
+	if ($[11] !== t1) {
+		t3 = {
+			duration: t1,
+			ease: t2
+		};
+		$[11] = t1;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	const fade = t3;
+	let t4;
+	if ($[13] !== ariaDescribedBy || $[14] !== description || $[15] !== descriptionId) {
+		t4 = [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined;
+		$[13] = ariaDescribedBy;
+		$[14] = description;
+		$[15] = descriptionId;
+		$[16] = t4;
+	} else {
+		t4 = $[16];
+	}
+	const describedBy = t4;
+	const t5 = isField ? "" : undefined;
+	let t6;
+	if ($[17] !== className) {
+		t6 = cn(checkboxClassName, className);
+		$[17] = className;
+		$[18] = t6;
+	} else {
+		t6 = $[18];
+	}
+	const t7 = isField ? controlId : id;
+	let t8;
+	if ($[19] !== checked || $[20] !== onCheckedChange) {
+		t8 = (nextState) => {
+			if (checked === undefined) {
+				setUncontrolledState(nextState);
+			}
+			onCheckedChange?.(nextState);
+		};
+		$[19] = checked;
+		$[20] = onCheckedChange;
+		$[21] = t8;
+	} else {
+		t8 = $[21];
+	}
+	const t9 = isOn ? 1 : 0;
+	const t10 = isOn ? 1 : CHECKBOX_FILL_HIDDEN_SCALE;
+	let t11;
+	if ($[22] !== t10 || $[23] !== t9) {
+		t11 = {
+			opacity: t9,
+			scale: t10
+		};
+		$[22] = t10;
+		$[23] = t9;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	let t12;
+	if ($[25] !== fade || $[26] !== reduceMotion) {
+		t12 = reduceMotion ? { duration: 0 } : {
+			scale: ARC_SPRING_SNAPPY,
+			opacity: fade
+		};
+		$[25] = fade;
+		$[26] = reduceMotion;
+		$[27] = t12;
+	} else {
+		t12 = $[27];
+	}
+	let t13;
+	if ($[28] !== t11 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute -inset-px rounded-[inherit] bg-(--control-on)",
+			initial: false,
+			animate: t11,
+			transition: t12
+		});
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+	} else {
+		t13 = $[30];
+	}
+	const t14 = state === "indeterminate" ? CHECKBOX_MARK_PATH.dash : CHECKBOX_MARK_PATH.check;
+	const t15 = isOn ? 1 : 0;
+	const t16 = isOn ? 1 : 0;
+	let t17;
+	if ($[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = {
+			d: t14,
+			pathLength: t15,
+			opacity: t16
+		};
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else {
+		t17 = $[34];
+	}
+	let t18;
+	if ($[35] !== fade || $[36] !== reduceMotion) {
+		t18 = reduceMotion ? { duration: 0 } : {
+			d: ARC_SPRING_MORPH,
+			pathLength: ARC_SPRING_SNAPPY,
+			opacity: fade
+		};
+		$[35] = fade;
+		$[36] = reduceMotion;
+		$[37] = t18;
+	} else {
+		t18 = $[37];
+	}
+	let t19;
+	if ($[38] !== t17 || $[39] !== t18) {
+		t19 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Indicator, {
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx("svg", {
+				"data-slot": "checkbox-indicator",
+				className: "absolute -inset-px size-[18px] overflow-visible",
+				viewBox: CHECKBOX_MARK_VIEW_BOX,
+				fill: "none",
+				focusable: "false",
+				children: /* @__PURE__ */ _jsx(motion.path, {
+					initial: false,
+					animate: t17,
+					transition: t18,
+					stroke: "currentColor",
+					strokeWidth: CHECKBOX_MARK_STROKE_WIDTH,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		});
+		$[38] = t17;
+		$[39] = t18;
+		$[40] = t19;
+	} else {
+		t19 = $[40];
+	}
+	let t20;
+	if ($[41] !== t13 || $[42] !== t19) {
+		t20 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "checkbox-visual",
+			className: visualClassName,
+			"aria-hidden": "true",
+			children: [t13, t19]
+		});
+		$[41] = t13;
+		$[42] = t19;
+		$[43] = t20;
+	} else {
+		t20 = $[43];
+	}
+	let t21;
+	if ($[44] !== describedBy || $[45] !== props || $[46] !== state || $[47] !== t20 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8) {
+		t21 = /* @__PURE__ */ _jsx(CheckboxPrimitive.Root, {
+			"data-slot": "checkbox",
+			"data-labelled": t5,
+			className: t6,
+			...props,
+			id: t7,
+			checked: state,
+			"aria-describedby": describedBy,
+			onCheckedChange: t8,
+			children: t20
+		});
+		$[44] = describedBy;
+		$[45] = props;
+		$[46] = state;
+		$[47] = t20;
+		$[48] = t5;
+		$[49] = t6;
+		$[50] = t7;
+		$[51] = t8;
+		$[52] = t21;
+	} else {
+		t21 = $[52];
+	}
+	const control = t21;
+	if (!isField) {
+		return control;
+	}
+	let t22;
+	if ($[53] !== controlId || $[54] !== label) {
+		t22 = label ? /* @__PURE__ */ _jsx("label", {
+			htmlFor: controlId,
+			"data-slot": "checkbox-label",
+			className: "cursor-pointer text-sm leading-(--leading-body) font-medium text-foreground",
+			children: label
+		}) : null;
+		$[53] = controlId;
+		$[54] = label;
+		$[55] = t22;
+	} else {
+		t22 = $[55];
+	}
+	let t23;
+	if ($[56] !== description || $[57] !== descriptionId) {
+		t23 = description ? /* @__PURE__ */ _jsx("span", {
+			id: descriptionId,
+			"data-slot": "checkbox-description",
+			className: "text-xs leading-(--leading-body) text-text-muted",
+			children: description
+		}) : null;
+		$[56] = description;
+		$[57] = descriptionId;
+		$[58] = t23;
+	} else {
+		t23 = $[58];
+	}
+	let t24;
+	if ($[59] !== t22 || $[60] !== t23) {
+		t24 = /* @__PURE__ */ _jsxs("div", {
+			className: "ml-px grid min-w-0 gap-0.5 pt-[calc((var(--control-height-md)-var(--text-sm)*var(--leading-body))/2)]",
+			children: [t22, t23]
+		});
+		$[59] = t22;
+		$[60] = t23;
+		$[61] = t24;
+	} else {
+		t24 = $[61];
+	}
+	let t25;
+	if ($[62] !== control || $[63] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "checkbox-field",
+			className: "inline-flex min-w-0 items-start",
+			children: [control, t24]
+		});
+		$[62] = control;
+		$[63] = t24;
+		$[64] = t25;
+	} else {
+		t25 = $[64];
+	}
+	return t25;
+}
+export { Checkbox };

package/dist/components/control-button.d.ts

@@ -0,0 +1,16 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Class recipe. Press scale is driven by Motion alone, so `transform` never gets a CSS transition,
+ * and anchors of floating layers never scale because Radix measures them on pointerdown.
+ */
+declare const controlButtonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ControlButton({ className, variant, size, asChild, loading, children, ref, ...props }: ButtonPrimitive.Props & VariantProps<typeof controlButtonVariants> & {
+    asChild?: boolean;
+    /** Shows a spinner, sets `aria-busy` and swallows clicks while keeping keyboard focus. */
+    loading?: boolean;
+}): import("react").JSX.Element;
+export { ControlButton, controlButtonVariants };

package/dist/components/control-button.js

@@ -0,0 +1,215 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal compact control for composite components (dialog close buttons, carousel and pagination arrows, calendar
+* cells, table and editor actions) that need icon sizes, a link variant or `asChild`, which the public Arc `Button`
+* leaves out. Keeps Arc's press feedback and label motion (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md).
+* Not exported from the package: consumers use `Button`.
+*/
+import { Children, cloneElement, isValidElement } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { useArcPress } from "../motion/arc-press.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { ButtonLabel } from "./button-label.js";
+import { LEAVING_ATTRIBUTES, LOADING_INERT_HANDLERS } from "./button-interaction.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Class recipe. Press scale is driven by Motion alone, so `transform` never gets a CSS transition,
+* and anchors of floating layers never scale because Radix measures them on pointerdown.
+*/
+const controlButtonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap outline-none select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-150 ease-out focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-progress aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 motion-reduce:transition-none dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "border-foreground bg-foreground text-background hover:not-disabled:opacity-90 hover:not-disabled:shadow-xs active:not-disabled:opacity-85",
+			outline: "border-border bg-background text-foreground hover:not-disabled:bg-muted hover:not-disabled:shadow-xs active:not-disabled:bg-muted aria-expanded:bg-muted disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+			secondary: "bg-muted text-foreground hover:not-disabled:bg-muted/70 active:not-disabled:bg-muted/70 aria-expanded:bg-muted/70",
+			ghost: "text-muted-foreground hover:not-disabled:bg-muted hover:not-disabled:text-foreground active:not-disabled:bg-muted active:not-disabled:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground disabled:text-muted-foreground/60 disabled:opacity-100",
+			destructive: "border-border bg-background text-destructive hover:not-disabled:border-destructive hover:not-disabled:bg-muted active:not-disabled:border-destructive active:not-disabled:bg-muted focus-visible:border-destructive/40 focus-visible:ring-destructive/20 disabled:bg-muted disabled:text-destructive/55 disabled:opacity-100 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Wraps the content of an `asChild` element in the Arc label, so links morph and spin like buttons.
+* While loading, the child's own activation handlers are dropped too, because Slot runs them before ours.
+* Children given as render functions keep their content untouched.
+*/
+function withArcLabel(children, loading, renderLabel) {
+	const child = Children.only(children);
+	if (!isValidElement(child)) return child;
+	const content = child.props.children;
+	const overrides = loading ? LOADING_INERT_HANDLERS : undefined;
+	const label = typeof content === "function" ? content : renderLabel(content);
+	return cloneElement(child, overrides, label);
+}
+function ControlButton(t0) {
+	const $ = _c(40);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, variant: t1, size: t2, asChild: t3, loading: t4, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	const variant = t1 === undefined ? "default" : t1;
+	const size = t2 === undefined ? "default" : t2;
+	const asChild = t3 === undefined ? false : t3;
+	const loading = t4 === undefined ? false : t4;
+	const reduceMotion = usePrefersReducedMotion();
+	const isPresent = useIsPresent();
+	const [element, attach] = useAttachedElement(ref);
+	useArcPress(element, !reduceMotion && variant !== "link");
+	let t5;
+	if ($[9] !== loading || $[10] !== reduceMotion) {
+		t5 = (content) => /* @__PURE__ */ _jsx(ButtonLabel, {
+			loading,
+			reduceMotion,
+			children: content
+		});
+		$[9] = loading;
+		$[10] = reduceMotion;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	const renderLabel = t5;
+	let t6;
+	if ($[12] !== className || $[13] !== size || $[14] !== variant) {
+		t6 = cn(controlButtonVariants({
+			variant,
+			size,
+			className
+		}));
+		$[12] = className;
+		$[13] = size;
+		$[14] = variant;
+		$[15] = t6;
+	} else {
+		t6 = $[15];
+	}
+	const t7 = loading || undefined;
+	const t8 = loading || props["aria-disabled"] || undefined;
+	const t9 = loading ? LOADING_INERT_HANDLERS : undefined;
+	const t10 = isPresent ? undefined : LEAVING_ATTRIBUTES;
+	let t11;
+	if ($[16] !== props || $[17] !== size || $[18] !== t10 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== variant) {
+		t11 = {
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t6,
+			"aria-busy": t7,
+			...props,
+			"aria-disabled": t8,
+			...t9,
+			...t10
+		};
+		$[16] = props;
+		$[17] = size;
+		$[18] = t10;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+		$[23] = variant;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	const sharedProps = t11;
+	if (asChild) {
+		const t12 = sharedProps;
+		let t13;
+		if ($[25] !== children || $[26] !== loading || $[27] !== renderLabel) {
+			t13 = withArcLabel(children, loading, renderLabel);
+			$[25] = children;
+			$[26] = loading;
+			$[27] = renderLabel;
+			$[28] = t13;
+		} else {
+			t13 = $[28];
+		}
+		let t14;
+		if ($[29] !== attach || $[30] !== t12 || $[31] !== t13) {
+			t14 = /* @__PURE__ */ _jsx(Slot.Root, {
+				ref: attach,
+				...t12,
+				children: t13
+			});
+			$[29] = attach;
+			$[30] = t12;
+			$[31] = t13;
+			$[32] = t14;
+		} else {
+			t14 = $[32];
+		}
+		return t14;
+	}
+	const t12 = sharedProps;
+	let t13;
+	if ($[33] !== children || $[34] !== renderLabel) {
+		t13 = renderLabel(children);
+		$[33] = children;
+		$[34] = renderLabel;
+		$[35] = t13;
+	} else {
+		t13 = $[35];
+	}
+	let t14;
+	if ($[36] !== attach || $[37] !== t12 || $[38] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(ButtonPrimitive, {
+			ref: attach,
+			...t12,
+			children: t13
+		});
+		$[36] = attach;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+	} else {
+		t14 = $[39];
+	}
+	return t14;
+}
+export { ControlButton, controlButtonVariants };

package/dist/components/data-table.d.ts

@@ -0,0 +1,118 @@
+import * as React from "react";
+import type { ColumnDef, OnChangeFn, SortingState, VisibilityState } from "@tanstack/react-table";
+import { type AppliedFilter, type FilterQualifierConfig } from "./filter-query-grammar.js";
+import { type DropdownItem } from "./primitives/dropdown-menu-items.js";
+export type { DataTableColumnFilterValue } from "../types/data-table.js";
+/**
+ * Controles imperativos de la barra unificada que la tabla expone vía
+ * `queryFilterControlsRef`, para que el consumidor sincronice la barra desde
+ * fuera (p. ej. al clickear un chip de carpeta).
+ */
+export interface DataTableQueryFilterControls {
+    /** Devuelve el texto actual de la barra unificada. */
+    getQueryText: () => string;
+    /** Reemplaza el texto completo de la barra y aplica los filtros parseados. */
+    setQueryText: (query: string) => void;
+    /**
+     * Reemplaza los filtros de carpeta de la barra: deja un único `carpeta:<id>`
+     * (o ninguno si `folderId` es `null`), preservando el resto de los filtros.
+     */
+    setSingleFolderFilter: (folderId: string | null) => void;
+}
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    emptyMessage: string;
+    toolbarActions?: React.ReactNode;
+    onVisibleRowsChange?: (visibleRows: TData[]) => void;
+    onCellClick?: (event: React.MouseEvent<HTMLTableCellElement>, row: TData, columnId: string) => void;
+    getRowClassName?: (row: TData) => string | undefined;
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    filterColumnId?: string;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    filterExtraContent?: React.ReactNode;
+    filterValue?: string;
+    onFilterValueChange?: (value: string) => void;
+    /**
+     * Cuando se provee, agrega una barra de query unificada estilo GitHub
+     * (autocompletado de `clave:valor`) por encima de los controles de filtro
+     * clásicos. Ambas vistas comparten la misma fuente de verdad: la barra parsea
+     * la query y escribe en los canales de descripción, exclusiones y avanzados,
+     * y se re-sincroniza cuando esos controles clásicos cambian.
+     */
+    queryFilterConfig?: FilterQualifierConfig[];
+    queryFilterPlaceholder?: string;
+    queryFilterLabel?: string;
+    /**
+     * Notifica los filtros estructurados parseados desde la barra unificada
+     * (cualquier kind, con o sin columna, incluyendo negados) para que el
+     * consumidor los aplique con su propio predicado de dominio.
+     */
+    onAppliedFiltersChange?: (appliedFilters: AppliedFilter[]) => void;
+    /** Ref para acceder a los controles imperativos de la barra unificada. */
+    queryFilterControlsRef?: React.MutableRefObject<DataTableQueryFilterControls | null>;
+    /** Acción opcional dentro del input de la barra unificada, al final derecho. */
+    queryFilterTrailingAction?: React.ReactNode;
+    /**
+     * Agrupa visualmente las filas por adyacencia: cuando la clave de grupo de una
+     * fila difiere de la anterior se intercala una fila de encabezado. Las filas
+     * deben venir pre-ordenadas por grupo. El objeto debe ser memoizado por el
+     * consumidor (invalida la memo del cuerpo de la tabla).
+     */
+    rowGroups?: {
+        getGroupKey: (row: TData) => string;
+        /**
+         * Valor de orden del grupo de una fila (comparable con <). Cuando se
+         * provee, los grupos se ordenan por este valor; si no, quedan en orden de
+         * primera aparición. Las filas se particionan por clave en ambos casos,
+         * así que un grupo nunca se repite aunque las filas lleguen intercaladas
+         * (p. ej. con orden manual del usuario).
+         */
+        getGroupSortValue?: (row: TData) => number | string;
+        renderGroupHeader: (groupKey: string, groupRowCount: number) => React.ReactNode;
+        /** Grupos cuyas filas están colapsadas (solo se ve su encabezado). */
+        collapsedGroupKeys?: ReadonlySet<string>;
+        /**
+         * Colapsa/expande el grupo desde su encabezado (estilo accordion). Sin este
+         * callback los encabezados no son interactivos.
+         */
+        onGroupToggle?: (groupKey: string) => void;
+    };
+    showExcludeFilterToggle?: boolean;
+    excludeFilterValues?: string[];
+    onExcludeFilterValuesChange?: (values: string[]) => void;
+    excludeFilterPlaceholder?: string;
+    excludeFilterLabel?: string;
+    excludeFilterToggleLabel?: string;
+    excludeFilterRowsCountByValue?: Record<string, number>;
+    excludeFilterUniqueRowsCount?: number;
+    showColumnVisibilityToggle?: boolean;
+    columnVisibilityButtonLabel?: string;
+    columnVisibilityMenuLabel?: string;
+    /**
+     * Ítems extra al tope del menú de columnas (p. ej. preferencias de vista), con la
+     * forma de los `items` de `DropdownMenu`; se separan de la sección de columnas con un separador.
+     */
+    columnVisibilityMenuExtraItems?: DropdownItem[];
+    sortingBadgeLabelOverrides?: Record<string, string>;
+    /**
+     * Ids de columnas de orden "internas" (p. ej. la posición de grupo) que el
+     * badge de orden y su botón "Quitar orden" deben ignorar.
+     */
+    sortingBadgeIgnoredColumnIds?: ReadonlySet<string>;
+    selectAllColumnsLabel?: string;
+    deselectAllColumnsLabel?: string;
+    hideableColumnsDefaultVisibility?: VisibilityState;
+}
+export interface DataTableColumnMeta {
+    label?: string;
+    cellClassName?: string;
+    headerClassName?: string;
+    isClickable?: boolean;
+    onHeaderClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+}
+export declare function DataTable<TData, TValue>({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel, filterPlaceholder, filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder, excludeFilterLabel, excludeFilterToggleLabel, excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle, columnVisibilityButtonLabel, columnVisibilityMenuLabel, columnVisibilityMenuExtraItems, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel, deselectAllColumnsLabel, hideableColumnsDefaultVisibility, }: DataTableProps<TData, TValue>): React.JSX.Element;