@umami/react-zen 0.198.0 → 0.200.0
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/index.css +55 -63
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +2393 -2027
- package/dist/index.mjs +1488 -1122
- package/package.json +16 -16
- package/styles.css +55 -63
package/dist/index.css
CHANGED
|
@@ -3530,37 +3530,35 @@ body a.Button_button__NGQyO {
|
|
|
3530
3530
|
transition: max-height 0.5s ease-out;
|
|
3531
3531
|
}
|
|
3532
3532
|
|
|
3533
|
+
/* virtual-css:css:94870e251b7b77526d8ae103079be601 */
|
|
3534
|
+
.Heading_heading__MGIyZ {
|
|
3535
|
+
color: var(--heading-color);
|
|
3536
|
+
font-weight: var(--font-weight-bold);
|
|
3537
|
+
line-height: 1.2;
|
|
3538
|
+
}
|
|
3539
|
+
|
|
3533
3540
|
/* virtual-css:css:190b71b0b870ea6c0882d0c839c39b19 */
|
|
3534
|
-
.
|
|
3541
|
+
.Dialog_dialog__NjJlM {
|
|
3542
|
+
padding: var(--spacing-6);
|
|
3543
|
+
box-shadow: var(--box-shadow-4);
|
|
3544
|
+
background: var(--background-color);
|
|
3545
|
+
border: var(--border);
|
|
3546
|
+
border-radius: var(--border-radius);
|
|
3535
3547
|
position: relative;
|
|
3536
3548
|
outline: none;
|
|
3537
|
-
max-height: 100vh;
|
|
3538
|
-
max-width: 100vw;
|
|
3539
3549
|
overflow: auto;
|
|
3540
3550
|
}
|
|
3541
|
-
.
|
|
3551
|
+
.Dialog_title__YjdmY {
|
|
3542
3552
|
font-size: var(--font-size-5);
|
|
3543
3553
|
font-weight: 700;
|
|
3544
3554
|
margin-bottom: var(--spacing-3);
|
|
3545
3555
|
}
|
|
3546
|
-
.
|
|
3547
|
-
padding: var(--spacing-6);
|
|
3548
|
-
box-shadow: var(--box-shadow-4);
|
|
3549
|
-
background: var(--background-color);
|
|
3550
|
-
border: var(--border);
|
|
3551
|
-
border-radius: var(--border-radius);
|
|
3552
|
-
}
|
|
3553
|
-
.Dialog_menu__NWYyN {
|
|
3554
|
-
padding: var(--spacing-2);
|
|
3555
|
-
box-shadow: var(--box-shadow-3);
|
|
3556
|
-
background: var(--background-color);
|
|
3557
|
-
border: var(--border);
|
|
3558
|
-
border-radius: var(--border-radius);
|
|
3559
|
-
}
|
|
3560
|
-
.Dialog_sheet__MmJjY {
|
|
3556
|
+
.Dialog_dialog__NjJlM.Dialog_sheet__ZjQ1M {
|
|
3561
3557
|
background: var(--background-color);
|
|
3562
3558
|
width: 100%;
|
|
3563
3559
|
height: 100%;
|
|
3560
|
+
padding: 0;
|
|
3561
|
+
border: 0;
|
|
3564
3562
|
border-radius: 0;
|
|
3565
3563
|
box-shadow: none;
|
|
3566
3564
|
z-index: 9999;
|
|
@@ -4161,13 +4159,6 @@ body a.Button_button__NGQyO {
|
|
|
4161
4159
|
transform: translate(-50%, calc(-100% - 10px));
|
|
4162
4160
|
}
|
|
4163
4161
|
|
|
4164
|
-
/* virtual-css:css:94870e251b7b77526d8ae103079be601 */
|
|
4165
|
-
.Heading_heading__MGIyZ {
|
|
4166
|
-
color: var(--heading-color);
|
|
4167
|
-
font-weight: var(--font-weight-bold);
|
|
4168
|
-
line-height: 1.2;
|
|
4169
|
-
}
|
|
4170
|
-
|
|
4171
4162
|
/* virtual-css:css:d6c8f45fae43d995517dd77d33fd2f76 */
|
|
4172
4163
|
.HoverTrigger_wrapper__NGFlN {
|
|
4173
4164
|
transform: translateY(-10px);
|
|
@@ -4315,7 +4306,7 @@ body a.Button_button__NGQyO {
|
|
|
4315
4306
|
}
|
|
4316
4307
|
|
|
4317
4308
|
/* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
|
|
4318
|
-
.
|
|
4309
|
+
.Modal_overlay__MDExM {
|
|
4319
4310
|
position: fixed;
|
|
4320
4311
|
top: 0;
|
|
4321
4312
|
left: 0;
|
|
@@ -4328,17 +4319,17 @@ body a.Button_button__NGQyO {
|
|
|
4328
4319
|
--modal-offset: 50%;
|
|
4329
4320
|
z-index: 9999;
|
|
4330
4321
|
}
|
|
4331
|
-
.
|
|
4332
|
-
animation: Modal_modal-fade-
|
|
4322
|
+
.Modal_overlay__MDExM[data-entering] {
|
|
4323
|
+
animation: Modal_modal-fade-in__ZDY2M 200ms;
|
|
4333
4324
|
}
|
|
4334
|
-
.
|
|
4335
|
-
animation: Modal_modal-fade-
|
|
4325
|
+
.Modal_overlay__MDExM[data-exiting] {
|
|
4326
|
+
animation: Modal_modal-fade-in__ZDY2M 200ms reverse ease-in;
|
|
4336
4327
|
}
|
|
4337
|
-
.
|
|
4328
|
+
.Modal_modal__YTc0N {
|
|
4338
4329
|
position: relative;
|
|
4339
4330
|
z-index: 9999;
|
|
4340
4331
|
}
|
|
4341
|
-
.
|
|
4332
|
+
.Modal_modal__YTc0N.Modal_left__MTJkM {
|
|
4342
4333
|
position: absolute;
|
|
4343
4334
|
top: 0;
|
|
4344
4335
|
left: 0;
|
|
@@ -4346,7 +4337,7 @@ body a.Button_button__NGQyO {
|
|
|
4346
4337
|
margin: auto;
|
|
4347
4338
|
width: calc(100dvw - var(--modal-offset, 0));
|
|
4348
4339
|
}
|
|
4349
|
-
.
|
|
4340
|
+
.Modal_modal__YTc0N.Modal_right__MTgyY {
|
|
4350
4341
|
position: absolute;
|
|
4351
4342
|
top: 0;
|
|
4352
4343
|
right: 0;
|
|
@@ -4354,7 +4345,7 @@ body a.Button_button__NGQyO {
|
|
|
4354
4345
|
margin: auto;
|
|
4355
4346
|
width: calc(100dvw - var(--modal-offset, 0));
|
|
4356
4347
|
}
|
|
4357
|
-
.
|
|
4348
|
+
.Modal_modal__YTc0N.Modal_top__ZjhhZ {
|
|
4358
4349
|
position: absolute;
|
|
4359
4350
|
top: 0;
|
|
4360
4351
|
left: 0;
|
|
@@ -4362,7 +4353,7 @@ body a.Button_button__NGQyO {
|
|
|
4362
4353
|
margin: auto;
|
|
4363
4354
|
height: calc(100dvh - var(--modal-offset, 0));
|
|
4364
4355
|
}
|
|
4365
|
-
.
|
|
4356
|
+
.Modal_modal__YTc0N.Modal_bottom__NWMzZ {
|
|
4366
4357
|
position: absolute;
|
|
4367
4358
|
left: 0;
|
|
4368
4359
|
right: 0;
|
|
@@ -4370,41 +4361,42 @@ body a.Button_button__NGQyO {
|
|
|
4370
4361
|
margin: auto;
|
|
4371
4362
|
height: calc(100dvh - var(--modal-offset, 0));
|
|
4372
4363
|
}
|
|
4373
|
-
.
|
|
4364
|
+
.Modal_modal__YTc0N.Modal_fullscreen__MzNlO {
|
|
4374
4365
|
width: 100dvw;
|
|
4375
4366
|
height: 100dvh;
|
|
4367
|
+
border-radius: 0;
|
|
4376
4368
|
}
|
|
4377
|
-
.
|
|
4378
|
-
animation: Modal_modal-
|
|
4369
|
+
.Modal_modal__YTc0N.Modal_center__YzA4O[data-entering] {
|
|
4370
|
+
animation: Modal_modal-zoom__YjI0Z 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
4379
4371
|
}
|
|
4380
|
-
.
|
|
4381
|
-
animation: Modal_modal-
|
|
4372
|
+
.Modal_modal__YTc0N.Modal_left__MTJkM[data-entering] {
|
|
4373
|
+
animation: Modal_modal-left__YzdjM 200ms ease-out;
|
|
4382
4374
|
}
|
|
4383
|
-
.
|
|
4384
|
-
animation: Modal_modal-
|
|
4375
|
+
.Modal_modal__YTc0N.Modal_left__MTJkM[data-exiting] {
|
|
4376
|
+
animation: Modal_modal-left__YzdjM 200ms reverse ease-out;
|
|
4385
4377
|
}
|
|
4386
|
-
.
|
|
4387
|
-
animation: Modal_modal-
|
|
4378
|
+
.Modal_modal__YTc0N.Modal_right__MTgyY[data-entering] {
|
|
4379
|
+
animation: Modal_modal-right__MjdlN 200ms ease-out;
|
|
4388
4380
|
}
|
|
4389
|
-
.
|
|
4390
|
-
animation: Modal_modal-
|
|
4381
|
+
.Modal_modal__YTc0N.Modal_right__MTgyY[data-exiting] {
|
|
4382
|
+
animation: Modal_modal-right__MjdlN 200ms reverse ease-in;
|
|
4391
4383
|
}
|
|
4392
|
-
.
|
|
4393
|
-
animation: Modal_modal-
|
|
4384
|
+
.Modal_modal__YTc0N.Modal_top__ZjhhZ[data-entering] {
|
|
4385
|
+
animation: Modal_modal-top__ZTg5M 200ms ease-out;
|
|
4394
4386
|
}
|
|
4395
|
-
.
|
|
4396
|
-
animation: Modal_modal-
|
|
4387
|
+
.Modal_modal__YTc0N.Modal_top__ZjhhZ[data-exiting] {
|
|
4388
|
+
animation: Modal_modal-top__ZTg5M 200ms reverse ease-in;
|
|
4397
4389
|
}
|
|
4398
|
-
.
|
|
4399
|
-
animation: Modal_modal-
|
|
4390
|
+
.Modal_modal__YTc0N.Modal_bottom__NWMzZ[data-entering] {
|
|
4391
|
+
animation: Modal_modal-bottom__YjQ3N 200ms ease-out;
|
|
4400
4392
|
}
|
|
4401
|
-
.
|
|
4402
|
-
animation: Modal_modal-
|
|
4393
|
+
.Modal_modal__YTc0N.Modal_bottom__NWMzZ[data-exiting] {
|
|
4394
|
+
animation: Modal_modal-bottom__YjQ3N 200ms reverse ease-in;
|
|
4403
4395
|
}
|
|
4404
|
-
.
|
|
4405
|
-
animation: Modal_modal-fade-
|
|
4396
|
+
.Modal_modal__YTc0N.Modal_fullscreen__MzNlO[data-entering] {
|
|
4397
|
+
animation: Modal_modal-fade-in__ZDY2M 200ms ease-out;
|
|
4406
4398
|
}
|
|
4407
|
-
@keyframes Modal_modal-fade-
|
|
4399
|
+
@keyframes Modal_modal-fade-in__ZDY2M {
|
|
4408
4400
|
from {
|
|
4409
4401
|
opacity: 0;
|
|
4410
4402
|
}
|
|
@@ -4412,7 +4404,7 @@ body a.Button_button__NGQyO {
|
|
|
4412
4404
|
opacity: 1;
|
|
4413
4405
|
}
|
|
4414
4406
|
}
|
|
4415
|
-
@keyframes Modal_modal-
|
|
4407
|
+
@keyframes Modal_modal-zoom__YjI0Z {
|
|
4416
4408
|
from {
|
|
4417
4409
|
transform: scale(0.8);
|
|
4418
4410
|
}
|
|
@@ -4420,7 +4412,7 @@ body a.Button_button__NGQyO {
|
|
|
4420
4412
|
transform: scale(1);
|
|
4421
4413
|
}
|
|
4422
4414
|
}
|
|
4423
|
-
@keyframes Modal_modal-
|
|
4415
|
+
@keyframes Modal_modal-left__YzdjM {
|
|
4424
4416
|
from {
|
|
4425
4417
|
transform: translateX(-100%);
|
|
4426
4418
|
}
|
|
@@ -4428,7 +4420,7 @@ body a.Button_button__NGQyO {
|
|
|
4428
4420
|
transform: translateX(0);
|
|
4429
4421
|
}
|
|
4430
4422
|
}
|
|
4431
|
-
@keyframes Modal_modal-
|
|
4423
|
+
@keyframes Modal_modal-right__MjdlN {
|
|
4432
4424
|
from {
|
|
4433
4425
|
transform: translateX(100%);
|
|
4434
4426
|
}
|
|
@@ -4436,7 +4428,7 @@ body a.Button_button__NGQyO {
|
|
|
4436
4428
|
transform: translateX(0);
|
|
4437
4429
|
}
|
|
4438
4430
|
}
|
|
4439
|
-
@keyframes Modal_modal-
|
|
4431
|
+
@keyframes Modal_modal-top__ZTg5M {
|
|
4440
4432
|
from {
|
|
4441
4433
|
transform: translateY(-100%);
|
|
4442
4434
|
}
|
|
@@ -4444,7 +4436,7 @@ body a.Button_button__NGQyO {
|
|
|
4444
4436
|
transform: translateX(0);
|
|
4445
4437
|
}
|
|
4446
4438
|
}
|
|
4447
|
-
@keyframes Modal_modal-
|
|
4439
|
+
@keyframes Modal_modal-bottom__YjQ3N {
|
|
4448
4440
|
from {
|
|
4449
4441
|
transform: translateY(100%);
|
|
4450
4442
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -285,7 +285,7 @@ declare function AlertBanner({ title, description, icon, variant, align, allowCl
|
|
|
285
285
|
|
|
286
286
|
interface DialogProps extends DialogProps$1 {
|
|
287
287
|
title?: ReactNode;
|
|
288
|
-
variant?: '
|
|
288
|
+
variant?: 'sheet';
|
|
289
289
|
}
|
|
290
290
|
declare function Dialog({ title, variant, children, className, ...props }: DialogProps): react.JSX.Element;
|
|
291
291
|
|
|
@@ -556,13 +556,13 @@ interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
|
|
|
556
556
|
declare function SubMenuTrigger({ children, ...props }: SubmenuTriggerProps): react.JSX.Element;
|
|
557
557
|
|
|
558
558
|
interface ModalProps extends ModalOverlayProps {
|
|
559
|
-
|
|
559
|
+
placement?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
|
|
560
560
|
offset?: string;
|
|
561
561
|
children?: ReactNode | ((values: ModalRenderProps & {
|
|
562
562
|
defaultChildren: ReactNode;
|
|
563
563
|
}) => ReactNode);
|
|
564
564
|
}
|
|
565
|
-
declare function Modal({
|
|
565
|
+
declare function Modal({ placement, offset, children, className, style, ...props }: ModalProps): react.JSX.Element;
|
|
566
566
|
|
|
567
567
|
type NavigationContext = {
|
|
568
568
|
activeMenu: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -285,7 +285,7 @@ declare function AlertBanner({ title, description, icon, variant, align, allowCl
|
|
|
285
285
|
|
|
286
286
|
interface DialogProps extends DialogProps$1 {
|
|
287
287
|
title?: ReactNode;
|
|
288
|
-
variant?: '
|
|
288
|
+
variant?: 'sheet';
|
|
289
289
|
}
|
|
290
290
|
declare function Dialog({ title, variant, children, className, ...props }: DialogProps): react.JSX.Element;
|
|
291
291
|
|
|
@@ -556,13 +556,13 @@ interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
|
|
|
556
556
|
declare function SubMenuTrigger({ children, ...props }: SubmenuTriggerProps): react.JSX.Element;
|
|
557
557
|
|
|
558
558
|
interface ModalProps extends ModalOverlayProps {
|
|
559
|
-
|
|
559
|
+
placement?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
|
|
560
560
|
offset?: string;
|
|
561
561
|
children?: ReactNode | ((values: ModalRenderProps & {
|
|
562
562
|
defaultChildren: ReactNode;
|
|
563
563
|
}) => ReactNode);
|
|
564
564
|
}
|
|
565
|
-
declare function Modal({
|
|
565
|
+
declare function Modal({ placement, offset, children, className, style, ...props }: ModalProps): react.JSX.Element;
|
|
566
566
|
|
|
567
567
|
type NavigationContext = {
|
|
568
568
|
activeMenu: string;
|