beez-ui 0.6.1 → 0.7.0

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 {

package/dist/components/sheet.js

@@ -196,7 +196,7 @@ function SheetContent(t0) {
 	}
 	let t5;
 	if ($[7] !== className) {
-		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg transition ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
+		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
 		$[7] = className;
 		$[8] = t5;
 	} else {
@@ -207,14 +207,17 @@ function SheetContent(t0) {
 		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
-			children: /* @__PURE__ */ _jsxs(Button, {
-				variant: "ghost",
-				className: "absolute top-4 right-4",
-				size: "icon-sm",
-				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "delayed-pop",
+				children: /* @__PURE__ */ _jsxs(Button, {
+					variant: "ghost",
+					className: "absolute top-4 right-4",
+					size: "icon-sm",
+					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				})
 			})
 		});
 		$[9] = showCloseButton;

package/dist/components/sidebar.js

@@ -7,6 +7,7 @@ import { useIsMobile } from "../hooks/use-mobile.js";
 import { useSidebarPersistence, saveSidebarPreference } from "../hooks/use-sidebar-persistence.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
+import { MOTION_EASE_DRAWER } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
 import { Button } from "./button.js";
@@ -21,6 +22,8 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/** Drawer curve shared by the collapse transitions: quick start, long gentle settle. */
+const SIDEBAR_EASE = `cubic-bezier(${MOTION_EASE_DRAWER.join(", ")})`;
 const SIDEBAR_MENU_SKELETON_TEXT_WIDTH = "70%";
 function subscribeToClientMount() {
 	return () => {};
@@ -158,6 +161,7 @@ function SidebarProvider(t0) {
 		t7 = {
 			"--sidebar-width": SIDEBAR_WIDTH,
 			"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+			"--sidebar-ease": SIDEBAR_EASE,
 			...style
 		};
 		$[26] = style;
@@ -339,7 +343,7 @@ function Sidebar(t0) {
 	const t5 = variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)";
 	let t6;
 	if ($[27] !== t5) {
-		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
+		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-(--sidebar-ease)", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
 		$[27] = t5;
 		$[28] = t6;
 	} else {
@@ -359,7 +363,7 @@ function Sidebar(t0) {
 	const t8 = variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l";
 	let t9;
 	if ($[31] !== className || $[32] !== t8) {
-		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
+		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-(--sidebar-ease) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
 		$[31] = className;
 		$[32] = t8;
 		$[33] = t9;
@@ -507,7 +511,7 @@ function SidebarRail(t0) {
 	const { toggleSidebar } = useSidebar();
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
+		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all duration-300 ease-(--sidebar-ease) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -812,7 +816,7 @@ function SidebarGroupLabel(t0) {
 	const Comp = asChild ? Slot.Root : "div";
 	let t2;
 	if ($[4] !== className) {
-		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
+		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-300 ease-(--sidebar-ease) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
 		$[4] = className;
 		$[5] = t2;
 	} else {
@@ -996,7 +1000,7 @@ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
 		},
 		size: {
 			default: "h-8 text-sm",

package/dist/components/skeleton.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Placeholder with a soft shine that sweeps across it while content loads.
+ * The shine rests outside the box, so reduced motion shows a plain muted block.
+ * @param props - Native div properties and optional consumer overrides.
+ * @returns The placeholder element with its loading animation.
+ */
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,12 +1,18 @@
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Placeholder with a soft shine that sweeps across it while content loads.
+* The shine rests outside the box, so reduced motion shows a plain muted block.
+* @param props - Native div properties and optional consumer overrides.
+* @returns The placeholder element with its loading animation.
+*/
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ _jsx(MotionSlot, {
 		kind: "skeleton",
 		children: /* @__PURE__ */ _jsx("div", {
 			"data-slot": "skeleton",
-			className: cn("rounded-md bg-muted", className),
+			className: cn("relative overflow-hidden rounded-md bg-muted after:pointer-events-none after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-foreground/6 after:to-transparent", className),
 			...props
 		})
 	});

package/dist/components/switch.js

@@ -36,7 +36,7 @@ function Switch(t0) {
 			kind: "thumb",
 			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
 				"data-slot": "switch-thumb",
-				className: "pointer-events-none block rounded-full bg-background ring-0  group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+				className: "pointer-events-none block rounded-full bg-background shadow-sm ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
 			})
 		});
 		$[6] = t3;

package/dist/components/textarea.js

@@ -12,7 +12,7 @@ function Textarea({ className, ...props }) {
 		kind: "field",
 		children: /* @__PURE__ */ _jsx("textarea", {
 			"data-slot": "textarea",
-			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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
 		})
 	});