@oneplatformdev/ui 0.0.1-beta.149 → 0.0.1-beta.151
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/Dialog/Dialog.mjs +69 -78
- package/Popover/Popover.mjs +1 -7
- package/package.json +1 -1
package/Dialog/Dialog.mjs
CHANGED
|
@@ -1,66 +1,57 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import * as
|
|
4
|
-
import { XIcon as
|
|
5
|
-
import { cn as
|
|
1
|
+
import { jsx as o, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import i, { useState as y, useRef as N } from "react";
|
|
3
|
+
import * as a from "@radix-ui/react-dialog";
|
|
4
|
+
import { XIcon as D } from "lucide-react";
|
|
5
|
+
import { cn as l, composeRefs as b } from "@oneplatformdev/utils";
|
|
6
6
|
import { DialogOverlayScope as h } from "./DialogOverlayScope.mjs";
|
|
7
|
-
const
|
|
8
|
-
const { modal:
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
},
|
|
11
|
-
|
|
7
|
+
const F = (e) => {
|
|
8
|
+
const { modal: t, ...s } = e;
|
|
9
|
+
return /* @__PURE__ */ o(a.Root, { modal: t, ...s });
|
|
10
|
+
}, H = a.Trigger, v = a.Portal, _ = a.Close, c = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
11
|
+
a.Overlay,
|
|
12
12
|
{
|
|
13
|
-
ref:
|
|
14
|
-
className:
|
|
13
|
+
ref: s,
|
|
14
|
+
className: l(
|
|
15
15
|
"fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
16
|
-
|
|
16
|
+
e
|
|
17
17
|
),
|
|
18
|
-
...
|
|
18
|
+
...t
|
|
19
19
|
}
|
|
20
20
|
));
|
|
21
|
-
c.displayName =
|
|
22
|
-
const w =
|
|
21
|
+
c.displayName = a.Overlay.displayName;
|
|
22
|
+
const w = i.forwardRef(
|
|
23
23
|
({
|
|
24
|
-
className:
|
|
25
|
-
children:
|
|
26
|
-
showCloseButton:
|
|
24
|
+
className: e,
|
|
25
|
+
children: t,
|
|
26
|
+
showCloseButton: s = !0,
|
|
27
27
|
onOpenAutoFocus: n,
|
|
28
28
|
preventAutoFocus: f,
|
|
29
29
|
...m
|
|
30
|
-
},
|
|
31
|
-
const [
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
|
|
30
|
+
}, p) => {
|
|
31
|
+
const [g, u] = y(null), x = N(null);
|
|
32
|
+
return /* @__PURE__ */ o(v, { children: /* @__PURE__ */ d(c, { children: [
|
|
33
|
+
/* @__PURE__ */ o(h, { value: g, children: /* @__PURE__ */ d(
|
|
34
|
+
a.Content,
|
|
35
35
|
{
|
|
36
|
-
ref: (
|
|
37
|
-
|
|
36
|
+
ref: (r) => {
|
|
37
|
+
r && b(p, x)(r);
|
|
38
38
|
},
|
|
39
|
-
className:
|
|
39
|
+
className: l(
|
|
40
40
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
|
|
41
41
|
"duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
42
42
|
"max-w-[90%] max-h-[90%] overflow-hidden",
|
|
43
43
|
"bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
|
|
44
|
-
|
|
44
|
+
e
|
|
45
45
|
),
|
|
46
|
-
onOpenAutoFocus: (
|
|
46
|
+
onOpenAutoFocus: (r) => (f && r.preventDefault(), n == null ? void 0 : n(r)),
|
|
47
47
|
...m,
|
|
48
|
-
onPointerDownOutside: (...e) => {
|
|
49
|
-
console.log("onPointerDownOutside", e);
|
|
50
|
-
},
|
|
51
|
-
onInteractOutside: (...e) => {
|
|
52
|
-
console.log("onInteractOutside", e);
|
|
53
|
-
},
|
|
54
|
-
onFocusOutside: (...e) => {
|
|
55
|
-
console.log("onFocusOutside", e);
|
|
56
|
-
},
|
|
57
48
|
children: [
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
49
|
+
t,
|
|
50
|
+
s && /* @__PURE__ */ d(
|
|
51
|
+
a.Close,
|
|
61
52
|
{
|
|
62
53
|
"aria-label": "Close",
|
|
63
|
-
className:
|
|
54
|
+
className: l(
|
|
64
55
|
"absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
|
|
65
56
|
"flex items-center justify-center",
|
|
66
57
|
"data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
|
|
@@ -72,84 +63,84 @@ const w = r.forwardRef(
|
|
|
72
63
|
"transition-opacity"
|
|
73
64
|
),
|
|
74
65
|
children: [
|
|
75
|
-
/* @__PURE__ */
|
|
76
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ o(D, { className: "h-4 w-4" }),
|
|
67
|
+
/* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
|
|
77
68
|
]
|
|
78
69
|
}
|
|
79
70
|
)
|
|
80
71
|
]
|
|
81
72
|
}
|
|
82
73
|
) }),
|
|
83
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ o(
|
|
84
75
|
"div",
|
|
85
76
|
{
|
|
86
|
-
ref: (
|
|
87
|
-
|
|
77
|
+
ref: (r) => {
|
|
78
|
+
r && u(r);
|
|
88
79
|
}
|
|
89
80
|
}
|
|
90
81
|
)
|
|
91
82
|
] }) });
|
|
92
83
|
}
|
|
93
84
|
);
|
|
94
|
-
w.displayName =
|
|
85
|
+
w.displayName = a.Content.displayName;
|
|
95
86
|
const C = ({
|
|
96
|
-
className:
|
|
97
|
-
...
|
|
98
|
-
}) => /* @__PURE__ */
|
|
87
|
+
className: e,
|
|
88
|
+
...t
|
|
89
|
+
}) => /* @__PURE__ */ o(
|
|
99
90
|
"div",
|
|
100
91
|
{
|
|
101
|
-
className:
|
|
92
|
+
className: l(
|
|
102
93
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
103
|
-
|
|
94
|
+
e
|
|
104
95
|
),
|
|
105
|
-
...
|
|
96
|
+
...t
|
|
106
97
|
}
|
|
107
98
|
);
|
|
108
99
|
C.displayName = "DialogHeader";
|
|
109
100
|
const R = ({
|
|
110
|
-
className:
|
|
111
|
-
...
|
|
112
|
-
}) => /* @__PURE__ */
|
|
101
|
+
className: e,
|
|
102
|
+
...t
|
|
103
|
+
}) => /* @__PURE__ */ o(
|
|
113
104
|
"div",
|
|
114
105
|
{
|
|
115
|
-
className:
|
|
106
|
+
className: l(
|
|
116
107
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
117
|
-
|
|
108
|
+
e
|
|
118
109
|
),
|
|
119
|
-
...
|
|
110
|
+
...t
|
|
120
111
|
}
|
|
121
112
|
);
|
|
122
113
|
R.displayName = "DialogFooter";
|
|
123
|
-
const
|
|
124
|
-
|
|
114
|
+
const T = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
115
|
+
a.Title,
|
|
125
116
|
{
|
|
126
|
-
ref:
|
|
127
|
-
className:
|
|
117
|
+
ref: s,
|
|
118
|
+
className: l(
|
|
128
119
|
"text-lg font-semibold leading-none tracking-tight",
|
|
129
|
-
|
|
120
|
+
e
|
|
130
121
|
),
|
|
131
|
-
...
|
|
122
|
+
...t
|
|
132
123
|
}
|
|
133
124
|
));
|
|
134
|
-
|
|
135
|
-
const
|
|
136
|
-
|
|
125
|
+
T.displayName = a.Title.displayName;
|
|
126
|
+
const j = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
127
|
+
a.Description,
|
|
137
128
|
{
|
|
138
|
-
ref:
|
|
139
|
-
className:
|
|
140
|
-
...
|
|
129
|
+
ref: s,
|
|
130
|
+
className: l("text-sm text-muted-foreground", e),
|
|
131
|
+
...t
|
|
141
132
|
}
|
|
142
133
|
));
|
|
143
|
-
|
|
134
|
+
j.displayName = a.Description.displayName;
|
|
144
135
|
export {
|
|
145
|
-
|
|
146
|
-
|
|
136
|
+
F as Dialog,
|
|
137
|
+
_ as DialogClose,
|
|
147
138
|
w as DialogContent,
|
|
148
|
-
|
|
139
|
+
j as DialogDescription,
|
|
149
140
|
R as DialogFooter,
|
|
150
141
|
C as DialogHeader,
|
|
151
142
|
c as DialogOverlay,
|
|
152
143
|
v as DialogPortal,
|
|
153
|
-
|
|
154
|
-
|
|
144
|
+
T as DialogTitle,
|
|
145
|
+
H as DialogTrigger
|
|
155
146
|
};
|
package/Popover/Popover.mjs
CHANGED
|
@@ -5,13 +5,7 @@ import { cn as l } from "@oneplatformdev/utils";
|
|
|
5
5
|
import { useDialogOverlayContainer as c } from "../Dialog/DialogOverlayScope.mjs";
|
|
6
6
|
const P = (t) => {
|
|
7
7
|
const { modal: e, ...r } = t;
|
|
8
|
-
return /* @__PURE__ */ a(
|
|
9
|
-
o.Root,
|
|
10
|
-
{
|
|
11
|
-
modal: e,
|
|
12
|
-
...r
|
|
13
|
-
}
|
|
14
|
-
);
|
|
8
|
+
return /* @__PURE__ */ a(o.Root, { modal: e, ...r });
|
|
15
9
|
}, h = o.Trigger, b = o.Anchor, f = p.forwardRef(({ className: t, align: e = "center", sideOffset: r = 4, style: n, avoidCollisions: i = !0, ...d }, s) => {
|
|
16
10
|
const m = c();
|
|
17
11
|
return /* @__PURE__ */ a(o.Portal, { container: m, children: /* @__PURE__ */ a(
|