@kopexa/dialog 0.0.0-canary-20250718183330
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 +24 -0
- package/dist/chunk-AAFBD57M.mjs +39 -0
- package/dist/chunk-I6IVWHHG.mjs +47 -0
- package/dist/chunk-QDJEB3MY.mjs +209 -0
- package/dist/dialog.d.mts +42 -0
- package/dist/dialog.d.ts +42 -0
- package/dist/dialog.js +284 -0
- package/dist/dialog.mjs +32 -0
- package/dist/index.d.mts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +305 -0
- package/dist/index.mjs +36 -0
- package/dist/namespace.d.mts +11 -0
- package/dist/namespace.d.ts +11 -0
- package/dist/namespace.js +284 -0
- package/dist/namespace.mjs +31 -0
- package/dist/transition.d.mts +5 -0
- package/dist/transition.d.ts +5 -0
- package/dist/transition.js +64 -0
- package/dist/transition.mjs +7 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# @kopexa/dialog
|
|
2
|
+
|
|
3
|
+
A Quick description of the component
|
|
4
|
+
|
|
5
|
+
> This is an internal utility, not intended for public usage.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
yarn add @kopexa/dialog
|
|
11
|
+
# or
|
|
12
|
+
npm i @kopexa/dialog
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Contribution
|
|
16
|
+
|
|
17
|
+
Yes please! See the
|
|
18
|
+
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
|
|
19
|
+
for details.
|
|
20
|
+
|
|
21
|
+
## License
|
|
22
|
+
|
|
23
|
+
This project is licensed under the terms of the
|
|
24
|
+
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
DialogBody,
|
|
4
|
+
DialogClose,
|
|
5
|
+
DialogCloseTrigger,
|
|
6
|
+
DialogContent,
|
|
7
|
+
DialogDescription,
|
|
8
|
+
DialogFooter,
|
|
9
|
+
DialogHeader,
|
|
10
|
+
DialogOverlay,
|
|
11
|
+
DialogPortal,
|
|
12
|
+
DialogRoot,
|
|
13
|
+
DialogTitle,
|
|
14
|
+
DialogTrigger
|
|
15
|
+
} from "./chunk-QDJEB3MY.mjs";
|
|
16
|
+
import {
|
|
17
|
+
__export
|
|
18
|
+
} from "./chunk-I6IVWHHG.mjs";
|
|
19
|
+
|
|
20
|
+
// src/namespace.ts
|
|
21
|
+
var namespace_exports = {};
|
|
22
|
+
__export(namespace_exports, {
|
|
23
|
+
Body: () => DialogBody,
|
|
24
|
+
Close: () => DialogClose,
|
|
25
|
+
CloseTrigger: () => DialogCloseTrigger,
|
|
26
|
+
Content: () => DialogContent,
|
|
27
|
+
Description: () => DialogDescription,
|
|
28
|
+
Footer: () => DialogFooter,
|
|
29
|
+
Header: () => DialogHeader,
|
|
30
|
+
Overlay: () => DialogOverlay,
|
|
31
|
+
Portal: () => DialogPortal,
|
|
32
|
+
Root: () => DialogRoot,
|
|
33
|
+
Title: () => DialogTitle,
|
|
34
|
+
Trigger: () => DialogTrigger
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export {
|
|
38
|
+
namespace_exports
|
|
39
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __export = (target, all) => {
|
|
4
|
+
for (var name in all)
|
|
5
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
// src/transition.ts
|
|
9
|
+
import { TRANSITION_EASINGS } from "@kopexa/motion-utils";
|
|
10
|
+
var scaleInOut = {
|
|
11
|
+
enter: {
|
|
12
|
+
scale: "var(--scale-enter)",
|
|
13
|
+
y: "var(--slide-enter)",
|
|
14
|
+
opacity: 1,
|
|
15
|
+
willChange: "auto",
|
|
16
|
+
transition: {
|
|
17
|
+
scale: {
|
|
18
|
+
duration: 0.4,
|
|
19
|
+
ease: TRANSITION_EASINGS.ease
|
|
20
|
+
},
|
|
21
|
+
opacity: {
|
|
22
|
+
duration: 0.4,
|
|
23
|
+
ease: TRANSITION_EASINGS.ease
|
|
24
|
+
},
|
|
25
|
+
y: {
|
|
26
|
+
type: "spring",
|
|
27
|
+
bounce: 0,
|
|
28
|
+
duration: 0.6
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
exit: {
|
|
33
|
+
scale: "var(--scale-exit)",
|
|
34
|
+
y: "var(--slide-exit)",
|
|
35
|
+
opacity: 0,
|
|
36
|
+
willChange: "transform",
|
|
37
|
+
transition: {
|
|
38
|
+
duration: 0.3,
|
|
39
|
+
ease: TRANSITION_EASINGS.ease
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export {
|
|
45
|
+
__export,
|
|
46
|
+
scaleInOut
|
|
47
|
+
};
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
scaleInOut
|
|
4
|
+
} from "./chunk-I6IVWHHG.mjs";
|
|
5
|
+
|
|
6
|
+
// src/dialog.tsx
|
|
7
|
+
import { CloseIcon } from "@kopexa/icons";
|
|
8
|
+
import { TRANSITION_VARIANTS } from "@kopexa/motion-utils";
|
|
9
|
+
import { createContext } from "@kopexa/react-utils";
|
|
10
|
+
import { cn } from "@kopexa/shared-utils";
|
|
11
|
+
import { dialog } from "@kopexa/theme";
|
|
12
|
+
import { useControllableState } from "@kopexa/use-controllable-state";
|
|
13
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
14
|
+
import {
|
|
15
|
+
AnimatePresence,
|
|
16
|
+
domAnimation,
|
|
17
|
+
LazyMotion,
|
|
18
|
+
motion
|
|
19
|
+
} from "motion/react";
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
var [DialogProvider, useDialogContext] = createContext();
|
|
22
|
+
var DialogRoot = (props) => {
|
|
23
|
+
const {
|
|
24
|
+
open: openProp,
|
|
25
|
+
onOpenChange,
|
|
26
|
+
size,
|
|
27
|
+
radius,
|
|
28
|
+
placement,
|
|
29
|
+
...restProps
|
|
30
|
+
} = props;
|
|
31
|
+
const [open, setOpen] = useControllableState({
|
|
32
|
+
value: openProp,
|
|
33
|
+
onChange: onOpenChange,
|
|
34
|
+
defaultValue: false
|
|
35
|
+
});
|
|
36
|
+
const styles = dialog({ size, radius, placement });
|
|
37
|
+
return /* @__PURE__ */ jsx(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ jsx(
|
|
38
|
+
DialogPrimitive.Root,
|
|
39
|
+
{
|
|
40
|
+
"data-slot": "dialog",
|
|
41
|
+
open,
|
|
42
|
+
onOpenChange: setOpen,
|
|
43
|
+
...restProps
|
|
44
|
+
}
|
|
45
|
+
) });
|
|
46
|
+
};
|
|
47
|
+
function DialogTrigger({ ...props }) {
|
|
48
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
49
|
+
}
|
|
50
|
+
function DialogPortal({ ...props }) {
|
|
51
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
52
|
+
}
|
|
53
|
+
function DialogClose({ ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
55
|
+
}
|
|
56
|
+
function DialogOverlay({ className, ...props }) {
|
|
57
|
+
const { styles } = useDialogContext();
|
|
58
|
+
return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
|
|
59
|
+
DialogPrimitive.Overlay,
|
|
60
|
+
{
|
|
61
|
+
"data-slot": "dialog-overlay",
|
|
62
|
+
className: styles.overlay({
|
|
63
|
+
className
|
|
64
|
+
}),
|
|
65
|
+
...props,
|
|
66
|
+
asChild: true,
|
|
67
|
+
children: /* @__PURE__ */ jsx(
|
|
68
|
+
motion.div,
|
|
69
|
+
{
|
|
70
|
+
animate: "enter",
|
|
71
|
+
exit: "exit",
|
|
72
|
+
initial: "exit",
|
|
73
|
+
variants: TRANSITION_VARIANTS.fade
|
|
74
|
+
}
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
) });
|
|
78
|
+
}
|
|
79
|
+
function DialogContent({
|
|
80
|
+
className,
|
|
81
|
+
children,
|
|
82
|
+
showCloseButton = true,
|
|
83
|
+
...props
|
|
84
|
+
}) {
|
|
85
|
+
const { styles, open } = useDialogContext();
|
|
86
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", forceMount: true, children: [
|
|
87
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
88
|
+
/* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
|
|
89
|
+
DialogPrimitive.Content,
|
|
90
|
+
{
|
|
91
|
+
"data-slot": "dialog-content",
|
|
92
|
+
className: cn(styles.content(), className),
|
|
93
|
+
asChild: true,
|
|
94
|
+
...props,
|
|
95
|
+
children: /* @__PURE__ */ jsxs(
|
|
96
|
+
motion.div,
|
|
97
|
+
{
|
|
98
|
+
animate: "enter",
|
|
99
|
+
exit: "exit",
|
|
100
|
+
initial: "exit",
|
|
101
|
+
variants: scaleInOut,
|
|
102
|
+
children: [
|
|
103
|
+
children,
|
|
104
|
+
showCloseButton && /* @__PURE__ */ jsxs(
|
|
105
|
+
DialogPrimitive.Close,
|
|
106
|
+
{
|
|
107
|
+
"data-slot": "dialog-close",
|
|
108
|
+
className: styles.close(),
|
|
109
|
+
children: [
|
|
110
|
+
/* @__PURE__ */ jsx(CloseIcon, {}),
|
|
111
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
) })
|
|
120
|
+
] }) : null });
|
|
121
|
+
}
|
|
122
|
+
function DialogHeader({ className, ...props }) {
|
|
123
|
+
const { styles } = useDialogContext();
|
|
124
|
+
return /* @__PURE__ */ jsx(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
"data-slot": "dialog-header",
|
|
128
|
+
className: styles.header({ className }),
|
|
129
|
+
...props
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
function DialogFooter({ className, ...props }) {
|
|
134
|
+
const { styles } = useDialogContext();
|
|
135
|
+
return /* @__PURE__ */ jsx(
|
|
136
|
+
"div",
|
|
137
|
+
{
|
|
138
|
+
"data-slot": "dialog-footer",
|
|
139
|
+
className: styles.footer({ className }),
|
|
140
|
+
...props
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
function DialogBody({ className, ...props }) {
|
|
145
|
+
const { styles } = useDialogContext();
|
|
146
|
+
return /* @__PURE__ */ jsx(
|
|
147
|
+
"div",
|
|
148
|
+
{
|
|
149
|
+
"data-slot": "dialog-body",
|
|
150
|
+
className: styles.body({ className }),
|
|
151
|
+
...props
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
function DialogTitle({ className, ...props }) {
|
|
156
|
+
const { styles } = useDialogContext();
|
|
157
|
+
return /* @__PURE__ */ jsx(
|
|
158
|
+
DialogPrimitive.Title,
|
|
159
|
+
{
|
|
160
|
+
"data-slot": "dialog-title",
|
|
161
|
+
className: styles.title({ className }),
|
|
162
|
+
...props
|
|
163
|
+
}
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
function DialogDescription({
|
|
167
|
+
className,
|
|
168
|
+
...props
|
|
169
|
+
}) {
|
|
170
|
+
const { styles } = useDialogContext();
|
|
171
|
+
return /* @__PURE__ */ jsx(
|
|
172
|
+
DialogPrimitive.Description,
|
|
173
|
+
{
|
|
174
|
+
"data-slot": "dialog-description",
|
|
175
|
+
className: styles.description({ className }),
|
|
176
|
+
...props
|
|
177
|
+
}
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
function DialogCloseTrigger({
|
|
181
|
+
className,
|
|
182
|
+
...props
|
|
183
|
+
}) {
|
|
184
|
+
const { styles } = useDialogContext();
|
|
185
|
+
return /* @__PURE__ */ jsx(
|
|
186
|
+
DialogPrimitive.Close,
|
|
187
|
+
{
|
|
188
|
+
"data-slot": "dialog-close-trigger",
|
|
189
|
+
className: styles.closeTrigger({ className }),
|
|
190
|
+
...props
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
export {
|
|
196
|
+
useDialogContext,
|
|
197
|
+
DialogRoot,
|
|
198
|
+
DialogTrigger,
|
|
199
|
+
DialogPortal,
|
|
200
|
+
DialogClose,
|
|
201
|
+
DialogOverlay,
|
|
202
|
+
DialogContent,
|
|
203
|
+
DialogHeader,
|
|
204
|
+
DialogFooter,
|
|
205
|
+
DialogBody,
|
|
206
|
+
DialogTitle,
|
|
207
|
+
DialogDescription,
|
|
208
|
+
DialogCloseTrigger
|
|
209
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { dialog, DialogVariantProps } from '@kopexa/theme';
|
|
3
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
import { ComponentProps } from 'react';
|
|
5
|
+
|
|
6
|
+
type DialogContextValue = {
|
|
7
|
+
styles: ReturnType<typeof dialog>;
|
|
8
|
+
open: boolean;
|
|
9
|
+
placement?: "top" | "bottom" | "left" | "right";
|
|
10
|
+
size?: DialogVariantProps["size"];
|
|
11
|
+
radius?: DialogVariantProps["radius"];
|
|
12
|
+
};
|
|
13
|
+
declare const useDialogContext: () => DialogContextValue;
|
|
14
|
+
|
|
15
|
+
type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & DialogVariantProps;
|
|
16
|
+
declare const DialogRoot: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
|
|
17
|
+
type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
|
|
18
|
+
declare function DialogTrigger({ ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
type DialogPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
|
|
20
|
+
declare function DialogPortal({ ...props }: DialogPortalProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
|
|
22
|
+
declare function DialogClose({ ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
type DialogOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
|
|
24
|
+
declare function DialogOverlay({ className, ...props }: DialogOverlayProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
|
|
26
|
+
showCloseButton?: boolean;
|
|
27
|
+
};
|
|
28
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
|
|
29
|
+
type DialogHeaderProps = ComponentProps<"div">;
|
|
30
|
+
declare function DialogHeader({ className, ...props }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
type DialogFooterProps = ComponentProps<"div">;
|
|
32
|
+
declare function DialogFooter({ className, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
type DialogBodyProps = ComponentProps<"div">;
|
|
34
|
+
declare function DialogBody({ className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
|
|
36
|
+
declare function DialogTitle({ className, ...props }: DialogTitleProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
|
|
38
|
+
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
type DialogCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
|
|
40
|
+
declare function DialogCloseTrigger({ className, ...props }: DialogCloseTriggerProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
export { DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, useDialogContext };
|
package/dist/dialog.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { dialog, DialogVariantProps } from '@kopexa/theme';
|
|
3
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
import { ComponentProps } from 'react';
|
|
5
|
+
|
|
6
|
+
type DialogContextValue = {
|
|
7
|
+
styles: ReturnType<typeof dialog>;
|
|
8
|
+
open: boolean;
|
|
9
|
+
placement?: "top" | "bottom" | "left" | "right";
|
|
10
|
+
size?: DialogVariantProps["size"];
|
|
11
|
+
radius?: DialogVariantProps["radius"];
|
|
12
|
+
};
|
|
13
|
+
declare const useDialogContext: () => DialogContextValue;
|
|
14
|
+
|
|
15
|
+
type DialogRootProps = ComponentProps<typeof DialogPrimitive.Root> & DialogVariantProps;
|
|
16
|
+
declare const DialogRoot: (props: DialogRootProps) => react_jsx_runtime.JSX.Element;
|
|
17
|
+
type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
|
|
18
|
+
declare function DialogTrigger({ ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
type DialogPortalProps = ComponentProps<typeof DialogPrimitive.Portal>;
|
|
20
|
+
declare function DialogPortal({ ...props }: DialogPortalProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>;
|
|
22
|
+
declare function DialogClose({ ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
type DialogOverlayProps = ComponentProps<typeof DialogPrimitive.Overlay>;
|
|
24
|
+
declare function DialogOverlay({ className, ...props }: DialogOverlayProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
|
|
26
|
+
showCloseButton?: boolean;
|
|
27
|
+
};
|
|
28
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
|
|
29
|
+
type DialogHeaderProps = ComponentProps<"div">;
|
|
30
|
+
declare function DialogHeader({ className, ...props }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
|
|
31
|
+
type DialogFooterProps = ComponentProps<"div">;
|
|
32
|
+
declare function DialogFooter({ className, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
type DialogBodyProps = ComponentProps<"div">;
|
|
34
|
+
declare function DialogBody({ className, ...props }: DialogBodyProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
type DialogTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
|
|
36
|
+
declare function DialogTitle({ className, ...props }: DialogTitleProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
type DialogDescriptionProps = ComponentProps<typeof DialogPrimitive.Description>;
|
|
38
|
+
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
type DialogCloseTriggerProps = ComponentProps<typeof DialogPrimitive.Close>;
|
|
40
|
+
declare function DialogCloseTrigger({ className, ...props }: DialogCloseTriggerProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
export { DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogCloseTrigger, type DialogCloseTriggerProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, useDialogContext };
|
package/dist/dialog.js
ADDED
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/dialog.tsx
|
|
32
|
+
var dialog_exports = {};
|
|
33
|
+
__export(dialog_exports, {
|
|
34
|
+
DialogBody: () => DialogBody,
|
|
35
|
+
DialogClose: () => DialogClose,
|
|
36
|
+
DialogCloseTrigger: () => DialogCloseTrigger,
|
|
37
|
+
DialogContent: () => DialogContent,
|
|
38
|
+
DialogDescription: () => DialogDescription,
|
|
39
|
+
DialogFooter: () => DialogFooter,
|
|
40
|
+
DialogHeader: () => DialogHeader,
|
|
41
|
+
DialogOverlay: () => DialogOverlay,
|
|
42
|
+
DialogPortal: () => DialogPortal,
|
|
43
|
+
DialogRoot: () => DialogRoot,
|
|
44
|
+
DialogTitle: () => DialogTitle,
|
|
45
|
+
DialogTrigger: () => DialogTrigger,
|
|
46
|
+
useDialogContext: () => useDialogContext
|
|
47
|
+
});
|
|
48
|
+
module.exports = __toCommonJS(dialog_exports);
|
|
49
|
+
var import_icons = require("@kopexa/icons");
|
|
50
|
+
var import_motion_utils2 = require("@kopexa/motion-utils");
|
|
51
|
+
var import_react_utils = require("@kopexa/react-utils");
|
|
52
|
+
var import_shared_utils = require("@kopexa/shared-utils");
|
|
53
|
+
var import_theme = require("@kopexa/theme");
|
|
54
|
+
var import_use_controllable_state = require("@kopexa/use-controllable-state");
|
|
55
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
56
|
+
var import_react = require("motion/react");
|
|
57
|
+
|
|
58
|
+
// src/transition.ts
|
|
59
|
+
var import_motion_utils = require("@kopexa/motion-utils");
|
|
60
|
+
var scaleInOut = {
|
|
61
|
+
enter: {
|
|
62
|
+
scale: "var(--scale-enter)",
|
|
63
|
+
y: "var(--slide-enter)",
|
|
64
|
+
opacity: 1,
|
|
65
|
+
willChange: "auto",
|
|
66
|
+
transition: {
|
|
67
|
+
scale: {
|
|
68
|
+
duration: 0.4,
|
|
69
|
+
ease: import_motion_utils.TRANSITION_EASINGS.ease
|
|
70
|
+
},
|
|
71
|
+
opacity: {
|
|
72
|
+
duration: 0.4,
|
|
73
|
+
ease: import_motion_utils.TRANSITION_EASINGS.ease
|
|
74
|
+
},
|
|
75
|
+
y: {
|
|
76
|
+
type: "spring",
|
|
77
|
+
bounce: 0,
|
|
78
|
+
duration: 0.6
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
exit: {
|
|
83
|
+
scale: "var(--scale-exit)",
|
|
84
|
+
y: "var(--slide-exit)",
|
|
85
|
+
opacity: 0,
|
|
86
|
+
willChange: "transform",
|
|
87
|
+
transition: {
|
|
88
|
+
duration: 0.3,
|
|
89
|
+
ease: import_motion_utils.TRANSITION_EASINGS.ease
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// src/dialog.tsx
|
|
95
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
96
|
+
var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
|
|
97
|
+
var DialogRoot = (props) => {
|
|
98
|
+
const {
|
|
99
|
+
open: openProp,
|
|
100
|
+
onOpenChange,
|
|
101
|
+
size,
|
|
102
|
+
radius,
|
|
103
|
+
placement,
|
|
104
|
+
...restProps
|
|
105
|
+
} = props;
|
|
106
|
+
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
107
|
+
value: openProp,
|
|
108
|
+
onChange: onOpenChange,
|
|
109
|
+
defaultValue: false
|
|
110
|
+
});
|
|
111
|
+
const styles = (0, import_theme.dialog)({ size, radius, placement });
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
DialogPrimitive.Root,
|
|
114
|
+
{
|
|
115
|
+
"data-slot": "dialog",
|
|
116
|
+
open,
|
|
117
|
+
onOpenChange: setOpen,
|
|
118
|
+
...restProps
|
|
119
|
+
}
|
|
120
|
+
) });
|
|
121
|
+
};
|
|
122
|
+
function DialogTrigger({ ...props }) {
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
124
|
+
}
|
|
125
|
+
function DialogPortal({ ...props }) {
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
127
|
+
}
|
|
128
|
+
function DialogClose({ ...props }) {
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
130
|
+
}
|
|
131
|
+
function DialogOverlay({ className, ...props }) {
|
|
132
|
+
const { styles } = useDialogContext();
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.LazyMotion, { features: import_react.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
|
+
DialogPrimitive.Overlay,
|
|
135
|
+
{
|
|
136
|
+
"data-slot": "dialog-overlay",
|
|
137
|
+
className: styles.overlay({
|
|
138
|
+
className
|
|
139
|
+
}),
|
|
140
|
+
...props,
|
|
141
|
+
asChild: true,
|
|
142
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
143
|
+
import_react.motion.div,
|
|
144
|
+
{
|
|
145
|
+
animate: "enter",
|
|
146
|
+
exit: "exit",
|
|
147
|
+
initial: "exit",
|
|
148
|
+
variants: import_motion_utils2.TRANSITION_VARIANTS.fade
|
|
149
|
+
}
|
|
150
|
+
)
|
|
151
|
+
}
|
|
152
|
+
) });
|
|
153
|
+
}
|
|
154
|
+
function DialogContent({
|
|
155
|
+
className,
|
|
156
|
+
children,
|
|
157
|
+
showCloseButton = true,
|
|
158
|
+
...props
|
|
159
|
+
}) {
|
|
160
|
+
const { styles, open } = useDialogContext();
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", forceMount: true, children: [
|
|
162
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
|
|
163
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.LazyMotion, { features: import_react.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
164
|
+
DialogPrimitive.Content,
|
|
165
|
+
{
|
|
166
|
+
"data-slot": "dialog-content",
|
|
167
|
+
className: (0, import_shared_utils.cn)(styles.content(), className),
|
|
168
|
+
asChild: true,
|
|
169
|
+
...props,
|
|
170
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
171
|
+
import_react.motion.div,
|
|
172
|
+
{
|
|
173
|
+
animate: "enter",
|
|
174
|
+
exit: "exit",
|
|
175
|
+
initial: "exit",
|
|
176
|
+
variants: scaleInOut,
|
|
177
|
+
children: [
|
|
178
|
+
children,
|
|
179
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
180
|
+
DialogPrimitive.Close,
|
|
181
|
+
{
|
|
182
|
+
"data-slot": "dialog-close",
|
|
183
|
+
className: styles.close(),
|
|
184
|
+
children: [
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
|
|
187
|
+
]
|
|
188
|
+
}
|
|
189
|
+
)
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
}
|
|
194
|
+
) })
|
|
195
|
+
] }) : null });
|
|
196
|
+
}
|
|
197
|
+
function DialogHeader({ className, ...props }) {
|
|
198
|
+
const { styles } = useDialogContext();
|
|
199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
200
|
+
"div",
|
|
201
|
+
{
|
|
202
|
+
"data-slot": "dialog-header",
|
|
203
|
+
className: styles.header({ className }),
|
|
204
|
+
...props
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
function DialogFooter({ className, ...props }) {
|
|
209
|
+
const { styles } = useDialogContext();
|
|
210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
211
|
+
"div",
|
|
212
|
+
{
|
|
213
|
+
"data-slot": "dialog-footer",
|
|
214
|
+
className: styles.footer({ className }),
|
|
215
|
+
...props
|
|
216
|
+
}
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
function DialogBody({ className, ...props }) {
|
|
220
|
+
const { styles } = useDialogContext();
|
|
221
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
222
|
+
"div",
|
|
223
|
+
{
|
|
224
|
+
"data-slot": "dialog-body",
|
|
225
|
+
className: styles.body({ className }),
|
|
226
|
+
...props
|
|
227
|
+
}
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
function DialogTitle({ className, ...props }) {
|
|
231
|
+
const { styles } = useDialogContext();
|
|
232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
233
|
+
DialogPrimitive.Title,
|
|
234
|
+
{
|
|
235
|
+
"data-slot": "dialog-title",
|
|
236
|
+
className: styles.title({ className }),
|
|
237
|
+
...props
|
|
238
|
+
}
|
|
239
|
+
);
|
|
240
|
+
}
|
|
241
|
+
function DialogDescription({
|
|
242
|
+
className,
|
|
243
|
+
...props
|
|
244
|
+
}) {
|
|
245
|
+
const { styles } = useDialogContext();
|
|
246
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
247
|
+
DialogPrimitive.Description,
|
|
248
|
+
{
|
|
249
|
+
"data-slot": "dialog-description",
|
|
250
|
+
className: styles.description({ className }),
|
|
251
|
+
...props
|
|
252
|
+
}
|
|
253
|
+
);
|
|
254
|
+
}
|
|
255
|
+
function DialogCloseTrigger({
|
|
256
|
+
className,
|
|
257
|
+
...props
|
|
258
|
+
}) {
|
|
259
|
+
const { styles } = useDialogContext();
|
|
260
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
261
|
+
DialogPrimitive.Close,
|
|
262
|
+
{
|
|
263
|
+
"data-slot": "dialog-close-trigger",
|
|
264
|
+
className: styles.closeTrigger({ className }),
|
|
265
|
+
...props
|
|
266
|
+
}
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
270
|
+
0 && (module.exports = {
|
|
271
|
+
DialogBody,
|
|
272
|
+
DialogClose,
|
|
273
|
+
DialogCloseTrigger,
|
|
274
|
+
DialogContent,
|
|
275
|
+
DialogDescription,
|
|
276
|
+
DialogFooter,
|
|
277
|
+
DialogHeader,
|
|
278
|
+
DialogOverlay,
|
|
279
|
+
DialogPortal,
|
|
280
|
+
DialogRoot,
|
|
281
|
+
DialogTitle,
|
|
282
|
+
DialogTrigger,
|
|
283
|
+
useDialogContext
|
|
284
|
+
});
|