@rendra-ui/web 2.5.0 → 2.6.0

package/dist/index.js

@@ -1,15 +1,14 @@
-/*! 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";
+/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-TBlI6-gS.js";
+import { a as useMotionMode, c as getReducedMotion, i as useMotionLib, l as subscribeReducedMotion, n as useLayoutReady, o as useMotionOn, r as useMotionAdopted, u as usePrefersReducedMotion } from "./motion-context-BL545cb6.js";
+import { t as useMotionPresets } from "./use-motion-presets-DCJPBfNJ.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-Btk1cUg2.js";
+import { n as buttonVariants, r as Spinner, t as Button } from "./button-B6-644xP.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-kgsorOg6.js";
+import { a as BrandContext, i as useBrand, n as BrandFeedbackIcon, r as feedbackLabels, t as EmptyState } from "./empty-state-DrQjqxvp.js";
+import { a as useRendraNavigate, i as useRendraLink, n as useCurrentPath, r as useRendraBreadcrumbs, t as RendraProvider } from "./rendra-provider-CeCkPafT.js";
+import { n as useBreakpoint, t as breakpoints } from "./use-breakpoint-CNxDwEpc.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, 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";
@@ -74,10 +73,10 @@ function formatLike(parsed, n) {
 //#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 lib = useMotionLib();
 	const presets = useMotionPresets();
 	const [open, setOpen] = useState(multiple ? defaultValue ?? [] : defaultValue?.[0] ? [defaultValue[0]] : []);
-	if (motion === "on") {
+	if (lib) {
 		const rootProps = multiple ? {
 			type: "multiple",
 			value: open,
@@ -100,19 +99,19 @@ function Accordion({ items, multiple, defaultValue, className }) {
 					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, {
+						children: [it.title, /* @__PURE__ */ jsx(lib.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, {
+					}) }), /* @__PURE__ */ jsx(lib.AnimatePresence, {
 						initial: false,
 						children: isOpen && /* @__PURE__ */ jsx(Accordion$1.Content, {
 							forceMount: true,
 							asChild: true,
-							children: /* @__PURE__ */ jsx(m.div, {
+							children: /* @__PURE__ */ jsx(lib.m.div, {
 								className: "overflow-hidden text-sm wrap-break-word text-muted-foreground",
 								initial: {
 									height: 0,
@@ -698,7 +697,7 @@ function Modal({ open, onOpenChange, title, description, type = "confirm", size
 		}
 	};
 	const isForm = type === "form";
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const presets = useMotionPresets();
 	const { isMobile } = useBreakpoint();
 	const code = resolveCatalogCode("Modal", { type: type === "destructive" ? "confirm" : type });
@@ -746,15 +745,15 @@ function Modal({ open, onOpenChange, title, description, type = "confirm", size
 			children
 		})]
 	});
-	if (motion === "on") return /* @__PURE__ */ jsx(Dialog.Root, {
+	if (lib) return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
+		children: /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
 			forceMount: true,
 			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
 				forceMount: true,
 				asChild: true,
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					className: overlayCls$1,
 					...presets.fade
 				})
@@ -763,7 +762,7 @@ function Modal({ open, onOpenChange, title, description, type = "confirm", size
 				asChild: true,
 				"data-rendra": code,
 				className: cn(contentCls, sizeCls),
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					...presets.open(isMobile ? { y: 8 } : void 0),
 					children: shell
 				})
@@ -1908,10 +1907,10 @@ var PopoverClose = Popover$1.Close;
 var PopoverAnchor = Popover$1.Anchor;
 function PopoverContent({ className, align = "center", sideOffset = 8, width = "md", children, asChild, ...props }) {
 	const open = useContext(PopoverOpenContext);
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	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, {
+	if (lib && open !== null && !asChild) return /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsx(Popover$1.Portal, {
 		forceMount: true,
 		children: /* @__PURE__ */ jsx(Popover$1.Content, {
 			forceMount: true,
@@ -1922,7 +1921,7 @@ function PopoverContent({ className, align = "center", sideOffset = 8, width = "
 			"data-rendra": "POP-001",
 			className: cn(base, className),
 			...props,
-			children: /* @__PURE__ */ jsx(m.div, {
+			children: /* @__PURE__ */ jsx(lib.m.div, {
 				...presets.open(),
 				children
 			})
@@ -3029,7 +3028,8 @@ 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 on = useMotionMode() === "on";
+	const lib = useMotionLib();
+	const on = lib !== null;
 	const presets = useMotionPresets();
 	const [inner, setInner] = useState(defaultChecked ?? false);
 	const state = checked ?? inner;
@@ -3060,16 +3060,16 @@ function Checkbox({ checked, defaultChecked, onCheckedChange, label, description
 	const box = on ? /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		asChild: true,
 		...rootProps,
-		children: /* @__PURE__ */ jsx(m.button, {
+		children: /* @__PURE__ */ jsx(lib.m.button, {
 			type: "button",
 			whileTap: presets.press.whileTap,
 			transition: presets.press.transition,
-			children: /* @__PURE__ */ jsx(AnimatePresence, {
+			children: /* @__PURE__ */ jsx(lib.AnimatePresence, {
 				initial: false,
 				children: state !== false && /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
 					forceMount: true,
 					asChild: true,
-					children: /* @__PURE__ */ jsx(m.span, {
+					children: /* @__PURE__ */ jsx(lib.m.span, {
 						className: "flex items-center justify-center",
 						...presets.indicator,
 						children: mark
@@ -3495,6 +3495,7 @@ var DISMISS_VELOCITY = 110;
 * fundo é gravado direto no elemento (sem render por quadro).
 */
 function MobileSheet({ open, onOpenChange, trigger, adornment, head, rest }) {
+	const { AnimatePresence, animate, m, useDragControls } = useMotionOn();
 	const presets = useMotionPresets();
 	const ready = useLayoutReady();
 	const controls = useDragControls();
@@ -3575,9 +3576,9 @@ 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 lib = useMotionLib();
 	const presets = useMotionPresets();
-	const on = motion === "on";
+	const on = lib !== null;
 	const sheetHead = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "flex shrink-0 flex-col items-center pt-2",
 		children: /* @__PURE__ */ jsx("span", {
@@ -3645,7 +3646,7 @@ function PickerPanel({ open, onOpenChange, trigger, title, header, children, foo
 				asChild: true,
 				children: trigger
 			})
-		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(Popover$1.Portal, {
+		}), /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsx(Popover$1.Portal, {
 			forceMount: true,
 			children: /* @__PURE__ */ jsx(Popover$1.Content, {
 				forceMount: true,
@@ -3654,7 +3655,7 @@ function PickerPanel({ open, onOpenChange, trigger, title, header, children, foo
 				sideOffset: 6,
 				collisionPadding: 16,
 				className: panelCls,
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					...presets.open(),
 					children: panelBody
 				})
@@ -3806,7 +3807,7 @@ var panelCls = "fixed inset-y-0 right-0 z-50 flex h-dvh w-full flex-col bg-card
 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);
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const presets = useMotionPresets();
 	const keepOpenIfDirty = (e) => {
 		if (dirty) {
@@ -3825,12 +3826,12 @@ function Drawer({ open, onOpenChange, title, description, icon, size = "30", chi
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange: (o) => o ? onOpenChange(true) : requestClose(),
-		children: motion === "on" ? /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
+		children: lib ? /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Dialog.Portal, {
 			forceMount: true,
 			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
 				forceMount: true,
 				asChild: true,
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					className: overlayCls,
 					...presets.fade
 				})
@@ -3841,7 +3842,7 @@ function Drawer({ open, onOpenChange, title, description, icon, size = "30", chi
 				onPointerDownOutside: keepOpenIfDirty,
 				"data-rendra": "GAV-001",
 				className: cn(panelCls, sizes[size]),
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					...presets.sheet("right"),
 					children: shell
 				})
@@ -3870,12 +3871,12 @@ 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 motion = useMotionMode();
+	const lib = useMotionLib();
 	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 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", lib ? "transition-[translate]" : "transition-transform");
 	const tap = presets.tap;
-	const control = motion === "on" ? /* @__PURE__ */ jsx(Switch$1.Root, {
+	const control = lib ? /* @__PURE__ */ jsx(Switch$1.Root, {
 		asChild: true,
 		id: sid,
 		name,
@@ -3886,7 +3887,7 @@ function Switch({ checked, defaultChecked, onCheckedChange, label, description,
 		"aria-label": aria["aria-label"],
 		"data-touch": "expanded",
 		"data-rendra": "SWT-001",
-		children: /* @__PURE__ */ jsx(m.button, {
+		children: /* @__PURE__ */ jsx(lib.m.button, {
 			type: "button",
 			className: rootCls,
 			initial: "rest",
@@ -3894,7 +3895,7 @@ function Switch({ checked, defaultChecked, onCheckedChange, label, description,
 			whileTap: tap ? "tap" : void 0,
 			children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx(m.span, {
+				children: /* @__PURE__ */ jsx(lib.m.span, {
 					className: thumbCls,
 					variants: {
 						rest: { scale: 1 },
@@ -4924,6 +4925,7 @@ function Tabs({ items, value, defaultValue, onChange, variant = "line", classNam
 	}, [items, variant]);
 	const presets = useMotionPresets();
 	const on = useLayoutReady();
+	const lib = useMotionLib();
 	const listRef = useRef(null);
 	const [clip, setClip] = useState({
 		l: 0,
@@ -4955,7 +4957,7 @@ function Tabs({ items, value, defaultValue, onChange, variant = "line", classNam
 	]);
 	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, {
+	const indicator = lib && /* @__PURE__ */ jsx(lib.m.span, {
 		layoutId: indicatorId,
 		"data-indicator": "tabs",
 		"aria-hidden": true,
@@ -5630,6 +5632,7 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 	const code = resolveCatalogCode("Kanban", { hasDropTargets: Boolean(dropTargets?.length) });
 	const { isMobile } = useBreakpoint();
 	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const ready = useLayoutReady();
 	const presets = useMotionPresets();
 	const [boardId] = useState(() => `rendra-kanban-${++boardsCreated}`);
@@ -5846,13 +5849,13 @@ function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard
 				children: moveMenu(card)
 			})
 		] });
-		if (motion === "on") {
+		if (lib) {
 			const layout = layoutEnabled({
 				mode: motion,
 				ready,
 				dragging: touchDrag !== null
 			});
-			return /* @__PURE__ */ jsx(m.li, {
+			return /* @__PURE__ */ jsx(lib.m.li, {
 				ref: (el) => {
 					if (!el) return;
 					const onStart = (e) => dragStart(e.dataTransfer);
@@ -6080,9 +6083,10 @@ function List({ items, divided = true, empty, className, onReorder, itemLabel =
 	});
 	const sortableEnabled = Boolean(onReorder);
 	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const ready = useLayoutReady();
 	const presets = useMotionPresets();
-	const Item = motion === "on" ? m.li : "li";
+	const Item = lib ? lib.m.li : "li";
 	const itemMotion = motion === "on" ? {
 		layout: layoutEnabled({
 			mode: motion,
@@ -6163,9 +6167,10 @@ 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 lib = useMotionLib();
+	const on = lib !== null;
 	const presets = useMotionPresets();
-	const Cell = on ? m.input : "input";
+	const Cell = on ? lib.m.input : "input";
 	const digits = Array.from({ length }, (_, i) => value[i] ?? "");
 	const set = (next) => {
 		const clean = next.replace(/\D/g, "").slice(0, length);
@@ -7220,16 +7225,17 @@ var cols = {
 * 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 }) {
+function Item({ children, ...props }) {
 	const presets = useMotionPresets();
-	if (!on) return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
+	const lib = useMotionLib();
+	if (!lib) return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
 		...props,
 		children
 	});
 	return /* @__PURE__ */ jsx(RadioGroup$1.Item, {
 		asChild: true,
 		...props,
-		children: /* @__PURE__ */ jsx(m.button, {
+		children: /* @__PURE__ */ jsx(lib.m.button, {
 			type: "button",
 			whileTap: presets.press.whileTap,
 			transition: presets.press.transition,
@@ -7239,14 +7245,15 @@ function Item({ on, children, ...props }) {
 }
 /** 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 on = useMotionMode() === "on";
+	const lib = useMotionLib();
+	const on = lib !== null;
 	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: on ? /* @__PURE__ */ jsx(m.span, {
+		children: on ? /* @__PURE__ */ jsx(lib.m.span, {
 			className: "size-2 rounded-full bg-primary",
 			initial: false,
 			animate: current === optionValue ? presets.indicator.animate : presets.indicator.initial,
@@ -7269,7 +7276,6 @@ function RadioGroup({ options, value, defaultValue, onChange, variant = "list",
 		"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(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"),
@@ -7293,7 +7299,6 @@ function RadioGroup({ options, value, defaultValue, onChange, variant = "list",
 		}, 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(Item, {
-				on,
 				value: o.value,
 				disabled: o.disabled,
 				className: "group flex pt-px outline-none focus-visible:[&>span]:focus-ring",
@@ -7551,11 +7556,14 @@ function Skeleton({ className, ...props }) {
 //#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 { animate, m, useMotionValue, useTransform } = useMotionOn();
 	const presets = useMotionPresets();
-	const progress = useMotionValue(0);
+	const [skip] = useState(useMotionAdopted());
+	const progress = useMotionValue(skip ? parsed.value : 0);
 	const text = useTransform(progress, (n) => formatLike(parsed, n));
-	const [done, setDone] = useState(false);
+	const [done, setDone] = useState(skip);
 	useEffect(() => {
+		if (skip) return;
 		const controls = animate(progress, parsed.value, {
 			duration: presets.tokens.reveal.count,
 			ease: presets.tokens.ease.out,
@@ -7563,9 +7571,11 @@ function Counter({ parsed, value }) {
 		});
 		return () => controls.stop();
 	}, [
+		animate,
 		progress,
 		parsed.value,
-		presets.tokens
+		presets.tokens,
+		skip
 	]);
 	return /* @__PURE__ */ jsx(m.span, {
 		...presets.fade,
@@ -7578,11 +7588,11 @@ function Counter({ parsed, value }) {
 * o valor final aparece direto.
 */
 function StatValue({ value }) {
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	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, {
+	if (!lib) return /* @__PURE__ */ jsx(Fragment$1, { children: value });
+	if (!parsed || presets.reduced) return /* @__PURE__ */ jsx(lib.m.span, {
 		...presets.fade,
 		children: value
 	});
@@ -7783,7 +7793,7 @@ var tableFeatureSet = tableFeatures({
 * 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 lib = useMotionLib();
 	const presets = useMotionPresets();
 	const [open, setOpen] = useState(false);
 	const trigger = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
@@ -7803,15 +7813,15 @@ function MobileDetails({ children }) {
 			})
 		]
 	});
-	if (motion === "on") return /* @__PURE__ */ jsxs(Collapsible.Root, {
+	if (lib) return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		open,
 		onOpenChange: setOpen,
-		children: [trigger, /* @__PURE__ */ jsx(AnimatePresence, {
+		children: [trigger, /* @__PURE__ */ jsx(lib.AnimatePresence, {
 			initial: false,
 			children: open && /* @__PURE__ */ jsx(Collapsible.Content, {
 				forceMount: true,
 				asChild: true,
-				children: /* @__PURE__ */ jsx(m.div, {
+				children: /* @__PURE__ */ jsx(lib.m.div, {
 					className: "overflow-hidden",
 					initial: {
 						height: 0,
@@ -7838,7 +7848,8 @@ function MobileDetails({ 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 lib = useMotionLib();
+	const on = lib !== null;
 	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([]);
@@ -8259,14 +8270,14 @@ function Table({ data: dataProp, source, queryKey = "", columns: columnsProp, st
 								children: expandable(row)
 							})
 						}),
-						expandable && on && /* @__PURE__ */ jsx(AnimatePresence, {
+						expandable && on && /* @__PURE__ */ jsx(lib.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, {
+									children: /* @__PURE__ */ jsx(lib.m.div, {
 										className: "overflow-hidden",
 										initial: {
 											height: 0,
@@ -8416,9 +8427,10 @@ 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 lib = useMotionLib();
+	const on = lib !== null;
 	const presets = useMotionPresets();
-	const Item = on ? m.li : "li";
+	const Item = on ? lib.m.li : "li";
 	const enter = presets.slide("bottom", "short");
 	return /* @__PURE__ */ jsx("ol", {
 		"data-rendra": "TLN-001",
@@ -8680,9 +8692,10 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 		}
 	});
 	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const ready = useLayoutReady();
 	const presets = useMotionPresets();
-	const Item = motion === "on" ? m.li : "li";
+	const Item = lib ? lib.m.li : "li";
 	const itemMotion = motion === "on" ? {
 		...presets.fade,
 		layout: layoutEnabled({
@@ -8695,7 +8708,7 @@ function Upload({ accept, multiple = true, maxSizeMb = 10, onUpload, onChange, h
 			layout: presets.move
 		}
 	} : {};
-	const animated = (nodes) => motion === "on" ? /* @__PURE__ */ jsx(AnimatePresence, {
+	const animated = (nodes) => lib ? /* @__PURE__ */ jsx(lib.AnimatePresence, {
 		mode: "popLayout",
 		initial: false,
 		children: nodes
@@ -8944,7 +8957,7 @@ var statusLabel = {
 */
 function Stepper({ steps, current, errors = [], orientation = "horizontal", onStepClick, className }) {
 	const step = steps[current];
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const presets = useMotionPresets();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-rendra": "WIZ-002",
@@ -8985,7 +8998,7 @@ 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" ? motion === "on" ? /* @__PURE__ */ jsx(m.span, {
+					children: st === "complete" ? lib ? /* @__PURE__ */ jsx(lib.m.span, {
 						className: "flex",
 						...presets.pop,
 						children: /* @__PURE__ */ jsx(Check, {
@@ -9075,17 +9088,17 @@ function Wizard({ steps, children, onValidateStep, onFinish, onCancel, cancelLab
 		setCurrent((c) => c + 1);
 		onSkip?.();
 	};
-	const motion = useMotionMode();
+	const lib = useMotionLib();
 	const presets = useMotionPresets();
 	const previous = useRef(current);
 	const direction = current >= previous.current ? 1 : -1;
 	previous.current = current;
-	const body = motion === "on" ? /* @__PURE__ */ jsx("div", {
+	const body = lib ? /* @__PURE__ */ jsx("div", {
 		className: "relative flex min-w-0 flex-col gap-6",
-		children: /* @__PURE__ */ jsx(AnimatePresence, {
+		children: /* @__PURE__ */ jsx(lib.AnimatePresence, {
 			mode: "popLayout",
 			initial: false,
-			children: /* @__PURE__ */ jsx(m.div, {
+			children: /* @__PURE__ */ jsx(lib.m.div, {
 				...presets.swap(direction),
 				className: "flex min-w-0 flex-col gap-6",
 				children: children[current]