@saasflare/ui 2.0.0 → 3.0.1
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 +85 -45
- package/dist/{button-B2DR7obe.d.mts → button-DUQJ0X7e.d.mts} +0 -23
- package/dist/{button-B2DR7obe.d.ts → button-DUQJ0X7e.d.ts} +0 -23
- package/dist/chunk-7UGPCRZ6.mjs +130 -0
- package/dist/chunk-CWW36RYE.js +59 -0
- package/dist/chunk-JOVJRQO3.js +0 -1
- package/dist/{chunk-TU6BBAA7.js → chunk-OYH6LQWR.js} +33 -65
- package/dist/{chunk-OT4ZNLTB.mjs → chunk-QWLQV6FS.mjs} +2 -24
- package/dist/chunk-S26666D6.mjs +0 -1
- package/dist/chunk-VQQ6MF5I.js +161 -0
- package/dist/chunk-W53NTFPB.mjs +28 -0
- package/dist/dialog-CwyBJeNl.d.mts +22 -0
- package/dist/dialog-CwyBJeNl.d.ts +22 -0
- package/dist/entries/calendar.d.mts +13 -0
- package/dist/entries/calendar.d.ts +13 -0
- package/dist/entries/calendar.js +211 -0
- package/dist/entries/calendar.mjs +188 -0
- package/dist/entries/carousel.d.mts +1 -1
- package/dist/entries/carousel.d.ts +1 -1
- package/dist/entries/carousel.js +4 -3
- package/dist/entries/carousel.mjs +2 -1
- package/dist/entries/command.d.mts +21 -0
- package/dist/entries/command.d.ts +21 -0
- package/dist/entries/command.js +172 -0
- package/dist/entries/command.mjs +162 -0
- package/dist/entries/drawer.d.mts +16 -0
- package/dist/entries/drawer.d.ts +16 -0
- package/dist/entries/drawer.js +124 -0
- package/dist/entries/drawer.mjs +113 -0
- package/dist/entries/input-otp.d.mts +14 -0
- package/dist/entries/input-otp.d.ts +14 -0
- package/dist/entries/input-otp.js +89 -0
- package/dist/entries/input-otp.mjs +64 -0
- package/dist/entries/resizable.d.mts +10 -0
- package/dist/entries/resizable.d.ts +10 -0
- package/dist/entries/resizable.js +69 -0
- package/dist/entries/resizable.mjs +45 -0
- package/dist/index.d.mts +12 -103
- package/dist/index.d.ts +12 -103
- package/dist/index.js +1265 -832
- package/dist/index.mjs +1172 -740
- package/package.json +36 -12
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
|
|
4
5
|
var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
|
|
5
6
|
var classVarianceAuthority = require('class-variance-authority');
|
|
6
|
-
var
|
|
7
|
+
var react = require('react');
|
|
7
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
9
|
var nextThemes = require('next-themes');
|
|
9
|
-
var react = require('motion/react');
|
|
10
|
+
var react$1 = require('motion/react');
|
|
10
11
|
var lucideReact = require('lucide-react');
|
|
11
12
|
var Slot = require('@radix-ui/react-slot');
|
|
12
13
|
|
|
@@ -28,7 +29,6 @@ function _interopNamespace(e) {
|
|
|
28
29
|
return Object.freeze(n);
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
32
|
var Slot__namespace = /*#__PURE__*/_interopNamespace(Slot);
|
|
33
33
|
|
|
34
34
|
// src/lib/color.ts
|
|
@@ -75,34 +75,12 @@ function srgbToLinear(c) {
|
|
|
75
75
|
function isHex(input) {
|
|
76
76
|
return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
|
|
77
77
|
}
|
|
78
|
-
var
|
|
79
|
-
var subscribe = (cb) => {
|
|
80
|
-
const mql = window.matchMedia(QUERY);
|
|
81
|
-
mql.addEventListener("change", cb);
|
|
82
|
-
return () => mql.removeEventListener("change", cb);
|
|
83
|
-
};
|
|
84
|
-
var getSnapshot = () => window.matchMedia(QUERY).matches;
|
|
85
|
-
var getServerSnapshot = () => false;
|
|
86
|
-
function useReducedMotion() {
|
|
87
|
-
return React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// src/components/ui/motion-config.ts
|
|
91
|
-
var spring = { type: "spring", stiffness: 400, damping: 25 };
|
|
92
|
-
var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
|
|
93
|
-
var springGentle = { type: "spring", stiffness: 200, damping: 20 };
|
|
94
|
-
var springStiff = { type: "spring", stiffness: 500, damping: 30 };
|
|
95
|
-
var noMotion = { duration: 0 };
|
|
96
|
-
var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
|
|
97
|
-
var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
|
|
98
|
-
var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
|
|
99
|
-
var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
|
|
100
|
-
var AnimationContext = React.createContext(
|
|
78
|
+
var AnimationContext = react.createContext(
|
|
101
79
|
void 0
|
|
102
80
|
);
|
|
103
81
|
function useAnimation() {
|
|
104
|
-
const context =
|
|
105
|
-
const prefersReduced = useReducedMotion();
|
|
82
|
+
const context = react.useContext(AnimationContext);
|
|
83
|
+
const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
|
|
106
84
|
if (context) return context;
|
|
107
85
|
return { animated: !prefersReduced };
|
|
108
86
|
}
|
|
@@ -110,9 +88,9 @@ function SmoothScrollProvider({
|
|
|
110
88
|
children,
|
|
111
89
|
enabled = true
|
|
112
90
|
}) {
|
|
113
|
-
const reduced = useReducedMotion();
|
|
91
|
+
const reduced = chunkCWW36RYE_js.useReducedMotion();
|
|
114
92
|
const shouldSmooth = enabled && !reduced;
|
|
115
|
-
|
|
93
|
+
react.useEffect(() => {
|
|
116
94
|
if (!shouldSmooth) return;
|
|
117
95
|
const html = document.documentElement;
|
|
118
96
|
const previous = html.style.scrollBehavior;
|
|
@@ -161,18 +139,18 @@ function SaasflareScript({ nonce, palette, surface, radius, animated, storageKey
|
|
|
161
139
|
}
|
|
162
140
|
var SYNC_PREFIX = "sf-ls:";
|
|
163
141
|
function useLocalStorage(key, initialValue, options) {
|
|
164
|
-
const initialRef =
|
|
165
|
-
const optionsRef =
|
|
142
|
+
const initialRef = react.useRef(initialValue);
|
|
143
|
+
const optionsRef = react.useRef(options);
|
|
166
144
|
optionsRef.current = options;
|
|
167
|
-
const serialize =
|
|
145
|
+
const serialize = react.useCallback(
|
|
168
146
|
(value) => (optionsRef.current?.serializer ?? JSON.stringify)(value),
|
|
169
147
|
[]
|
|
170
148
|
);
|
|
171
|
-
const deserialize =
|
|
149
|
+
const deserialize = react.useCallback(
|
|
172
150
|
(raw) => (optionsRef.current?.deserializer ?? JSON.parse)(raw),
|
|
173
151
|
[]
|
|
174
152
|
);
|
|
175
|
-
const handleError =
|
|
153
|
+
const handleError = react.useCallback(
|
|
176
154
|
(error, operation) => {
|
|
177
155
|
if (optionsRef.current?.onError) {
|
|
178
156
|
optionsRef.current.onError(error, operation);
|
|
@@ -182,7 +160,7 @@ function useLocalStorage(key, initialValue, options) {
|
|
|
182
160
|
},
|
|
183
161
|
[key]
|
|
184
162
|
);
|
|
185
|
-
const readValue =
|
|
163
|
+
const readValue = react.useCallback(() => {
|
|
186
164
|
if (typeof window === "undefined") return initialRef.current;
|
|
187
165
|
try {
|
|
188
166
|
const item = window.localStorage.getItem(key);
|
|
@@ -192,8 +170,8 @@ function useLocalStorage(key, initialValue, options) {
|
|
|
192
170
|
return initialRef.current;
|
|
193
171
|
}
|
|
194
172
|
}, [key, deserialize, handleError]);
|
|
195
|
-
const [storedValue, setStoredValue] =
|
|
196
|
-
const setValue =
|
|
173
|
+
const [storedValue, setStoredValue] = react.useState(() => readValue());
|
|
174
|
+
const setValue = react.useCallback(
|
|
197
175
|
(value) => {
|
|
198
176
|
try {
|
|
199
177
|
setStoredValue((prev) => {
|
|
@@ -210,7 +188,7 @@ function useLocalStorage(key, initialValue, options) {
|
|
|
210
188
|
},
|
|
211
189
|
[key, serialize, handleError]
|
|
212
190
|
);
|
|
213
|
-
const removeValue =
|
|
191
|
+
const removeValue = react.useCallback(() => {
|
|
214
192
|
try {
|
|
215
193
|
if (typeof window !== "undefined") {
|
|
216
194
|
window.localStorage.removeItem(key);
|
|
@@ -221,7 +199,7 @@ function useLocalStorage(key, initialValue, options) {
|
|
|
221
199
|
handleError(error, "remove");
|
|
222
200
|
}
|
|
223
201
|
}, [key, handleError]);
|
|
224
|
-
|
|
202
|
+
react.useEffect(() => {
|
|
225
203
|
const onStorage = (e) => {
|
|
226
204
|
if (e.key === key) setStoredValue(readValue());
|
|
227
205
|
};
|
|
@@ -234,7 +212,7 @@ function useLocalStorage(key, initialValue, options) {
|
|
|
234
212
|
window.removeEventListener(syncEvent, onSync);
|
|
235
213
|
};
|
|
236
214
|
}, [key, readValue]);
|
|
237
|
-
|
|
215
|
+
react.useEffect(() => {
|
|
238
216
|
setStoredValue(readValue());
|
|
239
217
|
}, [readValue]);
|
|
240
218
|
return [storedValue, setValue, removeValue];
|
|
@@ -250,9 +228,9 @@ var DEFAULT_CONTEXT = {
|
|
|
250
228
|
setRadius: () => {
|
|
251
229
|
}
|
|
252
230
|
};
|
|
253
|
-
var SaasflareThemeContext =
|
|
231
|
+
var SaasflareThemeContext = react.createContext(DEFAULT_CONTEXT);
|
|
254
232
|
function useSaasflareTheme() {
|
|
255
|
-
return
|
|
233
|
+
return react.useContext(SaasflareThemeContext);
|
|
256
234
|
}
|
|
257
235
|
function applyColorAxis(root, prefix, value, injected) {
|
|
258
236
|
if (isHex(value)) {
|
|
@@ -277,7 +255,7 @@ function applyColorAxis(root, prefix, value, injected) {
|
|
|
277
255
|
}
|
|
278
256
|
function CustomPaletteInjector({ palette }) {
|
|
279
257
|
const { resolvedTheme } = nextThemes.useTheme();
|
|
280
|
-
|
|
258
|
+
react.useEffect(() => {
|
|
281
259
|
const root = document.documentElement;
|
|
282
260
|
const injected = [];
|
|
283
261
|
applyColorAxis(root, "primary", palette.primary, injected);
|
|
@@ -334,21 +312,21 @@ function SaasflareProvider({
|
|
|
334
312
|
const currentPalette = isCustomPalette ? palette.name : palette ?? persisted.palette;
|
|
335
313
|
const currentStyle = surface ?? persisted.surface ?? "flat";
|
|
336
314
|
const currentRadius = radius ?? persisted.radius ?? "rounded";
|
|
337
|
-
const setPalette =
|
|
315
|
+
const setPalette = react.useCallback(
|
|
338
316
|
(id) => setPersisted((prev) => ({ ...prev, palette: id })),
|
|
339
317
|
[setPersisted]
|
|
340
318
|
);
|
|
341
|
-
const setSurface =
|
|
319
|
+
const setSurface = react.useCallback(
|
|
342
320
|
(style) => setPersisted((prev) => ({ ...prev, surface: style })),
|
|
343
321
|
[setPersisted]
|
|
344
322
|
);
|
|
345
|
-
const setRadius =
|
|
323
|
+
const setRadius = react.useCallback(
|
|
346
324
|
(r) => setPersisted((prev) => ({ ...prev, radius: r })),
|
|
347
325
|
[setPersisted]
|
|
348
326
|
);
|
|
349
|
-
const prefersReduced = useReducedMotion();
|
|
327
|
+
const prefersReduced = chunkCWW36RYE_js.useReducedMotion();
|
|
350
328
|
const effectiveAnimated = animated && !prefersReduced;
|
|
351
|
-
|
|
329
|
+
react.useEffect(() => {
|
|
352
330
|
const root = document.documentElement;
|
|
353
331
|
if (currentPalette) {
|
|
354
332
|
root.setAttribute(SAASFLARE_DATA_ATTR.palette, currentPalette);
|
|
@@ -359,7 +337,7 @@ function SaasflareProvider({
|
|
|
359
337
|
root.setAttribute(SAASFLARE_DATA_ATTR.radius, currentRadius);
|
|
360
338
|
root.setAttribute(SAASFLARE_DATA_ATTR.animated, String(effectiveAnimated));
|
|
361
339
|
}, [currentPalette, currentStyle, currentRadius, effectiveAnimated]);
|
|
362
|
-
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
340
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.LazyMotion, { features: react$1.domAnimation, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
363
341
|
nextThemes.ThemeProvider,
|
|
364
342
|
{
|
|
365
343
|
attribute: "class",
|
|
@@ -446,7 +424,7 @@ function SaasflareShell({
|
|
|
446
424
|
}
|
|
447
425
|
function useSaasflareProps(props = {}) {
|
|
448
426
|
const ctx = useSaasflareTheme();
|
|
449
|
-
const anim =
|
|
427
|
+
const anim = react.useContext(AnimationContext);
|
|
450
428
|
return {
|
|
451
429
|
surface: props.surface ?? ctx.surface,
|
|
452
430
|
radius: props.radius ?? ctx.radius,
|
|
@@ -454,7 +432,7 @@ function useSaasflareProps(props = {}) {
|
|
|
454
432
|
palette: ctx.palette
|
|
455
433
|
};
|
|
456
434
|
}
|
|
457
|
-
var MotionSlot = react.m.create(Slot__namespace.Root);
|
|
435
|
+
var MotionSlot = react$1.m.create(Slot__namespace.Root);
|
|
458
436
|
var LEGACY_VARIANT_MAP = {
|
|
459
437
|
default: { variant: "solid", intent: "primary" },
|
|
460
438
|
destructive: { variant: "solid", intent: "danger" },
|
|
@@ -506,7 +484,7 @@ function Button({
|
|
|
506
484
|
...props
|
|
507
485
|
}) {
|
|
508
486
|
const sfProps = useSaasflareProps({ surface, animated });
|
|
509
|
-
const reduced = useReducedMotion();
|
|
487
|
+
const reduced = chunkCWW36RYE_js.useReducedMotion();
|
|
510
488
|
const effectiveVariant = variantProp ?? (sfProps.surface === "glass" ? "glass" : "solid");
|
|
511
489
|
let resolvedVariant = effectiveVariant;
|
|
512
490
|
let resolvedIntent = intentProp;
|
|
@@ -518,7 +496,7 @@ function Button({
|
|
|
518
496
|
}
|
|
519
497
|
}
|
|
520
498
|
const motionDisabled = !sfProps.animated || reduced || disabled || loading;
|
|
521
|
-
const transition = !sfProps.animated || reduced ? noMotion : spring;
|
|
499
|
+
const transition = !sfProps.animated || reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.spring;
|
|
522
500
|
if (asChild) {
|
|
523
501
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
524
502
|
MotionSlot,
|
|
@@ -542,7 +520,7 @@ function Button({
|
|
|
542
520
|
);
|
|
543
521
|
}
|
|
544
522
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
545
|
-
react.m.button,
|
|
523
|
+
react$1.m.button,
|
|
546
524
|
{
|
|
547
525
|
"data-slot": "button",
|
|
548
526
|
"data-variant": resolvedVariant,
|
|
@@ -575,16 +553,6 @@ exports.SaasflareScript = SaasflareScript;
|
|
|
575
553
|
exports.SaasflareShell = SaasflareShell;
|
|
576
554
|
exports.SmoothScrollProvider = SmoothScrollProvider;
|
|
577
555
|
exports.buttonVariants = buttonVariants;
|
|
578
|
-
exports.fadeIn = fadeIn;
|
|
579
|
-
exports.noMotion = noMotion;
|
|
580
|
-
exports.scaleIn = scaleIn;
|
|
581
|
-
exports.slideDown = slideDown;
|
|
582
|
-
exports.slideUp = slideUp;
|
|
583
|
-
exports.spring = spring;
|
|
584
|
-
exports.springBouncy = springBouncy;
|
|
585
|
-
exports.springGentle = springGentle;
|
|
586
|
-
exports.springStiff = springStiff;
|
|
587
556
|
exports.useAnimation = useAnimation;
|
|
588
|
-
exports.useReducedMotion = useReducedMotion;
|
|
589
557
|
exports.useSaasflareProps = useSaasflareProps;
|
|
590
558
|
exports.useSaasflareTheme = useSaasflareTheme;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { useReducedMotion, noMotion, spring } from './chunk-W53NTFPB.mjs';
|
|
2
3
|
import { cn } from './chunk-S26666D6.mjs';
|
|
3
4
|
import { cva } from 'class-variance-authority';
|
|
4
|
-
import * as React from 'react';
|
|
5
5
|
import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
|
|
6
6
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
import { ThemeProvider, useTheme } from 'next-themes';
|
|
@@ -53,28 +53,6 @@ function srgbToLinear(c) {
|
|
|
53
53
|
function isHex(input) {
|
|
54
54
|
return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
|
|
55
55
|
}
|
|
56
|
-
var QUERY = "(prefers-reduced-motion: reduce)";
|
|
57
|
-
var subscribe = (cb) => {
|
|
58
|
-
const mql = window.matchMedia(QUERY);
|
|
59
|
-
mql.addEventListener("change", cb);
|
|
60
|
-
return () => mql.removeEventListener("change", cb);
|
|
61
|
-
};
|
|
62
|
-
var getSnapshot = () => window.matchMedia(QUERY).matches;
|
|
63
|
-
var getServerSnapshot = () => false;
|
|
64
|
-
function useReducedMotion() {
|
|
65
|
-
return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// src/components/ui/motion-config.ts
|
|
69
|
-
var spring = { type: "spring", stiffness: 400, damping: 25 };
|
|
70
|
-
var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
|
|
71
|
-
var springGentle = { type: "spring", stiffness: 200, damping: 20 };
|
|
72
|
-
var springStiff = { type: "spring", stiffness: 500, damping: 30 };
|
|
73
|
-
var noMotion = { duration: 0 };
|
|
74
|
-
var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
|
|
75
|
-
var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
|
|
76
|
-
var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
|
|
77
|
-
var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
|
|
78
56
|
var AnimationContext = createContext(
|
|
79
57
|
void 0
|
|
80
58
|
);
|
|
@@ -547,4 +525,4 @@ function Button({
|
|
|
547
525
|
);
|
|
548
526
|
}
|
|
549
527
|
|
|
550
|
-
export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants,
|
|
528
|
+
export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, useAnimation, useSaasflareProps, useSaasflareTheme };
|
package/dist/chunk-S26666D6.mjs
CHANGED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
|
|
5
|
+
var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
|
|
6
|
+
var react = require('motion/react');
|
|
7
|
+
var DialogPrimitive = require('@radix-ui/react-dialog');
|
|
8
|
+
var lucideReact = require('lucide-react');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
function _interopNamespace(e) {
|
|
12
|
+
if (e && e.__esModule) return e;
|
|
13
|
+
var n = Object.create(null);
|
|
14
|
+
if (e) {
|
|
15
|
+
Object.keys(e).forEach(function (k) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return e[k]; }
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
n.default = e;
|
|
26
|
+
return Object.freeze(n);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
|
|
30
|
+
|
|
31
|
+
function Dialog({
|
|
32
|
+
...props
|
|
33
|
+
}) {
|
|
34
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
|
|
35
|
+
}
|
|
36
|
+
function DialogTrigger({
|
|
37
|
+
...props
|
|
38
|
+
}) {
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
40
|
+
}
|
|
41
|
+
function DialogPortal({
|
|
42
|
+
...props
|
|
43
|
+
}) {
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
|
|
45
|
+
}
|
|
46
|
+
function DialogClose({
|
|
47
|
+
...props
|
|
48
|
+
}) {
|
|
49
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
|
|
50
|
+
}
|
|
51
|
+
function DialogOverlay({
|
|
52
|
+
className,
|
|
53
|
+
...props
|
|
54
|
+
}) {
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
+
DialogPrimitive__namespace.Overlay,
|
|
57
|
+
{
|
|
58
|
+
"data-slot": "dialog-overlay",
|
|
59
|
+
className: chunkJOVJRQO3_js.cn(
|
|
60
|
+
"fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
61
|
+
className
|
|
62
|
+
),
|
|
63
|
+
...props
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
function DialogContent({
|
|
68
|
+
className,
|
|
69
|
+
children,
|
|
70
|
+
...props
|
|
71
|
+
}) {
|
|
72
|
+
const reduced = chunkCWW36RYE_js.useReducedMotion();
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
|
|
75
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
76
|
+
DialogPrimitive__namespace.Content,
|
|
77
|
+
{
|
|
78
|
+
"data-slot": "dialog-content",
|
|
79
|
+
asChild: true,
|
|
80
|
+
...props,
|
|
81
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
82
|
+
react.m.div,
|
|
83
|
+
{
|
|
84
|
+
initial: reduced ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
|
|
85
|
+
animate: { opacity: 1, scale: 1, y: 0 },
|
|
86
|
+
exit: reduced ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
|
|
87
|
+
transition: reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.springBouncy,
|
|
88
|
+
className: chunkJOVJRQO3_js.cn(
|
|
89
|
+
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
|
|
90
|
+
className
|
|
91
|
+
),
|
|
92
|
+
children: [
|
|
93
|
+
children,
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
|
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
|
|
97
|
+
] })
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
] });
|
|
104
|
+
}
|
|
105
|
+
function DialogHeader({ className, ...props }) {
|
|
106
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
"div",
|
|
108
|
+
{
|
|
109
|
+
"data-slot": "dialog-header",
|
|
110
|
+
className: chunkJOVJRQO3_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
111
|
+
...props
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
function DialogFooter({ className, ...props }) {
|
|
116
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
117
|
+
"div",
|
|
118
|
+
{
|
|
119
|
+
"data-slot": "dialog-footer",
|
|
120
|
+
className: chunkJOVJRQO3_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
121
|
+
...props
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
function DialogTitle({
|
|
126
|
+
className,
|
|
127
|
+
...props
|
|
128
|
+
}) {
|
|
129
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
130
|
+
DialogPrimitive__namespace.Title,
|
|
131
|
+
{
|
|
132
|
+
"data-slot": "dialog-title",
|
|
133
|
+
className: chunkJOVJRQO3_js.cn("text-lg leading-none font-semibold", className),
|
|
134
|
+
...props
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
function DialogDescription({
|
|
139
|
+
className,
|
|
140
|
+
...props
|
|
141
|
+
}) {
|
|
142
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
143
|
+
DialogPrimitive__namespace.Description,
|
|
144
|
+
{
|
|
145
|
+
"data-slot": "dialog-description",
|
|
146
|
+
className: chunkJOVJRQO3_js.cn("text-sm text-muted-foreground", className),
|
|
147
|
+
...props
|
|
148
|
+
}
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
exports.Dialog = Dialog;
|
|
153
|
+
exports.DialogClose = DialogClose;
|
|
154
|
+
exports.DialogContent = DialogContent;
|
|
155
|
+
exports.DialogDescription = DialogDescription;
|
|
156
|
+
exports.DialogFooter = DialogFooter;
|
|
157
|
+
exports.DialogHeader = DialogHeader;
|
|
158
|
+
exports.DialogOverlay = DialogOverlay;
|
|
159
|
+
exports.DialogPortal = DialogPortal;
|
|
160
|
+
exports.DialogTitle = DialogTitle;
|
|
161
|
+
exports.DialogTrigger = DialogTrigger;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
// src/hooks/use-reduced-motion.ts
|
|
5
|
+
var QUERY = "(prefers-reduced-motion: reduce)";
|
|
6
|
+
var subscribe = (cb) => {
|
|
7
|
+
const mql = window.matchMedia(QUERY);
|
|
8
|
+
mql.addEventListener("change", cb);
|
|
9
|
+
return () => mql.removeEventListener("change", cb);
|
|
10
|
+
};
|
|
11
|
+
var getSnapshot = () => window.matchMedia(QUERY).matches;
|
|
12
|
+
var getServerSnapshot = () => false;
|
|
13
|
+
function useReducedMotion() {
|
|
14
|
+
return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// src/components/ui/motion-config.ts
|
|
18
|
+
var spring = { type: "spring", stiffness: 400, damping: 25 };
|
|
19
|
+
var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
|
|
20
|
+
var springGentle = { type: "spring", stiffness: 200, damping: 20 };
|
|
21
|
+
var springStiff = { type: "spring", stiffness: 500, damping: 30 };
|
|
22
|
+
var noMotion = { duration: 0 };
|
|
23
|
+
var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
|
|
24
|
+
var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
|
|
25
|
+
var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
|
|
26
|
+
var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
|
|
27
|
+
|
|
28
|
+
export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useReducedMotion };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
|
|
5
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Dialog content panel with spring entry animation.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
* @layer core
|
|
15
|
+
*/
|
|
16
|
+
declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
19
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { Dialog as D, DialogClose as a, DialogContent as b, DialogDescription as c, DialogFooter as d, DialogHeader as e, DialogOverlay as f, DialogPortal as g, DialogTitle as h, DialogTrigger as i };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
|
|
5
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
|
|
6
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
|
|
9
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Dialog content panel with spring entry animation.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
* @layer core
|
|
15
|
+
*/
|
|
16
|
+
declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
19
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { Dialog as D, DialogClose as a, DialogContent as b, DialogDescription as c, DialogFooter as d, DialogHeader as e, DialogOverlay as f, DialogPortal as g, DialogTitle as h, DialogTrigger as i };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { DayPicker, DayButton } from 'react-day-picker';
|
|
4
|
+
import { B as Button } from '../button-DUQJ0X7e.mjs';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
6
|
+
import 'class-variance-authority';
|
|
7
|
+
|
|
8
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
9
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
10
|
+
}): react_jsx_runtime.JSX.Element;
|
|
11
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Calendar, CalendarDayButton };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { DayPicker, DayButton } from 'react-day-picker';
|
|
4
|
+
import { B as Button } from '../button-DUQJ0X7e.js';
|
|
5
|
+
import 'class-variance-authority/types';
|
|
6
|
+
import 'class-variance-authority';
|
|
7
|
+
|
|
8
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
9
|
+
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
10
|
+
}): react_jsx_runtime.JSX.Element;
|
|
11
|
+
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { Calendar, CalendarDayButton };
|