@rendra-ui/web 2.4.0 → 2.5.0

package/dist/index.js

@@ -1,15 +1,18 @@
-/*! Rendra Design System v2.4.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-DXDpTGsu.js";
-import { a as catalogByComponent, c as findComponentsWithoutDefault, d as findPresetCollisions, f as getCatalogEntry, i as assertCatalogIntegrity, l as findDuplicateCodes, n as CATALOG_EXCLUDED_FILES, o as filesMissingCatalogEntry, p as resolveCatalogCode, r as COMPONENT_CODE_PATTERN, s as findComponentsWithMultipleDefaults, t as CATALOG, u as findInvalidFormatCodes } from "./components-hp7iWioq.js";
-import { i as usePrefersReducedMotion, n as buttonVariants, r as Spinner, t as Button } from "./button-C6rjowQi.js";
-import { a as DropdownMenuContent, c as DropdownMenuLabel, d as DropdownMenuSeparator, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuCheckboxItem, l as DropdownMenuRadioGroup, m as DropdownMenuSubTrigger, n as TooltipProvider, o as DropdownMenuGroup, p as DropdownMenuSubContent, r as DropdownMenu, s as DropdownMenuItem, t as Tooltip, u as DropdownMenuRadioItem } from "./tooltip-bdmbX6vC.js";
-import { a as BrandContext, i as useBrand, n as BrandFeedbackIcon, r as feedbackLabels, t as EmptyState } from "./empty-state-CdaDLcsB.js";
-import { a as useRendraNavigate, i as useRendraLink, n as useCurrentPath, r as useRendraBreadcrumbs, t as RendraProvider } from "./rendra-provider-7jUgUHzR.js";
-import { n as useBreakpoint, t as breakpoints } from "./use-breakpoint-Dyp-0E_c.js";
+/*! Rendra Design System v2.5.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-Cw7M5kEP.js";
+import { a as getReducedMotion, n as useLayoutReady, o as subscribeReducedMotion, r as useMotionMode, s as usePrefersReducedMotion } from "./motion-context-5BRIQAJm.js";
+import { t as useMotionPresets } from "./use-motion-presets-BrkgL8lG.js";
+import { a as catalogByComponent, c as findComponentsWithoutDefault, d as findPresetCollisions, f as getCatalogEntry, i as assertCatalogIntegrity, l as findDuplicateCodes, n as CATALOG_EXCLUDED_FILES, o as filesMissingCatalogEntry, p as resolveCatalogCode, r as COMPONENT_CODE_PATTERN, s as findComponentsWithMultipleDefaults, t as CATALOG, u as findInvalidFormatCodes } from "./components-DkpspH9h.js";
+import { n as buttonVariants, r as Spinner, t as Button } from "./button-BzJgR2gH.js";
+import { a as DropdownMenuContent, c as DropdownMenuLabel, d as DropdownMenuSeparator, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuCheckboxItem, l as DropdownMenuRadioGroup, m as DropdownMenuSubTrigger, n as TooltipProvider, o as DropdownMenuGroup, p as DropdownMenuSubContent, r as DropdownMenu, s as DropdownMenuItem, t as Tooltip, u as DropdownMenuRadioItem } from "./tooltip-BAMSaGbS.js";
+import { a as BrandContext, i as useBrand, n as BrandFeedbackIcon, r as feedbackLabels, t as EmptyState } from "./empty-state-Cdb1vkMT.js";
+import { a as useRendraNavigate, i as useRendraLink, n as useCurrentPath, r as useRendraBreadcrumbs, t as RendraProvider } from "./rendra-provider-CRe0XdOU.js";
+import { n as useBreakpoint, t as breakpoints } from "./use-breakpoint-O9eqFmsF.js";
 import { ArrowDown, ArrowDownRight, ArrowLeft, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpRight, Bell, Bot, CalendarDays, Check, CheckCheck, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Clock, Columns3, Download, EllipsisVertical, Eye, EyeOff, FileText, Film, Filter, Globe, GripVertical, Home, ImageIcon, ImagePlus, Info, LayoutTemplate, LogOut, Mail, MapPin, Menu, MessageCircle, MessagesSquare, Mic, Minus, Monitor, Moon, MoreHorizontal, Palette, PanelLeft, Paperclip, Pause, Pencil, Phone, Play, Plus, Reply, RotateCw, Search, Send, SkipForward, Smartphone, Smile, Star, Sun, Trash2, TriangleAlert, UploadCloud, User, VideoIcon, X, XCircle, Zap } from "lucide-react";
+import { AnimatePresence, animate, m, useDragControls, useMotionValue, useTransform } from "motion/react";
 import { Accordion as Accordion$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible, ContextMenu, Dialog, Label as Label$1, NavigationMenu, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, Slider as Slider$1, Slot, Switch as Switch$1, Tabs as Tabs$1, VisuallyHidden } from "radix-ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { cva } from "class-variance-authority";
 import { addDays, addMonths, addWeeks, differenceInMinutes, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, isYesterday, startOfDay, startOfMonth, startOfWeek } from "date-fns";
@@ -22,9 +25,119 @@ import { Command } from "cmdk";
 import { columnFilteringFeature, columnVisibilityFeature, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, tableFeatures, useTable } from "@tanstack/react-table";
 import { Toaster as Toaster$1, toast as toast$1 } from "sonner";
 import { z } from "zod";
+//#region src/lib/motion/reorder.ts
+function layoutEnabled({ mode, ready, dragging }) {
+	return mode === "on" && ready && !dragging;
+}
+//#endregion
+//#region src/lib/motion/count.ts
+var PT_BR = /^([^\d-]*)(-?)(\d{1,3}(?:\.\d{3})+|\d+)(?:,(\d+))?([^\d]*)$/;
+function parseLocaleNumber$1(value) {
+	if (typeof value === "number") {
+		if (!Number.isFinite(value)) return null;
+		const text = String(Math.abs(value));
+		if (/e/i.test(text)) return null;
+		const decimals = text.includes(".") ? text.split(".")[1].length : 0;
+		return {
+			prefix: value < 0 ? "-" : "",
+			suffix: "",
+			value: Math.abs(value),
+			decimals,
+			grouping: false,
+			decimalSeparator: "."
+		};
+	}
+	if (typeof value !== "string") return null;
+	const match = PT_BR.exec(value);
+	if (!match) return null;
+	const [, prefix = "", sign = "", integer = "", fraction = "", suffix = ""] = match;
+	const grouping = integer.includes(".");
+	const n = Number(`${integer.replace(/\./g, "")}${fraction ? `.${fraction}` : ""}`);
+	if (!Number.isFinite(n)) return null;
+	return {
+		prefix: `${prefix}${sign}`,
+		suffix,
+		value: n,
+		decimals: fraction.length,
+		grouping,
+		decimalSeparator: ","
+	};
+}
+/** Escreve `n` com o mesmo formato do valor original. */
+function formatLike(parsed, n) {
+	const [int = "0", frac = ""] = Math.abs(n).toFixed(parsed.decimals).split(".");
+	const grouped = parsed.grouping ? int.replace(/\B(?=(\d{3})+(?!\d))/g, ".") : int;
+	const number = frac ? `${grouped}${parsed.decimalSeparator}${frac}` : grouped;
+	return `${parsed.prefix}${number}${parsed.suffix}`;
+}
+//#endregion
 //#region src/components/ui/accordion.tsx
 /** Accordion único, com animação de altura e área de toque de 44px no mobile. */
 function Accordion({ items, multiple, defaultValue, className }) {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const [open, setOpen] = useState(multiple ? defaultValue ?? [] : defaultValue?.[0] ? [defaultValue[0]] : []);
+	if (motion === "on") {
+		const rootProps = multiple ? {
+			type: "multiple",
+			value: open,
+			onValueChange: setOpen
+		} : {
+			type: "single",
+			collapsible: true,
+			value: open[0] ?? "",
+			onValueChange: (v) => setOpen(v ? [v] : [])
+		};
+		return /* @__PURE__ */ jsx(Accordion$1.Root, {
+			...rootProps,
+			"data-rendra": "ACRN-001",
+			className: cn("flex flex-col", className),
+			children: items.map((it) => {
+				const isOpen = open.includes(it.value);
+				return /* @__PURE__ */ jsxs(Accordion$1.Item, {
+					value: it.value,
+					disabled: it.disabled,
+					className: "border-b last:border-b-0",
+					children: [/* @__PURE__ */ jsx(Accordion$1.Header, { children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+						className: "group flex min-h-touch w-full cursor-pointer items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-colors hover:text-primary-text disabled:cursor-not-allowed disabled:opacity-50 md:min-h-0",
+						children: [it.title, /* @__PURE__ */ jsx(m.span, {
+							"aria-hidden": true,
+							className: "flex shrink-0",
+							animate: { rotate: isOpen ? 180 : 0 },
+							transition: presets.fade.transition,
+							children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-icon-sm text-muted-foreground" })
+						})]
+					}) }), /* @__PURE__ */ jsx(AnimatePresence, {
+						initial: false,
+						children: isOpen && /* @__PURE__ */ jsx(Accordion$1.Content, {
+							forceMount: true,
+							asChild: true,
+							children: /* @__PURE__ */ jsx(m.div, {
+								className: "overflow-hidden text-sm wrap-break-word text-muted-foreground",
+								initial: {
+									height: 0,
+									opacity: 0
+								},
+								animate: {
+									height: "auto",
+									opacity: 1
+								},
+								exit: {
+									height: 0,
+									opacity: 0
+								},
+								transition: presets.fade.transition,
+								children: /* @__PURE__ */ jsx("div", {
+									className: "pb-4",
+									children: it.content
+								})
+							})
+						})
+					})]
+				}, it.value);
+			})
+		});
+	}
 	const content = items.map((it) => /* @__PURE__ */ jsxs(Accordion$1.Item, {
 		value: it.value,
 		disabled: it.disabled,
@@ -33,10 +146,10 @@ function Accordion({ items, multiple, defaultValue, className }) {
 			className: "group flex min-h-touch w-full cursor-pointer items-center justify-between gap-4 py-4 text-left text-sm font-medium transition-colors hover:text-primary-text disabled:cursor-not-allowed disabled:opacity-50 md:min-h-0",
 			children: [it.title, /* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": true,
-				className: "size-icon-sm shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180"
+				className: "size-icon-sm shrink-0 text-muted-foreground transition-transform duration-(--rendra-duration-base) ease-move group-data-[state=open]:rotate-180"
 			})]
 		}) }), /* @__PURE__ */ jsx(Accordion$1.Content, {
-			className: "overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+			className: "overflow-hidden text-sm wrap-break-word text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "pb-4",
 				children: it.content
@@ -404,7 +517,7 @@ function Breadcrumb({ items, variant = "responsive", className }) {
 				const last = i === items.length - 1;
 				return /* @__PURE__ */ jsxs("li", {
 					className: cn("flex min-w-0 items-center gap-1", !last && "shrink-0 max-sm:max-w-24"),
-					children: [item.to && !last ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
+					children: [item.to && !last ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Link, {
 						to: item.to,
 						className: "hidden truncate rounded-item transition-colors hover:text-primary-text md:inline",
 						children: item.label
@@ -517,7 +630,7 @@ function OverlayShell({ title, description, icon, children, footer, hideHeader,
 			"aria-hidden": true
 		})
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		hideHeader && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-x-0 top-0 z-10 flex justify-end px-2 pt-safe md:px-4 md:pt-4",
 			children: closeButton
@@ -533,10 +646,10 @@ function OverlayShell({ title, description, icon, children, footer, hideHeader,
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-1 pt-1",
 					children: [/* @__PURE__ */ jsx(Dialog.Title, {
-						className: "text-lg font-semibold",
+						className: "text-lg font-semibold wrap-break-word",
 						children: title
 					}), description ? /* @__PURE__ */ jsx(Dialog.Description, {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm wrap-break-word text-muted-foreground",
 						children: description
 					}) : /* @__PURE__ */ jsx(Dialog.Description, {
 						className: "sr-only",
@@ -563,6 +676,9 @@ var sizes$1 = {
 	md: "md:max-w-lg",
 	lg: "md:max-w-2xl"
 };
+var overlayCls$1 = "fixed inset-0 z-50 bg-overlay";
+var overlayOffCls = cn(overlayCls$1, "data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0");
+var contentCls = cn("fixed inset-0 z-50 flex h-dvh flex-col bg-card text-card-foreground outline-none", "md:inset-auto md:top-1/2 md:left-1/2 md:h-auto md:max-h-sheet md:w-full md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-surface md:border md:shadow-lg");
 var feedback = {
 	confirm: "info",
 	destructive: "error",
@@ -582,55 +698,85 @@ function Modal({ open, onOpenChange, title, description, type = "confirm", size
 		}
 	};
 	const isForm = type === "form";
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const { isMobile } = useBreakpoint();
+	const code = resolveCatalogCode("Modal", { type: type === "destructive" ? "confirm" : type });
+	const sizeCls = sizes$1[size];
+	const shell = /* @__PURE__ */ jsxs(OverlayShell, {
+		title,
+		description: isForm ? description : void 0,
+		hideHeader: !isForm,
+		onRequestClose: close,
+		bodyClassName: cn(!isForm && "flex flex-col items-center justify-center gap-4 text-center"),
+		footer: /* @__PURE__ */ jsx(ActionBar, {
+			primary: {
+				label: confirmLabel,
+				destructive: type === "destructive",
+				loading: busy || loading,
+				loadingLabel: `${confirmLabel}...`,
+				type: isForm && formId ? "submit" : "button",
+				form: isForm ? formId : void 0,
+				onClick: isForm && formId ? void 0 : confirm
+			},
+			cancel: type === "info" && cancelLabel === void 0 ? void 0 : {
+				label: cancelLabel ?? "Cancelar",
+				onClick: close
+			}
+		}),
+		children: [!isForm && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(BrandFeedbackIcon, {
+				type: feedback[type],
+				size: "2xl",
+				animated: true
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-lg font-semibold wrap-anywhere",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm wrap-anywhere text-muted-foreground",
+					children: description
+				})]
+			}),
+			children
+		] }), isForm && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children
+		})]
+	});
+	if (motion === "on") return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
+			forceMount: true,
+			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				forceMount: true,
+				asChild: true,
+				children: /* @__PURE__ */ jsx(m.div, {
+					className: overlayCls$1,
+					...presets.fade
+				})
+			}), /* @__PURE__ */ jsx(Dialog.Content, {
+				forceMount: true,
+				asChild: true,
+				"data-rendra": code,
+				className: cn(contentCls, sizeCls),
+				children: /* @__PURE__ */ jsx(m.div, {
+					...presets.open(isMobile ? { y: 8 } : void 0),
+					children: shell
+				})
+			})]
+		}, "modal") })
+	});
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" }), /* @__PURE__ */ jsx(Dialog.Content, {
-			"data-rendra": resolveCatalogCode("Modal", { type: type === "destructive" ? "confirm" : type }),
-			className: cn("fixed inset-0 z-50 flex h-dvh flex-col bg-card text-card-foreground outline-none", "md:inset-auto md:top-1/2 md:left-1/2 md:h-auto md:max-h-sheet md:w-full md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-surface md:border md:shadow-lg", "data-[state=open]:animate-in data-[state=open]:fade-in-0 md:data-[state=open]:zoom-in-95", sizes$1[size]),
-			children: /* @__PURE__ */ jsxs(OverlayShell, {
-				title,
-				description: isForm ? description : void 0,
-				hideHeader: !isForm,
-				onRequestClose: close,
-				bodyClassName: cn(!isForm && "flex flex-col items-center justify-center gap-4 text-center"),
-				footer: /* @__PURE__ */ jsx(ActionBar, {
-					primary: {
-						label: confirmLabel,
-						destructive: type === "destructive",
-						loading: busy || loading,
-						loadingLabel: `${confirmLabel}...`,
-						type: isForm && formId ? "submit" : "button",
-						form: isForm ? formId : void 0,
-						onClick: isForm && formId ? void 0 : confirm
-					},
-					cancel: type === "info" && cancelLabel === void 0 ? void 0 : {
-						label: cancelLabel ?? "Cancelar",
-						onClick: close
-					}
-				}),
-				children: [!isForm && /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(BrandFeedbackIcon, {
-						type: feedback[type],
-						size: "2xl",
-						animated: true
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-lg font-semibold",
-							children: title
-						}), description && /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground",
-							children: description
-						})]
-					}),
-					children
-				] }), isForm && /* @__PURE__ */ jsx("div", {
-					className: "flex flex-col gap-2",
-					children
-				})]
-			})
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: overlayOffCls }), /* @__PURE__ */ jsx(Dialog.Content, {
+			"data-rendra": code,
+			className: cn(contentCls, "data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 md:data-[state=open]:zoom-in-95", sizeCls),
+			children: shell
 		})] })
 	});
 }
@@ -1105,7 +1251,7 @@ function Calendar({ events, view: viewProp, defaultView = "month", onViewChange,
 											" ",
 											e.title
 										]
-									}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 										className: "truncate font-medium",
 										children: e.title
 									}), /* @__PURE__ */ jsx("span", {
@@ -1738,18 +1884,59 @@ var Input = forwardRef(function Input({ size, mask, icon, suffix, clearable, inv
 });
 //#endregion
 //#region src/components/ui/popover.tsx
-var Popover = Popover$1.Root;
+var PopoverOpenContext = createContext(null);
+function AnimatedRoot({ open, defaultOpen, onOpenChange, ...rest }) {
+	const [inner, setInner] = useState(defaultOpen ?? false);
+	const current = open ?? inner;
+	return /* @__PURE__ */ jsx(PopoverOpenContext.Provider, {
+		value: current,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, {
+			...rest,
+			open: current,
+			onOpenChange: (next) => {
+				setInner(next);
+				onOpenChange?.(next);
+			}
+		})
+	});
+}
+function Popover(props) {
+	return useMotionMode() === "on" ? /* @__PURE__ */ jsx(AnimatedRoot, { ...props }) : /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
+}
 var PopoverTrigger = Popover$1.Trigger;
 var PopoverClose = Popover$1.Close;
 var PopoverAnchor = Popover$1.Anchor;
-function PopoverContent({ className, align = "center", sideOffset = 8, width = "md", ...props }) {
+function PopoverContent({ className, align = "center", sideOffset = 8, width = "md", children, asChild, ...props }) {
+	const open = useContext(PopoverOpenContext);
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const base = cn("z-50 origin-(--radix-popover-content-transform-origin) rounded-surface border bg-popover text-popover-foreground shadow-md outline-none", width === "sm" ? "w-popover-sm" : "w-popover");
+	if (motion === "on" && open !== null && !asChild) return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Popover$1.Portal, {
+		forceMount: true,
+		children: /* @__PURE__ */ jsx(Popover$1.Content, {
+			forceMount: true,
+			asChild: true,
+			align,
+			sideOffset,
+			collisionPadding: 16,
+			"data-rendra": "POP-001",
+			className: cn(base, className),
+			...props,
+			children: /* @__PURE__ */ jsx(m.div, {
+				...presets.open(),
+				children
+			})
+		})
+	}, "popover") });
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
 		align,
 		sideOffset,
 		collisionPadding: 16,
 		"data-rendra": "POP-001",
-		className: cn("z-50 rounded-surface border bg-popover text-popover-foreground shadow-md outline-none", width === "sm" ? "w-popover-sm" : "w-popover", "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
-		...props
+		className: cn(base, "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+		asChild,
+		...props,
+		children
 	}) });
 }
 //#endregion
@@ -2097,7 +2284,7 @@ function Attachments({ files, mine }) {
 function MessageActions({ m, mine, onReply, onReact, onEdit, onDelete, kind }) {
 	const Item = kind === "context" ? ContextMenu.Item : DropdownMenuItem;
 	const itemClass = kind === "context" ? "flex min-h-touch cursor-pointer items-center gap-2 rounded-item px-3 text-sm outline-none select-none data-[highlighted]:bg-accent md:min-h-0 md:py-2 [&_svg]:size-icon-sm" : void 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			role: "group",
 			"aria-label": "Reagir",
@@ -2114,7 +2301,7 @@ function MessageActions({ m, mine, onReply, onReact, onEdit, onDelete, kind }) {
 			onSelect: () => onReply?.(m),
 			children: [/* @__PURE__ */ jsx(Reply, { "aria-hidden": true }), " Responder"]
 		}),
-		mine && !m.deleted && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Item, {
+		mine && !m.deleted && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Item, {
 			className: itemClass,
 			onSelect: () => onEdit?.(m),
 			children: [/* @__PURE__ */ jsx(Pencil, { "aria-hidden": true }), " Editar"]
@@ -2238,7 +2425,7 @@ function ChatThread({ messages, onReply, onReact, onEdit, onDelete, className })
 						}),
 						m.replyTo && (() => {
 							const quoteClass = cn("flex flex-col rounded-block border-l-4 px-2 py-1 text-left text-xs", mine && !m.deleted ? "border-primary-foreground/60 bg-primary-foreground/15" : "border-primary bg-muted");
-							const body = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 								className: "font-semibold",
 								children: m.replyTo.author
 							}), /* @__PURE__ */ jsx("span", {
@@ -2561,7 +2748,7 @@ function ChatComposer({ onSend, placeholder = "Escreva uma mensagem", disabled,
 							}, i))
 						})
 					]
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						iconOnly: true,
@@ -2641,7 +2828,7 @@ function ChatComposer({ onSend, placeholder = "Escreva uma mensagem", disabled,
 						className: "@max-xl:hidden",
 						children: /* @__PURE__ */ jsx(Mic, {})
 					})
-				] }), recording ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				] }), recording ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					iconOnly: true,
 					"aria-label": "Cancelar gravação",
@@ -2652,7 +2839,7 @@ function ChatComposer({ onSend, placeholder = "Escreva uma mensagem", disabled,
 					"aria-label": "Enviar áudio",
 					onClick: () => stopRecording(true),
 					children: /* @__PURE__ */ jsx(Send, {})
-				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 					iconOnly: true,
 					"aria-label": "Enviar",
 					disabled: disabled || !text.trim() && !files.length,
@@ -2797,7 +2984,7 @@ function QuickReplyList({ items, onPick }) {
 	const [q, setQ] = useState("");
 	const term = q.trim().toLowerCase();
 	const list = term ? items.filter((i) => `${i.title} ${i.text}`.toLowerCase().includes(term)) : items;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("span", {
 			className: "px-2 pt-1 text-xs font-semibold",
 			children: "Mensagens rápidas"
@@ -2842,29 +3029,60 @@ function QuickReplyList({ items, onPick }) {
 function Checkbox({ checked, defaultChecked, onCheckedChange, label, description, disabled, invalid, id, name, className, ...aria }) {
 	const auto = useId();
 	const cid = id ?? `cb${auto}`;
-	const box = /* @__PURE__ */ jsx(Checkbox$1.Root, {
+	const on = useMotionMode() === "on";
+	const presets = useMotionPresets();
+	const [inner, setInner] = useState(defaultChecked ?? false);
+	const state = checked ?? inner;
+	const mark = checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, {
+		className: "size-3",
+		strokeWidth: 3,
+		"aria-hidden": true
+	}) : /* @__PURE__ */ jsx(Check, {
+		className: "size-3",
+		strokeWidth: 3,
+		"aria-hidden": true
+	});
+	const rootProps = {
 		id: cid,
 		name,
-		checked,
-		defaultChecked,
-		onCheckedChange: (v) => onCheckedChange?.(v === true),
+		checked: on ? state : checked,
+		defaultChecked: on ? void 0 : defaultChecked,
+		onCheckedChange: (v) => {
+			if (on) setInner(v);
+			onCheckedChange?.(v === true);
+		},
 		disabled,
 		"aria-invalid": invalid || void 0,
 		"aria-label": aria["aria-label"],
 		"data-touch": label ? void 0 : "expanded",
-		className: cn("peer relative flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-item border border-input bg-card transition-colors", "hover:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-destructive", !label && "before:absolute before:-inset-3 md:before:hidden"),
-		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
-			className: "flex items-center justify-center data-[state=checked]:animate-in data-[state=checked]:zoom-in-50",
-			children: checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, {
-				className: "size-3",
-				strokeWidth: 3,
-				"aria-hidden": true
-			}) : /* @__PURE__ */ jsx(Check, {
-				className: "size-3",
-				strokeWidth: 3,
-				"aria-hidden": true
+		className: cn("peer relative flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-item border border-input bg-card transition-colors", "hover:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-destructive", !label && "before:absolute before:-inset-3 md:before:hidden")
+	};
+	const box = on ? /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		asChild: true,
+		...rootProps,
+		children: /* @__PURE__ */ jsx(m.button, {
+			type: "button",
+			whileTap: presets.press.whileTap,
+			transition: presets.press.transition,
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: state !== false && /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+					forceMount: true,
+					asChild: true,
+					children: /* @__PURE__ */ jsx(m.span, {
+						className: "flex items-center justify-center",
+						...presets.indicator,
+						children: mark
+					})
+				})
 			})
 		})
+	}) : /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		...rootProps,
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			className: "flex items-center justify-center data-[state=checked]:animate-in data-[state=checked]:duration-(--rendra-duration-fast) data-[state=checked]:zoom-in-90",
+			children: mark
+		})
 	});
 	if (!label) return /* @__PURE__ */ jsx("span", {
 		"data-rendra": "CHK-001",
@@ -3265,6 +3483,89 @@ function applyPalette(seeds, doc = document) {
 }
 //#endregion
 //#region src/components/ui/picker-panel.tsx
+/** A folha fecha se o arraste passou de 40% da altura ou se foi um arremesso (> 0,11 px/ms). */
+var DISMISS_FRACTION = .4;
+var DISMISS_VELOCITY = 110;
+/**
+* A folha do celular em `on`: entra de baixo, acompanha o dedo (arraste vertical pela alça, com
+* fricção ao puxar para cima), fecha por distância ou por arremesso e, se o dedo solta antes
+* disso, volta à origem com a mola da folha (a velocidade do dedo entra na mola, sem costura). O
+* fundo escurecido acompanha a distância. Só a alça arrasta: o corpo rola sem disputar o gesto.
+* Nenhum valor passa por `style`: o Motion guarda a posição do arraste, e o escurecimento do
+* fundo é gravado direto no elemento (sem render por quadro).
+*/
+function MobileSheet({ open, onOpenChange, trigger, adornment, head, rest }) {
+	const presets = useMotionPresets();
+	const ready = useLayoutReady();
+	const controls = useDragControls();
+	const sheetRef = useRef(null);
+	const dimRef = useRef(null);
+	const height = useRef(1);
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Anchor, {
+			adornment,
+			children: /* @__PURE__ */ jsx(Dialog.Trigger, {
+				asChild: true,
+				children: trigger
+			})
+		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
+			forceMount: true,
+			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				forceMount: true,
+				asChild: true,
+				children: /* @__PURE__ */ jsx(m.div, {
+					className: "fixed inset-0 z-40",
+					...presets.fade,
+					children: /* @__PURE__ */ jsx("div", {
+						ref: dimRef,
+						className: "absolute inset-0 bg-overlay"
+					})
+				})
+			}), /* @__PURE__ */ jsx(Dialog.Content, {
+				forceMount: true,
+				asChild: true,
+				"aria-describedby": void 0,
+				className: "fixed inset-x-0 bottom-0 z-50 flex max-h-sheet flex-col rounded-t-surface border-t bg-popover text-popover-foreground shadow-lg outline-none",
+				children: /* @__PURE__ */ jsxs(m.div, {
+					ref: sheetRef,
+					...presets.sheet("bottom"),
+					drag: ready ? "y" : false,
+					dragControls: controls,
+					dragListener: false,
+					dragConstraints: { top: 0 },
+					dragElastic: {
+						top: .2,
+						bottom: 0
+					},
+					dragSnapToOrigin: true,
+					dragTransition: presets.sheetBounce,
+					onDragStart: () => {
+						height.current = sheetRef.current?.offsetHeight || 1;
+					},
+					onDrag: (_, info) => {
+						const dim = dimRef.current;
+						if (dim) dim.style.opacity = String(1 - Math.min(1, Math.max(0, info.offset.y / height.current)));
+					},
+					onDragEnd: (_, info) => {
+						if (info.offset.y > height.current * DISMISS_FRACTION || info.velocity.y > DISMISS_VELOCITY) {
+							onOpenChange(false);
+							return;
+						}
+						if (dimRef.current) animate(dimRef.current, { opacity: 1 }, presets.springSheet);
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-sheet-handle": true,
+						onPointerDown: (e) => controls.start(e),
+						className: "touch-none",
+						children: head
+					}), rest]
+				})
+			})]
+		}, "sheet") })]
+	});
+}
 function Anchor({ adornment, children }) {
 	if (!adornment) return children;
 	return /* @__PURE__ */ jsxs("div", {
@@ -3274,6 +3575,92 @@ function Anchor({ adornment, children }) {
 }
 function PickerPanel({ open, onOpenChange, trigger, title, header, children, footer, width = "trigger", adornment, align = "start" }) {
 	const { isMobile } = useBreakpoint();
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const on = motion === "on";
+	const sheetHead = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 flex-col items-center pt-2",
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "h-1 w-12 rounded-full bg-border"
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-center justify-between gap-2 pr-2 pl-4",
+		children: [/* @__PURE__ */ jsx(Dialog.Title, {
+			className: "truncate text-base font-semibold",
+			children: title
+		}), /* @__PURE__ */ jsx(Dialog.Close, {
+			"aria-label": "Fechar",
+			className: "flex size-touch items-center justify-center rounded-item text-muted-foreground hover:bg-accent",
+			children: /* @__PURE__ */ jsx(X, {
+				className: "size-icon-md",
+				"aria-hidden": true
+			})
+		})]
+	})] });
+	const sheetRest = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		header && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 border-b px-4 pb-3",
+			children: header
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
+			children
+		}),
+		footer && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 border-t px-4 pt-3 pb-safe",
+			children: footer
+		})
+	] });
+	const sheetBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [sheetHead, sheetRest] });
+	const panelCls = cn("z-50 flex max-h-command origin-(--radix-popover-content-transform-origin) flex-col overflow-hidden rounded-surface border bg-popover text-popover-foreground shadow-md outline-none", width === "trigger" ? "w-trigger max-w-popover" : "w-auto max-w-popover md:max-w-none");
+	const panelBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		header && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 border-b p-2",
+			children: header
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",
+			children
+		}),
+		footer && /* @__PURE__ */ jsx("div", {
+			className: "shrink-0 border-t p-2",
+			children: footer
+		})
+	] });
+	if (on && isMobile) return /* @__PURE__ */ jsx(MobileSheet, {
+		open,
+		onOpenChange,
+		trigger,
+		adornment,
+		head: sheetHead,
+		rest: sheetRest
+	});
+	if (on) return /* @__PURE__ */ jsxs(Popover$1.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Anchor, {
+			adornment,
+			children: /* @__PURE__ */ jsx(Popover$1.Trigger, {
+				asChild: true,
+				children: trigger
+			})
+		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Popover$1.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ jsx(Popover$1.Content, {
+				forceMount: true,
+				asChild: true,
+				align,
+				sideOffset: 6,
+				collisionPadding: 16,
+				className: panelCls,
+				children: /* @__PURE__ */ jsx(m.div, {
+					...presets.open(),
+					children: panelBody
+				})
+			})
+		}, "panel") })]
+	});
 	if (isMobile) return /* @__PURE__ */ jsxs(Dialog.Root, {
 		open,
 		onOpenChange,
@@ -3283,44 +3670,10 @@ function PickerPanel({ open, onOpenChange, trigger, title, header, children, foo
 				asChild: true,
 				children: trigger
 			})
-		}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" }), /* @__PURE__ */ jsxs(Dialog.Content, {
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-overlay data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" }), /* @__PURE__ */ jsx(Dialog.Content, {
 			"aria-describedby": void 0,
-			className: "fixed inset-x-0 bottom-0 z-50 flex max-h-sheet flex-col rounded-t-surface border-t bg-popover text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 flex-col items-center pt-2",
-					children: /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: "h-1 w-12 rounded-full bg-border"
-					})
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center justify-between gap-2 pr-2 pl-4",
-					children: [/* @__PURE__ */ jsx(Dialog.Title, {
-						className: "truncate text-base font-semibold",
-						children: title
-					}), /* @__PURE__ */ jsx(Dialog.Close, {
-						"aria-label": "Fechar",
-						className: "flex size-touch items-center justify-center rounded-item text-muted-foreground hover:bg-accent",
-						children: /* @__PURE__ */ jsx(X, {
-							className: "size-icon-md",
-							"aria-hidden": true
-						})
-					})]
-				}),
-				header && /* @__PURE__ */ jsx("div", {
-					className: "shrink-0 border-b px-4 pb-3",
-					children: header
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
-					children
-				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: "shrink-0 border-t px-4 pt-3 pb-safe",
-					children: footer
-				})
-			]
+			className: "fixed inset-x-0 bottom-0 z-50 flex max-h-sheet flex-col rounded-t-surface border-t bg-popover text-popover-foreground shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
+			children: sheetBody
 		})] })]
 	});
 	return /* @__PURE__ */ jsxs(Popover$1.Root, {
@@ -3332,25 +3685,12 @@ function PickerPanel({ open, onOpenChange, trigger, title, header, children, foo
 				asChild: true,
 				children: trigger
 			})
-		}), /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
+		}), /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
 			align,
 			sideOffset: 6,
 			collisionPadding: 16,
-			className: cn("z-50 flex max-h-command flex-col overflow-hidden rounded-surface border bg-popover text-popover-foreground shadow-md outline-none", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", width === "trigger" ? "w-trigger max-w-popover" : "w-auto max-w-popover md:max-w-none"),
-			children: [
-				header && /* @__PURE__ */ jsx("div", {
-					className: "shrink-0 border-b p-2",
-					children: header
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",
-					children
-				}),
-				footer && /* @__PURE__ */ jsx("div", {
-					className: "shrink-0 border-t p-2",
-					children: footer
-				})
-			]
+			className: cn("z-50 flex max-h-command origin-(--radix-popover-content-transform-origin) flex-col overflow-hidden rounded-surface border bg-popover text-popover-foreground shadow-md outline-none", "data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", width === "trigger" ? "w-trigger max-w-popover" : "w-auto max-w-popover md:max-w-none"),
+			children: panelBody
 		}) })]
 	});
 }
@@ -3461,35 +3801,57 @@ var sizes = {
 	lg: "md:w-sheet-50",
 	xl: "md:w-sheet-75"
 };
+var overlayCls = "fixed inset-0 z-50 bg-overlay";
+var panelCls = "fixed inset-y-0 right-0 z-50 flex h-dvh w-full flex-col bg-card text-card-foreground shadow-lg outline-none md:border-l";
 function Drawer({ open, onOpenChange, title, description, icon, size = "30", children, footer, dirty, discardTitle = "Descartar alterações?", discardDescription = "As informações preenchidas neste painel serão perdidas." }) {
 	const [confirming, setConfirming] = useState(false);
 	const requestClose = () => dirty ? setConfirming(true) : onOpenChange(false);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dialog.Root, {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const keepOpenIfDirty = (e) => {
+		if (dirty) {
+			e.preventDefault();
+			setConfirming(true);
+		}
+	};
+	const shell = /* @__PURE__ */ jsx(OverlayShell, {
+		title,
+		description,
+		icon,
+		footer,
+		onRequestClose: requestClose,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange: (o) => o ? onOpenChange(true) : requestClose(),
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" }), /* @__PURE__ */ jsx(Dialog.Content, {
-			onEscapeKeyDown: (e) => {
-				if (dirty) {
-					e.preventDefault();
-					setConfirming(true);
-				}
-			},
-			onPointerDownOutside: (e) => {
-				if (dirty) {
-					e.preventDefault();
-					setConfirming(true);
-				}
-			},
+		children: motion === "on" ? /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
+			forceMount: true,
+			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				forceMount: true,
+				asChild: true,
+				children: /* @__PURE__ */ jsx(m.div, {
+					className: overlayCls,
+					...presets.fade
+				})
+			}), /* @__PURE__ */ jsx(Dialog.Content, {
+				forceMount: true,
+				asChild: true,
+				onEscapeKeyDown: keepOpenIfDirty,
+				onPointerDownOutside: keepOpenIfDirty,
+				"data-rendra": "GAV-001",
+				className: cn(panelCls, sizes[size]),
+				children: /* @__PURE__ */ jsx(m.div, {
+					...presets.sheet("right"),
+					children: shell
+				})
+			})]
+		}, "drawer") }) : /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: cn(overlayCls, "data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0") }), /* @__PURE__ */ jsx(Dialog.Content, {
+			onEscapeKeyDown: keepOpenIfDirty,
+			onPointerDownOutside: keepOpenIfDirty,
 			"data-rendra": "GAV-001",
-			className: cn("fixed inset-y-0 right-0 z-50 flex h-dvh w-full flex-col bg-card text-card-foreground shadow-lg outline-none md:border-l", "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:animate-in data-[state=open]:slide-in-from-right", sizes[size]),
-			children: /* @__PURE__ */ jsx(OverlayShell, {
-				title,
-				description,
-				icon,
-				footer,
-				onRequestClose: requestClose,
-				children
-			})
+			className: cn(panelCls, "data-[state=closed]:animate-out data-[state=closed]:duration-(--rendra-duration-fast) data-[state=closed]:slide-out-to-right data-[state=open]:animate-in data-[state=open]:slide-in-from-right", sizes[size]),
+			children: shell
 		})] })
 	}), /* @__PURE__ */ jsx(Modal, {
 		open: confirming,
@@ -3508,7 +3870,41 @@ function Drawer({ open, onOpenChange, title, description, icon, size = "30", chi
 function Switch({ checked, defaultChecked, onCheckedChange, label, description, disabled, id, name, className, ...aria }) {
 	const auto = useId();
 	const sid = id ?? `sw${auto}`;
-	const control = /* @__PURE__ */ jsx(Switch$1.Root, {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const rootCls = "relative inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary max-md:before:absolute max-md:before:-inset-3";
+	const thumbCls = cn("pointer-events-none block size-icon-md rounded-full bg-card shadow-sm duration-(--rendra-duration-base) ease-move data-[state=checked]:translate-x-6", motion === "on" ? "transition-[translate]" : "transition-transform");
+	const tap = presets.tap;
+	const control = motion === "on" ? /* @__PURE__ */ jsx(Switch$1.Root, {
+		asChild: true,
+		id: sid,
+		name,
+		checked,
+		defaultChecked,
+		onCheckedChange,
+		disabled,
+		"aria-label": aria["aria-label"],
+		"data-touch": "expanded",
+		"data-rendra": "SWT-001",
+		children: /* @__PURE__ */ jsx(m.button, {
+			type: "button",
+			className: rootCls,
+			initial: "rest",
+			animate: "rest",
+			whileTap: tap ? "tap" : void 0,
+			children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(m.span, {
+					className: thumbCls,
+					variants: {
+						rest: { scale: 1 },
+						tap: { scale: tap ? 1.15 : 1 }
+					},
+					transition: presets.press.transition
+				})
+			})
+		})
+	}) : /* @__PURE__ */ jsx(Switch$1.Root, {
 		id: sid,
 		name,
 		checked,
@@ -3518,8 +3914,8 @@ function Switch({ checked, defaultChecked, onCheckedChange, label, description,
 		"aria-label": aria["aria-label"],
 		"data-touch": "expanded",
 		"data-rendra": "SWT-001",
-		className: "relative inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary max-md:before:absolute max-md:before:-inset-3",
-		children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "pointer-events-none block size-icon-md rounded-full bg-card shadow-sm transition-transform duration-200 ease-out data-[state=checked]:translate-x-6" })
+		className: rootCls,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: thumbCls })
 	});
 	if (!label) return control;
 	return /* @__PURE__ */ jsxs("label", {
@@ -3586,7 +3982,7 @@ function DataToolbar({ search, filters, filterCount = 0, onClearFilters, chips =
 					"aria-label": search.placeholder ?? "Buscar",
 					type: "search",
 					className: "md:w-3xs lg:w-sm"
-				}), isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [(hasPanel || primaryAction) && /* @__PURE__ */ jsxs("div", {
+				}), isMobile ? /* @__PURE__ */ jsxs(Fragment$1, { children: [(hasPanel || primaryAction) && /* @__PURE__ */ jsxs("div", {
 					className: cn("grid gap-3", hasPanel && primaryAction ? "grid-actions-2" : "grid-cols-1"),
 					children: [hasPanel && filterButton(() => setDrawer(true)), primaryAction]
 				}), actions && /* @__PURE__ */ jsx("div", {
@@ -4352,7 +4748,7 @@ var Select = forwardRef(function Select(props, ref) {
 			}),
 			/* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": true,
-				className: cn("size-icon-sm shrink-0 text-muted-foreground transition-transform duration-200", open && "rotate-180")
+				className: cn("size-icon-sm shrink-0 text-muted-foreground transition-transform duration-(--rendra-duration-base) ease-move", open && "rotate-180")
 			})
 		]
 	});
@@ -4500,6 +4896,8 @@ var Select = forwardRef(function Select(props, ref) {
 });
 //#endregion
 //#region src/components/ui/tabs.tsx
+/** Contador de instâncias, só para o `layoutId` do indicador (ver `indicatorId`). */
+var tabsCreated = 0;
 /**
 * Tabs único. Se as abas não couberem na largura, a mesma lista vira um Select
 * (nunca rolagem lateral). A troca é medida no próprio contêiner, não na tela.
@@ -4524,9 +4922,48 @@ function Tabs({ items, value, defaultValue, onChange, variant = "line", classNam
 		ro.observe(box);
 		return () => ro.disconnect();
 	}, [items, variant]);
-	const trigger = cn("inline-flex min-h-touch shrink-0 cursor-pointer items-center justify-center gap-2 px-3 text-sm font-medium whitespace-nowrap transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 md:min-h-0 [&_svg]:size-icon-sm", variant === "line" ? "-mb-px border-b-2 border-transparent py-3 text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground" : "rounded-item py-2 text-muted-foreground hover:bg-card/60 hover:text-foreground data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm");
+	const presets = useMotionPresets();
+	const on = useLayoutReady();
+	const listRef = useRef(null);
+	const [clip, setClip] = useState({
+		l: 0,
+		r: 0
+	});
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		if (!on || !list) return;
+		const measure = () => {
+			const active = list.querySelector("[role=\"tab\"][data-state=\"active\"]");
+			if (!active) return;
+			const l = active.offsetLeft;
+			const r = list.offsetWidth - l - active.offsetWidth;
+			setClip((prev) => prev.l === l && prev.r === r ? prev : {
+				l,
+				r
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(list);
+		return () => ro.disconnect();
+	}, [
+		on,
+		current,
+		items,
+		variant,
+		overflow
+	]);
+	const [indicatorId] = useState(() => `rendra-tabs-${++tabsCreated}`);
+	const trigger = cn("inline-flex min-h-touch shrink-0 cursor-pointer items-center justify-center gap-2 px-3 text-sm font-medium whitespace-nowrap transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 md:min-h-0 [&_svg]:size-icon-sm", variant === "line" ? on ? "relative -mb-px border-b-2 border-transparent py-3 text-muted-foreground hover:text-foreground" : "-mb-px border-b-2 border-transparent py-3 text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground" : on ? "relative isolate rounded-item py-2 text-muted-foreground hover:bg-card/60 hover:text-foreground" : "rounded-item py-2 text-muted-foreground hover:bg-card/60 hover:text-foreground data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm");
+	const indicator = /* @__PURE__ */ jsx(m.span, {
+		layoutId: indicatorId,
+		"data-indicator": "tabs",
+		"aria-hidden": true,
+		transition: presets.move,
+		className: variant === "line" ? "absolute inset-x-0 top-full border-b-2 border-primary" : "absolute inset-0 -z-10 rounded-item bg-card shadow-sm"
+	});
 	const list = cn("flex", variant === "line" ? "gap-2 border-b" : "gap-1 rounded-control bg-muted p-1");
-	const label = (it) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	const label = (it) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		it.icon,
 		it.label,
 		it.count !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -4559,16 +4996,29 @@ function Tabs({ items, value, defaultValue, onChange, variant = "line", classNam
 					label: it.count !== void 0 ? `${it.label} (${it.count})` : it.label,
 					disabled: it.disabled
 				}))
-			}) : /* @__PURE__ */ jsx(Tabs$1.List, {
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tabs$1.List, {
+				ref: listRef,
 				"aria-label": aria["aria-label"],
 				className: list,
-				children: items.map((it) => /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+				children: items.map((it) => /* @__PURE__ */ jsxs(Tabs$1.Trigger, {
 					value: it.value,
 					disabled: it.disabled,
 					className: trigger,
+					children: [on && current === it.value && indicator, label(it)]
+				}, it.value))
+			}), on && /* @__PURE__ */ jsx("div", {
+				"data-tabs-copy": true,
+				"aria-hidden": true,
+				className: cn(list, "pointer-events-none absolute inset-0 border-transparent bg-transparent text-foreground tabs-clip"),
+				style: {
+					"--tabs-l": `${clip.l}px`,
+					"--tabs-r": `${clip.r}px`
+				},
+				children: items.map((it) => /* @__PURE__ */ jsx("span", {
+					className: cn(trigger, "text-foreground"),
 					children: label(it)
 				}, it.value))
-			})]
+			})] })]
 		}), items.map((it) => /* @__PURE__ */ jsx(Tabs$1.Content, {
 			value: it.value,
 			className: "min-w-0 outline-none",
@@ -5055,6 +5505,8 @@ function LoadMore({ onVisible }) {
 		children: "Carregando mais cards..."
 	});
 }
+/** Contador de quadros, só para o `layoutId` dos cards em `on` (um prefixo por instância). */
+var boardsCreated = 0;
 var dotTone = {
 	neutral: "bg-muted-foreground",
 	primary: "bg-primary",
@@ -5075,7 +5527,7 @@ var targetIconTone = {
 };
 function CardBody({ card, valueFields = [], formatValue, withHandle }) {
 	const shown = valueFields.slice(0, 2);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("span", {
 			className: "flex flex-wrap gap-1",
 			children: card.tags.map((t) => /* @__PURE__ */ jsx(Badge, {
@@ -5177,6 +5629,10 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 }), pageSize = 20, visibleColumns = 5, onLoadMore, hasMore, dropTargets, onDropTarget, className, ...aria }) {
 	const code = resolveCatalogCode("Kanban", { hasDropTargets: Boolean(dropTargets?.length) });
 	const { isMobile } = useBreakpoint();
+	const motion = useMotionMode();
+	const ready = useLayoutReady();
+	const presets = useMotionPresets();
+	const [boardId] = useState(() => `rendra-kanban-${++boardsCreated}`);
 	const boardRef = useFillHeight();
 	useEffect(() => {
 		const el = boardRef.current;
@@ -5261,7 +5717,7 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			align: "end",
 			children: [
-				otherColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Mover para" }), otherColumns.map((c) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				otherColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Mover para" }), otherColumns.map((c) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
 					onSelect: () => onCardMove?.(card.id, c.id, inColumn(c.id).length),
 					children: [/* @__PURE__ */ jsx(ArrowRightLeft, {}), c.title]
 				}, c.id))] }),
@@ -5323,36 +5779,39 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 	});
 	const canTouchDrag = Boolean(onCardMove) || Boolean(dropTargets?.length && onDropTarget);
 	const showHandle = isMobile && canTouchDrag;
-	const cardItem = (card, index) => /* @__PURE__ */ jsxs("li", {
-		"data-kanban-card": card.id,
-		draggable: !isMobile && Boolean(onCardMove),
-		onDragStart: (e) => {
+	const cardItem = (card, index) => {
+		const dragStart = (dataTransfer) => {
 			setDragging(card.id);
-			e.dataTransfer.effectAllowed = "move";
-			e.dataTransfer.setData("text/plain", card.id);
-		},
-		onDragEnd: () => {
+			if (!dataTransfer) return;
+			dataTransfer.effectAllowed = "move";
+			dataTransfer.setData("text/plain", card.id);
+		};
+		const dragEnd = () => {
 			setDragging(null);
 			setOver(null);
-		},
-		onDragOver: (e) => {
-			if (!dragging) return;
-			e.preventDefault();
-			e.stopPropagation();
-			const r = e.currentTarget.getBoundingClientRect();
-			const after = e.clientY > r.top + r.height / 2;
-			setOver({
-				column: card.columnId,
-				index: index + (after ? 1 : 0)
-			});
-		},
-		onDrop: (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			if (over) drop(over.column, over.index);
-		},
-		className: cn("relative flex rounded-block border bg-card p-3 shadow-sm transition-[box-shadow,opacity]", !isMobile && onCardMove && "cursor-grab active:cursor-grabbing", (dragging === card.id || touchDrag?.cardId === card.id) && "opacity-50", over?.column === card.columnId && over.index === index && dragging !== card.id && "ring-2 ring-ring ring-offset-2 ring-offset-muted"),
-		children: [
+		};
+		const common = {
+			"data-kanban-card": card.id,
+			draggable: !isMobile && Boolean(onCardMove),
+			onDragOver: (e) => {
+				if (!dragging) return;
+				e.preventDefault();
+				e.stopPropagation();
+				const r = e.currentTarget.getBoundingClientRect();
+				const after = e.clientY > r.top + r.height / 2;
+				setOver({
+					column: card.columnId,
+					index: index + (after ? 1 : 0)
+				});
+			},
+			onDrop: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				if (over) drop(over.column, over.index);
+			},
+			className: cn("relative flex rounded-block border bg-card p-3 shadow-sm transition-[box-shadow,opacity]", !isMobile && onCardMove && "cursor-grab active:cursor-grabbing", (dragging === card.id || touchDrag?.cardId === card.id) && "opacity-50", over?.column === card.columnId && over.index === index && dragging !== card.id && "ring-2 ring-ring ring-offset-2 ring-offset-muted")
+		};
+		const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			onCardClick ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => onCardClick(card),
@@ -5386,8 +5845,38 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 				className: "absolute top-2 right-2 z-10",
 				children: moveMenu(card)
 			})
-		]
-	}, card.id);
+		] });
+		if (motion === "on") {
+			const layout = layoutEnabled({
+				mode: motion,
+				ready,
+				dragging: touchDrag !== null
+			});
+			return /* @__PURE__ */ jsx(m.li, {
+				ref: (el) => {
+					if (!el) return;
+					const onStart = (e) => dragStart(e.dataTransfer);
+					el.addEventListener("dragstart", onStart);
+					el.addEventListener("dragend", dragEnd);
+					return () => {
+						el.removeEventListener("dragstart", onStart);
+						el.removeEventListener("dragend", dragEnd);
+					};
+				},
+				layout,
+				layoutId: layout ? `${boardId}-${card.id}` : void 0,
+				transition: presets.settle,
+				...common,
+				children: body
+			}, card.id);
+		}
+		return /* @__PURE__ */ jsx("li", {
+			onDragStart: (e) => dragStart(e.dataTransfer),
+			onDragEnd: dragEnd,
+			...common,
+			children: body
+		}, card.id);
+	};
 	const totals = (col) => (valueFields ?? []).slice(0, 2).map((f) => ({
 		...f,
 		total: inColumn(col.id).reduce((sum, c) => sum + (c.values?.[f.key] ?? 0), 0)
@@ -5469,7 +5958,7 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 						else onLoadMore?.(col.id);
 					} })
 				]
-			})
+			}, String(ready))
 		});
 	};
 	if (isMobile) return /* @__PURE__ */ jsxs("div", {
@@ -5590,14 +6079,26 @@ function List({ items, divided = true, empty, className, onReorder, itemLabel =
 		onReorder: onReorder && ((sorted) => onReorder(sorted.map((s) => s.data)))
 	});
 	const sortableEnabled = Boolean(onReorder);
+	const motion = useMotionMode();
+	const ready = useLayoutReady();
+	const presets = useMotionPresets();
+	const Item = motion === "on" ? m.li : "li";
+	const itemMotion = motion === "on" ? {
+		layout: layoutEnabled({
+			mode: motion,
+			ready,
+			dragging: sortable.draggingId !== null
+		}),
+		transition: presets.move
+	} : {};
 	const code = resolveCatalogCode("List", { sortable: sortableEnabled });
-	if (items.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+	if (items.length === 0 && empty) return /* @__PURE__ */ jsx(Fragment$1, { children: empty });
 	return /* @__PURE__ */ jsx("ul", {
 		"data-rendra": code,
 		className: cn("flex w-full min-w-0 flex-col", divided && "divide-y", className),
 		children: items.map((it) => {
 			const interactive = Boolean(it.to || it.onClick);
-			const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+			const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				it.leading && /* @__PURE__ */ jsx("span", {
 					className: "flex shrink-0",
 					children: it.leading
@@ -5633,8 +6134,9 @@ function List({ items, divided = true, empty, className, onReorder, itemLabel =
 				label: `Reordenar ${label}`,
 				sortable
 			});
-			return /* @__PURE__ */ jsxs("li", {
+			return /* @__PURE__ */ jsxs(Item, {
 				...sortableEnabled ? sortable.itemProps(it.id) : {},
+				...itemMotion,
 				className: cn("flex min-w-0 items-center gap-1", sortable.draggingId === it.id && "opacity-50"),
 				children: [handle, it.to ? /* @__PURE__ */ jsx(Link, {
 					to: it.to,
@@ -5651,7 +6153,7 @@ function List({ items, divided = true, empty, className, onReorder, itemLabel =
 				})]
 			}, it.id);
 		})
-	});
+	}, String(ready));
 }
 //#endregion
 //#region src/components/ui/otp-input.tsx
@@ -5661,6 +6163,9 @@ function List({ items, divided = true, empty, className, onReorder, itemLabel =
 */
 function OtpInput({ length = 6, value, onChange, onComplete, invalid, disabled, id, ...aria }) {
 	const refs = useRef([]);
+	const on = useMotionMode() === "on";
+	const presets = useMotionPresets();
+	const Cell = on ? m.input : "input";
 	const digits = Array.from({ length }, (_, i) => value[i] ?? "");
 	const set = (next) => {
 		const clean = next.replace(/\D/g, "").slice(0, length);
@@ -5686,7 +6191,8 @@ function OtpInput({ length = 6, value, onChange, onComplete, invalid, disabled,
 		"data-rendra": "OTP-001",
 		className: "grid w-full max-w-sm grid-cols-otp gap-1 sm:gap-2",
 		style: { "--otp": length },
-		children: digits.map((d, i) => /* @__PURE__ */ jsx("input", {
+		children: digits.map((d, i) => /* @__PURE__ */ jsx(Cell, {
+			...on ? { animate: d ? presets.bump : void 0 } : {},
 			ref: (el) => {
 				refs.current[i] = el;
 			},
@@ -5851,7 +6357,7 @@ function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, pag
 }
 //#endregion
 //#region src/components/ui/progress.tsx
-var bar = cva("h-full rounded-full transition-[width] duration-300 ease-out", {
+var bar = cva("h-full rounded-full transition-[width] duration-(--rendra-duration-base) ease-linear", {
 	variants: { tone: {
 		primary: "bg-primary",
 		brand: "bg-gradient-accent",
@@ -5870,6 +6376,7 @@ function Progress({ value, size = "md", tone, showValue, label, className }) {
 		children: [/* @__PURE__ */ jsx(Progress$1.Root, {
 			value: indeterminate ? null : value,
 			"aria-label": label,
+			"data-allow-overflow": true,
 			className: cn("relative w-full overflow-hidden rounded-full bg-muted", size === "sm" ? "h-1" : "h-2"),
 			children: /* @__PURE__ */ jsx(Progress$1.Indicator, {
 				className: cn(bar({ tone }), indeterminate ? "absolute inset-y-0 left-0 w-1/3 progress-slide" : "w-progress"),
@@ -6709,26 +7216,60 @@ var cols = {
 	2: "md:grid-cols-2",
 	3: "md:grid-cols-3"
 };
+/**
+* O item do Radix. Em `on` ele é um `m.button` (asChild) que responde ao toque (whileTap 0,97,
+* em `press`); em `off` é o `R.Item` de sempre, sem nó novo.
+*/
+function Item({ on, children, ...props }) {
+	const presets = useMotionPresets();
+	if (!on) return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(m.button, {
+			type: "button",
+			whileTap: presets.press.whileTap,
+			transition: presets.press.transition,
+			children
+		})
+	});
+}
 /** Radio único: em lista ou em cards, por prop. */
 function RadioGroup({ options, value, defaultValue, onChange, variant = "list", columns = 2, orientation = "vertical", invalid, disabled, id, name, ...aria }) {
-	const dot = /* @__PURE__ */ jsx("span", {
+	const on = useMotionMode() === "on";
+	const presets = useMotionPresets();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value ?? inner;
+	const dotFor = (optionValue) => /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: cn("flex size-icon-md shrink-0 items-center justify-center rounded-full border border-input bg-card transition-colors group-data-[state=checked]:border-primary", invalid && "border-destructive"),
-		children: /* @__PURE__ */ jsx("span", { className: "size-2 scale-0 rounded-full bg-primary transition-transform duration-150 group-data-[state=checked]:scale-100" })
+		children: on ? /* @__PURE__ */ jsx(m.span, {
+			className: "size-2 rounded-full bg-primary",
+			initial: false,
+			animate: current === optionValue ? presets.indicator.animate : presets.indicator.initial,
+			transition: presets.indicator.transition
+		}) : /* @__PURE__ */ jsx("span", { className: "size-2 scale-90 rounded-full bg-primary opacity-0 transition-[transform,opacity] duration-(--rendra-duration-fast) ease-out group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100" })
 	});
 	return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
 		id,
 		name,
-		value,
-		defaultValue,
-		onValueChange: onChange,
+		value: on ? current : value,
+		defaultValue: on ? void 0 : defaultValue,
+		onValueChange: (v) => {
+			if (on) setInner(v);
+			onChange?.(v);
+		},
 		disabled,
 		"aria-invalid": invalid || void 0,
 		"aria-describedby": aria["aria-describedby"],
 		"aria-label": aria["aria-label"],
 		"data-rendra": resolveCatalogCode("RadioGroup", { variant }),
 		className: cn(variant === "cards" ? cn("grid grid-cols-1 gap-3", cols[columns]) : orientation === "horizontal" ? "flex flex-col sm:flex-row sm:flex-wrap sm:gap-x-6" : "flex flex-col"),
-		children: options.map((o) => variant === "cards" ? /* @__PURE__ */ jsxs(RadioGroup$1.Item, {
+		children: options.map((o) => variant === "cards" ? /* @__PURE__ */ jsxs(Item, {
+			on,
 			value: o.value,
 			disabled: o.disabled,
 			className: cn("group relative flex cursor-pointer items-start gap-3 rounded-control border bg-card p-4 text-left transition-[border-color,box-shadow,background-color]", "hover:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary-soft data-[state=checked]:ring-1 data-[state=checked]:ring-primary", "disabled:cursor-not-allowed disabled:opacity-50", invalid && "border-destructive"),
@@ -6747,15 +7288,16 @@ function RadioGroup({ options, value, defaultValue, onChange, variant = "list",
 						children: o.description
 					})]
 				}),
-				dot
+				dotFor(o.value)
 			]
 		}, o.value) : /* @__PURE__ */ jsxs("label", {
 			className: cn("flex min-h-touch cursor-pointer items-start gap-3 py-3 md:min-h-0 md:py-1", o.disabled && "cursor-not-allowed opacity-60"),
-			children: [/* @__PURE__ */ jsx(RadioGroup$1.Item, {
+			children: [/* @__PURE__ */ jsx(Item, {
+				on,
 				value: o.value,
 				disabled: o.disabled,
 				className: "group flex pt-px outline-none focus-visible:[&>span]:focus-ring",
-				children: dot
+				children: dotFor(o.value)
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "flex min-w-0 flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("span", {
@@ -6990,18 +7532,65 @@ function Separator({ orientation = "horizontal", label, className }) {
 }
 //#endregion
 //#region src/components/ui/skeleton.tsx
-/** Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. */
+/**
+* Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. Em `off` pulsa
+* (animate-pulse do Tailwind); em `on` um brilho suave cruza o bloco (skeleton-shimmer, em
+* globals.css: transform, tempo e curva pelos tokens, parado com "reduzir movimento").
+*/
 function Skeleton({ className, ...props }) {
+	const on = useMotionMode() === "on";
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
 		"data-slot": "skeleton",
 		"data-rendra": "SKEL-001",
-		className: cn("animate-pulse rounded-block bg-muted", className),
+		className: cn(on ? "skeleton-shimmer" : "animate-pulse", "rounded-block bg-muted", className),
 		...props
 	});
 }
 //#endregion
 //#region src/components/ui/stat-card.tsx
+/** Contagem de 0 até o valor, com o formato do texto original; no fim mostra o `value` exato. */
+function Counter({ parsed, value }) {
+	const presets = useMotionPresets();
+	const progress = useMotionValue(0);
+	const text = useTransform(progress, (n) => formatLike(parsed, n));
+	const [done, setDone] = useState(false);
+	useEffect(() => {
+		const controls = animate(progress, parsed.value, {
+			duration: presets.tokens.reveal.count,
+			ease: presets.tokens.ease.out,
+			onComplete: () => setDone(true)
+		});
+		return () => controls.stop();
+	}, [
+		progress,
+		parsed.value,
+		presets.tokens
+	]);
+	return /* @__PURE__ */ jsx(m.span, {
+		...presets.fade,
+		children: done ? value : text
+	});
+}
+/**
+* O valor do card. Em `off`, o valor como sempre veio. Em `on`, número (ou texto pt-BR com
+* número) conta até o valor; qualquer outra coisa só aparece com fade. Com "reduzir movimento"
+* o valor final aparece direto.
+*/
+function StatValue({ value }) {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const parsed = useMemo(() => parseLocaleNumber$1(value), [value]);
+	if (motion !== "on") return /* @__PURE__ */ jsx(Fragment$1, { children: value });
+	if (!parsed || presets.reduced) return /* @__PURE__ */ jsx(m.span, {
+		...presets.fade,
+		children: value
+	});
+	return /* @__PURE__ */ jsx(Counter, {
+		parsed,
+		value
+	}, String(value));
+}
 /** Card de indicador. Em grid: 1 coluna no mobile, 2 para cards pequenos. */
 function StatCard({ label, value, change, changeLabel, inverse, icon, highlight, loading, footer, className }) {
 	const up = (change ?? 0) > 0;
@@ -7023,9 +7612,9 @@ function StatCard({ label, value, change, changeLabel, inverse, icon, highlight,
 					children: icon
 				})]
 			}),
-			loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "text-2xl font-semibold tracking-tight tabular-nums @xs:text-3xl",
-				children: value
+				children: /* @__PURE__ */ jsx(StatValue, { value })
 			}), change !== void 0 && /* @__PURE__ */ jsxs("span", {
 				className: "flex flex-wrap items-center gap-1 text-xs",
 				children: [/* @__PURE__ */ jsxs("span", {
@@ -7109,7 +7698,7 @@ function CellContent({ col, row, title }) {
 		className: cn("rounded-item font-medium text-foreground underline-offset-4 transition-colors outline-none hover:text-primary-text hover:underline focus-visible:ring-2 focus-visible:ring-ring", title && "inline-flex min-h-touch items-center md:min-h-0"),
 		children: main
 	}) : main;
-	if (!extra.length) return /* @__PURE__ */ jsx(Fragment, { children: value });
+	if (!extra.length) return /* @__PURE__ */ jsx(Fragment$1, { children: value });
 	return /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 flex-col",
 		children: [/* @__PURE__ */ jsx("span", {
@@ -7189,8 +7778,68 @@ var tableFeatureSet = tableFeatures({
 * Mobile (< 768px): a mesma tabela vira lista de cards, sem rolagem horizontal.
 * Desktop: tabela larga rola na horizontal só dentro do próprio contêiner.
 */
+/**
+* Bloco "Ver detalhes" do card no celular. Em `on` a altura abre e fecha pelos presets e o
+* conteúdo fechado sai do DOM; em `off` é o Collapsible de sempre, com as animações em CSS.
+*/
+function MobileDetails({ children }) {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const [open, setOpen] = useState(false);
+	const trigger = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		className: "group flex min-h-touch cursor-pointer items-center gap-1 text-sm font-medium text-primary-text",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "group-data-[state=open]:hidden",
+				children: "Ver detalhes"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden group-data-[state=open]:inline",
+				children: "Ocultar detalhes"
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, {
+				className: "size-icon-sm transition-transform duration-(--rendra-duration-base) ease-move group-data-[state=open]:rotate-180",
+				"aria-hidden": true
+			})
+		]
+	});
+	if (motion === "on") return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [trigger, /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: open && /* @__PURE__ */ jsx(Collapsible.Content, {
+				forceMount: true,
+				asChild: true,
+				children: /* @__PURE__ */ jsx(m.div, {
+					className: "overflow-hidden",
+					initial: {
+						height: 0,
+						opacity: 0
+					},
+					animate: {
+						height: "auto",
+						opacity: 1
+					},
+					exit: {
+						height: 0,
+						opacity: 0
+					},
+					transition: presets.fade.transition,
+					children
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Root, { children: [trigger, /* @__PURE__ */ jsx(Collapsible.Content, {
+		className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+		children
+	})] });
+}
 function Table({ data: dataProp, source, queryKey = "", columns: columnsProp, statusLast = true, getRowId, selectable, expandable, sortable = true, globalFilter, columnVisibility, bulkActions, bulkMenu, rowActions, density = "default", loading, error, onRetry, empty, pageSize: pageSizeProp = 15, mobilePagination = "pages", toolbar, ...aria }) {
 	const { isMobile } = useBreakpoint();
+	const on = useMotionMode() === "on";
+	const presets = useMotionPresets();
 	const columns = useMemo(() => statusLast ? [...columnsProp.filter((c) => c.kind !== "badge"), ...columnsProp.filter((c) => c.kind === "badge")] : columnsProp, [columnsProp, statusLast]);
 	const [sorting, setSorting] = useState([]);
 	const [rowSelection, setRowSelection] = useState({});
@@ -7357,7 +8006,7 @@ function Table({ data: dataProp, source, queryKey = "", columns: columnsProp, st
 			label: `${c.header} (decrescente)`
 		}])
 	}) : void 0;
-	const selectionBar = selectable && selectedRows.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+	const selectionBar = selectable && selectedRows.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("span", {
 			className: "text-sm font-medium tabular-nums",
 			children: [
@@ -7448,43 +8097,24 @@ function Table({ data: dataProp, source, queryKey = "", columns: columnsProp, st
 								}, c.id))]
 							})]
 						}),
-						(secondary.length > 0 || expandable) && /* @__PURE__ */ jsxs(Collapsible.Root, { children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-							className: "group flex min-h-touch cursor-pointer items-center gap-1 text-sm font-medium text-primary-text",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "group-data-[state=open]:hidden",
-									children: "Ver detalhes"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "hidden group-data-[state=open]:inline",
-									children: "Ocultar detalhes"
-								}),
-								/* @__PURE__ */ jsx(ChevronDown, {
-									className: "size-icon-sm transition-transform duration-200 group-data-[state=open]:rotate-180",
-									"aria-hidden": true
-								})
-							]
-						}), /* @__PURE__ */ jsxs(Collapsible.Content, {
-							className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
-							children: [/* @__PURE__ */ jsx("dl", {
-								className: "grid grid-cols-1 gap-3 pt-2 sm:grid-cols-2",
-								children: secondary.map((c) => /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-col gap-1",
-									children: [/* @__PURE__ */ jsx("dt", {
-										className: "text-xs text-muted-foreground",
-										children: c.header
-									}), /* @__PURE__ */ jsx("dd", {
-										className: "text-sm",
-										children: /* @__PURE__ */ jsx(CellContent, {
-											col: c,
-											row
-										})
-									})]
-								}, c.id))
-							}), expandable && /* @__PURE__ */ jsx("div", {
-								className: "pt-3",
-								children: expandable(row)
-							})]
+						(secondary.length > 0 || expandable) && /* @__PURE__ */ jsxs(MobileDetails, { children: [/* @__PURE__ */ jsx("dl", {
+							className: "grid grid-cols-1 gap-3 pt-2 sm:grid-cols-2",
+							children: secondary.map((c) => /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ jsx("dt", {
+									className: "text-xs text-muted-foreground",
+									children: c.header
+								}), /* @__PURE__ */ jsx("dd", {
+									className: "text-sm",
+									children: /* @__PURE__ */ jsx(CellContent, {
+										col: c,
+										row
+									})
+								})]
+							}, c.id))
+						}), expandable && /* @__PURE__ */ jsx("div", {
+							className: "pt-3",
+							children: expandable(row)
 						})] }),
 						rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx("div", {
 							className: "border-t pt-3",
@@ -7574,59 +8204,92 @@ function Table({ data: dataProp, source, queryKey = "", columns: columnsProp, st
 					})
 				] }, i)) : rows.map((r) => {
 					const row = r.original;
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
-						"data-state": r.getIsSelected() ? "selected" : void 0,
-						className: "group/row transition-colors hover:bg-muted/40 data-[state=selected]:bg-primary-soft/60",
-						children: [
-							selectable && /* @__PURE__ */ jsx("td", {
-								className: "pr-2 pl-4",
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									"aria-label": "Selecionar linha",
-									checked: r.getIsSelected(),
-									onCheckedChange: (v) => r.toggleSelected(v)
-								})
-							}),
-							expandable && /* @__PURE__ */ jsx("td", {
-								className: "px-2",
-								children: /* @__PURE__ */ jsx(Button, {
-									variant: "ghost",
-									size: "sm",
-									iconOnly: true,
-									"aria-label": r.getIsExpanded() ? "Recolher linha" : "Expandir linha",
-									"aria-expanded": r.getIsExpanded(),
-									onClick: () => r.toggleExpanded(),
-									children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-transform", r.getIsExpanded() && "rotate-180") })
-								})
-							}),
-							visibleCols.map((c) => {
-								const align = alignOf(c);
-								return /* @__PURE__ */ jsx("td", {
-									className: cn("px-4 align-middle", pad, align === "right" ? "text-right tabular-nums" : align === "center" ? "text-center" : "text-left", c.width && minWidth[c.width]),
-									children: /* @__PURE__ */ jsx("div", {
-										className: cn(clamp[c.lines ?? 2], align === "right" && "ml-auto"),
-										children: /* @__PURE__ */ jsx(CellContent, {
-											col: c,
-											row
+					return /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsxs("tr", {
+							"data-state": r.getIsSelected() ? "selected" : void 0,
+							className: "group/row transition-colors hover:bg-muted/40 data-[state=selected]:bg-primary-soft/60",
+							children: [
+								selectable && /* @__PURE__ */ jsx("td", {
+									className: "pr-2 pl-4",
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										"aria-label": "Selecionar linha",
+										checked: r.getIsSelected(),
+										onCheckedChange: (v) => r.toggleSelected(v)
+									})
+								}),
+								expandable && /* @__PURE__ */ jsx("td", {
+									className: "px-2",
+									children: /* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										iconOnly: true,
+										"aria-label": r.getIsExpanded() ? "Recolher linha" : "Expandir linha",
+										"aria-expanded": r.getIsExpanded(),
+										onClick: () => r.toggleExpanded(),
+										children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("transition-transform", r.getIsExpanded() && "rotate-180") })
+									})
+								}),
+								visibleCols.map((c) => {
+									const align = alignOf(c);
+									return /* @__PURE__ */ jsx("td", {
+										className: cn("px-4 align-middle", pad, align === "right" ? "text-right tabular-nums" : align === "center" ? "text-center" : "text-left", c.width && minWidth[c.width]),
+										children: /* @__PURE__ */ jsx("div", {
+											className: cn(clamp[c.lines ?? 2], align === "right" && "ml-auto"),
+											children: /* @__PURE__ */ jsx(CellContent, {
+												col: c,
+												row
+											})
 										})
+									}, c.id);
+								}),
+								rowActions && /* @__PURE__ */ jsx("td", {
+									className: "sticky right-0 w-24 bg-card px-4 group-hover/row:bg-muted group-data-[state=selected]/row:bg-primary-soft",
+									children: /* @__PURE__ */ jsx(RowActions, {
+										row,
+										actions: rowActions
 									})
-								}, c.id);
-							}),
-							rowActions && /* @__PURE__ */ jsx("td", {
-								className: "sticky right-0 w-24 bg-card px-4 group-hover/row:bg-muted group-data-[state=selected]/row:bg-primary-soft",
-								children: /* @__PURE__ */ jsx(RowActions, {
-									row,
-									actions: rowActions
 								})
+							]
+						}),
+						expandable && !on && r.getIsExpanded() && /* @__PURE__ */ jsx("tr", {
+							className: "bg-muted/30",
+							children: /* @__PURE__ */ jsx("td", {
+								colSpan: visibleCols.length + (selectable ? 1 : 0) + 1 + (rowActions ? 1 : 0),
+								className: "px-4 py-4",
+								children: expandable(row)
 							})
-						]
-					}), expandable && r.getIsExpanded() && /* @__PURE__ */ jsx("tr", {
-						className: "bg-muted/30",
-						children: /* @__PURE__ */ jsx("td", {
-							colSpan: visibleCols.length + (selectable ? 1 : 0) + 1 + (rowActions ? 1 : 0),
-							className: "px-4 py-4",
-							children: expandable(row)
+						}),
+						expandable && on && /* @__PURE__ */ jsx(AnimatePresence, {
+							initial: false,
+							children: r.getIsExpanded() && /* @__PURE__ */ jsx("tr", {
+								className: "bg-muted/30",
+								children: /* @__PURE__ */ jsx("td", {
+									colSpan: visibleCols.length + (selectable ? 1 : 0) + 1 + (rowActions ? 1 : 0),
+									className: "px-4",
+									children: /* @__PURE__ */ jsx(m.div, {
+										className: "overflow-hidden",
+										initial: {
+											height: 0,
+											opacity: 0
+										},
+										animate: {
+											height: "auto",
+											opacity: 1
+										},
+										exit: {
+											height: 0,
+											opacity: 0
+										},
+										transition: presets.fade.transition,
+										children: /* @__PURE__ */ jsx("div", {
+											className: "py-4",
+											children: expandable(row)
+										})
+									})
+								})
+							}, "expanded")
 						})
-					})] }, r.id);
+					] }, r.id);
 				})
 			})]
 		})
@@ -7753,14 +8416,25 @@ var statusTextTone = {
 };
 /** Linha do tempo única, com eventos em ordem e tom semântico por evento. */
 function Timeline({ events, className }) {
+	const on = useMotionMode() === "on";
+	const presets = useMotionPresets();
+	const Item = on ? m.li : "li";
+	const enter = presets.slide("bottom", "short");
 	return /* @__PURE__ */ jsx("ol", {
 		"data-rendra": "TLN-001",
 		className: cn("@container flex flex-col", className),
 		children: events.map((e, i) => {
 			const StatusIcon = e.status ? statusIcon[e.status] : null;
 			const tone = e.tone ?? (e.status ? statusTone[e.status] : "neutral");
-			return /* @__PURE__ */ jsxs("li", {
+			return /* @__PURE__ */ jsxs(Item, {
 				className: "relative flex gap-3 pb-6 last:pb-0",
+				...on ? {
+					...enter,
+					transition: {
+						...enter.transition,
+						...presets.stagger(i)
+					}
+				} : {},
 				children: [
 					i < events.length - 1 && /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
@@ -7777,7 +8451,7 @@ function Timeline({ events, className }) {
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex min-w-0 flex-col gap-1 @sm:flex-row @sm:items-baseline @sm:justify-between @sm:gap-3",
 								children: [/* @__PURE__ */ jsx("span", {
-									className: "text-sm font-medium",
+									className: "text-sm font-medium wrap-break-word",
 									children: e.title
 								}), /* @__PURE__ */ jsx("time", {
 									className: "shrink-0 text-xs text-muted-foreground tabular-nums",
@@ -7785,7 +8459,7 @@ function Timeline({ events, className }) {
 								})]
 							}),
 							e.description && /* @__PURE__ */ jsx("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm wrap-break-word text-muted-foreground",
 								children: e.description
 							}),
 							e.status && StatusIcon && /* @__PURE__ */ jsxs("span", {
@@ -7822,10 +8496,10 @@ function show(type, title, opts = {}) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 flex-col gap-1",
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-semibold",
+					className: "text-sm font-semibold wrap-break-word",
 					children: title
 				}), opts.description && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm wrap-break-word text-muted-foreground",
 					children: opts.description
 				})]
 			}),
@@ -8005,6 +8679,27 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 			onReorder?.(sorted.map((s) => s.id));
 		}
 	});
+	const motion = useMotionMode();
+	const ready = useLayoutReady();
+	const presets = useMotionPresets();
+	const Item = motion === "on" ? m.li : "li";
+	const itemMotion = motion === "on" ? {
+		...presets.fade,
+		layout: layoutEnabled({
+			mode: motion,
+			ready,
+			dragging: sortable.draggingId !== null
+		}),
+		transition: {
+			...presets.fade.transition,
+			layout: presets.move
+		}
+	} : {};
+	const animated = (nodes) => motion === "on" ? /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		initial: false,
+		children: nodes
+	}) : nodes;
 	const dropzone = !(maxItems !== void 0 && items.length + pendingCrop.length >= maxItems) && /* @__PURE__ */ jsxs("label", {
 		htmlFor: inputId,
 		onDragOver: (e) => {
@@ -8062,8 +8757,9 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 	const listView = items.length > 0 && /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-col divide-y rounded-control border bg-card",
 		"aria-live": "polite",
-		children: items.map((it) => /* @__PURE__ */ jsxs("li", {
+		children: animated(items.map((it) => /* @__PURE__ */ jsxs(Item, {
 			...onReorder ? sortable.itemProps(it.id) : {},
+			...itemMotion,
 			className: cn("flex items-center gap-3 p-3", sortable.draggingId === it.id && "opacity-50"),
 			children: [
 				handle(it),
@@ -8131,12 +8827,13 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 					children: /* @__PURE__ */ jsx(Trash2, {})
 				})
 			]
-		}, it.id))
-	});
+		}, it.id)))
+	}, String(ready));
 	const galleryView = items.length > 0 && /* @__PURE__ */ jsx("ul", {
 		className: "grid grid-cols-2 gap-3 md:grid-cols-3",
-		children: items.map((it) => /* @__PURE__ */ jsxs("li", {
+		children: animated(items.map((it) => /* @__PURE__ */ jsxs(Item, {
 			...onReorder ? sortable.itemProps(it.id) : {},
+			...itemMotion,
 			className: cn("relative flex aspect-square flex-col overflow-hidden rounded-control border bg-card", sortable.draggingId === it.id && "opacity-50"),
 			children: [
 				it.previewUrl && it.kind === "image" ? /* @__PURE__ */ jsx("img", {
@@ -8200,8 +8897,8 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 					})]
 				})
 			]
-		}, it.id))
-	});
+		}, it.id)))
+	}, String(ready));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-rendra": code,
 		className: "flex min-w-0 flex-col gap-3",
@@ -8247,6 +8944,8 @@ var statusLabel = {
 */
 function Stepper({ steps, current, errors = [], orientation = "horizontal", onStepClick, className }) {
 	const step = steps[current];
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-rendra": "WIZ-002",
 		className: cn("min-w-0", className),
@@ -8286,7 +8985,15 @@ function Stepper({ steps, current, errors = [], orientation = "horizontal", onSt
 				const clickable = onStepClick && st === "complete";
 				const circle = /* @__PURE__ */ jsx("span", {
 					className: cn("flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold tabular-nums transition-colors", st === "complete" && "border-primary bg-primary text-primary-foreground", st === "current" && "border-primary bg-card text-primary-text", st === "pending" && "border-border bg-card text-muted-foreground", st === "error" && "border-destructive bg-destructive text-destructive-foreground"),
-					children: st === "complete" ? /* @__PURE__ */ jsx(Check, {
+					children: st === "complete" ? motion === "on" ? /* @__PURE__ */ jsx(m.span, {
+						className: "flex",
+						...presets.pop,
+						children: /* @__PURE__ */ jsx(Check, {
+							className: "size-icon-sm",
+							strokeWidth: 3,
+							"aria-hidden": true
+						})
+					}) : /* @__PURE__ */ jsx(Check, {
 						className: "size-icon-sm",
 						strokeWidth: 3,
 						"aria-hidden": true
@@ -8368,7 +9075,23 @@ function Wizard({ steps, children, onValidateStep, onFinish, onCancel, cancelLab
 		setCurrent((c) => c + 1);
 		onSkip?.();
 	};
-	const body = /* @__PURE__ */ jsx("div", {
+	const motion = useMotionMode();
+	const presets = useMotionPresets();
+	const previous = useRef(current);
+	const direction = current >= previous.current ? 1 : -1;
+	previous.current = current;
+	const body = motion === "on" ? /* @__PURE__ */ jsx("div", {
+		className: "relative flex min-w-0 flex-col gap-6",
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ jsx(m.div, {
+				...presets.swap(direction),
+				className: "flex min-w-0 flex-col gap-6",
+				children: children[current]
+			}, current)
+		})
+	}) : /* @__PURE__ */ jsx("div", {
 		className: "flex min-w-0 flex-col gap-6",
 		children: children[current]
 	});
@@ -8768,7 +9491,7 @@ function MegaItem({ item }) {
 	const Link = useRendraLink();
 	const Icon = item.icon;
 	const active = item.to ? isActive(pathname, item.to) : false;
-	const head = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	const head = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: cn("flex size-control-md shrink-0 items-center justify-center rounded-control transition-colors", active ? "bg-primary text-primary-foreground" : "bg-primary-soft text-primary-soft-foreground group-hover/item:bg-primary group-hover/item:text-primary-foreground"),
 		children: /* @__PURE__ */ jsx(Icon, {
 			className: "size-icon-md",
@@ -9014,7 +9737,7 @@ function ModeItems() {
 }
 function LayoutItems() {
 	const { layout, setLayout, resetLayout } = useShell();
-	const radio = (key, title) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: title }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+	const radio = (key, title) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: title }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
 		value: layout[key],
 		onValueChange: (v) => setLayout(key, v),
 		children: layoutOptions[key].map((o) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
@@ -9023,10 +9746,10 @@ function LayoutItems() {
 		}, o.value))
 	})] });
 	const sidebar = layout.navigation === "sidebar";
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		radio("navigation", "Posição do menu"),
-		!sidebar && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), radio("topbarSubmenu", "Submenu")] }),
-		sidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+		!sidebar && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), radio("topbarSubmenu", "Submenu")] }),
+		sidebar && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 			radio("sidebar", "Sidebar"),
 			/* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
@@ -9085,7 +9808,7 @@ function UserMenu() {
 					children: user.email
 				})]
 			}),
-			workspaces && workspaces.items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+			workspaces && workspaces.items.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: workspaces.label ?? "Espaço" }),
 				/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
@@ -9097,7 +9820,7 @@ function UserMenu() {
 					}, w.id))
 				})
 			] }),
-			userMenuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), userMenuItems.map((item) => {
+			userMenuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), userMenuItems.map((item) => {
 				const Icon = item.icon;
 				return item.to ? /* @__PURE__ */ jsx(DropdownMenuItem, {
 					asChild: true,
@@ -9275,7 +9998,7 @@ function Header() {
 	const topbar = layout.navigation === "topbar";
 	const hasParent = Boolean(crumbs.length >= 2 && crumbs[crumbs.length - 2]?.to);
 	const menuInFooter = layout.bottomNav || hasParent;
-	const pageTitle = /* @__PURE__ */ jsxs(Fragment, { children: [headerLogo && /* @__PURE__ */ jsx("span", {
+	const pageTitle = /* @__PURE__ */ jsxs(Fragment$1, { children: [headerLogo && /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: "flex min-w-0 flex-1 items-center md:hidden",
 		children: headerLogo
@@ -9309,7 +10032,7 @@ function Header() {
 				onClick: () => setMobileNavOpen(true),
 				children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": true })
 			}),
-			topbar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			topbar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Link, {
 					to: "/",
 					"aria-label": `${brand.productName}, ir para o painel`,
@@ -9324,7 +10047,7 @@ function Header() {
 					className: "hidden min-w-0 flex-1 lg:flex lg:justify-center",
 					children: layout.topbarSubmenu === "mega" ? /* @__PURE__ */ jsx(MegaMenu, {}) : /* @__PURE__ */ jsx(TopNav, {})
 				})
-			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Tooltip, {
 					content: collapsed ? "Expandir menu" : "Recolher menu",
 					side: "bottom",
@@ -9480,7 +10203,7 @@ function NavEntry({ item, compact, submenu, hoverExpands, panelOpenFor, onToggle
 							className: "size-icon-md shrink-0",
 							"aria-hidden": true
 						}),
-						!compact && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						!compact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 							className: "truncate",
 							children: item.title
 						}), /* @__PURE__ */ jsx(ChevronRight, {
@@ -9745,7 +10468,7 @@ function Sidebar() {
 		return Boolean(el && rootRef.current?.contains(el) && el.matches(":focus-visible"));
 	};
 	const desktop = layout.navigation === "sidebar";
-	return /* @__PURE__ */ jsxs(Fragment, { children: [desktop && /* @__PURE__ */ jsx("aside", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [desktop && /* @__PURE__ */ jsx("aside", {
 		"aria-label": "Menu lateral",
 		className: cn("relative hidden shrink-0 transition-[width] duration-200 ease-out md:block", collapsed ? "w-sidebar-collapsed" : "w-sidebar"),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -10603,6 +11326,6 @@ function createTheme(input) {
 	};
 }
 //#endregion
-export { Accordion, ActionBar, Alert, AppShell, Avatar, AvatarGroup, Badge, BrandFeedbackIcon, BrandLogo, BrandProvider, Breadcrumb, Button, ButtonGroup, CATALOG, CATALOG_EXCLUDED_FILES, COMPONENT_CODE_PATTERN, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChannelBadge, ChatComposer, ChatThread, Checkbox, CheckboxGroup, Checklist, ColorPicker, Container, ConversationList, DEFAULT_DDI, DataToolbar, DatePicker, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorPage, Field, Form, FormField, FormSection, Grid, ImageCropper, ImageViewer, InfoHint, Inline, Input, Kanban, Label, List, Modal, OtpInput, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QR_MAX_VERSION, QrCode, QrEncodingError, RENDRA_CREDIT_HREF, RENDRA_CREDIT_TEXT, RadioGroup, Rating, RendraCredit, RendraProvider, RepeatableField, Section, Select, Separator, Skeleton, Slider, Spinner, Stack, StatCard, Stepper, Switch, TABLE_PAGE_SIZE, TOKEN_KEYS, Table, Tabs, Textarea, Timeline, Toaster, Tooltip, TooltipProvider, Upload, Wizard, applyPalette, applyTheme, assertCatalogIntegrity, bindPointerDrag, breakpoints, buildDataCodewords, buttonVariants, catalogByComponent, chatChannels, cn, computeCropGeometry, computeFormatBits, computeMaskPenalty, computeVersionBits, contrast, contrastRatio, controlAdornmentButton, controlAdornmentSpace, controlFrame, controlInput, createPalette, createTheme, defaultShellLayout, encodeQrMatrix, feedbackLabels, filesMissingCatalogEntry, findComponentsWithMultipleDefaults, findComponentsWithoutDefault, findDragTarget, findDuplicateCodes, findInvalidFormatCodes, findPresetCollisions, formatCents, formatCurrency, getCatalogEntry, internationalPhoneMask, isValidCnpj, isValidCpf, isValidDateBR, layoutOptions, lookupCep, lookupCnpj, masks, moveKanbanCard, parseLocaleNumber, percentMask, phoneCountries, qrMatrixToSvgPath, readCodewordsForTest, readVar, reedSolomonComputeDivisor, reedSolomonComputeRemainder, reedSolomonEncode, reedSolomonMultiply, resolveCatalogCode, resolveDropIndex, shapeLabels, toCents, toE164, toast, useBrand, useBreakpoint, useCurrentPath, useDebouncedValue, useFieldControl, useFillHeight, useLookup, usePrefersReducedMotion, useRendraBreadcrumbs, useRendraLink, useRendraNavigate, useSortable, zBR };
+export { Accordion, ActionBar, Alert, AppShell, Avatar, AvatarGroup, Badge, BrandFeedbackIcon, BrandLogo, BrandProvider, Breadcrumb, Button, ButtonGroup, CATALOG, CATALOG_EXCLUDED_FILES, COMPONENT_CODE_PATTERN, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChannelBadge, ChatComposer, ChatThread, Checkbox, CheckboxGroup, Checklist, ColorPicker, Container, ConversationList, DEFAULT_DDI, DataToolbar, DatePicker, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorPage, Field, Form, FormField, FormSection, Grid, ImageCropper, ImageViewer, InfoHint, Inline, Input, Kanban, Label, List, Modal, OtpInput, PageHeader, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QR_MAX_VERSION, QrCode, QrEncodingError, RENDRA_CREDIT_HREF, RENDRA_CREDIT_TEXT, RadioGroup, Rating, RendraCredit, RendraProvider, RepeatableField, Section, Select, Separator, Skeleton, Slider, Spinner, Stack, StatCard, Stepper, Switch, TABLE_PAGE_SIZE, TOKEN_KEYS, Table, Tabs, Textarea, Timeline, Toaster, Tooltip, TooltipProvider, Upload, Wizard, applyPalette, applyTheme, assertCatalogIntegrity, bindPointerDrag, breakpoints, buildDataCodewords, buttonVariants, catalogByComponent, chatChannels, cn, computeCropGeometry, computeFormatBits, computeMaskPenalty, computeVersionBits, contrast, contrastRatio, controlAdornmentButton, controlAdornmentSpace, controlFrame, controlInput, createPalette, createTheme, defaultShellLayout, encodeQrMatrix, feedbackLabels, filesMissingCatalogEntry, findComponentsWithMultipleDefaults, findComponentsWithoutDefault, findDragTarget, findDuplicateCodes, findInvalidFormatCodes, findPresetCollisions, formatCents, formatCurrency, getCatalogEntry, getReducedMotion, internationalPhoneMask, isValidCnpj, isValidCpf, isValidDateBR, layoutOptions, lookupCep, lookupCnpj, masks, moveKanbanCard, parseLocaleNumber, percentMask, phoneCountries, qrMatrixToSvgPath, readCodewordsForTest, readVar, reedSolomonComputeDivisor, reedSolomonComputeRemainder, reedSolomonEncode, reedSolomonMultiply, resolveCatalogCode, resolveDropIndex, shapeLabels, subscribeReducedMotion, toCents, toE164, toast, useBrand, useBreakpoint, useCurrentPath, useDebouncedValue, useFieldControl, useFillHeight, useLookup, usePrefersReducedMotion, useRendraBreadcrumbs, useRendraLink, useRendraNavigate, useSortable, zBR };
 
 //# sourceMappingURL=index.js.map