@spark-ui/components 12.2.0 → 13.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/dist/alert-dialog/index.d.mts +78 -38
- package/dist/alert-dialog/index.d.ts +78 -38
- package/dist/alert-dialog/index.js +187 -1341
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +234 -89
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/chunk-XZ47F6TP.mjs +50 -0
- package/dist/chunk-XZ47F6TP.mjs.map +1 -0
- package/dist/dialog/index.d.mts +140 -7
- package/dist/dialog/index.d.ts +140 -7
- package/dist/dialog/index.mjs +308 -5
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docgen.json +1017 -888
- package/dist/spinner/index.d.mts +1 -1
- package/dist/spinner/index.d.ts +1 -1
- package/package.json +5 -5
- package/dist/DialogTrigger-woU7vsJi.d.mts +0 -142
- package/dist/DialogTrigger-woU7vsJi.d.ts +0 -142
- package/dist/chunk-WLI4EPS6.mjs +0 -358
- package/dist/chunk-WLI4EPS6.mjs.map +0 -1
package/dist/spinner/index.d.mts
CHANGED
|
@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
|
|
6
6
|
declare const spinnerStyles: (props?: ({
|
|
7
|
-
size?: "
|
|
7
|
+
size?: "current" | "sm" | "md" | "full" | null | undefined;
|
|
8
8
|
intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
|
|
9
9
|
isBackgroundVisible?: boolean | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
package/dist/spinner/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
|
|
6
6
|
declare const spinnerStyles: (props?: ({
|
|
7
|
-
size?: "
|
|
7
|
+
size?: "current" | "sm" | "md" | "full" | null | undefined;
|
|
8
8
|
intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
|
|
9
9
|
isBackgroundVisible?: boolean | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@react-aria/toast": "^3.0.0-beta.18",
|
|
54
54
|
"@react-stately/numberfield": "3.9.11",
|
|
55
55
|
"@react-stately/toast": "^3.0.0-beta.7",
|
|
56
|
-
"@spark-ui/hooks": "^
|
|
57
|
-
"@spark-ui/icons": "^
|
|
58
|
-
"@spark-ui/internal-utils": "^
|
|
56
|
+
"@spark-ui/hooks": "^13.0.1",
|
|
57
|
+
"@spark-ui/icons": "^13.0.1",
|
|
58
|
+
"@spark-ui/internal-utils": "^13.0.1",
|
|
59
59
|
"@zag-js/pagination": "1.30.0",
|
|
60
60
|
"@zag-js/react": "1.30.0",
|
|
61
61
|
"class-variance-authority": "0.7.1",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
|
|
83
83
|
},
|
|
84
84
|
"homepage": "https://sparkui.vercel.app",
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "fe9e0fdebb8e894bdd7ff465f02c3acf8bec7c6b"
|
|
86
86
|
}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import { Dialog as Dialog$1 } from 'radix-ui';
|
|
2
|
-
import { ReactElement, ReactNode, Ref } from 'react';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
interface DialogProps {
|
|
8
|
-
/**
|
|
9
|
-
* Children of the component.
|
|
10
|
-
*/
|
|
11
|
-
children?: Dialog$1.DialogProps['children'];
|
|
12
|
-
/**
|
|
13
|
-
* Specifies if the dialog is open or not.
|
|
14
|
-
*/
|
|
15
|
-
open?: Dialog$1.DialogProps['open'];
|
|
16
|
-
/**
|
|
17
|
-
* Default open state.
|
|
18
|
-
*/
|
|
19
|
-
defaultOpen?: Dialog$1.DialogProps['defaultOpen'];
|
|
20
|
-
/**
|
|
21
|
-
* Handler executen on every dialog open state change.
|
|
22
|
-
*/
|
|
23
|
-
onOpenChange?: Dialog$1.DialogProps['onOpenChange'];
|
|
24
|
-
/**
|
|
25
|
-
* Specifies if the dialog is a modal.
|
|
26
|
-
*/
|
|
27
|
-
modal?: Dialog$1.DialogProps['modal'];
|
|
28
|
-
/**
|
|
29
|
-
* Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
|
|
30
|
-
*/
|
|
31
|
-
withFade?: boolean;
|
|
32
|
-
}
|
|
33
|
-
declare const Dialog: {
|
|
34
|
-
({ children, withFade, ...rest }: DialogProps): ReactElement;
|
|
35
|
-
displayName: string;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
interface BodyProps {
|
|
39
|
-
children: ReactNode;
|
|
40
|
-
className?: string;
|
|
41
|
-
tabIndex?: number;
|
|
42
|
-
ref?: Ref<HTMLDivElement>;
|
|
43
|
-
inset?: boolean;
|
|
44
|
-
}
|
|
45
|
-
declare const Body: {
|
|
46
|
-
({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
|
|
47
|
-
displayName: string;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
type CloseProps = Dialog$1.DialogCloseProps & {
|
|
51
|
-
ref?: Ref<HTMLButtonElement>;
|
|
52
|
-
};
|
|
53
|
-
declare const Close: {
|
|
54
|
-
(props: CloseProps): react_jsx_runtime.JSX.Element;
|
|
55
|
-
displayName: string;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
declare const dialogContentStyles: (props?: ({
|
|
59
|
-
size?: "fullscreen" | "sm" | "md" | "lg" | null | undefined;
|
|
60
|
-
isNarrow?: boolean | null | undefined;
|
|
61
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
62
|
-
type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
|
|
63
|
-
|
|
64
|
-
interface ContentProps extends Dialog$1.DialogContentProps, DialogContentStylesProps {
|
|
65
|
-
/**
|
|
66
|
-
* When set to true, the content will adjust its width to fit the content rather than taking up the full available width.
|
|
67
|
-
*/
|
|
68
|
-
isNarrow?: boolean;
|
|
69
|
-
ref?: Ref<HTMLDivElement>;
|
|
70
|
-
}
|
|
71
|
-
declare const Content: {
|
|
72
|
-
({ children, className, isNarrow, size, onInteractOutside, ref, ...rest }: ContentProps): ReactElement;
|
|
73
|
-
displayName: string;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
type DescriptionProps = Dialog$1.DialogDescriptionProps & {
|
|
77
|
-
ref?: Ref<HTMLParagraphElement>;
|
|
78
|
-
};
|
|
79
|
-
declare const Description: {
|
|
80
|
-
(props: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
81
|
-
displayName: string;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
interface FooterProps {
|
|
85
|
-
children: ReactNode;
|
|
86
|
-
className?: string;
|
|
87
|
-
ref?: Ref<HTMLDivElement>;
|
|
88
|
-
}
|
|
89
|
-
declare const Footer: {
|
|
90
|
-
({ children, className, ref, ...rest }: FooterProps): ReactElement;
|
|
91
|
-
displayName: string;
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
interface HeaderProps {
|
|
95
|
-
children: ReactNode;
|
|
96
|
-
className?: string;
|
|
97
|
-
ref?: Ref<HTMLDivElement>;
|
|
98
|
-
}
|
|
99
|
-
declare const Header: {
|
|
100
|
-
({ children, className, ref, ...rest }: HeaderProps): ReactElement;
|
|
101
|
-
displayName: string;
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
type OverlayProps = Dialog$1.DialogOverlayProps & {
|
|
105
|
-
ref?: Ref<HTMLDivElement>;
|
|
106
|
-
};
|
|
107
|
-
declare const Overlay: {
|
|
108
|
-
({ className, ref, ...rest }: OverlayProps): ReactElement | null;
|
|
109
|
-
displayName: string;
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
type PortalProps = Dialog$1.DialogPortalProps;
|
|
113
|
-
declare const Portal: {
|
|
114
|
-
({ children, ...rest }: PortalProps): ReactElement;
|
|
115
|
-
displayName: string;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
type TitleProps = Dialog$1.DialogTitleProps & {
|
|
119
|
-
ref?: Ref<HTMLHeadingElement>;
|
|
120
|
-
};
|
|
121
|
-
declare const Title: {
|
|
122
|
-
({ className, ref, ...others }: TitleProps): react_jsx_runtime.JSX.Element;
|
|
123
|
-
displayName: string;
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
interface TriggerProps {
|
|
127
|
-
/**
|
|
128
|
-
* Children of the component.
|
|
129
|
-
*/
|
|
130
|
-
children?: ReactNode;
|
|
131
|
-
/**
|
|
132
|
-
* Change the component to the HTML tag or custom component of the only child.
|
|
133
|
-
*/
|
|
134
|
-
asChild?: Dialog$1.DialogTriggerProps['asChild'];
|
|
135
|
-
ref?: Ref<HTMLButtonElement>;
|
|
136
|
-
}
|
|
137
|
-
declare const Trigger: {
|
|
138
|
-
(props: TriggerProps): ReactElement;
|
|
139
|
-
displayName: string;
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export { Body as B, type CloseProps as C, Dialog as D, Footer as F, Header as H, Overlay as O, Portal as P, Trigger as T, Content as a, Close as b, Title as c, Description as d, type DialogProps as e, type ContentProps as f, type HeaderProps as g, type BodyProps as h, type FooterProps as i, type TriggerProps as j, type OverlayProps as k, type PortalProps as l, type TitleProps as m, type DescriptionProps as n };
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import { Dialog as Dialog$1 } from 'radix-ui';
|
|
2
|
-
import { ReactElement, ReactNode, Ref } from 'react';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
-
import { VariantProps } from 'class-variance-authority';
|
|
6
|
-
|
|
7
|
-
interface DialogProps {
|
|
8
|
-
/**
|
|
9
|
-
* Children of the component.
|
|
10
|
-
*/
|
|
11
|
-
children?: Dialog$1.DialogProps['children'];
|
|
12
|
-
/**
|
|
13
|
-
* Specifies if the dialog is open or not.
|
|
14
|
-
*/
|
|
15
|
-
open?: Dialog$1.DialogProps['open'];
|
|
16
|
-
/**
|
|
17
|
-
* Default open state.
|
|
18
|
-
*/
|
|
19
|
-
defaultOpen?: Dialog$1.DialogProps['defaultOpen'];
|
|
20
|
-
/**
|
|
21
|
-
* Handler executen on every dialog open state change.
|
|
22
|
-
*/
|
|
23
|
-
onOpenChange?: Dialog$1.DialogProps['onOpenChange'];
|
|
24
|
-
/**
|
|
25
|
-
* Specifies if the dialog is a modal.
|
|
26
|
-
*/
|
|
27
|
-
modal?: Dialog$1.DialogProps['modal'];
|
|
28
|
-
/**
|
|
29
|
-
* Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
|
|
30
|
-
*/
|
|
31
|
-
withFade?: boolean;
|
|
32
|
-
}
|
|
33
|
-
declare const Dialog: {
|
|
34
|
-
({ children, withFade, ...rest }: DialogProps): ReactElement;
|
|
35
|
-
displayName: string;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
interface BodyProps {
|
|
39
|
-
children: ReactNode;
|
|
40
|
-
className?: string;
|
|
41
|
-
tabIndex?: number;
|
|
42
|
-
ref?: Ref<HTMLDivElement>;
|
|
43
|
-
inset?: boolean;
|
|
44
|
-
}
|
|
45
|
-
declare const Body: {
|
|
46
|
-
({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
|
|
47
|
-
displayName: string;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
type CloseProps = Dialog$1.DialogCloseProps & {
|
|
51
|
-
ref?: Ref<HTMLButtonElement>;
|
|
52
|
-
};
|
|
53
|
-
declare const Close: {
|
|
54
|
-
(props: CloseProps): react_jsx_runtime.JSX.Element;
|
|
55
|
-
displayName: string;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
declare const dialogContentStyles: (props?: ({
|
|
59
|
-
size?: "fullscreen" | "sm" | "md" | "lg" | null | undefined;
|
|
60
|
-
isNarrow?: boolean | null | undefined;
|
|
61
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
62
|
-
type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
|
|
63
|
-
|
|
64
|
-
interface ContentProps extends Dialog$1.DialogContentProps, DialogContentStylesProps {
|
|
65
|
-
/**
|
|
66
|
-
* When set to true, the content will adjust its width to fit the content rather than taking up the full available width.
|
|
67
|
-
*/
|
|
68
|
-
isNarrow?: boolean;
|
|
69
|
-
ref?: Ref<HTMLDivElement>;
|
|
70
|
-
}
|
|
71
|
-
declare const Content: {
|
|
72
|
-
({ children, className, isNarrow, size, onInteractOutside, ref, ...rest }: ContentProps): ReactElement;
|
|
73
|
-
displayName: string;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
type DescriptionProps = Dialog$1.DialogDescriptionProps & {
|
|
77
|
-
ref?: Ref<HTMLParagraphElement>;
|
|
78
|
-
};
|
|
79
|
-
declare const Description: {
|
|
80
|
-
(props: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
81
|
-
displayName: string;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
interface FooterProps {
|
|
85
|
-
children: ReactNode;
|
|
86
|
-
className?: string;
|
|
87
|
-
ref?: Ref<HTMLDivElement>;
|
|
88
|
-
}
|
|
89
|
-
declare const Footer: {
|
|
90
|
-
({ children, className, ref, ...rest }: FooterProps): ReactElement;
|
|
91
|
-
displayName: string;
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
interface HeaderProps {
|
|
95
|
-
children: ReactNode;
|
|
96
|
-
className?: string;
|
|
97
|
-
ref?: Ref<HTMLDivElement>;
|
|
98
|
-
}
|
|
99
|
-
declare const Header: {
|
|
100
|
-
({ children, className, ref, ...rest }: HeaderProps): ReactElement;
|
|
101
|
-
displayName: string;
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
type OverlayProps = Dialog$1.DialogOverlayProps & {
|
|
105
|
-
ref?: Ref<HTMLDivElement>;
|
|
106
|
-
};
|
|
107
|
-
declare const Overlay: {
|
|
108
|
-
({ className, ref, ...rest }: OverlayProps): ReactElement | null;
|
|
109
|
-
displayName: string;
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
type PortalProps = Dialog$1.DialogPortalProps;
|
|
113
|
-
declare const Portal: {
|
|
114
|
-
({ children, ...rest }: PortalProps): ReactElement;
|
|
115
|
-
displayName: string;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
type TitleProps = Dialog$1.DialogTitleProps & {
|
|
119
|
-
ref?: Ref<HTMLHeadingElement>;
|
|
120
|
-
};
|
|
121
|
-
declare const Title: {
|
|
122
|
-
({ className, ref, ...others }: TitleProps): react_jsx_runtime.JSX.Element;
|
|
123
|
-
displayName: string;
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
interface TriggerProps {
|
|
127
|
-
/**
|
|
128
|
-
* Children of the component.
|
|
129
|
-
*/
|
|
130
|
-
children?: ReactNode;
|
|
131
|
-
/**
|
|
132
|
-
* Change the component to the HTML tag or custom component of the only child.
|
|
133
|
-
*/
|
|
134
|
-
asChild?: Dialog$1.DialogTriggerProps['asChild'];
|
|
135
|
-
ref?: Ref<HTMLButtonElement>;
|
|
136
|
-
}
|
|
137
|
-
declare const Trigger: {
|
|
138
|
-
(props: TriggerProps): ReactElement;
|
|
139
|
-
displayName: string;
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export { Body as B, type CloseProps as C, Dialog as D, Footer as F, Header as H, Overlay as O, Portal as P, Trigger as T, Content as a, Close as b, Title as c, Description as d, type DialogProps as e, type ContentProps as f, type HeaderProps as g, type BodyProps as h, type FooterProps as i, type TriggerProps as j, type OverlayProps as k, type PortalProps as l, type TitleProps as m, type DescriptionProps as n };
|
package/dist/chunk-WLI4EPS6.mjs
DELETED
|
@@ -1,358 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IconButton
|
|
3
|
-
} from "./chunk-DCXWGQVZ.mjs";
|
|
4
|
-
import {
|
|
5
|
-
Icon
|
|
6
|
-
} from "./chunk-UMUMFMFB.mjs";
|
|
7
|
-
|
|
8
|
-
// src/dialog/Dialog.tsx
|
|
9
|
-
import { Dialog as RadixDialog } from "radix-ui";
|
|
10
|
-
import { useEffect, useRef } from "react";
|
|
11
|
-
|
|
12
|
-
// src/dialog/DialogContext.tsx
|
|
13
|
-
import { createContext, useContext, useState } from "react";
|
|
14
|
-
import { jsx } from "react/jsx-runtime";
|
|
15
|
-
var DialogContext = createContext(null);
|
|
16
|
-
var DialogProvider = ({
|
|
17
|
-
children: childrenProp,
|
|
18
|
-
withFade = false
|
|
19
|
-
}) => {
|
|
20
|
-
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
22
|
-
DialogContext.Provider,
|
|
23
|
-
{
|
|
24
|
-
value: {
|
|
25
|
-
isFullScreen,
|
|
26
|
-
setIsFullScreen,
|
|
27
|
-
withFade
|
|
28
|
-
},
|
|
29
|
-
children: childrenProp
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
var useDialog = () => {
|
|
34
|
-
const context = useContext(DialogContext);
|
|
35
|
-
if (!context) {
|
|
36
|
-
throw Error("useDialog must be used within a Dialog provider");
|
|
37
|
-
}
|
|
38
|
-
return context;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// src/dialog/Dialog.tsx
|
|
42
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
-
var Dialog = ({ children, withFade = false, ...rest }) => {
|
|
44
|
-
const open = rest.open;
|
|
45
|
-
const activeElementRef = useRef(null);
|
|
46
|
-
function handleActiveElementFocus() {
|
|
47
|
-
if (open && document.activeElement) {
|
|
48
|
-
activeElementRef.current = document.activeElement;
|
|
49
|
-
}
|
|
50
|
-
if (!open) {
|
|
51
|
-
setTimeout(() => {
|
|
52
|
-
if (!(activeElementRef.current instanceof HTMLElement)) return;
|
|
53
|
-
activeElementRef.current.focus();
|
|
54
|
-
}, 0);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
useEffect(handleActiveElementFocus, [open]);
|
|
58
|
-
return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
|
|
59
|
-
};
|
|
60
|
-
Dialog.displayName = "Dialog.Root";
|
|
61
|
-
|
|
62
|
-
// src/dialog/DialogBody.tsx
|
|
63
|
-
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
|
|
64
|
-
import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
|
|
65
|
-
import { cx } from "class-variance-authority";
|
|
66
|
-
import { useRef as useRef2 } from "react";
|
|
67
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
68
|
-
var Body = ({
|
|
69
|
-
children,
|
|
70
|
-
className,
|
|
71
|
-
inset = false,
|
|
72
|
-
ref: forwardedRef,
|
|
73
|
-
...rest
|
|
74
|
-
}) => {
|
|
75
|
-
const scrollAreaRef = useRef2(null);
|
|
76
|
-
const ref = useMergeRefs(forwardedRef, scrollAreaRef);
|
|
77
|
-
const { withFade } = useDialog();
|
|
78
|
-
const { overflow } = useScrollOverflow(scrollAreaRef);
|
|
79
|
-
return /* @__PURE__ */ jsx3(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
"data-spark-component": "dialog-body",
|
|
83
|
-
ref,
|
|
84
|
-
className: cx(
|
|
85
|
-
"focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
|
|
86
|
-
"transition-all duration-300",
|
|
87
|
-
{
|
|
88
|
-
["px-xl py-lg"]: !inset
|
|
89
|
-
},
|
|
90
|
-
className
|
|
91
|
-
),
|
|
92
|
-
style: {
|
|
93
|
-
...withFade && {
|
|
94
|
-
maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
|
|
95
|
-
maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
|
|
96
|
-
maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
...rest,
|
|
100
|
-
children
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
};
|
|
104
|
-
Body.displayName = "Dialog.Body";
|
|
105
|
-
|
|
106
|
-
// src/dialog/DialogClose.tsx
|
|
107
|
-
import { Dialog as RadixDialog2 } from "radix-ui";
|
|
108
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
109
|
-
var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
|
|
110
|
-
Close.displayName = "Dialog.Close";
|
|
111
|
-
|
|
112
|
-
// src/dialog/DialogCloseButton.tsx
|
|
113
|
-
import { Close as CloseSVG } from "@spark-ui/icons/Close";
|
|
114
|
-
import { cx as cx2 } from "class-variance-authority";
|
|
115
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
116
|
-
var Root = ({
|
|
117
|
-
"aria-label": ariaLabel,
|
|
118
|
-
className,
|
|
119
|
-
size = "md",
|
|
120
|
-
intent = "neutral",
|
|
121
|
-
design = "ghost",
|
|
122
|
-
children = /* @__PURE__ */ jsx5(CloseSVG, {}),
|
|
123
|
-
ref,
|
|
124
|
-
...rest
|
|
125
|
-
}) => {
|
|
126
|
-
return /* @__PURE__ */ jsx5(
|
|
127
|
-
Close,
|
|
128
|
-
{
|
|
129
|
-
"data-spark-component": "dialog-close-button",
|
|
130
|
-
"data-part": "close",
|
|
131
|
-
ref,
|
|
132
|
-
className: cx2(["absolute", "top-md", "right-xl"], className),
|
|
133
|
-
asChild: true,
|
|
134
|
-
...rest,
|
|
135
|
-
children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
|
-
};
|
|
139
|
-
var CloseButton = Object.assign(Root, {
|
|
140
|
-
id: "CloseButton"
|
|
141
|
-
});
|
|
142
|
-
Root.displayName = "Dialog.CloseButton";
|
|
143
|
-
|
|
144
|
-
// src/dialog/DialogContent.tsx
|
|
145
|
-
import { Dialog as RadixDialog3 } from "radix-ui";
|
|
146
|
-
import { useEffect as useEffect2 } from "react";
|
|
147
|
-
|
|
148
|
-
// src/dialog/DialogContent.styles.tsx
|
|
149
|
-
import { cva } from "class-variance-authority";
|
|
150
|
-
var dialogContentStyles = cva(
|
|
151
|
-
[
|
|
152
|
-
"z-modal flex flex-col bg-surface group",
|
|
153
|
-
"focus-visible:outline-hidden focus-visible:u-outline",
|
|
154
|
-
"[&:not(:has(footer))]:pb-lg",
|
|
155
|
-
"[&:not(:has(header))]:pt-lg"
|
|
156
|
-
],
|
|
157
|
-
{
|
|
158
|
-
variants: {
|
|
159
|
-
size: {
|
|
160
|
-
fullscreen: "fixed size-full top-0 left-0",
|
|
161
|
-
sm: "max-w-sz-480",
|
|
162
|
-
md: "max-w-sz-672",
|
|
163
|
-
lg: "max-w-sz-864"
|
|
164
|
-
},
|
|
165
|
-
isNarrow: {
|
|
166
|
-
true: [],
|
|
167
|
-
false: []
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
compoundVariants: [
|
|
171
|
-
{
|
|
172
|
-
size: ["sm", "md", "lg"],
|
|
173
|
-
class: [
|
|
174
|
-
"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
|
|
175
|
-
"max-h-[80%]",
|
|
176
|
-
"shadow-md rounded-lg",
|
|
177
|
-
"data-[state=open]:animate-fade-in",
|
|
178
|
-
"data-[state=closed]:animate-fade-out"
|
|
179
|
-
]
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
size: ["sm", "md", "lg"],
|
|
183
|
-
isNarrow: false,
|
|
184
|
-
class: ["w-full"]
|
|
185
|
-
}
|
|
186
|
-
],
|
|
187
|
-
defaultVariants: {
|
|
188
|
-
size: "md",
|
|
189
|
-
isNarrow: false
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
// src/dialog/DialogContent.tsx
|
|
195
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
196
|
-
var Content = ({
|
|
197
|
-
children,
|
|
198
|
-
className,
|
|
199
|
-
isNarrow = false,
|
|
200
|
-
size = "md",
|
|
201
|
-
onInteractOutside,
|
|
202
|
-
ref,
|
|
203
|
-
...rest
|
|
204
|
-
}) => {
|
|
205
|
-
const { setIsFullScreen } = useDialog();
|
|
206
|
-
useEffect2(() => {
|
|
207
|
-
if (size === "fullscreen") setIsFullScreen(true);
|
|
208
|
-
return () => setIsFullScreen(false);
|
|
209
|
-
}, [setIsFullScreen, size]);
|
|
210
|
-
return /* @__PURE__ */ jsx6(
|
|
211
|
-
RadixDialog3.Content,
|
|
212
|
-
{
|
|
213
|
-
"data-spark-component": "dialog-content",
|
|
214
|
-
ref,
|
|
215
|
-
className: dialogContentStyles({
|
|
216
|
-
className,
|
|
217
|
-
isNarrow,
|
|
218
|
-
size
|
|
219
|
-
}),
|
|
220
|
-
onInteractOutside: (e) => {
|
|
221
|
-
const isForegroundElement = e.target.closest(".z-toast, .z-popover");
|
|
222
|
-
if (isForegroundElement) {
|
|
223
|
-
e.preventDefault();
|
|
224
|
-
}
|
|
225
|
-
onInteractOutside?.(e);
|
|
226
|
-
},
|
|
227
|
-
...rest,
|
|
228
|
-
children
|
|
229
|
-
}
|
|
230
|
-
);
|
|
231
|
-
};
|
|
232
|
-
Content.displayName = "Dialog.Content";
|
|
233
|
-
|
|
234
|
-
// src/dialog/DialogDescription.tsx
|
|
235
|
-
import { Dialog as RadixDialog4 } from "radix-ui";
|
|
236
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
237
|
-
var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "data-spark-component": "dialog-description", ...props });
|
|
238
|
-
Description.displayName = "Dialog.Description";
|
|
239
|
-
|
|
240
|
-
// src/dialog/DialogFooter.tsx
|
|
241
|
-
import { cx as cx3 } from "class-variance-authority";
|
|
242
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
243
|
-
var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
|
|
244
|
-
"footer",
|
|
245
|
-
{
|
|
246
|
-
"data-spark-component": "dialog-footer",
|
|
247
|
-
ref,
|
|
248
|
-
className: cx3(className, ["px-xl", "py-lg"]),
|
|
249
|
-
...rest,
|
|
250
|
-
children
|
|
251
|
-
}
|
|
252
|
-
);
|
|
253
|
-
Footer.displayName = "Dialog.Footer";
|
|
254
|
-
|
|
255
|
-
// src/dialog/DialogHeader.tsx
|
|
256
|
-
import { cx as cx4 } from "class-variance-authority";
|
|
257
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
258
|
-
var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
|
|
259
|
-
"header",
|
|
260
|
-
{
|
|
261
|
-
"data-spark-component": "dialog-header",
|
|
262
|
-
ref,
|
|
263
|
-
className: cx4(className, ["px-xl", "py-lg"]),
|
|
264
|
-
...rest,
|
|
265
|
-
children
|
|
266
|
-
}
|
|
267
|
-
);
|
|
268
|
-
Header.displayName = "Dialog.Header";
|
|
269
|
-
|
|
270
|
-
// src/dialog/DialogOverlay.tsx
|
|
271
|
-
import { cx as cx5 } from "class-variance-authority";
|
|
272
|
-
import { Dialog as RadixDialog5 } from "radix-ui";
|
|
273
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
274
|
-
var Overlay = ({ className, ref, ...rest }) => {
|
|
275
|
-
const { isFullScreen } = useDialog();
|
|
276
|
-
return /* @__PURE__ */ jsx10(
|
|
277
|
-
RadixDialog5.Overlay,
|
|
278
|
-
{
|
|
279
|
-
"data-spark-component": "dialog-overlay",
|
|
280
|
-
ref,
|
|
281
|
-
className: cx5(
|
|
282
|
-
isFullScreen ? "hidden" : "fixed",
|
|
283
|
-
["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
|
|
284
|
-
["bg-overlay/dim-1"],
|
|
285
|
-
["data-[state=open]:animate-fade-in"],
|
|
286
|
-
["data-[state=closed]:animate-fade-out"],
|
|
287
|
-
className
|
|
288
|
-
),
|
|
289
|
-
...rest
|
|
290
|
-
}
|
|
291
|
-
);
|
|
292
|
-
};
|
|
293
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
294
|
-
|
|
295
|
-
// src/dialog/DialogPortal.tsx
|
|
296
|
-
import { Dialog as RadixDialog6 } from "radix-ui";
|
|
297
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
298
|
-
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
|
|
299
|
-
Portal.displayName = "Dialog.Portal";
|
|
300
|
-
|
|
301
|
-
// src/dialog/DialogTitle.tsx
|
|
302
|
-
import { cx as cx6 } from "class-variance-authority";
|
|
303
|
-
import { Dialog as RadixDialog7 } from "radix-ui";
|
|
304
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
305
|
-
var Title = ({ className, ref, ...others }) => {
|
|
306
|
-
return /* @__PURE__ */ jsx12(
|
|
307
|
-
RadixDialog7.Title,
|
|
308
|
-
{
|
|
309
|
-
"data-spark-component": "dialog-title",
|
|
310
|
-
ref,
|
|
311
|
-
className: cx6(
|
|
312
|
-
"text-headline-1 text-on-surface",
|
|
313
|
-
"group-has-data-[part=close]:pr-3xl",
|
|
314
|
-
className
|
|
315
|
-
),
|
|
316
|
-
...others
|
|
317
|
-
}
|
|
318
|
-
);
|
|
319
|
-
};
|
|
320
|
-
Title.displayName = "Dialog.Title";
|
|
321
|
-
|
|
322
|
-
// src/dialog/DialogTrigger.tsx
|
|
323
|
-
import { Dialog as RadixDialog8 } from "radix-ui";
|
|
324
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
325
|
-
var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { "data-spark-component": "dialog-trigger", ...props });
|
|
326
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
327
|
-
|
|
328
|
-
// src/dialog/index.ts
|
|
329
|
-
var Dialog2 = Object.assign(Dialog, {
|
|
330
|
-
Trigger,
|
|
331
|
-
Portal,
|
|
332
|
-
Overlay,
|
|
333
|
-
Content,
|
|
334
|
-
Header,
|
|
335
|
-
Body,
|
|
336
|
-
Footer,
|
|
337
|
-
Close,
|
|
338
|
-
CloseButton,
|
|
339
|
-
Title,
|
|
340
|
-
Description
|
|
341
|
-
});
|
|
342
|
-
Dialog2.displayName = "Dialog";
|
|
343
|
-
Dialog2.Trigger.displayName = "Dialog.Trigger";
|
|
344
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
345
|
-
Portal.displayName = "Dialog.Portal";
|
|
346
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
347
|
-
Content.displayName = "Dialog.Content";
|
|
348
|
-
Header.displayName = "Dialog.Header";
|
|
349
|
-
Body.displayName = "Dialog.Body";
|
|
350
|
-
Footer.displayName = "Dialog.Footer";
|
|
351
|
-
CloseButton.displayName = "Dialog.CloseButton";
|
|
352
|
-
Title.displayName = "Dialog.Title";
|
|
353
|
-
Description.displayName = "Dialog.Description";
|
|
354
|
-
|
|
355
|
-
export {
|
|
356
|
-
Dialog2 as Dialog
|
|
357
|
-
};
|
|
358
|
-
//# sourceMappingURL=chunk-WLI4EPS6.mjs.map
|