@umami/react-zen 0.197.0 → 0.199.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 CHANGED
@@ -3530,34 +3530,30 @@ 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
- .Dialog_dialog__OWY2M {
3541
+ .Dialog_dialog__ZjcyZ {
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
- .Dialog_title__MzNlY {
3551
+ .Dialog_title__NTA4M {
3542
3552
  font-size: var(--font-size-5);
3543
3553
  font-weight: 700;
3544
3554
  margin-bottom: var(--spacing-3);
3545
3555
  }
3546
- .Dialog_modal__ZWZjN {
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_sheet__Y2IyZ {
3561
3557
  background: var(--background-color);
3562
3558
  width: 100%;
3563
3559
  height: 100%;
@@ -4161,13 +4157,6 @@ body a.Button_button__NGQyO {
4161
4157
  transform: translate(-50%, calc(-100% - 10px));
4162
4158
  }
4163
4159
 
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
4160
  /* virtual-css:css:d6c8f45fae43d995517dd77d33fd2f76 */
4172
4161
  .HoverTrigger_wrapper__NGFlN {
4173
4162
  transform: translateY(-10px);
@@ -4315,7 +4304,7 @@ body a.Button_button__NGQyO {
4315
4304
  }
4316
4305
 
4317
4306
  /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
4318
- .Modal_overlay__MzBhO {
4307
+ .Modal_overlay__MDExM {
4319
4308
  position: fixed;
4320
4309
  top: 0;
4321
4310
  left: 0;
@@ -4328,17 +4317,17 @@ body a.Button_button__NGQyO {
4328
4317
  --modal-offset: 50%;
4329
4318
  z-index: 9999;
4330
4319
  }
4331
- .Modal_overlay__MzBhO[data-entering] {
4332
- animation: Modal_modal-fade-in__OTcxN 200ms;
4320
+ .Modal_overlay__MDExM[data-entering] {
4321
+ animation: Modal_modal-fade-in__ZDY2M 200ms;
4333
4322
  }
4334
- .Modal_overlay__MzBhO[data-exiting] {
4335
- animation: Modal_modal-fade-in__OTcxN 200ms reverse ease-in;
4323
+ .Modal_overlay__MDExM[data-exiting] {
4324
+ animation: Modal_modal-fade-in__ZDY2M 200ms reverse ease-in;
4336
4325
  }
4337
- .Modal_modal__YTU3M {
4326
+ .Modal_modal__YTc0N {
4338
4327
  position: relative;
4339
4328
  z-index: 9999;
4340
4329
  }
4341
- .Modal_modal__YTU3M.Modal_left__ZDU0O {
4330
+ .Modal_modal__YTc0N.Modal_left__MTJkM {
4342
4331
  position: absolute;
4343
4332
  top: 0;
4344
4333
  left: 0;
@@ -4346,7 +4335,7 @@ body a.Button_button__NGQyO {
4346
4335
  margin: auto;
4347
4336
  width: calc(100dvw - var(--modal-offset, 0));
4348
4337
  }
4349
- .Modal_modal__YTU3M.Modal_right__MGFhO {
4338
+ .Modal_modal__YTc0N.Modal_right__MTgyY {
4350
4339
  position: absolute;
4351
4340
  top: 0;
4352
4341
  right: 0;
@@ -4354,7 +4343,7 @@ body a.Button_button__NGQyO {
4354
4343
  margin: auto;
4355
4344
  width: calc(100dvw - var(--modal-offset, 0));
4356
4345
  }
4357
- .Modal_modal__YTU3M.Modal_top__OTY4M {
4346
+ .Modal_modal__YTc0N.Modal_top__ZjhhZ {
4358
4347
  position: absolute;
4359
4348
  top: 0;
4360
4349
  left: 0;
@@ -4362,7 +4351,7 @@ body a.Button_button__NGQyO {
4362
4351
  margin: auto;
4363
4352
  height: calc(100dvh - var(--modal-offset, 0));
4364
4353
  }
4365
- .Modal_modal__YTU3M.Modal_bottom__NjY4N {
4354
+ .Modal_modal__YTc0N.Modal_bottom__NWMzZ {
4366
4355
  position: absolute;
4367
4356
  left: 0;
4368
4357
  right: 0;
@@ -4370,41 +4359,42 @@ body a.Button_button__NGQyO {
4370
4359
  margin: auto;
4371
4360
  height: calc(100dvh - var(--modal-offset, 0));
4372
4361
  }
4373
- .Modal_modal__YTU3M.Modal_fullscreen__YTNkZ {
4362
+ .Modal_modal__YTc0N.Modal_fullscreen__MzNlO {
4374
4363
  width: 100dvw;
4375
4364
  height: 100dvh;
4365
+ border-radius: 0;
4376
4366
  }
4377
- .Modal_modal__YTU3M.Modal_center__ZTViM[data-entering] {
4378
- animation: Modal_modal-zoom__MjY4Y 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
4367
+ .Modal_modal__YTc0N.Modal_center__YzA4O[data-entering] {
4368
+ animation: Modal_modal-zoom__YjI0Z 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
4379
4369
  }
4380
- .Modal_modal__YTU3M.Modal_left__ZDU0O[data-entering] {
4381
- animation: Modal_modal-left__YTc0N 200ms ease-out;
4370
+ .Modal_modal__YTc0N.Modal_left__MTJkM[data-entering] {
4371
+ animation: Modal_modal-left__YzdjM 200ms ease-out;
4382
4372
  }
4383
- .Modal_modal__YTU3M.Modal_left__ZDU0O[data-exiting] {
4384
- animation: Modal_modal-left__YTc0N 200ms reverse ease-out;
4373
+ .Modal_modal__YTc0N.Modal_left__MTJkM[data-exiting] {
4374
+ animation: Modal_modal-left__YzdjM 200ms reverse ease-out;
4385
4375
  }
4386
- .Modal_modal__YTU3M.Modal_right__MGFhO[data-entering] {
4387
- animation: Modal_modal-right__MWY0Z 200ms ease-out;
4376
+ .Modal_modal__YTc0N.Modal_right__MTgyY[data-entering] {
4377
+ animation: Modal_modal-right__MjdlN 200ms ease-out;
4388
4378
  }
4389
- .Modal_modal__YTU3M.Modal_right__MGFhO[data-exiting] {
4390
- animation: Modal_modal-right__MWY0Z 200ms reverse ease-in;
4379
+ .Modal_modal__YTc0N.Modal_right__MTgyY[data-exiting] {
4380
+ animation: Modal_modal-right__MjdlN 200ms reverse ease-in;
4391
4381
  }
4392
- .Modal_modal__YTU3M.Modal_top__OTY4M[data-entering] {
4393
- animation: Modal_modal-top__OTQ2M 200ms ease-out;
4382
+ .Modal_modal__YTc0N.Modal_top__ZjhhZ[data-entering] {
4383
+ animation: Modal_modal-top__ZTg5M 200ms ease-out;
4394
4384
  }
4395
- .Modal_modal__YTU3M.Modal_top__OTY4M[data-exiting] {
4396
- animation: Modal_modal-top__OTQ2M 200ms reverse ease-in;
4385
+ .Modal_modal__YTc0N.Modal_top__ZjhhZ[data-exiting] {
4386
+ animation: Modal_modal-top__ZTg5M 200ms reverse ease-in;
4397
4387
  }
4398
- .Modal_modal__YTU3M.Modal_bottom__NjY4N[data-entering] {
4399
- animation: Modal_modal-bottom__NDlkZ 200ms ease-out;
4388
+ .Modal_modal__YTc0N.Modal_bottom__NWMzZ[data-entering] {
4389
+ animation: Modal_modal-bottom__YjQ3N 200ms ease-out;
4400
4390
  }
4401
- .Modal_modal__YTU3M.Modal_bottom__NjY4N[data-exiting] {
4402
- animation: Modal_modal-bottom__NDlkZ 200ms reverse ease-in;
4391
+ .Modal_modal__YTc0N.Modal_bottom__NWMzZ[data-exiting] {
4392
+ animation: Modal_modal-bottom__YjQ3N 200ms reverse ease-in;
4403
4393
  }
4404
- .Modal_modal__YTU3M.Modal_fullscreen__YTNkZ[data-entering] {
4405
- animation: Modal_modal-fade-in__OTcxN 200ms ease-out;
4394
+ .Modal_modal__YTc0N.Modal_fullscreen__MzNlO[data-entering] {
4395
+ animation: Modal_modal-fade-in__ZDY2M 200ms ease-out;
4406
4396
  }
4407
- @keyframes Modal_modal-fade-in__OTcxN {
4397
+ @keyframes Modal_modal-fade-in__ZDY2M {
4408
4398
  from {
4409
4399
  opacity: 0;
4410
4400
  }
@@ -4412,7 +4402,7 @@ body a.Button_button__NGQyO {
4412
4402
  opacity: 1;
4413
4403
  }
4414
4404
  }
4415
- @keyframes Modal_modal-zoom__MjY4Y {
4405
+ @keyframes Modal_modal-zoom__YjI0Z {
4416
4406
  from {
4417
4407
  transform: scale(0.8);
4418
4408
  }
@@ -4420,7 +4410,7 @@ body a.Button_button__NGQyO {
4420
4410
  transform: scale(1);
4421
4411
  }
4422
4412
  }
4423
- @keyframes Modal_modal-left__YTc0N {
4413
+ @keyframes Modal_modal-left__YzdjM {
4424
4414
  from {
4425
4415
  transform: translateX(-100%);
4426
4416
  }
@@ -4428,7 +4418,7 @@ body a.Button_button__NGQyO {
4428
4418
  transform: translateX(0);
4429
4419
  }
4430
4420
  }
4431
- @keyframes Modal_modal-right__MWY0Z {
4421
+ @keyframes Modal_modal-right__MjdlN {
4432
4422
  from {
4433
4423
  transform: translateX(100%);
4434
4424
  }
@@ -4436,7 +4426,7 @@ body a.Button_button__NGQyO {
4436
4426
  transform: translateX(0);
4437
4427
  }
4438
4428
  }
4439
- @keyframes Modal_modal-top__OTQ2M {
4429
+ @keyframes Modal_modal-top__ZTg5M {
4440
4430
  from {
4441
4431
  transform: translateY(-100%);
4442
4432
  }
@@ -4444,7 +4434,7 @@ body a.Button_button__NGQyO {
4444
4434
  transform: translateX(0);
4445
4435
  }
4446
4436
  }
4447
- @keyframes Modal_modal-bottom__NDlkZ {
4437
+ @keyframes Modal_modal-bottom__YjQ3N {
4448
4438
  from {
4449
4439
  transform: translateY(100%);
4450
4440
  }
@@ -4694,20 +4684,21 @@ body a.Button_button__NGQyO {
4694
4684
  }
4695
4685
 
4696
4686
  /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
4697
- .Select_select__NTRiY {
4687
+ .Select_select__M2I4N {
4698
4688
  width: 100%;
4699
4689
  }
4700
- .Select_button__ZTJmY {
4690
+ .Select_button__NTc5Y {
4701
4691
  width: 100%;
4692
+ min-height: 40px;
4702
4693
  }
4703
- .Select_value__OWU2Z {
4694
+ .Select_value__ZTYwN {
4704
4695
  display: flex;
4705
4696
  align-items: center;
4706
4697
  justify-content: space-between;
4707
4698
  width: 100%;
4708
4699
  gap: var(--gap);
4709
4700
  }
4710
- .Select_list__NTk4N {
4701
+ .Select_list__NTcwM {
4711
4702
  padding: var(--spacing-2);
4712
4703
  background-color: var(--background-color);
4713
4704
  border: var(--border);
@@ -4715,7 +4706,7 @@ body a.Button_button__NGQyO {
4715
4706
  box-shadow: var(--box-shadow-3);
4716
4707
  width: 260px;
4717
4708
  }
4718
- .Select_search__YWI3Y {
4709
+ .Select_search__MWNhN {
4719
4710
  margin-bottom: var(--spacing-2);
4720
4711
  }
4721
4712
 
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?: 'modal' | 'menu' | 'sheet' | 'none';
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
- position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
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({ position, offset, children, className, style, ...props }: ModalProps): react.JSX.Element;
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?: 'modal' | 'menu' | 'sheet' | 'none';
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
- position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
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({ position, offset, children, className, style, ...props }: ModalProps): react.JSX.Element;
565
+ declare function Modal({ placement, offset, children, className, style, ...props }: ModalProps): react.JSX.Element;
566
566
 
567
567
  type NavigationContext = {
568
568
  activeMenu: string;