@nebutra/ui 0.2.1 → 0.2.3
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/LICENSE +21 -676
- package/README.md +81 -86
- package/dist/agent/index.d.ts +119 -0
- package/dist/agent/index.js +135 -0
- package/dist/agent/index.js.map +1 -0
- package/dist/canonical-Drca5UMj.d.ts +4309 -0
- package/dist/components/index.d.ts +51 -56
- package/dist/components/index.js +1696 -1203
- package/dist/components/index.js.map +1 -1
- package/dist/hooks/index.d.ts +62 -15
- package/dist/hooks/index.js +56 -34
- package/dist/hooks/index.js.map +1 -1
- package/dist/index-CKLIGfiU.d.ts +19 -0
- package/dist/index-Dg4jRJV2.d.ts +57 -0
- package/dist/layout/index.d.ts +7 -3
- package/dist/layout/index.js +525 -542
- package/dist/layout/index.js.map +1 -1
- package/dist/layouts/index.d.ts +80 -2
- package/dist/layouts/index.js +32 -19
- package/dist/layouts/index.js.map +1 -1
- package/dist/patterns/index.d.ts +131 -5
- package/dist/patterns/index.js +1594 -806
- package/dist/patterns/index.js.map +1 -1
- package/dist/primitives/canonical.d.ts +25 -0
- package/dist/primitives/canonical.js +12269 -0
- package/dist/primitives/canonical.js.map +1 -0
- package/dist/primitives/index.d.ts +694 -3544
- package/dist/primitives/index.js +8994 -6583
- package/dist/primitives/index.js.map +1 -1
- package/dist/shared/animation/css/index.d.ts +1 -0
- package/dist/shared/animation/css/index.js +14 -0
- package/dist/shared/animation/css/index.js.map +1 -0
- package/dist/shared/animation/index.d.ts +6 -0
- package/dist/shared/animation/index.js +272 -0
- package/dist/shared/animation/index.js.map +1 -0
- package/dist/shared/animation/motion/index.d.ts +4 -0
- package/dist/shared/animation/motion/index.js +205 -0
- package/dist/shared/animation/motion/index.js.map +1 -0
- package/dist/styles/brand-override.css +11 -11
- package/dist/tailwind.preset.d.ts +10 -10
- package/dist/tailwind.preset.js +7 -4
- package/dist/tailwind.preset.js.map +1 -1
- package/dist/theme/index.d.ts +2 -2
- package/dist/tokens-EAC6uPem.d.ts +302 -0
- package/dist/typography/fonts.css +51 -37
- package/dist/typography/index.d.ts +27 -27
- package/dist/typography/index.js +24 -4
- package/dist/typography/index.js.map +1 -1
- package/dist/utils/index.d.ts +66 -14
- package/dist/utils/index.js +53 -10
- package/dist/utils/index.js.map +1 -1
- package/package.json +56 -14
- package/src/styles/brand-override.css +61 -0
- package/src/styles/preset.css +29 -0
- package/src/styles/sources.css +37 -0
- package/src/typography/fonts.css +124 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { C as CssTransition, c as cssTransition, a as interactiveCssTransition } from '../../../index-CKLIGfiU.js';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// src/shared/animation/css/index.ts
|
|
2
|
+
var cssTransition = {
|
|
3
|
+
color: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
4
|
+
background: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
5
|
+
border: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
6
|
+
shadow: "transition-shadow duration-flow ease-out motion-reduce:transition-none",
|
|
7
|
+
opacity: "transition-opacity duration-micro ease-out motion-reduce:transition-none",
|
|
8
|
+
transform: "transition-transform duration-flow ease-out motion-reduce:transition-none"
|
|
9
|
+
};
|
|
10
|
+
var interactiveCssTransition = "transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-flow ease-out motion-reduce:transition-none";
|
|
11
|
+
|
|
12
|
+
export { cssTransition, interactiveCssTransition };
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/shared/animation/css/index.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB;AAAA,EAC3B,KAAA,EAAO,yEAAA;AAAA,EACP,UAAA,EAAY,yEAAA;AAAA,EACZ,MAAA,EAAQ,yEAAA;AAAA,EACR,MAAA,EAAQ,wEAAA;AAAA,EACR,OAAA,EAAS,0EAAA;AAAA,EACT,SAAA,EAAW;AACb;AAEO,IAAM,wBAAA,GACX","file":"index.js","sourcesContent":["export const cssTransition = {\n color: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n background: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n border: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n shadow: \"transition-shadow duration-flow ease-out motion-reduce:transition-none\",\n opacity: \"transition-opacity duration-micro ease-out motion-reduce:transition-none\",\n transform: \"transition-transform duration-flow ease-out motion-reduce:transition-none\",\n} as const;\n\nexport const interactiveCssTransition =\n \"transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-flow ease-out motion-reduce:transition-none\";\n\nexport type CssTransition = keyof typeof cssTransition;\n"]}
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useVelocity, useTransform, useSpring, useScroll, useReducedMotion, useMotionValue, useMotionTemplate, useInView, useAnimationFrame, motion, m, domAnimation, animate, MotionConfig, LazyMotion, LayoutGroup, AnimatePresence } from 'framer-motion';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/shared/animation/css/index.ts
|
|
12
|
+
var css_exports = {};
|
|
13
|
+
__export(css_exports, {
|
|
14
|
+
cssTransition: () => cssTransition,
|
|
15
|
+
interactiveCssTransition: () => interactiveCssTransition
|
|
16
|
+
});
|
|
17
|
+
var cssTransition = {
|
|
18
|
+
color: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
19
|
+
background: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
20
|
+
border: "transition-colors duration-micro ease-out motion-reduce:transition-none",
|
|
21
|
+
shadow: "transition-shadow duration-flow ease-out motion-reduce:transition-none",
|
|
22
|
+
opacity: "transition-opacity duration-micro ease-out motion-reduce:transition-none",
|
|
23
|
+
transform: "transition-transform duration-flow ease-out motion-reduce:transition-none"
|
|
24
|
+
};
|
|
25
|
+
var interactiveCssTransition = "transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-flow ease-out motion-reduce:transition-none";
|
|
26
|
+
|
|
27
|
+
// src/shared/animation/motion/index.ts
|
|
28
|
+
var motion_exports = {};
|
|
29
|
+
__export(motion_exports, {
|
|
30
|
+
AnimatePresence: () => AnimatePresence,
|
|
31
|
+
AnimatedCard: () => AnimatedCard,
|
|
32
|
+
AnimatedDrawer: () => AnimatedDrawer,
|
|
33
|
+
AnimatedList: () => AnimatedList,
|
|
34
|
+
AnimatedModal: () => AnimatedModal,
|
|
35
|
+
AnimatedPopover: () => AnimatedPopover,
|
|
36
|
+
FadeIn: () => FadeIn,
|
|
37
|
+
LayoutGroup: () => LayoutGroup,
|
|
38
|
+
LazyMotion: () => LazyMotion,
|
|
39
|
+
MotionConfig: () => MotionConfig,
|
|
40
|
+
PageTransition: () => PageTransition,
|
|
41
|
+
ScaleIn: () => ScaleIn,
|
|
42
|
+
SlideIn: () => SlideIn,
|
|
43
|
+
animate: () => animate,
|
|
44
|
+
animatedList: () => animatedList,
|
|
45
|
+
animatedListItem: () => animatedListItem,
|
|
46
|
+
animationDistances: () => animationDistances,
|
|
47
|
+
animationDurations: () => animationDurations,
|
|
48
|
+
animationEasings: () => animationEasings,
|
|
49
|
+
animationSprings: () => animationSprings,
|
|
50
|
+
animationTransitions: () => animationTransitions,
|
|
51
|
+
domAnimation: () => domAnimation,
|
|
52
|
+
drawerSurface: () => drawerSurface,
|
|
53
|
+
fadeIn: () => fadeIn,
|
|
54
|
+
m: () => m,
|
|
55
|
+
modalSurface: () => modalSurface,
|
|
56
|
+
motion: () => motion,
|
|
57
|
+
pageTransition: () => pageTransition,
|
|
58
|
+
popoverSurface: () => popoverSurface,
|
|
59
|
+
reducedMotionVariants: () => reducedMotionVariants,
|
|
60
|
+
scaleIn: () => scaleIn,
|
|
61
|
+
slideIn: () => slideIn,
|
|
62
|
+
useAnimationFrame: () => useAnimationFrame,
|
|
63
|
+
useInView: () => useInView,
|
|
64
|
+
useMotionTemplate: () => useMotionTemplate,
|
|
65
|
+
useMotionValue: () => useMotionValue,
|
|
66
|
+
useReducedMotion: () => useReducedMotion,
|
|
67
|
+
useScroll: () => useScroll,
|
|
68
|
+
useSpring: () => useSpring,
|
|
69
|
+
useTransform: () => useTransform,
|
|
70
|
+
useVelocity: () => useVelocity
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// src/shared/animation/motion/tokens.ts
|
|
74
|
+
var animationDurations = {
|
|
75
|
+
instant: 0,
|
|
76
|
+
micro: 0.1,
|
|
77
|
+
fast: 0.16,
|
|
78
|
+
standard: 0.2,
|
|
79
|
+
reveal: 0.3,
|
|
80
|
+
page: 0.44
|
|
81
|
+
};
|
|
82
|
+
var animationEasings = {
|
|
83
|
+
linear: "linear",
|
|
84
|
+
enter: [0, 0, 0.2, 1],
|
|
85
|
+
exit: [0.4, 0, 1, 1],
|
|
86
|
+
standard: [0.4, 0, 0.2, 1],
|
|
87
|
+
emphasized: [0.16, 1, 0.3, 1]
|
|
88
|
+
};
|
|
89
|
+
var animationSprings = {
|
|
90
|
+
interactive: { type: "spring", stiffness: 380, damping: 34, mass: 0.8 },
|
|
91
|
+
layout: { type: "spring", stiffness: 480, damping: 42, mass: 1 },
|
|
92
|
+
panel: { type: "spring", stiffness: 320, damping: 36, mass: 1 }
|
|
93
|
+
};
|
|
94
|
+
var animationDistances = {
|
|
95
|
+
xs: 4,
|
|
96
|
+
sm: 8,
|
|
97
|
+
md: 16,
|
|
98
|
+
lg: 24,
|
|
99
|
+
panel: 32
|
|
100
|
+
};
|
|
101
|
+
var animationTransitions = {
|
|
102
|
+
instant: { duration: animationDurations.instant },
|
|
103
|
+
micro: { duration: animationDurations.micro, ease: animationEasings.enter },
|
|
104
|
+
standard: { duration: animationDurations.standard, ease: animationEasings.enter },
|
|
105
|
+
reveal: { duration: animationDurations.reveal, ease: animationEasings.emphasized },
|
|
106
|
+
page: { duration: animationDurations.page, ease: animationEasings.emphasized },
|
|
107
|
+
layout: animationSprings.layout,
|
|
108
|
+
panel: animationSprings.panel
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
// src/shared/animation/motion/variants.ts
|
|
112
|
+
var fadeIn = {
|
|
113
|
+
initial: { opacity: 0 },
|
|
114
|
+
animate: { opacity: 1, transition: animationTransitions.standard },
|
|
115
|
+
exit: { opacity: 0, transition: animationTransitions.micro }
|
|
116
|
+
};
|
|
117
|
+
var scaleIn = {
|
|
118
|
+
initial: { opacity: 0, scale: 0.96 },
|
|
119
|
+
animate: { opacity: 1, scale: 1, transition: animationTransitions.reveal },
|
|
120
|
+
exit: { opacity: 0, scale: 0.98, transition: animationTransitions.micro }
|
|
121
|
+
};
|
|
122
|
+
var slideIn = {
|
|
123
|
+
up: {
|
|
124
|
+
initial: { opacity: 0, y: animationDistances.md },
|
|
125
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
|
|
126
|
+
exit: { opacity: 0, y: animationDistances.sm, transition: animationTransitions.micro }
|
|
127
|
+
},
|
|
128
|
+
down: {
|
|
129
|
+
initial: { opacity: 0, y: -16 },
|
|
130
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
|
|
131
|
+
exit: { opacity: 0, y: -8, transition: animationTransitions.micro }
|
|
132
|
+
},
|
|
133
|
+
left: {
|
|
134
|
+
initial: { opacity: 0, x: animationDistances.md },
|
|
135
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
|
|
136
|
+
exit: { opacity: 0, x: animationDistances.sm, transition: animationTransitions.micro }
|
|
137
|
+
},
|
|
138
|
+
right: {
|
|
139
|
+
initial: { opacity: 0, x: -16 },
|
|
140
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
|
|
141
|
+
exit: { opacity: 0, x: -8, transition: animationTransitions.micro }
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
var animatedList = {
|
|
145
|
+
initial: {},
|
|
146
|
+
animate: { transition: { staggerChildren: 0.06, delayChildren: 0.02 } },
|
|
147
|
+
exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 } }
|
|
148
|
+
};
|
|
149
|
+
var animatedListItem = {
|
|
150
|
+
initial: { opacity: 0, y: animationDistances.sm },
|
|
151
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.standard },
|
|
152
|
+
exit: { opacity: 0, y: animationDistances.xs, transition: animationTransitions.micro }
|
|
153
|
+
};
|
|
154
|
+
var modalSurface = {
|
|
155
|
+
initial: { opacity: 0, scale: 0.98, y: animationDistances.sm },
|
|
156
|
+
animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.panel },
|
|
157
|
+
exit: {
|
|
158
|
+
opacity: 0,
|
|
159
|
+
scale: 0.98,
|
|
160
|
+
y: animationDistances.xs,
|
|
161
|
+
transition: animationTransitions.micro
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
var drawerSurface = {
|
|
165
|
+
left: {
|
|
166
|
+
initial: { opacity: 0, x: "-100%" },
|
|
167
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
|
|
168
|
+
exit: { opacity: 0, x: "-100%", transition: animationTransitions.micro }
|
|
169
|
+
},
|
|
170
|
+
right: {
|
|
171
|
+
initial: { opacity: 0, x: "100%" },
|
|
172
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
|
|
173
|
+
exit: { opacity: 0, x: "100%", transition: animationTransitions.micro }
|
|
174
|
+
},
|
|
175
|
+
top: {
|
|
176
|
+
initial: { opacity: 0, y: "-100%" },
|
|
177
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
|
|
178
|
+
exit: { opacity: 0, y: "-100%", transition: animationTransitions.micro }
|
|
179
|
+
},
|
|
180
|
+
bottom: {
|
|
181
|
+
initial: { opacity: 0, y: "100%" },
|
|
182
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
|
|
183
|
+
exit: { opacity: 0, y: "100%", transition: animationTransitions.micro }
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
var popoverSurface = {
|
|
187
|
+
initial: { opacity: 0, scale: 0.98, y: animationDistances.xs },
|
|
188
|
+
animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.standard },
|
|
189
|
+
exit: {
|
|
190
|
+
opacity: 0,
|
|
191
|
+
scale: 0.98,
|
|
192
|
+
y: animationDistances.xs,
|
|
193
|
+
transition: animationTransitions.micro
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
var pageTransition = {
|
|
197
|
+
initial: { opacity: 0, y: animationDistances.sm },
|
|
198
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.page },
|
|
199
|
+
exit: { opacity: 0, y: -4, transition: animationTransitions.standard }
|
|
200
|
+
};
|
|
201
|
+
var reducedMotionVariants = {
|
|
202
|
+
initial: { opacity: 0 },
|
|
203
|
+
animate: { opacity: 1, transition: animationTransitions.instant },
|
|
204
|
+
exit: { opacity: 0, transition: animationTransitions.instant }
|
|
205
|
+
};
|
|
206
|
+
function useAccessibleVariants(variants, allowTransform = false) {
|
|
207
|
+
const shouldReduceMotion = useReducedMotion();
|
|
208
|
+
return shouldReduceMotion && !allowTransform ? reducedMotionVariants : variants;
|
|
209
|
+
}
|
|
210
|
+
function FadeIn({ children, ...props }) {
|
|
211
|
+
const variants = useAccessibleVariants(fadeIn);
|
|
212
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
213
|
+
}
|
|
214
|
+
function SlideIn({
|
|
215
|
+
children,
|
|
216
|
+
direction = "up",
|
|
217
|
+
...props
|
|
218
|
+
}) {
|
|
219
|
+
const variants = useAccessibleVariants(slideIn[direction]);
|
|
220
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
221
|
+
}
|
|
222
|
+
function ScaleIn({ children, ...props }) {
|
|
223
|
+
const variants = useAccessibleVariants(scaleIn);
|
|
224
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
225
|
+
}
|
|
226
|
+
function AnimatedCard({ children, ...props }) {
|
|
227
|
+
return /* @__PURE__ */ jsx(ScaleIn, { whileHover: { y: -2 }, whileTap: { scale: 0.99 }, ...props, children });
|
|
228
|
+
}
|
|
229
|
+
function AnimatedList({ children, ...props }) {
|
|
230
|
+
const containerVariants = useAccessibleVariants(animatedList);
|
|
231
|
+
const itemVariants = useAccessibleVariants(animatedListItem);
|
|
232
|
+
return /* @__PURE__ */ jsx(
|
|
233
|
+
motion.div,
|
|
234
|
+
{
|
|
235
|
+
initial: "initial",
|
|
236
|
+
animate: "animate",
|
|
237
|
+
exit: "exit",
|
|
238
|
+
variants: containerVariants,
|
|
239
|
+
...props,
|
|
240
|
+
children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: child }, index)) : children
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
function AnimatedModal({ children, open, ...props }) {
|
|
245
|
+
const variants = useAccessibleVariants(modalSurface);
|
|
246
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
247
|
+
}
|
|
248
|
+
function AnimatedDrawer({
|
|
249
|
+
children,
|
|
250
|
+
open,
|
|
251
|
+
side = "right",
|
|
252
|
+
...props
|
|
253
|
+
}) {
|
|
254
|
+
const variants = useAccessibleVariants(drawerSurface[side]);
|
|
255
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
256
|
+
}
|
|
257
|
+
function AnimatedPopover({
|
|
258
|
+
children,
|
|
259
|
+
open,
|
|
260
|
+
...props
|
|
261
|
+
}) {
|
|
262
|
+
const variants = useAccessibleVariants(popoverSurface);
|
|
263
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
264
|
+
}
|
|
265
|
+
function PageTransition({ children, ...props }) {
|
|
266
|
+
const variants = useAccessibleVariants(pageTransition);
|
|
267
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
export { css_exports as cssAnimation, motion_exports as productMotion };
|
|
271
|
+
//# sourceMappingURL=index.js.map
|
|
272
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/shared/animation/css/index.ts","../../../src/shared/animation/motion/index.ts","../../../src/shared/animation/motion/tokens.ts","../../../src/shared/animation/motion/variants.ts","../../../src/shared/animation/motion/primitives/index.tsx"],"names":["AnimatePresence","motion","useReducedMotion"],"mappings":"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","file":"index.js","sourcesContent":["export const cssTransition = {\n color: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n background: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n border: \"transition-colors duration-micro ease-out motion-reduce:transition-none\",\n shadow: \"transition-shadow duration-flow ease-out motion-reduce:transition-none\",\n opacity: \"transition-opacity duration-micro ease-out motion-reduce:transition-none\",\n transform: \"transition-transform duration-flow ease-out motion-reduce:transition-none\",\n} as const;\n\nexport const interactiveCssTransition =\n \"transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-flow ease-out motion-reduce:transition-none\";\n\nexport type CssTransition = keyof typeof cssTransition;\n","\"use client\";\n\nexport type {\n HTMLMotionProps,\n MotionProps,\n MotionStyle,\n MotionValue,\n Transition,\n Variants,\n} from \"framer-motion\";\nexport {\n AnimatePresence,\n animate,\n domAnimation,\n LayoutGroup,\n LazyMotion,\n MotionConfig,\n m,\n motion,\n useAnimationFrame,\n useInView,\n useMotionTemplate,\n useMotionValue,\n useReducedMotion,\n useScroll,\n useSpring,\n useTransform,\n useVelocity,\n} from \"framer-motion\";\n\nexport * from \"./primitives\";\nexport * from \"./tokens\";\nexport * from \"./variants\";\n","import type { Transition } from \"framer-motion\";\n\nexport const animationDurations = {\n instant: 0,\n micro: 0.1,\n fast: 0.16,\n standard: 0.2,\n reveal: 0.3,\n page: 0.44,\n} as const;\n\nexport const animationEasings = {\n linear: \"linear\",\n enter: [0, 0, 0.2, 1] as [number, number, number, number],\n exit: [0.4, 0, 1, 1] as [number, number, number, number],\n standard: [0.4, 0, 0.2, 1] as [number, number, number, number],\n emphasized: [0.16, 1, 0.3, 1] as [number, number, number, number],\n} as const;\n\nexport const animationSprings = {\n interactive: { type: \"spring\", stiffness: 380, damping: 34, mass: 0.8 },\n layout: { type: \"spring\", stiffness: 480, damping: 42, mass: 1 },\n panel: { type: \"spring\", stiffness: 320, damping: 36, mass: 1 },\n} as const satisfies Record<string, Transition>;\n\nexport const animationDistances = {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n panel: 32,\n} as const;\n\nexport const animationTransitions = {\n instant: { duration: animationDurations.instant },\n micro: { duration: animationDurations.micro, ease: animationEasings.enter },\n standard: { duration: animationDurations.standard, ease: animationEasings.enter },\n reveal: { duration: animationDurations.reveal, ease: animationEasings.emphasized },\n page: { duration: animationDurations.page, ease: animationEasings.emphasized },\n layout: animationSprings.layout,\n panel: animationSprings.panel,\n} as const satisfies Record<string, Transition>;\n\nexport type AnimationDuration = keyof typeof animationDurations;\nexport type AnimationTransition = keyof typeof animationTransitions;\n","import type { Variants } from \"framer-motion\";\nimport { animationDistances, animationTransitions } from \"./tokens\";\n\nexport const fadeIn: Variants = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: animationTransitions.standard },\n exit: { opacity: 0, transition: animationTransitions.micro },\n};\n\nexport const scaleIn: Variants = {\n initial: { opacity: 0, scale: 0.96 },\n animate: { opacity: 1, scale: 1, transition: animationTransitions.reveal },\n exit: { opacity: 0, scale: 0.98, transition: animationTransitions.micro },\n};\n\nexport const slideIn = {\n up: {\n initial: { opacity: 0, y: animationDistances.md },\n animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, y: animationDistances.sm, transition: animationTransitions.micro },\n },\n down: {\n initial: { opacity: 0, y: -animationDistances.md },\n animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, y: -animationDistances.sm, transition: animationTransitions.micro },\n },\n left: {\n initial: { opacity: 0, x: animationDistances.md },\n animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, x: animationDistances.sm, transition: animationTransitions.micro },\n },\n right: {\n initial: { opacity: 0, x: -animationDistances.md },\n animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, x: -animationDistances.sm, transition: animationTransitions.micro },\n },\n} as const satisfies Record<string, Variants>;\n\nexport const animatedList: Variants = {\n initial: {},\n animate: { transition: { staggerChildren: 0.06, delayChildren: 0.02 } },\n exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 } },\n};\n\nexport const animatedListItem: Variants = {\n initial: { opacity: 0, y: animationDistances.sm },\n animate: { opacity: 1, y: 0, transition: animationTransitions.standard },\n exit: { opacity: 0, y: animationDistances.xs, transition: animationTransitions.micro },\n};\n\nexport const modalSurface: Variants = {\n initial: { opacity: 0, scale: 0.98, y: animationDistances.sm },\n animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.panel },\n exit: {\n opacity: 0,\n scale: 0.98,\n y: animationDistances.xs,\n transition: animationTransitions.micro,\n },\n};\n\nexport const drawerSurface = {\n left: {\n initial: { opacity: 0, x: \"-100%\" },\n animate: { opacity: 1, x: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, x: \"-100%\", transition: animationTransitions.micro },\n },\n right: {\n initial: { opacity: 0, x: \"100%\" },\n animate: { opacity: 1, x: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, x: \"100%\", transition: animationTransitions.micro },\n },\n top: {\n initial: { opacity: 0, y: \"-100%\" },\n animate: { opacity: 1, y: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, y: \"-100%\", transition: animationTransitions.micro },\n },\n bottom: {\n initial: { opacity: 0, y: \"100%\" },\n animate: { opacity: 1, y: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, y: \"100%\", transition: animationTransitions.micro },\n },\n} as const satisfies Record<string, Variants>;\n\nexport const popoverSurface: Variants = {\n initial: { opacity: 0, scale: 0.98, y: animationDistances.xs },\n animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.standard },\n exit: {\n opacity: 0,\n scale: 0.98,\n y: animationDistances.xs,\n transition: animationTransitions.micro,\n },\n};\n\nexport const pageTransition: Variants = {\n initial: { opacity: 0, y: animationDistances.sm },\n animate: { opacity: 1, y: 0, transition: animationTransitions.page },\n exit: { opacity: 0, y: -animationDistances.xs, transition: animationTransitions.standard },\n};\n\nexport const reducedMotionVariants: Variants = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: animationTransitions.instant },\n exit: { opacity: 0, transition: animationTransitions.instant },\n};\n","\"use client\";\n\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n type Variants,\n} from \"framer-motion\";\nimport type { ReactNode } from \"react\";\nimport {\n animatedList,\n animatedListItem,\n drawerSurface,\n fadeIn,\n modalSurface,\n pageTransition,\n popoverSurface,\n reducedMotionVariants,\n scaleIn,\n slideIn,\n} from \"../variants\";\n\ntype AnimatedDivProps = HTMLMotionProps<\"div\"> & {\n children: ReactNode;\n};\n\nfunction useAccessibleVariants(variants: Variants, allowTransform = false) {\n const shouldReduceMotion = useReducedMotion();\n return shouldReduceMotion && !allowTransform ? reducedMotionVariants : variants;\n}\n\nexport function FadeIn({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(fadeIn);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function SlideIn({\n children,\n direction = \"up\",\n ...props\n}: AnimatedDivProps & { direction?: keyof typeof slideIn }) {\n const variants = useAccessibleVariants(slideIn[direction]);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function ScaleIn({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(scaleIn);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function AnimatedCard({ children, ...props }: AnimatedDivProps) {\n return (\n <ScaleIn whileHover={{ y: -2 }} whileTap={{ scale: 0.99 }} {...props}>\n {children}\n </ScaleIn>\n );\n}\n\nexport function AnimatedList({ children, ...props }: AnimatedDivProps) {\n const containerVariants = useAccessibleVariants(animatedList);\n const itemVariants = useAccessibleVariants(animatedListItem);\n\n return (\n <motion.div\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n variants={containerVariants}\n {...props}\n >\n {Array.isArray(children)\n ? children.map((child, index) => (\n <motion.div key={index} variants={itemVariants}>\n {child}\n </motion.div>\n ))\n : children}\n </motion.div>\n );\n}\n\nexport function AnimatedModal({ children, open, ...props }: AnimatedDivProps & { open: boolean }) {\n const variants = useAccessibleVariants(modalSurface);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function AnimatedDrawer({\n children,\n open,\n side = \"right\",\n ...props\n}: AnimatedDivProps & { open: boolean; side?: keyof typeof drawerSurface }) {\n const variants = useAccessibleVariants(drawerSurface[side]);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function AnimatedPopover({\n children,\n open,\n ...props\n}: AnimatedDivProps & { open: boolean }) {\n const variants = useAccessibleVariants(popoverSurface);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function PageTransition({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(pageTransition);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { AnimatePresence, HTMLMotionProps, LayoutGroup, LazyMotion, MotionConfig, MotionProps, MotionStyle, MotionValue, Transition, Variants, animate, domAnimation, m, motion, useAnimationFrame, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform, useVelocity } from 'framer-motion';
|
|
2
|
+
export { A as AnimatedCard, a as AnimatedDrawer, b as AnimatedList, c as AnimatedModal, d as AnimatedPopover, e as AnimationDuration, f as AnimationTransition, F as FadeIn, P as PageTransition, S as ScaleIn, g as SlideIn, h as animatedList, i as animatedListItem, j as animationDistances, k as animationDurations, l as animationEasings, m as animationSprings, n as animationTransitions, o as drawerSurface, p as fadeIn, q as modalSurface, r as pageTransition, s as popoverSurface, t as reducedMotionVariants, u as scaleIn, v as slideIn } from '../../../tokens-EAC6uPem.js';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
|
|
3
|
+
export { AnimatePresence, LayoutGroup, LazyMotion, MotionConfig, animate, domAnimation, m, motion, useAnimationFrame, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform, useVelocity } from 'framer-motion';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/shared/animation/motion/tokens.ts
|
|
7
|
+
var animationDurations = {
|
|
8
|
+
instant: 0,
|
|
9
|
+
micro: 0.1,
|
|
10
|
+
fast: 0.16,
|
|
11
|
+
standard: 0.2,
|
|
12
|
+
reveal: 0.3,
|
|
13
|
+
page: 0.44
|
|
14
|
+
};
|
|
15
|
+
var animationEasings = {
|
|
16
|
+
linear: "linear",
|
|
17
|
+
enter: [0, 0, 0.2, 1],
|
|
18
|
+
exit: [0.4, 0, 1, 1],
|
|
19
|
+
standard: [0.4, 0, 0.2, 1],
|
|
20
|
+
emphasized: [0.16, 1, 0.3, 1]
|
|
21
|
+
};
|
|
22
|
+
var animationSprings = {
|
|
23
|
+
interactive: { type: "spring", stiffness: 380, damping: 34, mass: 0.8 },
|
|
24
|
+
layout: { type: "spring", stiffness: 480, damping: 42, mass: 1 },
|
|
25
|
+
panel: { type: "spring", stiffness: 320, damping: 36, mass: 1 }
|
|
26
|
+
};
|
|
27
|
+
var animationDistances = {
|
|
28
|
+
xs: 4,
|
|
29
|
+
sm: 8,
|
|
30
|
+
md: 16,
|
|
31
|
+
lg: 24,
|
|
32
|
+
panel: 32
|
|
33
|
+
};
|
|
34
|
+
var animationTransitions = {
|
|
35
|
+
instant: { duration: animationDurations.instant },
|
|
36
|
+
micro: { duration: animationDurations.micro, ease: animationEasings.enter },
|
|
37
|
+
standard: { duration: animationDurations.standard, ease: animationEasings.enter },
|
|
38
|
+
reveal: { duration: animationDurations.reveal, ease: animationEasings.emphasized },
|
|
39
|
+
page: { duration: animationDurations.page, ease: animationEasings.emphasized },
|
|
40
|
+
layout: animationSprings.layout,
|
|
41
|
+
panel: animationSprings.panel
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// src/shared/animation/motion/variants.ts
|
|
45
|
+
var fadeIn = {
|
|
46
|
+
initial: { opacity: 0 },
|
|
47
|
+
animate: { opacity: 1, transition: animationTransitions.standard },
|
|
48
|
+
exit: { opacity: 0, transition: animationTransitions.micro }
|
|
49
|
+
};
|
|
50
|
+
var scaleIn = {
|
|
51
|
+
initial: { opacity: 0, scale: 0.96 },
|
|
52
|
+
animate: { opacity: 1, scale: 1, transition: animationTransitions.reveal },
|
|
53
|
+
exit: { opacity: 0, scale: 0.98, transition: animationTransitions.micro }
|
|
54
|
+
};
|
|
55
|
+
var slideIn = {
|
|
56
|
+
up: {
|
|
57
|
+
initial: { opacity: 0, y: animationDistances.md },
|
|
58
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
|
|
59
|
+
exit: { opacity: 0, y: animationDistances.sm, transition: animationTransitions.micro }
|
|
60
|
+
},
|
|
61
|
+
down: {
|
|
62
|
+
initial: { opacity: 0, y: -animationDistances.md },
|
|
63
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
|
|
64
|
+
exit: { opacity: 0, y: -animationDistances.sm, transition: animationTransitions.micro }
|
|
65
|
+
},
|
|
66
|
+
left: {
|
|
67
|
+
initial: { opacity: 0, x: animationDistances.md },
|
|
68
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
|
|
69
|
+
exit: { opacity: 0, x: animationDistances.sm, transition: animationTransitions.micro }
|
|
70
|
+
},
|
|
71
|
+
right: {
|
|
72
|
+
initial: { opacity: 0, x: -animationDistances.md },
|
|
73
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
|
|
74
|
+
exit: { opacity: 0, x: -animationDistances.sm, transition: animationTransitions.micro }
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
var animatedList = {
|
|
78
|
+
initial: {},
|
|
79
|
+
animate: { transition: { staggerChildren: 0.06, delayChildren: 0.02 } },
|
|
80
|
+
exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 } }
|
|
81
|
+
};
|
|
82
|
+
var animatedListItem = {
|
|
83
|
+
initial: { opacity: 0, y: animationDistances.sm },
|
|
84
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.standard },
|
|
85
|
+
exit: { opacity: 0, y: animationDistances.xs, transition: animationTransitions.micro }
|
|
86
|
+
};
|
|
87
|
+
var modalSurface = {
|
|
88
|
+
initial: { opacity: 0, scale: 0.98, y: animationDistances.sm },
|
|
89
|
+
animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.panel },
|
|
90
|
+
exit: {
|
|
91
|
+
opacity: 0,
|
|
92
|
+
scale: 0.98,
|
|
93
|
+
y: animationDistances.xs,
|
|
94
|
+
transition: animationTransitions.micro
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
var drawerSurface = {
|
|
98
|
+
left: {
|
|
99
|
+
initial: { opacity: 0, x: "-100%" },
|
|
100
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
|
|
101
|
+
exit: { opacity: 0, x: "-100%", transition: animationTransitions.micro }
|
|
102
|
+
},
|
|
103
|
+
right: {
|
|
104
|
+
initial: { opacity: 0, x: "100%" },
|
|
105
|
+
animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
|
|
106
|
+
exit: { opacity: 0, x: "100%", transition: animationTransitions.micro }
|
|
107
|
+
},
|
|
108
|
+
top: {
|
|
109
|
+
initial: { opacity: 0, y: "-100%" },
|
|
110
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
|
|
111
|
+
exit: { opacity: 0, y: "-100%", transition: animationTransitions.micro }
|
|
112
|
+
},
|
|
113
|
+
bottom: {
|
|
114
|
+
initial: { opacity: 0, y: "100%" },
|
|
115
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
|
|
116
|
+
exit: { opacity: 0, y: "100%", transition: animationTransitions.micro }
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
var popoverSurface = {
|
|
120
|
+
initial: { opacity: 0, scale: 0.98, y: animationDistances.xs },
|
|
121
|
+
animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.standard },
|
|
122
|
+
exit: {
|
|
123
|
+
opacity: 0,
|
|
124
|
+
scale: 0.98,
|
|
125
|
+
y: animationDistances.xs,
|
|
126
|
+
transition: animationTransitions.micro
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
var pageTransition = {
|
|
130
|
+
initial: { opacity: 0, y: animationDistances.sm },
|
|
131
|
+
animate: { opacity: 1, y: 0, transition: animationTransitions.page },
|
|
132
|
+
exit: { opacity: 0, y: -animationDistances.xs, transition: animationTransitions.standard }
|
|
133
|
+
};
|
|
134
|
+
var reducedMotionVariants = {
|
|
135
|
+
initial: { opacity: 0 },
|
|
136
|
+
animate: { opacity: 1, transition: animationTransitions.instant },
|
|
137
|
+
exit: { opacity: 0, transition: animationTransitions.instant }
|
|
138
|
+
};
|
|
139
|
+
function useAccessibleVariants(variants, allowTransform = false) {
|
|
140
|
+
const shouldReduceMotion = useReducedMotion();
|
|
141
|
+
return shouldReduceMotion && !allowTransform ? reducedMotionVariants : variants;
|
|
142
|
+
}
|
|
143
|
+
function FadeIn({ children, ...props }) {
|
|
144
|
+
const variants = useAccessibleVariants(fadeIn);
|
|
145
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
146
|
+
}
|
|
147
|
+
function SlideIn({
|
|
148
|
+
children,
|
|
149
|
+
direction = "up",
|
|
150
|
+
...props
|
|
151
|
+
}) {
|
|
152
|
+
const variants = useAccessibleVariants(slideIn[direction]);
|
|
153
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
154
|
+
}
|
|
155
|
+
function ScaleIn({ children, ...props }) {
|
|
156
|
+
const variants = useAccessibleVariants(scaleIn);
|
|
157
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
158
|
+
}
|
|
159
|
+
function AnimatedCard({ children, ...props }) {
|
|
160
|
+
return /* @__PURE__ */ jsx(ScaleIn, { whileHover: { y: -2 }, whileTap: { scale: 0.99 }, ...props, children });
|
|
161
|
+
}
|
|
162
|
+
function AnimatedList({ children, ...props }) {
|
|
163
|
+
const containerVariants = useAccessibleVariants(animatedList);
|
|
164
|
+
const itemVariants = useAccessibleVariants(animatedListItem);
|
|
165
|
+
return /* @__PURE__ */ jsx(
|
|
166
|
+
motion.div,
|
|
167
|
+
{
|
|
168
|
+
initial: "initial",
|
|
169
|
+
animate: "animate",
|
|
170
|
+
exit: "exit",
|
|
171
|
+
variants: containerVariants,
|
|
172
|
+
...props,
|
|
173
|
+
children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: child }, index)) : children
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
function AnimatedModal({ children, open, ...props }) {
|
|
178
|
+
const variants = useAccessibleVariants(modalSurface);
|
|
179
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
180
|
+
}
|
|
181
|
+
function AnimatedDrawer({
|
|
182
|
+
children,
|
|
183
|
+
open,
|
|
184
|
+
side = "right",
|
|
185
|
+
...props
|
|
186
|
+
}) {
|
|
187
|
+
const variants = useAccessibleVariants(drawerSurface[side]);
|
|
188
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
189
|
+
}
|
|
190
|
+
function AnimatedPopover({
|
|
191
|
+
children,
|
|
192
|
+
open,
|
|
193
|
+
...props
|
|
194
|
+
}) {
|
|
195
|
+
const variants = useAccessibleVariants(popoverSurface);
|
|
196
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
|
|
197
|
+
}
|
|
198
|
+
function PageTransition({ children, ...props }) {
|
|
199
|
+
const variants = useAccessibleVariants(pageTransition);
|
|
200
|
+
return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export { AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, FadeIn, PageTransition, ScaleIn, SlideIn, animatedList, animatedListItem, animationDistances, animationDurations, animationEasings, animationSprings, animationTransitions, drawerSurface, fadeIn, modalSurface, pageTransition, popoverSurface, reducedMotionVariants, scaleIn, slideIn };
|
|
204
|
+
//# sourceMappingURL=index.js.map
|
|
205
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/shared/animation/motion/tokens.ts","../../../../src/shared/animation/motion/variants.ts","../../../../src/shared/animation/motion/primitives/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Transition } from \"framer-motion\";\n\nexport const animationDurations = {\n instant: 0,\n micro: 0.1,\n fast: 0.16,\n standard: 0.2,\n reveal: 0.3,\n page: 0.44,\n} as const;\n\nexport const animationEasings = {\n linear: \"linear\",\n enter: [0, 0, 0.2, 1] as [number, number, number, number],\n exit: [0.4, 0, 1, 1] as [number, number, number, number],\n standard: [0.4, 0, 0.2, 1] as [number, number, number, number],\n emphasized: [0.16, 1, 0.3, 1] as [number, number, number, number],\n} as const;\n\nexport const animationSprings = {\n interactive: { type: \"spring\", stiffness: 380, damping: 34, mass: 0.8 },\n layout: { type: \"spring\", stiffness: 480, damping: 42, mass: 1 },\n panel: { type: \"spring\", stiffness: 320, damping: 36, mass: 1 },\n} as const satisfies Record<string, Transition>;\n\nexport const animationDistances = {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n panel: 32,\n} as const;\n\nexport const animationTransitions = {\n instant: { duration: animationDurations.instant },\n micro: { duration: animationDurations.micro, ease: animationEasings.enter },\n standard: { duration: animationDurations.standard, ease: animationEasings.enter },\n reveal: { duration: animationDurations.reveal, ease: animationEasings.emphasized },\n page: { duration: animationDurations.page, ease: animationEasings.emphasized },\n layout: animationSprings.layout,\n panel: animationSprings.panel,\n} as const satisfies Record<string, Transition>;\n\nexport type AnimationDuration = keyof typeof animationDurations;\nexport type AnimationTransition = keyof typeof animationTransitions;\n","import type { Variants } from \"framer-motion\";\nimport { animationDistances, animationTransitions } from \"./tokens\";\n\nexport const fadeIn: Variants = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: animationTransitions.standard },\n exit: { opacity: 0, transition: animationTransitions.micro },\n};\n\nexport const scaleIn: Variants = {\n initial: { opacity: 0, scale: 0.96 },\n animate: { opacity: 1, scale: 1, transition: animationTransitions.reveal },\n exit: { opacity: 0, scale: 0.98, transition: animationTransitions.micro },\n};\n\nexport const slideIn = {\n up: {\n initial: { opacity: 0, y: animationDistances.md },\n animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, y: animationDistances.sm, transition: animationTransitions.micro },\n },\n down: {\n initial: { opacity: 0, y: -animationDistances.md },\n animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, y: -animationDistances.sm, transition: animationTransitions.micro },\n },\n left: {\n initial: { opacity: 0, x: animationDistances.md },\n animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, x: animationDistances.sm, transition: animationTransitions.micro },\n },\n right: {\n initial: { opacity: 0, x: -animationDistances.md },\n animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },\n exit: { opacity: 0, x: -animationDistances.sm, transition: animationTransitions.micro },\n },\n} as const satisfies Record<string, Variants>;\n\nexport const animatedList: Variants = {\n initial: {},\n animate: { transition: { staggerChildren: 0.06, delayChildren: 0.02 } },\n exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 } },\n};\n\nexport const animatedListItem: Variants = {\n initial: { opacity: 0, y: animationDistances.sm },\n animate: { opacity: 1, y: 0, transition: animationTransitions.standard },\n exit: { opacity: 0, y: animationDistances.xs, transition: animationTransitions.micro },\n};\n\nexport const modalSurface: Variants = {\n initial: { opacity: 0, scale: 0.98, y: animationDistances.sm },\n animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.panel },\n exit: {\n opacity: 0,\n scale: 0.98,\n y: animationDistances.xs,\n transition: animationTransitions.micro,\n },\n};\n\nexport const drawerSurface = {\n left: {\n initial: { opacity: 0, x: \"-100%\" },\n animate: { opacity: 1, x: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, x: \"-100%\", transition: animationTransitions.micro },\n },\n right: {\n initial: { opacity: 0, x: \"100%\" },\n animate: { opacity: 1, x: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, x: \"100%\", transition: animationTransitions.micro },\n },\n top: {\n initial: { opacity: 0, y: \"-100%\" },\n animate: { opacity: 1, y: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, y: \"-100%\", transition: animationTransitions.micro },\n },\n bottom: {\n initial: { opacity: 0, y: \"100%\" },\n animate: { opacity: 1, y: 0, transition: animationTransitions.panel },\n exit: { opacity: 0, y: \"100%\", transition: animationTransitions.micro },\n },\n} as const satisfies Record<string, Variants>;\n\nexport const popoverSurface: Variants = {\n initial: { opacity: 0, scale: 0.98, y: animationDistances.xs },\n animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.standard },\n exit: {\n opacity: 0,\n scale: 0.98,\n y: animationDistances.xs,\n transition: animationTransitions.micro,\n },\n};\n\nexport const pageTransition: Variants = {\n initial: { opacity: 0, y: animationDistances.sm },\n animate: { opacity: 1, y: 0, transition: animationTransitions.page },\n exit: { opacity: 0, y: -animationDistances.xs, transition: animationTransitions.standard },\n};\n\nexport const reducedMotionVariants: Variants = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: animationTransitions.instant },\n exit: { opacity: 0, transition: animationTransitions.instant },\n};\n","\"use client\";\n\nimport {\n AnimatePresence,\n type HTMLMotionProps,\n motion,\n useReducedMotion,\n type Variants,\n} from \"framer-motion\";\nimport type { ReactNode } from \"react\";\nimport {\n animatedList,\n animatedListItem,\n drawerSurface,\n fadeIn,\n modalSurface,\n pageTransition,\n popoverSurface,\n reducedMotionVariants,\n scaleIn,\n slideIn,\n} from \"../variants\";\n\ntype AnimatedDivProps = HTMLMotionProps<\"div\"> & {\n children: ReactNode;\n};\n\nfunction useAccessibleVariants(variants: Variants, allowTransform = false) {\n const shouldReduceMotion = useReducedMotion();\n return shouldReduceMotion && !allowTransform ? reducedMotionVariants : variants;\n}\n\nexport function FadeIn({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(fadeIn);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function SlideIn({\n children,\n direction = \"up\",\n ...props\n}: AnimatedDivProps & { direction?: keyof typeof slideIn }) {\n const variants = useAccessibleVariants(slideIn[direction]);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function ScaleIn({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(scaleIn);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n\nexport function AnimatedCard({ children, ...props }: AnimatedDivProps) {\n return (\n <ScaleIn whileHover={{ y: -2 }} whileTap={{ scale: 0.99 }} {...props}>\n {children}\n </ScaleIn>\n );\n}\n\nexport function AnimatedList({ children, ...props }: AnimatedDivProps) {\n const containerVariants = useAccessibleVariants(animatedList);\n const itemVariants = useAccessibleVariants(animatedListItem);\n\n return (\n <motion.div\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n variants={containerVariants}\n {...props}\n >\n {Array.isArray(children)\n ? children.map((child, index) => (\n <motion.div key={index} variants={itemVariants}>\n {child}\n </motion.div>\n ))\n : children}\n </motion.div>\n );\n}\n\nexport function AnimatedModal({ children, open, ...props }: AnimatedDivProps & { open: boolean }) {\n const variants = useAccessibleVariants(modalSurface);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function AnimatedDrawer({\n children,\n open,\n side = \"right\",\n ...props\n}: AnimatedDivProps & { open: boolean; side?: keyof typeof drawerSurface }) {\n const variants = useAccessibleVariants(drawerSurface[side]);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function AnimatedPopover({\n children,\n open,\n ...props\n}: AnimatedDivProps & { open: boolean }) {\n const variants = useAccessibleVariants(popoverSurface);\n\n return (\n <AnimatePresence>\n {open ? (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n}\n\nexport function PageTransition({ children, ...props }: AnimatedDivProps) {\n const variants = useAccessibleVariants(pageTransition);\n\n return (\n <motion.div initial=\"initial\" animate=\"animate\" exit=\"exit\" variants={variants} {...props}>\n {children}\n </motion.div>\n );\n}\n"]}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* brand-override.css — Custom Brand Configuration
|
|
2
|
+
* brand-override.css — Custom Brand Configuration (legacy scale remap)
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* @import "@nebutra/
|
|
4
|
+
* Prefer the skin surface for product chrome:
|
|
5
|
+
* @import "@nebutra/tokens/skins/<name>.css";
|
|
6
|
+
* @see packages/design/tokens/skins/README.md
|
|
7
|
+
*
|
|
8
|
+
* This file remaps the **blue scale** only (residual `bg-blue-9` call sites).
|
|
9
|
+
* New code should use semantic tokens (`bg-primary`, `border-border`).
|
|
6
10
|
*
|
|
7
|
-
*
|
|
11
|
+
* Drop into globals.css after tokens if you still need scale remapping:
|
|
12
|
+
* @import "@nebutra/ui/styles/brand-override.css";
|
|
8
13
|
*
|
|
9
14
|
* ────────────────────────────────────────────────────────────
|
|
10
15
|
* HOW THE CASCADE WORKS
|
|
@@ -12,13 +17,8 @@
|
|
|
12
17
|
* 1. You define: --your-primary-* (11 steps)
|
|
13
18
|
* 2. System maps: --blue-9 → --your-primary-500 (solid fill)
|
|
14
19
|
* --blue-3 → --your-primary-200 (component bg)
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* QUICK START (2 minutes)
|
|
19
|
-
* Replace the hex values below with your brand colors.
|
|
20
|
-
* Use a tool like https://uicolors.app to generate 11 steps
|
|
21
|
-
* from a single hex value.
|
|
20
|
+
* 3. Residual blue-N utilities follow your brand; semantic CSS still wins
|
|
21
|
+
* for Button / Input that already use --primary.
|
|
22
22
|
* ────────────────────────────────────────────────────────────
|
|
23
23
|
*/
|
|
24
24
|
|