@mks2508/mks-ui 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/AlertDialog/index.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EACV,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAM7B,QAAA,MAA4B,cAAc,8BACsB,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAgBnB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAO1B;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,2CAcxD;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAqB3B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/AlertDialog/index.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EACV,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAM7B,QAAA,MAA4B,cAAc,8BACsB,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAgBnB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAO1B;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,2CAcxD;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAqB3B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAsCxB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAY9B;AAMD,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,GACf,CAAC;AAGF,YAAY,EACV,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC5B,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -177,30 +177,33 @@ function AlertDialogPopup({ from = "top", initialFocus, finalFocus, transition =
|
|
|
177
177
|
}, slots, className, ...props }) {
|
|
178
178
|
const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
|
|
179
179
|
const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
|
|
180
|
-
return /* @__PURE__ */ jsx(AlertDialog.
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
180
|
+
return /* @__PURE__ */ jsx(AlertDialog.Viewport, {
|
|
181
|
+
"data-slot": "alert-dialog-viewport",
|
|
182
|
+
children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
|
|
183
|
+
initialFocus,
|
|
184
|
+
finalFocus,
|
|
185
|
+
render: /* @__PURE__ */ jsx(motion.div, {
|
|
186
|
+
"data-slot": "alert-dialog-popup",
|
|
187
|
+
className: cn(AlertDialogStyles.popup, slots?.popup, className),
|
|
188
|
+
initial: {
|
|
189
|
+
opacity: 0,
|
|
190
|
+
filter: "blur(4px)",
|
|
191
|
+
transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
|
|
192
|
+
},
|
|
193
|
+
animate: {
|
|
194
|
+
opacity: 1,
|
|
195
|
+
filter: "blur(0px)",
|
|
196
|
+
transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
|
|
197
|
+
},
|
|
198
|
+
exit: {
|
|
199
|
+
opacity: 0,
|
|
200
|
+
filter: "blur(4px)",
|
|
201
|
+
transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
|
|
202
|
+
},
|
|
203
|
+
transition,
|
|
204
|
+
...props
|
|
205
|
+
}, "alert-dialog-popup")
|
|
206
|
+
})
|
|
204
207
|
});
|
|
205
208
|
}
|
|
206
209
|
/**
|
|
@@ -75,18 +75,22 @@ declare function DialogViewport({ slots, className, ...props }: IDialogViewportP
|
|
|
75
75
|
/**
|
|
76
76
|
* Main dialog content container with a perspective-flip entrance animation.
|
|
77
77
|
* The `from` prop controls the axis and direction of the 3D rotation.
|
|
78
|
-
* Must be wrapped in a
|
|
78
|
+
* Must be wrapped in a {@link DialogViewport} (which provides Base UI's
|
|
79
|
+
* required `Dialog.Viewport` between Portal and Popup).
|
|
79
80
|
*
|
|
80
81
|
* @param props - Popup props including `from` direction and motion transition overrides
|
|
81
82
|
*
|
|
82
83
|
* @example
|
|
83
84
|
* ```tsx
|
|
84
|
-
* <
|
|
85
|
-
* <
|
|
86
|
-
*
|
|
87
|
-
* <
|
|
88
|
-
*
|
|
89
|
-
*
|
|
85
|
+
* <DialogPortal>
|
|
86
|
+
* <DialogBackdrop />
|
|
87
|
+
* <DialogViewport>
|
|
88
|
+
* <DialogPopup from="bottom" className="max-w-md">
|
|
89
|
+
* <DialogTitle>Confirm</DialogTitle>
|
|
90
|
+
* <p>Are you sure?</p>
|
|
91
|
+
* </DialogPopup>
|
|
92
|
+
* </DialogViewport>
|
|
93
|
+
* </DialogPortal>
|
|
90
94
|
* ```
|
|
91
95
|
*/
|
|
92
96
|
declare function DialogPopup({ from, initialFocus, finalFocus, slots, className, transition, ...props }: IDialogPopupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Dialog/index.tsx"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EACV,iBAAiB,EAEjB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAMxB,QAAA,MAAuB,SAAS,yBACsB,CAAC;AAMvD;;;;;;;;;;;;GAYG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,YAAY,2CAkBlC;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAcpE;AAMD;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,SAAS,EACT,UAAiD,EACjD,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAiBtB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQ3E;AAMD
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Dialog/index.tsx"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EACV,iBAAiB,EAEjB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAMxB,QAAA,MAAuB,SAAS,yBACsB,CAAC;AAMvD;;;;;;;;;;;;GAYG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,YAAY,2CAkBlC;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAcpE;AAMD;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,SAAS,EACT,UAAiD,EACjD,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAiBtB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQ3E;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,SAAS,EACT,UAA4D,EAC5D,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoCnB;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQrE;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQrE;AAMD;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,SAAS,GACV,CAAC;AAGF,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,aAAa,GACd,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -147,18 +147,22 @@ function DialogViewport({ slots, className, ...props }) {
|
|
|
147
147
|
/**
|
|
148
148
|
* Main dialog content container with a perspective-flip entrance animation.
|
|
149
149
|
* The `from` prop controls the axis and direction of the 3D rotation.
|
|
150
|
-
* Must be wrapped in a
|
|
150
|
+
* Must be wrapped in a {@link DialogViewport} (which provides Base UI's
|
|
151
|
+
* required `Dialog.Viewport` between Portal and Popup).
|
|
151
152
|
*
|
|
152
153
|
* @param props - Popup props including `from` direction and motion transition overrides
|
|
153
154
|
*
|
|
154
155
|
* @example
|
|
155
156
|
* ```tsx
|
|
156
|
-
* <
|
|
157
|
-
* <
|
|
158
|
-
*
|
|
159
|
-
* <
|
|
160
|
-
*
|
|
161
|
-
*
|
|
157
|
+
* <DialogPortal>
|
|
158
|
+
* <DialogBackdrop />
|
|
159
|
+
* <DialogViewport>
|
|
160
|
+
* <DialogPopup from="bottom" className="max-w-md">
|
|
161
|
+
* <DialogTitle>Confirm</DialogTitle>
|
|
162
|
+
* <p>Are you sure?</p>
|
|
163
|
+
* </DialogPopup>
|
|
164
|
+
* </DialogViewport>
|
|
165
|
+
* </DialogPortal>
|
|
162
166
|
* ```
|
|
163
167
|
*/
|
|
164
168
|
function DialogPopup({ from = "top", initialFocus, finalFocus, slots, className, transition = {
|
|
@@ -168,7 +172,7 @@ function DialogPopup({ from = "top", initialFocus, finalFocus, slots, className,
|
|
|
168
172
|
}, ...props }) {
|
|
169
173
|
const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
|
|
170
174
|
const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
|
|
171
|
-
return /* @__PURE__ */ jsx(Dialog.
|
|
175
|
+
return /* @__PURE__ */ jsx(Dialog.Popup, {
|
|
172
176
|
initialFocus,
|
|
173
177
|
finalFocus,
|
|
174
178
|
render: /* @__PURE__ */ jsx(motion.div, {
|
|
@@ -192,7 +196,7 @@ function DialogPopup({ from = "top", initialFocus, finalFocus, slots, className,
|
|
|
192
196
|
transition,
|
|
193
197
|
...props
|
|
194
198
|
}, "dialog-popup")
|
|
195
|
-
})
|
|
199
|
+
});
|
|
196
200
|
}
|
|
197
201
|
/**
|
|
198
202
|
* Button that closes the dialog when clicked.
|