@rendra-ui/web 2.4.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -1
- package/dist/base.css +33 -1
- package/dist/{button-C6rjowQi.js → button-B6-644xP.js} +86 -21
- package/dist/button-B6-644xP.js.map +1 -0
- package/dist/chart.js +63 -15
- package/dist/chart.js.map +1 -1
- package/dist/cli/auditar.js +1 -1
- package/dist/cli/codigos.js +2 -2
- package/dist/cli/executar-auditar.js +1 -1
- package/dist/cli/help.js +1 -1
- package/dist/cli/trocar.js +2 -2
- package/dist/cli/typescript-loader.js +1 -1
- package/dist/{cn-DXDpTGsu.js → cn-TBlI6-gS.js} +2 -2
- package/dist/{cn-DXDpTGsu.js.map → cn-TBlI6-gS.js.map} +1 -1
- package/dist/{components-hp7iWioq.js → components-Btk1cUg2.js} +2 -2
- package/dist/{components-hp7iWioq.js.map → components-Btk1cUg2.js.map} +1 -1
- package/dist/components.css +169 -33
- package/dist/document-viewer.js +6 -6
- package/dist/document-viewer.js.map +1 -1
- package/dist/{empty-state-CdaDLcsB.js → empty-state-DrQjqxvp.js} +36 -12
- package/dist/{empty-state-CdaDLcsB.js.map → empty-state-DrQjqxvp.js.map} +1 -1
- package/dist/features-max-CC6CorTg.js +3 -0
- package/dist/index.js +1075 -339
- package/dist/index.js.map +1 -1
- package/dist/motion-context-BL545cb6.js +222 -0
- package/dist/motion-context-BL545cb6.js.map +1 -0
- package/dist/motion-on-DMoTsWrG.js +29 -0
- package/dist/motion-on-DMoTsWrG.js.map +1 -0
- package/dist/motion.js +3 -0
- package/dist/{rendra-provider-7jUgUHzR.js → rendra-provider-CeCkPafT.js} +9 -5
- package/dist/rendra-provider-CeCkPafT.js.map +1 -0
- package/dist/rich-text-editor.js +4 -4
- package/dist/router-bridge.js +5 -4
- package/dist/router-bridge.js.map +1 -1
- package/dist/tokens.css +63 -15
- package/dist/tooltip-kgsorOg6.js +224 -0
- package/dist/tooltip-kgsorOg6.js.map +1 -0
- package/dist/types/components/rendra-provider.d.ts +12 -1
- package/dist/types/components/rendra-router-bridge.d.ts +4 -1
- package/dist/types/components/ui/accordion.d.ts +1 -1
- package/dist/types/components/ui/badge.d.ts +1 -1
- package/dist/types/components/ui/button.d.ts +1 -1
- package/dist/types/components/ui/dropdown-menu.d.ts +5 -5
- package/dist/types/components/ui/picker-panel.d.ts +1 -1
- package/dist/types/components/ui/popover.d.ts +3 -3
- package/dist/types/components/ui/radio-group.d.ts +1 -1
- package/dist/types/components/ui/skeleton.d.ts +5 -1
- package/dist/types/components/ui/stat-card.d.ts +1 -1
- package/dist/types/components/ui/table.d.ts +0 -6
- package/dist/types/components/ui/tooltip.d.ts +1 -1
- package/dist/types/hooks/use-reduced-motion.d.ts +3 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/lib/motion/count.d.ts +17 -0
- package/dist/types/lib/motion/features-max.d.ts +1 -0
- package/dist/types/lib/motion/index.d.ts +5 -0
- package/dist/types/lib/motion/motion-context.d.ts +58 -0
- package/dist/types/lib/motion/motion-on.d.ts +12 -0
- package/dist/types/lib/motion/native-events.d.ts +16 -0
- package/dist/types/lib/motion/presets.d.ts +92 -0
- package/dist/types/lib/motion/reorder.d.ts +7 -0
- package/dist/types/lib/motion/tokens.d.ts +66 -0
- package/dist/types/lib/motion/use-motion-presets.d.ts +8 -0
- package/dist/types/motion.d.ts +1 -0
- package/dist/{use-breakpoint-Dyp-0E_c.js → use-breakpoint-CNxDwEpc.js} +2 -2
- package/dist/{use-breakpoint-Dyp-0E_c.js.map → use-breakpoint-CNxDwEpc.js.map} +1 -1
- package/dist/use-motion-presets-DCJPBfNJ.js +401 -0
- package/dist/use-motion-presets-DCJPBfNJ.js.map +1 -0
- package/dist/widget-grid.js +3 -3
- package/package.json +10 -1
- package/dist/button-C6rjowQi.js.map +0 -1
- package/dist/rendra-provider-7jUgUHzR.js.map +0 -1
- package/dist/tooltip-bdmbX6vC.js +0 -105
- package/dist/tooltip-bdmbX6vC.js.map +0 -1
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
/*! Rendra Design System v2.6.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
|
|
2
|
+
import { t as cn } from "./cn-TBlI6-gS.js";
|
|
3
|
+
import { a as useMotionMode, i as useMotionLib, o as useMotionOn } from "./motion-context-BL545cb6.js";
|
|
4
|
+
import { t as useMotionPresets } from "./use-motion-presets-DCJPBfNJ.js";
|
|
5
|
+
import { Check, ChevronRight } from "lucide-react";
|
|
6
|
+
import { DropdownMenu, Tooltip } from "radix-ui";
|
|
7
|
+
import { createContext, forwardRef, useContext, useState } from "react";
|
|
8
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
//#region src/components/ui/dropdown-menu.tsx
|
|
10
|
+
var MenuOpenContext = createContext(null);
|
|
11
|
+
var SubOpenContext = createContext(null);
|
|
12
|
+
function MirroredRoot({ open, defaultOpen, onOpenChange, ...rest }) {
|
|
13
|
+
const [inner, setInner] = useState(defaultOpen ?? false);
|
|
14
|
+
const current = open ?? inner;
|
|
15
|
+
return /* @__PURE__ */ jsx(MenuOpenContext.Provider, {
|
|
16
|
+
value: current,
|
|
17
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.Root, {
|
|
18
|
+
...rest,
|
|
19
|
+
open: current,
|
|
20
|
+
onOpenChange: (next) => {
|
|
21
|
+
setInner(next);
|
|
22
|
+
onOpenChange?.(next);
|
|
23
|
+
}
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function MirroredSub({ open, defaultOpen, onOpenChange, ...rest }) {
|
|
28
|
+
const [inner, setInner] = useState(defaultOpen ?? false);
|
|
29
|
+
const current = open ?? inner;
|
|
30
|
+
return /* @__PURE__ */ jsx(SubOpenContext.Provider, {
|
|
31
|
+
value: current,
|
|
32
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.Sub, {
|
|
33
|
+
...rest,
|
|
34
|
+
open: current,
|
|
35
|
+
onOpenChange: (next) => {
|
|
36
|
+
setInner(next);
|
|
37
|
+
onOpenChange?.(next);
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function DropdownMenu$1(props) {
|
|
43
|
+
return useMotionMode() === "on" ? /* @__PURE__ */ jsx(MirroredRoot, { ...props }) : /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props });
|
|
44
|
+
}
|
|
45
|
+
var DropdownMenuTrigger = DropdownMenu.Trigger;
|
|
46
|
+
var DropdownMenuGroup = DropdownMenu.Group;
|
|
47
|
+
function DropdownMenuSub(props) {
|
|
48
|
+
return useMotionMode() === "on" ? /* @__PURE__ */ jsx(MirroredSub, { ...props }) : /* @__PURE__ */ jsx(DropdownMenu.Sub, { ...props });
|
|
49
|
+
}
|
|
50
|
+
var DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
|
|
51
|
+
var panelBase = "z-50 w-max min-w-3xs max-w-popover origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md";
|
|
52
|
+
var panelOff = cn(panelBase, "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");
|
|
53
|
+
var item = "relative flex min-h-touch cursor-pointer items-center gap-2 rounded-item px-3 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground md:min-h-0 md:py-2 [&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
|
|
54
|
+
function DropdownMenuContent({ className, sideOffset = 8, children, asChild, ...props }) {
|
|
55
|
+
const open = useContext(MenuOpenContext);
|
|
56
|
+
const lib = useMotionLib();
|
|
57
|
+
const presets = useMotionPresets();
|
|
58
|
+
if (lib && open !== null && !asChild) return /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsx(DropdownMenu.Portal, {
|
|
59
|
+
forceMount: true,
|
|
60
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
|
|
61
|
+
forceMount: true,
|
|
62
|
+
asChild: true,
|
|
63
|
+
sideOffset,
|
|
64
|
+
collisionPadding: 16,
|
|
65
|
+
"data-rendra": "DDM-001",
|
|
66
|
+
className: cn(panelBase, className),
|
|
67
|
+
...props,
|
|
68
|
+
children: /* @__PURE__ */ jsx(lib.m.div, {
|
|
69
|
+
...presets.open(),
|
|
70
|
+
children
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
}, "menu") });
|
|
74
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
|
|
75
|
+
sideOffset,
|
|
76
|
+
collisionPadding: 16,
|
|
77
|
+
"data-rendra": "DDM-001",
|
|
78
|
+
className: cn(panelOff, className),
|
|
79
|
+
asChild,
|
|
80
|
+
...props,
|
|
81
|
+
children
|
|
82
|
+
}) });
|
|
83
|
+
}
|
|
84
|
+
function DropdownMenuItem({ className, destructive, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Item, {
|
|
86
|
+
className: cn(item, destructive && "text-destructive data-highlighted:bg-destructive-soft data-highlighted:text-destructive-soft-foreground [&_svg]:text-current", className),
|
|
87
|
+
...props
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
function DropdownMenuCheckboxItem({ className, children, ...props }) {
|
|
91
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
|
|
92
|
+
className: cn(item, "pl-8", className),
|
|
93
|
+
...props,
|
|
94
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
95
|
+
className: "absolute left-2 flex size-icon-sm items-center justify-center",
|
|
96
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-primary-text" }) })
|
|
97
|
+
}), children]
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
101
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
|
|
102
|
+
className: cn(item, "pl-8", className),
|
|
103
|
+
...props,
|
|
104
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
105
|
+
className: "absolute left-2 flex size-icon-sm items-center justify-center",
|
|
106
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-primary-text" }) })
|
|
107
|
+
}), children]
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
function DropdownMenuLabel({ className, ...props }) {
|
|
111
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Label, {
|
|
112
|
+
className: cn("px-2 py-2 text-xs font-medium text-muted-foreground", className),
|
|
113
|
+
...props
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
117
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
|
|
118
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
119
|
+
...props
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
function DropdownMenuSubTrigger({ className, children, ...props }) {
|
|
123
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
|
|
124
|
+
className: cn(item, "data-[state=open]:bg-accent", className),
|
|
125
|
+
...props,
|
|
126
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })]
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
function DropdownMenuSubContent({ className, children, asChild, ...props }) {
|
|
130
|
+
const open = useContext(SubOpenContext);
|
|
131
|
+
const lib = useMotionLib();
|
|
132
|
+
const presets = useMotionPresets();
|
|
133
|
+
if (lib && open !== null && !asChild) return /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsx(DropdownMenu.Portal, {
|
|
134
|
+
forceMount: true,
|
|
135
|
+
children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
|
|
136
|
+
forceMount: true,
|
|
137
|
+
asChild: true,
|
|
138
|
+
collisionPadding: 16,
|
|
139
|
+
className: cn(panelBase, className),
|
|
140
|
+
...props,
|
|
141
|
+
children: /* @__PURE__ */ jsx(lib.m.div, {
|
|
142
|
+
...presets.open(),
|
|
143
|
+
children
|
|
144
|
+
})
|
|
145
|
+
})
|
|
146
|
+
}, "submenu") });
|
|
147
|
+
return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
|
|
148
|
+
collisionPadding: 16,
|
|
149
|
+
className: cn(panelOff, className),
|
|
150
|
+
asChild,
|
|
151
|
+
...props,
|
|
152
|
+
children
|
|
153
|
+
}) });
|
|
154
|
+
}
|
|
155
|
+
//#endregion
|
|
156
|
+
//#region src/components/ui/tooltip.tsx
|
|
157
|
+
/**
|
|
158
|
+
* Tooltip: só para informação complementar, nunca essencial (não existe hover no toque).
|
|
159
|
+
* Informação essencial vai em texto de ajuda visível ou em Popover acionado por toque.
|
|
160
|
+
*/
|
|
161
|
+
function TooltipProvider({ children }) {
|
|
162
|
+
return /* @__PURE__ */ jsx(Tooltip.Provider, {
|
|
163
|
+
delayDuration: 300,
|
|
164
|
+
skipDelayDuration: 150,
|
|
165
|
+
children
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
var contentCls = "z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) wrap-break-word rounded-control bg-foreground px-3 py-2 text-xs font-medium text-background";
|
|
169
|
+
/**
|
|
170
|
+
* O corpo animado do tooltip em `on`. O Radix entrega ao filho (asChild) o `data-state`, e é por
|
|
171
|
+
* ele que se sabe se o tooltip abriu "instantâneo" (`instant-open`: o usuário já estava com outro
|
|
172
|
+
* aberto, ou foi o foco do teclado). Nesse caso não anima: depois do primeiro, os outros abrem sem
|
|
173
|
+
* atraso e sem animação, e a barra inteira parece mais rápida (W7).
|
|
174
|
+
*/
|
|
175
|
+
var TooltipBody = forwardRef(function TooltipBody(props, ref) {
|
|
176
|
+
const { m } = useMotionOn();
|
|
177
|
+
const presets = useMotionPresets();
|
|
178
|
+
const instant = props["data-state"] === "instant-open";
|
|
179
|
+
return /* @__PURE__ */ jsx(m.div, {
|
|
180
|
+
ref,
|
|
181
|
+
...props,
|
|
182
|
+
...presets.tooltip(instant)
|
|
183
|
+
});
|
|
184
|
+
});
|
|
185
|
+
function Tooltip$1({ content, children, side = "top", disabled }) {
|
|
186
|
+
const lib = useMotionLib();
|
|
187
|
+
const [open, setOpen] = useState(false);
|
|
188
|
+
if (disabled) return /* @__PURE__ */ jsx(Fragment$1, { children });
|
|
189
|
+
if (lib) return /* @__PURE__ */ jsxs(Tooltip.Root, {
|
|
190
|
+
open,
|
|
191
|
+
onOpenChange: setOpen,
|
|
192
|
+
children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
|
|
193
|
+
asChild: true,
|
|
194
|
+
children
|
|
195
|
+
}), /* @__PURE__ */ jsx(lib.AnimatePresence, { children: open && /* @__PURE__ */ jsx(Tooltip.Portal, {
|
|
196
|
+
forceMount: true,
|
|
197
|
+
children: /* @__PURE__ */ jsx(Tooltip.Content, {
|
|
198
|
+
forceMount: true,
|
|
199
|
+
asChild: true,
|
|
200
|
+
side,
|
|
201
|
+
sideOffset: 8,
|
|
202
|
+
collisionPadding: 16,
|
|
203
|
+
"data-rendra": "TIP-001",
|
|
204
|
+
className: contentCls,
|
|
205
|
+
children: /* @__PURE__ */ jsx(TooltipBody, { children: content })
|
|
206
|
+
})
|
|
207
|
+
}, "tooltip") })]
|
|
208
|
+
});
|
|
209
|
+
return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
|
|
210
|
+
asChild: true,
|
|
211
|
+
children
|
|
212
|
+
}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
|
|
213
|
+
side,
|
|
214
|
+
sideOffset: 8,
|
|
215
|
+
collisionPadding: 16,
|
|
216
|
+
"data-rendra": "TIP-001",
|
|
217
|
+
className: cn(contentCls, "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=instant-open]:animate-none"),
|
|
218
|
+
children: content
|
|
219
|
+
}) })] });
|
|
220
|
+
}
|
|
221
|
+
//#endregion
|
|
222
|
+
export { DropdownMenuContent as a, DropdownMenuLabel as c, DropdownMenuSeparator as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuCheckboxItem as i, DropdownMenuRadioGroup as l, DropdownMenuSubTrigger as m, TooltipProvider as n, DropdownMenuGroup as o, DropdownMenuSubContent as p, DropdownMenu$1 as r, DropdownMenuItem as s, Tooltip$1 as t, DropdownMenuRadioItem as u };
|
|
223
|
+
|
|
224
|
+
//# sourceMappingURL=tooltip-kgsorOg6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-kgsorOg6.js","names":[],"sources":["../src/components/ui/dropdown-menu.tsx","../src/components/ui/tooltip.tsx"],"sourcesContent":["import { Check, ChevronRight } from 'lucide-react'\nimport { DropdownMenu as D } from 'radix-ui'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '@/lib/cn'\nimport { useMotionLib, useMotionMode, useMotionPresets } from '@/lib/motion'\n\n/*\n * Em `on` o menu e o submenu precisam saber se estão abertos para manter o conteúdo montado\n * durante a saída animada. `Root` e `Sub` viram wrappers com exatamente os mesmos tipos do\n * Radix que espelham o estado (controlado ou não) num contexto; em `off` são o `D.Root` e o\n * `D.Sub` de sempre. O estado do submenu vive no próprio `D.Sub`, por isso o wrapper dele.\n */\nconst MenuOpenContext = createContext<boolean | null>(null)\nconst SubOpenContext = createContext<boolean | null>(null)\n\nfunction MirroredRoot({ open, defaultOpen, onOpenChange, ...rest }: ComponentProps<typeof D.Root>) {\n const [inner, setInner] = useState(defaultOpen ?? false)\n const current = open ?? inner\n return (\n <MenuOpenContext.Provider value={current}>\n <D.Root\n {...rest}\n open={current}\n onOpenChange={(next) => {\n setInner(next)\n onOpenChange?.(next)\n }}\n />\n </MenuOpenContext.Provider>\n )\n}\n\nfunction MirroredSub({ open, defaultOpen, onOpenChange, ...rest }: ComponentProps<typeof D.Sub>) {\n const [inner, setInner] = useState(defaultOpen ?? false)\n const current = open ?? inner\n return (\n <SubOpenContext.Provider value={current}>\n <D.Sub\n {...rest}\n open={current}\n onOpenChange={(next) => {\n setInner(next)\n onOpenChange?.(next)\n }}\n />\n </SubOpenContext.Provider>\n )\n}\n\nexport function DropdownMenu(props: ComponentProps<typeof D.Root>) {\n return useMotionMode() === 'on' ? <MirroredRoot {...props} /> : <D.Root {...props} />\n}\nexport const DropdownMenuTrigger = D.Trigger\nexport const DropdownMenuGroup = D.Group\nexport function DropdownMenuSub(props: ComponentProps<typeof D.Sub>) {\n return useMotionMode() === 'on' ? <MirroredSub {...props} /> : <D.Sub {...props} />\n}\nexport const DropdownMenuRadioGroup = D.RadioGroup\n\n// O menu e o submenu nascem do gatilho (W6); a saída é mais curta que a entrada (W5).\nconst panelBase =\n 'z-50 w-max min-w-3xs max-w-popover origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-surface border bg-popover p-1 text-popover-foreground shadow-md'\nconst panelOff = cn(\n panelBase,\n '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',\n)\n\n// Itens com 44px no mobile (toque) e compactos a partir de md.\nconst item =\n 'relative flex min-h-touch cursor-pointer items-center gap-2 rounded-item px-3 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground md:min-h-0 md:py-2 [&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-muted-foreground'\n\nexport function DropdownMenuContent({\n className,\n sideOffset = 8,\n children,\n asChild,\n ...props\n}: ComponentProps<typeof D.Content>) {\n const open = useContext(MenuOpenContext)\n const lib = useMotionLib()\n const presets = useMotionPresets()\n\n if (lib && open !== null && !asChild) {\n return (\n <lib.AnimatePresence>\n {open && (\n <D.Portal forceMount key=\"menu\">\n <D.Content\n forceMount\n asChild\n sideOffset={sideOffset}\n collisionPadding={16}\n data-rendra=\"DDM-001\"\n className={cn(panelBase, className)}\n {...props}\n >\n <lib.m.div {...presets.open()}>{children}</lib.m.div>\n </D.Content>\n </D.Portal>\n )}\n </lib.AnimatePresence>\n )\n }\n\n return (\n <D.Portal>\n <D.Content\n sideOffset={sideOffset}\n collisionPadding={16}\n data-rendra=\"DDM-001\"\n className={cn(panelOff, className)}\n asChild={asChild}\n {...props}\n >\n {children}\n </D.Content>\n </D.Portal>\n )\n}\n\ninterface ItemProps extends ComponentProps<typeof D.Item> {\n /** Item destrutivo (excluir, sair): texto na cor destrutiva. */\n destructive?: boolean\n}\n\nexport function DropdownMenuItem({ className, destructive, ...props }: ItemProps) {\n return (\n <D.Item\n className={cn(\n item,\n destructive &&\n 'text-destructive data-highlighted:bg-destructive-soft data-highlighted:text-destructive-soft-foreground [&_svg]:text-current',\n className,\n )}\n {...props}\n />\n )\n}\n\nexport function DropdownMenuCheckboxItem({\n className,\n children,\n ...props\n}: ComponentProps<typeof D.CheckboxItem>) {\n return (\n <D.CheckboxItem className={cn(item, 'pl-8', className)} {...props}>\n <span className=\"absolute left-2 flex size-icon-sm items-center justify-center\">\n <D.ItemIndicator>\n <Check className=\"text-primary-text\" />\n </D.ItemIndicator>\n </span>\n {children}\n </D.CheckboxItem>\n )\n}\n\nexport function DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: ComponentProps<typeof D.RadioItem>) {\n return (\n <D.RadioItem className={cn(item, 'pl-8', className)} {...props}>\n <span className=\"absolute left-2 flex size-icon-sm items-center justify-center\">\n <D.ItemIndicator>\n <Check className=\"text-primary-text\" />\n </D.ItemIndicator>\n </span>\n {children}\n </D.RadioItem>\n )\n}\n\nexport function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof D.Label>) {\n return (\n <D.Label\n className={cn('px-2 py-2 text-xs font-medium text-muted-foreground', className)}\n {...props}\n />\n )\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof D.Separator>) {\n return <D.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />\n}\n\nexport function DropdownMenuSubTrigger({\n className,\n children,\n ...props\n}: ComponentProps<typeof D.SubTrigger>) {\n return (\n <D.SubTrigger className={cn(item, 'data-[state=open]:bg-accent', className)} {...props}>\n {children}\n <ChevronRight className=\"ml-auto\" />\n </D.SubTrigger>\n )\n}\n\nexport function DropdownMenuSubContent({\n className,\n children,\n asChild,\n ...props\n}: ComponentProps<typeof D.SubContent>) {\n const open = useContext(SubOpenContext)\n const lib = useMotionLib()\n const presets = useMotionPresets()\n\n if (lib && open !== null && !asChild) {\n return (\n <lib.AnimatePresence>\n {open && (\n <D.Portal forceMount key=\"submenu\">\n <D.SubContent\n forceMount\n asChild\n collisionPadding={16}\n className={cn(panelBase, className)}\n {...props}\n >\n <lib.m.div {...presets.open()}>{children}</lib.m.div>\n </D.SubContent>\n </D.Portal>\n )}\n </lib.AnimatePresence>\n )\n }\n\n return (\n <D.Portal>\n <D.SubContent\n collisionPadding={16}\n className={cn(panelOff, className)}\n asChild={asChild}\n {...props}\n >\n {children}\n </D.SubContent>\n </D.Portal>\n )\n}\n","import { Tooltip as T } from 'radix-ui'\nimport { forwardRef, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { cn } from '@/lib/cn'\nimport { useMotionLib, useMotionOn, useMotionPresets } from '@/lib/motion'\nimport type { RendraMotion } from '@/lib/motion/motion-on'\n\n/**\n * Tooltip: só para informação complementar, nunca essencial (não existe hover no toque).\n * Informação essencial vai em texto de ajuda visível ou em Popover acionado por toque.\n */\nexport function TooltipProvider({ children }: { children: ReactNode }) {\n return (\n <T.Provider delayDuration={300} skipDelayDuration={150}>\n {children}\n </T.Provider>\n )\n}\n\ninterface TooltipProps {\n content: ReactNode\n children: ReactNode\n side?: 'top' | 'right' | 'bottom' | 'left'\n /** Desliga o tooltip sem mudar a árvore (ex.: sidebar expandida já mostra o rótulo). */\n disabled?: boolean\n}\n\n// O tooltip nasce do gatilho (W6). A origem vem do Radix.\nconst contentCls =\n 'z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) wrap-break-word rounded-control bg-foreground px-3 py-2 text-xs font-medium text-background'\n\n/**\n * O corpo animado do tooltip em `on`. O Radix entrega ao filho (asChild) o `data-state`, e é por\n * ele que se sabe se o tooltip abriu \"instantâneo\" (`instant-open`: o usuário já estava com outro\n * aberto, ou foi o foco do teclado). Nesse caso não anima: depois do primeiro, os outros abrem sem\n * atraso e sem animação, e a barra inteira parece mais rápida (W7).\n */\nconst TooltipBody = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<RendraMotion['m']['div']>>(\n function TooltipBody(props, ref) {\n const { m } = useMotionOn()\n const presets = useMotionPresets()\n const instant = (props as { 'data-state'?: string })['data-state'] === 'instant-open'\n return <m.div ref={ref} {...props} {...presets.tooltip(instant)} />\n },\n)\n\nexport function Tooltip({ content, children, side = 'top', disabled }: TooltipProps) {\n const lib = useMotionLib()\n // Só em `on`: o estado aberto fica aqui para o conteúdo continuar montado durante a saída.\n // O Radix segue dono do atraso: `onOpenChange` só dispara depois do `delayDuration`.\n const [open, setOpen] = useState(false)\n if (disabled) return <>{children}</>\n if (lib) {\n return (\n <T.Root open={open} onOpenChange={setOpen}>\n <T.Trigger asChild>{children}</T.Trigger>\n <lib.AnimatePresence>\n {open && (\n <T.Portal forceMount key=\"tooltip\">\n <T.Content\n forceMount\n asChild\n side={side}\n sideOffset={8}\n collisionPadding={16}\n data-rendra=\"TIP-001\"\n className={contentCls}\n >\n <TooltipBody>{content}</TooltipBody>\n </T.Content>\n </T.Portal>\n )}\n </lib.AnimatePresence>\n </T.Root>\n )\n }\n return (\n <T.Root>\n <T.Trigger asChild>{children}</T.Trigger>\n <T.Portal>\n <T.Content\n side={side}\n sideOffset={8}\n collisionPadding={16}\n data-rendra=\"TIP-001\"\n className={cn(\n contentCls,\n // `instant-open` não anima; a saída é mais curta que a entrada (W5, W7).\n '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=instant-open]:animate-none',\n )}\n >\n {content}\n </T.Content>\n </T.Portal>\n </T.Root>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { type ComponentType, type ReactNode } from 'react';
|
|
2
|
+
import { type MotionMode } from '../lib/motion/motion-context';
|
|
3
|
+
import type { RendraMotion } from '../lib/motion/motion-on';
|
|
2
4
|
/**
|
|
3
5
|
* Link com a mesma interface do `<a>`/`Link`: recebe `to`, `className`, `children`,
|
|
4
6
|
* `aria-*`, `onClick` e repassa o resto.
|
|
@@ -28,13 +30,22 @@ export interface RendraProviderProps {
|
|
|
28
30
|
goBack: () => void;
|
|
29
31
|
/** Trilha da rota atual (ex.: via `useMatches` e `handle.crumb`). Opcional. */
|
|
30
32
|
useBreadcrumbs?: () => RendraBreadcrumbItem[];
|
|
33
|
+
/**
|
|
34
|
+
* Animações dos componentes. `off` (padrão): sem nenhuma animação do Motion, a árvore e o
|
|
35
|
+
* comportamento de sempre, e o Motion fora do bundle inicial. `'on'`: entradas, saídas e layout
|
|
36
|
+
* animados pelo Motion, que vem de um chunk carregado depois do primeiro quadro (até ele chegar
|
|
37
|
+
* a tela fica em `off` e depois liga, sem remontar nada e sem repetir a entrada de quem já
|
|
38
|
+
* estava na tela). `rendraMotion` (de `@rendra-ui/web/motion`): `on` desde o primeiro quadro e
|
|
39
|
+
* no servidor, com o Motion no bundle de quem importa o objeto.
|
|
40
|
+
*/
|
|
41
|
+
motion?: MotionMode | RendraMotion;
|
|
31
42
|
}
|
|
32
43
|
/**
|
|
33
44
|
* Única peça que sabe como navegar (`react-router`, outro roteador, ou nenhum).
|
|
34
45
|
* Sem `RendraProvider` na árvore, os hooks abaixo caem para um comportamento simples,
|
|
35
46
|
* baseado só em `window.location`/`history`, e os componentes continuam funcionando.
|
|
36
47
|
*/
|
|
37
|
-
export declare function RendraProvider({ children, linkComponent, useCurrentPath: useCurrentPathProp, navigate, goBack, useBreadcrumbs, }: RendraProviderProps): import("react").JSX.Element;
|
|
48
|
+
export declare function RendraProvider({ children, linkComponent, useCurrentPath: useCurrentPathProp, navigate, goBack, useBreadcrumbs, motion, }: RendraProviderProps): import("react").JSX.Element;
|
|
38
49
|
/** Componente de link do provider ativo (ou `<a href>`, sem provider). */
|
|
39
50
|
export declare function useRendraLink(): ComponentType<RendraLinkProps>;
|
|
40
51
|
/** Caminho atual (ex.: `/clientes/novo`), do provider ativo ou de `window.location`. */
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
+
import type { MotionMode } from '../lib/motion/motion-context';
|
|
3
|
+
import type { RendraMotion } from '../lib/motion/motion-on';
|
|
2
4
|
/**
|
|
3
5
|
* Metadados de rota lidos pela trilha: handle: { crumb: 'Clientes' }. Convenção do
|
|
4
6
|
* react-router (`handle`), que não existe em outros roteadores; por isso fica aqui, na
|
|
@@ -13,6 +15,7 @@ export interface RouteHandle {
|
|
|
13
15
|
* componentes de `src/components/ui` e o `AppShell` não importam `react-router` diretamente.
|
|
14
16
|
* Sem `children`, renderiza `<Outlet />`, para ser usado como elemento raiz das rotas.
|
|
15
17
|
*/
|
|
16
|
-
export declare function RendraRouterBridge({ children }?: {
|
|
18
|
+
export declare function RendraRouterBridge({ children, motion, }?: {
|
|
17
19
|
children?: ReactNode;
|
|
20
|
+
motion?: MotionMode | RendraMotion;
|
|
18
21
|
}): import("react").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
import type { HTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
tone?: "success" | "error" | "warning" | "info" | "primary" | "
|
|
4
|
+
tone?: "outline" | "success" | "error" | "warning" | "info" | "primary" | "neutral" | null | undefined;
|
|
5
5
|
solid?: boolean | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
@@ -6,7 +6,7 @@ import { type ButtonHTMLAttributes, type ReactNode } from 'react';
|
|
|
6
6
|
* Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.
|
|
7
7
|
*/
|
|
8
8
|
export declare const buttonVariants: (props?: ({
|
|
9
|
-
variant?: "link" | "
|
|
9
|
+
variant?: "link" | "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
|
|
10
10
|
size?: "sm" | "lg" | "md" | null | undefined;
|
|
11
11
|
iconOnly?: boolean | null | undefined;
|
|
12
12
|
fullWidth?: boolean | null | undefined;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { DropdownMenu as D } from 'radix-ui';
|
|
2
|
-
import type
|
|
3
|
-
export declare
|
|
2
|
+
import { type ComponentProps } from 'react';
|
|
3
|
+
export declare function DropdownMenu(props: ComponentProps<typeof D.Root>): import("react").JSX.Element;
|
|
4
4
|
export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<D.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
5
|
export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
-
export declare
|
|
6
|
+
export declare function DropdownMenuSub(props: ComponentProps<typeof D.Sub>): import("react").JSX.Element;
|
|
7
7
|
export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
|
-
export declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof D.Content>): import("react").JSX.Element;
|
|
8
|
+
export declare function DropdownMenuContent({ className, sideOffset, children, asChild, ...props }: ComponentProps<typeof D.Content>): import("react").JSX.Element;
|
|
9
9
|
interface ItemProps extends ComponentProps<typeof D.Item> {
|
|
10
10
|
/** Item destrutivo (excluir, sair): texto na cor destrutiva. */
|
|
11
11
|
destructive?: boolean;
|
|
@@ -16,5 +16,5 @@ export declare function DropdownMenuRadioItem({ className, children, ...props }:
|
|
|
16
16
|
export declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof D.Label>): import("react").JSX.Element;
|
|
17
17
|
export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof D.Separator>): import("react").JSX.Element;
|
|
18
18
|
export declare function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof D.SubTrigger>): import("react").JSX.Element;
|
|
19
|
-
export declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof D.SubContent>): import("react").JSX.Element;
|
|
19
|
+
export declare function DropdownMenuSubContent({ className, children, asChild, ...props }: ComponentProps<typeof D.SubContent>): import("react").JSX.Element;
|
|
20
20
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Popover as P } from 'radix-ui';
|
|
2
|
-
import type
|
|
3
|
-
export declare
|
|
2
|
+
import { type ComponentProps } from 'react';
|
|
3
|
+
export declare function Popover(props: ComponentProps<typeof P.Root>): import("react").JSX.Element;
|
|
4
4
|
export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<P.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
5
5
|
export declare const PopoverClose: import("react").ForwardRefExoticComponent<P.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
6
|
export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<P.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -8,5 +8,5 @@ interface PopoverContentProps extends ComponentProps<typeof P.Content> {
|
|
|
8
8
|
/** Largura: sm (16rem) ou md (22rem). Sempre limitada à tela menos 32px. */
|
|
9
9
|
width?: 'sm' | 'md';
|
|
10
10
|
}
|
|
11
|
-
export declare function PopoverContent({ className, align, sideOffset, width, ...props }: PopoverContentProps): import("react").JSX.Element;
|
|
11
|
+
export declare function PopoverContent({ className, align, sideOffset, width, children, asChild, ...props }: PopoverContentProps): import("react").JSX.Element;
|
|
12
12
|
export {};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. Em `off` pulsa
|
|
4
|
+
* (animate-pulse do Tailwind); em `on` um brilho suave cruza o bloco (skeleton-shimmer, em
|
|
5
|
+
* globals.css: transform, tempo e curva pelos tokens, parado com "reduzir movimento").
|
|
6
|
+
*/
|
|
3
7
|
export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
|
|
@@ -125,10 +125,4 @@ export interface TableProps<T> {
|
|
|
125
125
|
/** Rótulo da tabela para leitores de tela. */
|
|
126
126
|
'aria-label': string;
|
|
127
127
|
}
|
|
128
|
-
/**
|
|
129
|
-
* Table única do sistema (TanStack Table). Tudo é prop: seleção, expansão, ordenação,
|
|
130
|
-
* busca, colunas visíveis, ações em massa e por linha, densidade e estados.
|
|
131
|
-
* Mobile (< 768px): a mesma tabela vira lista de cards, sem rolagem horizontal.
|
|
132
|
-
* Desktop: tabela larga rola na horizontal só dentro do próprio contêiner.
|
|
133
|
-
*/
|
|
134
128
|
export declare function Table<T>({ data: dataProp, source, queryKey, columns: columnsProp, statusLast, getRowId, selectable, expandable, sortable, globalFilter, columnVisibility, bulkActions, bulkMenu, rowActions, density, loading, error, onRetry, empty, pageSize: pageSizeProp, mobilePagination, toolbar, ...aria }: TableProps<T>): import("react").JSX.Element;
|
|
@@ -1 +1,4 @@
|
|
|
1
|
+
/** Fonte única da preferência (também usada pelo motion, que só a assina em `on`). */
|
|
2
|
+
export declare function subscribeReducedMotion(cb: () => void): () => void;
|
|
3
|
+
export declare function getReducedMotion(): boolean;
|
|
1
4
|
export declare function usePrefersReducedMotion(): boolean;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -58,6 +58,8 @@ export * from './components/app-shell/app-shell';
|
|
|
58
58
|
export * from './components/app-shell/layout';
|
|
59
59
|
export * from './components/app-shell/types';
|
|
60
60
|
export * from './components/rendra-provider';
|
|
61
|
+
export type { MotionMode } from './lib/motion/motion-context';
|
|
62
|
+
export type { RendraMotion } from './lib/motion/motion-on';
|
|
61
63
|
export * from './catalog/components';
|
|
62
64
|
export * from './hooks/use-breakpoint';
|
|
63
65
|
export * from './hooks/use-debounced-value';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface ParsedNumber {
|
|
3
|
+
/** Tudo antes do número (inclui o sinal de menos). */
|
|
4
|
+
prefix: string;
|
|
5
|
+
/** Tudo depois do número. */
|
|
6
|
+
suffix: string;
|
|
7
|
+
/** Valor numérico (sem sinal no `prefix`: o sinal já está aqui). */
|
|
8
|
+
value: number;
|
|
9
|
+
decimals: number;
|
|
10
|
+
/** Separador de milhar "." (texto pt-BR que o usava). */
|
|
11
|
+
grouping: boolean;
|
|
12
|
+
/** Separador decimal: "," no texto pt-BR, "." no número do JavaScript. */
|
|
13
|
+
decimalSeparator: ',' | '.';
|
|
14
|
+
}
|
|
15
|
+
export declare function parseLocaleNumber(value: ReactNode): ParsedNumber | null;
|
|
16
|
+
/** Escreve `n` com o mesmo formato do valor original. */
|
|
17
|
+
export declare function formatLike(parsed: ParsedNumber, n: number): string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { domMax as default } from 'motion/react';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { MotionModeScope, MotionProvider, RevealScope, useLayoutReady, useMotionAdopted, useMotionLib, useMotionMode, useMotionOn, useRevealScope, type MotionMode, } from './motion-context';
|
|
2
|
+
export { useMotionPresets } from './use-motion-presets';
|
|
3
|
+
export type { MotionPreset, Presets, SlideDistance, SlideFrom } from './presets';
|
|
4
|
+
export { layoutEnabled } from './reorder';
|
|
5
|
+
export { formatLike, parseLocaleNumber, type ParsedNumber } from './count';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import type { RendraMotion } from './motion-on';
|
|
3
|
+
export type MotionMode = 'off' | 'on';
|
|
4
|
+
/** Modo de motion do provider mais próximo (`off` sem provider). */
|
|
5
|
+
export declare function useMotionMode(): MotionMode;
|
|
6
|
+
/** O objeto do Motion de quem está em `on` (`m`, `AnimatePresence`, `animate`, hooks); `null` em `off`. */
|
|
7
|
+
export declare function useMotionLib(): RendraMotion | null;
|
|
8
|
+
/** Como `useMotionLib`, para o que só existe em `on`: sem objeto é erro de uso, não um `off`. */
|
|
9
|
+
export declare function useMotionOn(): RendraMotion;
|
|
10
|
+
/**
|
|
11
|
+
* O componente está sendo montado na troca tardia do `off` para o `on`? Então ele já estava na
|
|
12
|
+
* tela: mostra o valor final em vez de repetir a contagem ou a entrada.
|
|
13
|
+
*/
|
|
14
|
+
export declare function useMotionAdopted(): boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Em `on`, o chunk do `domMax` já chegou. Um `m.*` com `layout` ou `layoutId` só ganha o nó de
|
|
17
|
+
* projeção se for criado DEPOIS disso (o Motion não monta a projeção de um elemento que já
|
|
18
|
+
* estava na tela), então quem usa layout liga a prop e remonta o item quando isto vira `true`.
|
|
19
|
+
*/
|
|
20
|
+
export declare function useLayoutReady(): boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Marca um trecho da árvore como "chegada de painel" (o dashboard): lá, o gráfico desenha no
|
|
23
|
+
* tempo do reveal (900 ms) em vez do tempo de rotina (`draw`, 420 ms). Fora dele, o gráfico de
|
|
24
|
+
* uma tela de uso diário desenha uma vez e rápido.
|
|
25
|
+
*/
|
|
26
|
+
export declare function RevealScope({ children }: {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
}): import("react").JSX.Element;
|
|
29
|
+
/** O componente está dentro de um `RevealScope`? */
|
|
30
|
+
export declare function useRevealScope(): boolean;
|
|
31
|
+
/** Só troca o modo lido pelos componentes; não monta nem desmonta o LazyMotion. */
|
|
32
|
+
export declare function MotionModeScope({ mode, children }: {
|
|
33
|
+
mode: MotionMode;
|
|
34
|
+
children: ReactNode;
|
|
35
|
+
}): import("react").JSX.Element;
|
|
36
|
+
/**
|
|
37
|
+
* Em `off`, só o contexto (nenhum nó novo, nenhum LazyMotion). Em `on`, dois `LazyMotion` (os
|
|
38
|
+
* dois `strict`: só `m.*` entra, um `motion.*` esquecido quebra em vez de puxar o pacote inteiro):
|
|
39
|
+
* o de fora carrega o `domMax` sob demanda (layout e arraste), em chunk separado; o de dentro traz
|
|
40
|
+
* o `domAnimation` (animação e gestos) e é o que os `m.*` enxergam. Nessa ordem o renderer já está
|
|
41
|
+
* no contexto na primeira renderização, e os recursos de layout se juntam quando o chunk chega. A
|
|
42
|
+
* ordem contrária esconderia o renderer até o chunk terminar de baixar.
|
|
43
|
+
*
|
|
44
|
+
* `mode` aceita o objeto do Motion (`rendraMotion`): `on` síncrono, desde o primeiro quadro e no
|
|
45
|
+
* servidor. Com o texto `'on'`, o objeto vem do chunk `motion-on`, carregado depois do primeiro
|
|
46
|
+
* quadro: até lá a árvore roda em `off` (nunca vazia); quando ele chega o modo vira `on` SEM
|
|
47
|
+
* remontar nada (os `LazyMotion` e o `MotionConfig` já estavam montados) e o que já estava na tela
|
|
48
|
+
* não repete a entrada.
|
|
49
|
+
*
|
|
50
|
+
* O `MotionConfig` recebe "reduzir movimento" da mesma fonte dos presets (o `matchMedia` de
|
|
51
|
+
* `use-reduced-motion.ts`, reativo): com `always`, o Motion também tira o deslocamento e o layout
|
|
52
|
+
* de qualquer animação que um componente escreva à mão, e mantém a opacidade. Não é uma segunda
|
|
53
|
+
* fonte: é a primeira, lida uma vez, entregue a dois consumidores.
|
|
54
|
+
*/
|
|
55
|
+
export declare function MotionProvider({ mode, children, }: {
|
|
56
|
+
mode: MotionMode | RendraMotion;
|
|
57
|
+
children: ReactNode;
|
|
58
|
+
}): import("react").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { AnimatePresence, animate, domAnimation, m, useDragControls, useMotionValue, useTransform } from 'motion/react';
|
|
2
|
+
/** O objeto do Motion que o provider aceita em `motion={...}` e que `useMotionLib()` devolve. */
|
|
3
|
+
export interface RendraMotion {
|
|
4
|
+
m: typeof m;
|
|
5
|
+
AnimatePresence: typeof AnimatePresence;
|
|
6
|
+
animate: typeof animate;
|
|
7
|
+
useMotionValue: typeof useMotionValue;
|
|
8
|
+
useTransform: typeof useTransform;
|
|
9
|
+
useDragControls: typeof useDragControls;
|
|
10
|
+
domAnimation: typeof domAnimation;
|
|
11
|
+
}
|
|
12
|
+
export declare const rendraMotion: RendraMotion;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare const NATIVE_EVENTS: {
|
|
2
|
+
readonly onDrag: "drag";
|
|
3
|
+
readonly onDragStart: "dragstart";
|
|
4
|
+
readonly onDragEnd: "dragend";
|
|
5
|
+
readonly onAnimationStart: "animationstart";
|
|
6
|
+
};
|
|
7
|
+
type NativeKey = keyof typeof NATIVE_EVENTS;
|
|
8
|
+
type Handler = ((event: never) => void) | undefined;
|
|
9
|
+
/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */
|
|
10
|
+
export declare function splitNativeEvents<P extends object>(props: P): {
|
|
11
|
+
native: Partial<Record<"onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart", Handler>>;
|
|
12
|
+
rest: Omit<P, NativeKey>;
|
|
13
|
+
};
|
|
14
|
+
/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */
|
|
15
|
+
export declare function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>): () => void;
|
|
16
|
+
export {};
|