beez-ui 0.6.2 → 0.7.0

package/dist/components/avatar.d.ts

@@ -7,10 +7,11 @@ export type AvatarImageProps = Omit<React.ComponentProps<"img">, "src"> & {
 declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
     size?: "default" | "sm" | "lg";
 }): React.JSX.Element;
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): React.JSX.Element;
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/avatar.js

@@ -51,7 +51,7 @@ function Avatar(t0) {
 	}
 	return t3;
 }
-/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
 function AvatarImage(t0) {
 	const $ = _c(15);
 	let className;
@@ -94,7 +94,7 @@ function AvatarImage(t0) {
 	let t6;
 	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
 		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
+			kind: "reveal",
 			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
 				render: t3,
 				keepMounted: true,
@@ -190,6 +190,7 @@ function AvatarBadge(t0) {
 	}
 	return t2;
 }
+/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
 function AvatarGroup(t0) {
 	const $ = _c(8);
 	let className;
@@ -205,7 +206,7 @@ function AvatarGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className);
+		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:transition-[translate] *:data-[slot=avatar]:duration-200 *:data-[slot=avatar]:ease-out *:data-[slot=avatar]:hover:z-10 *:data-[slot=avatar]:hover:-translate-y-0.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/calendar.js

@@ -3,6 +3,9 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { es } from "react-day-picker/locale";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { animate, frame } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_EASE, MOTION_MONTH_DISTANCE, MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
@@ -173,6 +176,7 @@ function Calendar(t0) {
 			Root: _temp,
 			Chevron: _temp2,
 			DayButton: t34,
+			Month: CalendarMonth,
 			WeekNumber: _temp3,
 			...components
 		};
@@ -247,6 +251,104 @@ function _temp(t0) {
 		...props_0
 	});
 }
+/**
+* Renders one displayed month and slides it in from the side the user navigated from.
+* DayPicker keys months by display position, so this instance survives navigation and can
+* compare the new month with the previous one. The first render and reduced motion stay static.
+* @param props - DayPicker month properties, including the month being displayed.
+* @returns The month container with its caption and grid.
+*/
+function CalendarMonth(t0) {
+	const $ = _c(13);
+	let calendarMonth;
+	let children;
+	let displayIndex;
+	let props;
+	if ($[0] !== t0) {
+		({calendarMonth, displayIndex, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = calendarMonth;
+		$[2] = children;
+		$[3] = displayIndex;
+		$[4] = props;
+	} else {
+		calendarMonth = $[1];
+		children = $[2];
+		displayIndex = $[3];
+		props = $[4];
+	}
+	const monthRef = React.useRef(null);
+	const monthTime = calendarMonth.date.getTime();
+	const previousMonthTimeRef = React.useRef(monthTime);
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	let t2;
+	if ($[5] !== monthTime || $[6] !== reduceMotion) {
+		t1 = () => {
+			const previousMonthTime = previousMonthTimeRef.current;
+			previousMonthTimeRef.current = monthTime;
+			const element = monthRef.current;
+			if (!element || reduceMotion || previousMonthTime === monthTime) {
+				return;
+			}
+			const isForward = monthTime > previousMonthTime;
+			const isRightToLeft = getComputedStyle(element).direction === "rtl";
+			const direction = isForward !== isRightToLeft ? 1 : -1;
+			const original = {
+				opacity: element.style.opacity,
+				transform: element.style.transform
+			};
+			const restore = () => {
+				element.style.opacity = original.opacity;
+				element.style.transform = original.transform;
+			};
+			const animation = animate(element, {
+				opacity: [0, 1],
+				transform: [`translateX(${direction * MOTION_MONTH_DISTANCE}px)`, "translateX(0px)"]
+			}, {
+				duration: MOTION_TIMING.monthSwap,
+				ease: [...MOTION_EASE]
+			});
+			let isActive = true;
+			animation.then(() => frame.postRender(() => {
+				if (isActive) {
+					restore();
+				}
+			}));
+			return () => {
+				isActive = false;
+				animation.cancel();
+				restore();
+			};
+		};
+		t2 = [monthTime, reduceMotion];
+		$[5] = monthTime;
+		$[6] = reduceMotion;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	if ($[9] !== children || $[10] !== displayIndex || $[11] !== props) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			ref: monthRef,
+			"data-slot": "calendar-month",
+			"data-display-index": displayIndex,
+			...props,
+			children
+		});
+		$[9] = children;
+		$[10] = displayIndex;
+		$[11] = props;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	return t3;
+}
 function CalendarDayButton(t0) {
 	const $ = _c(21);
 	let className;

package/dist/components/carousel.js

@@ -7,6 +7,17 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Arrow keys that move to the previous and next slide along each axis. */
+const CAROUSEL_KEYS = {
+	horizontal: {
+		previous: "ArrowLeft",
+		next: "ArrowRight"
+	},
+	vertical: {
+		previous: "ArrowUp",
+		next: "ArrowDown"
+	}
+};
 const CarouselContext = React.createContext(null);
 function useCarousel() {
 	const context = React.useContext(CarouselContext);
@@ -16,7 +27,7 @@ function useCarousel() {
 	return context;
 }
 function Carousel(t0) {
-	const $ = _c(47);
+	const $ = _c(48);
 	let children;
 	let className;
 	let opts;
@@ -100,28 +111,30 @@ function Carousel(t0) {
 	}
 	const scrollNext = t6;
 	let t7;
-	if ($[18] !== scrollNext || $[19] !== scrollPrev) {
+	if ($[18] !== orientation || $[19] !== scrollNext || $[20] !== scrollPrev) {
 		t7 = (event) => {
-			if (event.key === "ArrowLeft") {
+			const keys = CAROUSEL_KEYS[orientation];
+			if (event.key === keys.previous) {
 				event.preventDefault();
 				scrollPrev();
 			} else {
-				if (event.key === "ArrowRight") {
+				if (event.key === keys.next) {
 					event.preventDefault();
 					scrollNext();
 				}
 			}
 		};
-		$[18] = scrollNext;
-		$[19] = scrollPrev;
-		$[20] = t7;
+		$[18] = orientation;
+		$[19] = scrollNext;
+		$[20] = scrollPrev;
+		$[21] = t7;
 	} else {
-		t7 = $[20];
+		t7 = $[21];
 	}
 	const handleKeyDown = t7;
 	let t8;
 	let t9;
-	if ($[21] !== api || $[22] !== setApi) {
+	if ($[22] !== api || $[23] !== setApi) {
 		t8 = () => {
 			if (!api || !setApi) {
 				return;
@@ -129,18 +142,18 @@ function Carousel(t0) {
 			setApi(api);
 		};
 		t9 = [api, setApi];
-		$[21] = api;
-		$[22] = setApi;
-		$[23] = t8;
-		$[24] = t9;
+		$[22] = api;
+		$[23] = setApi;
+		$[24] = t8;
+		$[25] = t9;
 	} else {
-		t8 = $[23];
-		t9 = $[24];
+		t8 = $[24];
+		t9 = $[25];
 	}
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[25] !== api) {
+	if ($[26] !== api) {
 		t10 = () => {
 			if (!api) {
 				return;
@@ -160,17 +173,17 @@ function Carousel(t0) {
 			};
 		};
 		t11 = [api, onSelect];
-		$[25] = api;
-		$[26] = t10;
-		$[27] = t11;
+		$[26] = api;
+		$[27] = t10;
+		$[28] = t11;
 	} else {
-		t10 = $[26];
-		t11 = $[27];
+		t10 = $[27];
+		t11 = $[28];
 	}
 	React.useEffect(t10, t11);
 	const t12 = orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
 	let t13;
-	if ($[28] !== api || $[29] !== canScrollNext || $[30] !== canScrollPrev || $[31] !== carouselRef || $[32] !== opts || $[33] !== scrollNext || $[34] !== scrollPrev || $[35] !== t12) {
+	if ($[29] !== api || $[30] !== canScrollNext || $[31] !== canScrollPrev || $[32] !== carouselRef || $[33] !== opts || $[34] !== scrollNext || $[35] !== scrollPrev || $[36] !== t12) {
 		t13 = {
 			carouselRef,
 			api,
@@ -181,28 +194,28 @@ function Carousel(t0) {
 			canScrollPrev,
 			canScrollNext
 		};
-		$[28] = api;
-		$[29] = canScrollNext;
-		$[30] = canScrollPrev;
-		$[31] = carouselRef;
-		$[32] = opts;
-		$[33] = scrollNext;
-		$[34] = scrollPrev;
-		$[35] = t12;
-		$[36] = t13;
+		$[29] = api;
+		$[30] = canScrollNext;
+		$[31] = canScrollPrev;
+		$[32] = carouselRef;
+		$[33] = opts;
+		$[34] = scrollNext;
+		$[35] = scrollPrev;
+		$[36] = t12;
+		$[37] = t13;
 	} else {
-		t13 = $[36];
+		t13 = $[37];
 	}
 	let t14;
-	if ($[37] !== className) {
+	if ($[38] !== className) {
 		t14 = cn("relative", className);
-		$[37] = className;
-		$[38] = t14;
+		$[38] = className;
+		$[39] = t14;
 	} else {
-		t14 = $[38];
+		t14 = $[39];
 	}
 	let t15;
-	if ($[39] !== children || $[40] !== handleKeyDown || $[41] !== props || $[42] !== t14) {
+	if ($[40] !== children || $[41] !== handleKeyDown || $[42] !== props || $[43] !== t14) {
 		t15 = /* @__PURE__ */ _jsx("div", {
 			onKeyDownCapture: handleKeyDown,
 			className: t14,
@@ -212,25 +225,25 @@ function Carousel(t0) {
 			...props,
 			children
 		});
-		$[39] = children;
-		$[40] = handleKeyDown;
-		$[41] = props;
-		$[42] = t14;
-		$[43] = t15;
+		$[40] = children;
+		$[41] = handleKeyDown;
+		$[42] = props;
+		$[43] = t14;
+		$[44] = t15;
 	} else {
-		t15 = $[43];
+		t15 = $[44];
 	}
 	let t16;
-	if ($[44] !== t13 || $[45] !== t15) {
+	if ($[45] !== t13 || $[46] !== t15) {
 		t16 = /* @__PURE__ */ _jsx(CarouselContext.Provider, {
 			value: t13,
 			children: t15
 		});
-		$[44] = t13;
-		$[45] = t15;
-		$[46] = t16;
+		$[45] = t13;
+		$[46] = t15;
+		$[47] = t16;
 	} else {
-		t16 = $[46];
+		t16 = $[47];
 	}
 	return t16;
 }

package/dist/components/checkbox.js

@@ -21,7 +21,7 @@ function Checkbox(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
+		t1 = cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-[color,background-color,border-color,box-shadow] outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/data-table.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { matchesColumnFilterValue, normalizeFilterToken } from "../lib/column-filter-value.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { Button } from "./button.js";
 import { Badge } from "./badge.js";
@@ -12,7 +13,6 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const DIACRITICS_PATTERN = /[\u0300-\u036f]/g;
 const CLEAR_FILTER_ARIA_LABEL = "Limpiar filtro";
 const ACTIVE_EXCLUSIONS_SR_LABEL = "Filtros de exclusión activos";
 const HIDE_EXCLUDE_FILTERS_ARIA_LABEL = "Ocultar filtros de exclusión";
@@ -22,8 +22,37 @@ const EXCLUDED_ROWS_SUMMARY_LABEL = "Total excluidas";
 const CLEAR_ALL_EXCLUSIONS_ARIA_LABEL = "Quitar todas las exclusiones";
 const CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL = "Limpiar filtros excluidos";
 const REVERSE_FILTER_PENDING_MESSAGE = "Estás escribiendo una exclusión. Presioná Enter para aplicarla.";
-function normalizeFilterToken(value) {
-	return value.normalize("NFD").replace(DIACRITICS_PATTERN, "").toLocaleLowerCase().trim();
+/** Filters a column with the structured values the query bar writes, or plain text. */
+const columnFilterValueFn = (row, columnId, filterValue) => matchesColumnFilterValue(row.getValue(columnId), filterValue);
+/** Mirrors TanStack's column id resolution: explicit id, else the accessor key with dots as `_`. */
+function getColumnDefId(column) {
+	if (column.id) return column.id;
+	const accessorKey = column.accessorKey;
+	return typeof accessorKey === "string" ? accessorKey.replaceAll(".", "_") : undefined;
+}
+/**
+* Gives the columns targeted by query qualifiers a filter that understands the query bar's
+* structured values. TanStack would otherwise infer one from the data (`inNumberRange` for
+* numbers, which crashes on an object). A consumer's own `filterFn` always wins.
+*/
+function withQueryFilterFns(columns, targetedColumnIds) {
+	if (targetedColumnIds.size === 0) return columns;
+	return columns.map((column) => {
+		if ("columns" in column && column.columns) {
+			return {
+				...column,
+				columns: withQueryFilterFns(column.columns, targetedColumnIds)
+			};
+		}
+		const columnId = getColumnDefId(column);
+		if (column.filterFn != null || columnId == null || !targetedColumnIds.has(columnId)) {
+			return column;
+		}
+		return {
+			...column,
+			filterFn: columnFilterValueFn
+		};
+	});
 }
 function getTableFilterValue(filterValue, showExcludeFilterToggle) {
 	const normalizedFilterValue = filterValue.trimStart();
@@ -310,8 +339,9 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 		onColumnVisibilityChange?.(updater);
 	}, [controlledColumnVisibility, onColumnVisibilityChange]);
 	// TanStack Table manages internal reactive state through this hook.
+	const tableColumns = React.useMemo(() => withQueryFilterFns(columns, advancedFilterColumnIds), [columns, advancedFilterColumnIds]);
 	const table = useReactTable({
-		columns,
+		columns: tableColumns,
 		data,
 		// La tabla no pagina (no hay `getPaginationRowModel`). Con el auto-reset por
 		// defecto, cada cambio de filtro dispara `resetPageIndex` → `setPagination`,

package/dist/components/dropdown-menu.js

@@ -586,7 +586,7 @@ function DropdownMenuSubTrigger(t0) {
 	}
 	let t1;
 	if ($[5] !== className) {
-		t1 = cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground data-open:*:data-[slot=dropdown-menu-sub-trigger-icon]:translate-x-0.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t1;
 	} else {
@@ -594,7 +594,10 @@ function DropdownMenuSubTrigger(t0) {
 	}
 	let t2;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronRightIcon, { className: "ml-auto" });
+		t2 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
+			"data-slot": "dropdown-menu-sub-trigger-icon",
+			className: "ml-auto transition-transform duration-200 ease-out"
+		});
 		$[7] = t2;
 	} else {
 		t2 = $[7];

package/dist/components/filter-query-bar.js

@@ -5,6 +5,7 @@ import { Calendar, Check, CircleDot, CircleMinus, CircleSlash, Folder, Hash, Lis
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { cn } from "../lib/utils.js";
 import { getActiveFilterToken, getValueHighlightRanges, normalizeFilterSlug, parseFilterQuery, PRESENCE_HAS_META_KEY, PRESENCE_NO_META_KEY, UNASSIGNED_FOLDER_FILTER_VALUE } from "./filter-query-grammar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -810,12 +811,16 @@ export function FilterQueryBar(t0) {
 			onCloseAutoFocus: _temp,
 			onInteractOutside: t34,
 			onOpenAutoFocus: _temp2,
-			children: /* @__PURE__ */ _jsx("ul", {
-				"aria-label": t35,
-				className: "grid gap-0.5",
-				id: listboxId,
-				role: "listbox",
-				children: t36
+			children: /* @__PURE__ */ _jsx(GlideSlot, {
+				preset: "suggestions",
+				children: /* @__PURE__ */ _jsx("ul", {
+					"aria-label": t35,
+					className: "grid gap-0.5",
+					"data-slot": "filter-query-bar-suggestions",
+					id: listboxId,
+					role: "listbox",
+					children: t36
+				})
 			})
 		});
 		$[83] = listboxId;

package/dist/components/form.d.ts

@@ -4,6 +4,11 @@ import { Slot } from "radix-ui";
 import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+/**
+ * Reads the field and item context shared by the form parts.
+ * @returns Accessible ids plus the react-hook-form state of the enclosing field.
+ * @throws When used outside `<FormField>`, where no field name is available.
+ */
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;

package/dist/components/form.js

@@ -49,6 +49,11 @@ const FormField = (t0) => {
 	}
 	return t3;
 };
+/**
+* Reads the field and item context shared by the form parts.
+* @returns Accessible ids plus the react-hook-form state of the enclosing field.
+* @throws When used outside `<FormField>`, where no field name is available.
+*/
 const useFormField = () => {
 	const $ = _c(13);
 	const fieldContext = React.useContext(FormFieldContext);
@@ -63,6 +68,9 @@ const useFormField = () => {
 		t0 = $[1];
 	}
 	const formState = useFormState(t0);
+	if (!fieldContext.name) {
+		throw new Error("useFormField: must be used within <FormField>, which provides the field name");
+	}
 	let t1;
 	if ($[2] !== fieldContext.name || $[3] !== formState || $[4] !== getFieldState) {
 		t1 = getFieldState(fieldContext.name, formState);
@@ -74,9 +82,6 @@ const useFormField = () => {
 		t1 = $[5];
 	}
 	const fieldState = t1;
-	if (!fieldContext) {
-		throw new Error("useFormField should be used within <FormField>");
-	}
 	const { id } = itemContext;
 	const t2 = `${id}-form-item`;
 	const t3 = `${id}-form-item-description`;
@@ -149,12 +154,9 @@ function FormItem(t0) {
 	}
 	let t4;
 	if ($[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsx(FormItemContext.Provider, {
-				value: t1,
-				children: t3
-			})
+		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+			value: t1,
+			children: t3
 		});
 		$[10] = t1;
 		$[11] = t3;

package/dist/components/input-group.js

@@ -23,7 +23,7 @@ function InputGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
+		t1 = cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-[color,background-color,border-color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/input.js

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }) {
 		children: /* @__PURE__ */ _jsx(InputPrimitive, {
 			type,
 			"data-slot": "input",
-			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,background-color,border-color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 			...props
 		})
 	});

package/dist/components/pagination.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { type LinkProps } from "./link.js";
 import { Button } from "./button.js";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+/** Lists page links; the current page's highlight glides to the newly selected page. */
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
 export type PaginationLinkProps = {

package/dist/components/pagination.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Link } from "./link.js";
+import { GlideSlot } from "../motion/glide-slot.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
@@ -44,6 +45,7 @@ function Pagination(t0) {
 	}
 	return t2;
 }
+/** Lists page links; the current page's highlight glides to the newly selected page. */
 function PaginationContent(t0) {
 	const $ = _c(8);
 	let className;
@@ -67,10 +69,13 @@ function PaginationContent(t0) {
 	}
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("ul", {
-			"data-slot": "pagination-content",
-			className: t1,
-			...props
+		t2 = /* @__PURE__ */ _jsx(GlideSlot, {
+			preset: "pagination",
+			children: /* @__PURE__ */ _jsx("ul", {
+				"data-slot": "pagination-content",
+				className: t1,
+				...props
+			})
 		});
 		$[5] = props;
 		$[6] = t1;

package/dist/components/radio-group.js

@@ -56,7 +56,7 @@ function RadioGroupItem(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
+		t1 = cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input transition-[color,background-color,border-color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {

package/dist/components/select.js

@@ -116,7 +116,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {