@mendylanda/ui 0.4.2 → 0.4.3-dev.69.b44a9721f450

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.
@@ -0,0 +1,46 @@
1
+ "use client";
2
+ import { useContext, useEffect, useLayoutEffect, useRef } from "react";
3
+ import { SheetStackContext, useSheetInstance } from "./context.js";
4
+ export function useSheetFocus({ onOpenAutoFocus, onCloseAutoFocus, }) {
5
+ const stack = useContext(SheetStackContext);
6
+ const instance = useSheetInstance();
7
+ const layout = instance.layout;
8
+ const opener = useRef(null);
9
+ useLayoutEffect(() => {
10
+ if (instance.open)
11
+ opener.current =
12
+ document.activeElement instanceof HTMLElement ? document.activeElement : null;
13
+ }, [instance.open]);
14
+ useEffect(() => {
15
+ if (layout?.top &&
16
+ !layout.covered &&
17
+ instance.contentRef.current?.contains(document.activeElement) === false &&
18
+ (layout.modal || document.activeElement?.closest("[data-mendy-sheet-content][inert]"))) {
19
+ instance.contentRef.current.focus({ preventScroll: true });
20
+ }
21
+ }, [layout?.top, layout?.modal, layout?.covered, instance.contentRef]);
22
+ return {
23
+ onOpen(event) {
24
+ onOpenAutoFocus?.(event);
25
+ if (event.defaultPrevented)
26
+ return;
27
+ event.preventDefault();
28
+ instance.contentRef.current?.focus({ preventScroll: true });
29
+ },
30
+ onClose(event) {
31
+ queueMicrotask(() => stack.store.removeManaged(instance.id));
32
+ onCloseAutoFocus?.(event);
33
+ if (event.defaultPrevented)
34
+ return;
35
+ event.preventDefault();
36
+ // Let layout cleanup and inert updates commit before returning focus.
37
+ queueMicrotask(() => {
38
+ if (stack.store.focusTop())
39
+ return;
40
+ const previous = instance.triggerRef.current ?? opener.current;
41
+ const target = previous?.isConnected && !previous.closest("[inert]") ? previous : stack.pageRef.current;
42
+ target?.focus({ preventScroll: true });
43
+ });
44
+ },
45
+ };
46
+ }
package/dist/styles.css CHANGED
@@ -5,12 +5,15 @@
5
5
  --color-green-100: oklch(96.2% 0.044 156.743);
6
6
  --color-green-950: oklch(26.6% 0.065 152.934);
7
7
  --spacing: 0.25rem;
8
+ --container-md: 28rem;
8
9
  --text-xs: 0.75rem;
9
10
  --text-xs--line-height: calc(1 / 0.75);
10
11
  --text-sm: 0.875rem;
11
12
  --text-sm--line-height: calc(1.25 / 0.875);
12
13
  --text-base: 1rem;
13
14
  --text-base--line-height: calc(1.5 / 1);
15
+ --text-lg: 1.125rem;
16
+ --text-lg--line-height: calc(1.75 / 1.125);
14
17
  --font-weight-normal: 400;
15
18
  --font-weight-medium: 500;
16
19
  --font-weight-semibold: 600;
@@ -73,6 +76,9 @@
73
76
  .mui-8368bbb62f66:where([data-mendy-ui], [data-mendy-ui] *) {
74
77
  inset-inline-start: calc(var(--spacing) * 0);
75
78
  }
79
+ .mui-69b8e049976d:where([data-mendy-ui], [data-mendy-ui] *) {
80
+ inset-inline-start: calc(1/2 * 100%);
81
+ }
76
82
  .mui-207bd0b3f259:where([data-mendy-ui], [data-mendy-ui] *) {
77
83
  inset-inline-start: calc(var(--spacing) * 2);
78
84
  }
@@ -121,6 +127,12 @@
121
127
  .mui-3eef1ce97dba:where([data-mendy-ui], [data-mendy-ui] *) {
122
128
  z-index: 50;
123
129
  }
130
+ .mui-e749b7f89462:where([data-mendy-ui], [data-mendy-ui] *) {
131
+ z-index: 70;
132
+ }
133
+ .mui-d0957da54446:where([data-mendy-ui], [data-mendy-ui] *) {
134
+ z-index: 71;
135
+ }
124
136
  .mui-29a5b1dea191:where([data-mendy-ui], [data-mendy-ui] *) {
125
137
  grid-column-start: 2;
126
138
  }
@@ -349,6 +361,9 @@
349
361
  .mui-a4cce7869436:where([data-mendy-ui], [data-mendy-ui] *) {
350
362
  width: 300px;
351
363
  }
364
+ .mui-42be1194a64d:where([data-mendy-ui], [data-mendy-ui] *) {
365
+ width: calc(100% - 2rem);
366
+ }
352
367
  .mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
353
368
  width: var(--mendy-filter-editor-width,19rem);
354
369
  }
@@ -373,6 +388,9 @@
373
388
  .mui-81b198a2db84:where([data-mendy-ui], [data-mendy-ui] *) {
374
389
  max-width: 100%;
375
390
  }
391
+ .mui-7b7574448a48:where([data-mendy-ui], [data-mendy-ui] *) {
392
+ max-width: var(--container-md);
393
+ }
376
394
  .mui-1458e495e3ae:where([data-mendy-ui], [data-mendy-ui] *) {
377
395
  min-width: var(--cell-size);
378
396
  }
@@ -534,6 +552,9 @@
534
552
  .mui-b005d61d0953:where([data-mendy-ui], [data-mendy-ui] *) {
535
553
  border-radius: calc(infinity * 1px);
536
554
  }
555
+ .mui-49abc543ea42:where([data-mendy-ui], [data-mendy-ui] *) {
556
+ border-radius: var(--radius, 0.5rem);
557
+ }
537
558
  .mui-3fa8c572949b:where([data-mendy-ui], [data-mendy-ui] *) {
538
559
  border-radius: max(0px, calc(var(--radius, 0.5rem) - 2px));
539
560
  }
@@ -609,6 +630,18 @@
609
630
  .mui-5b272f3c5076:where([data-mendy-ui], [data-mendy-ui] *) {
610
631
  background-color: var(--background, #fff);
611
632
  }
633
+ .mui-4a30330fe460:where([data-mendy-ui], [data-mendy-ui] *) {
634
+ background-color: var(--background, #fff);
635
+ @supports (color: color-mix(in lab, red, red)) {
636
+ background-color: color-mix(in oklab, var(--background, #fff) 60%, transparent);
637
+ }
638
+ }
639
+ .mui-8e5a84e37552:where([data-mendy-ui], [data-mendy-ui] *) {
640
+ background-color: var(--background, #fff);
641
+ @supports (color: color-mix(in lab, red, red)) {
642
+ background-color: color-mix(in oklab, var(--background, #fff) 80%, transparent);
643
+ }
644
+ }
612
645
  .mui-a943bea85d66:where([data-mendy-ui], [data-mendy-ui] *) {
613
646
  background-color: var(--border, #e5e5e5);
614
647
  }
@@ -657,6 +690,9 @@
657
690
  .mui-094f5333853b:where([data-mendy-ui], [data-mendy-ui] *) {
658
691
  padding: calc(var(--spacing) * 3);
659
692
  }
693
+ .mui-014b941a7774:where([data-mendy-ui], [data-mendy-ui] *) {
694
+ padding: calc(var(--spacing) * 5);
695
+ }
660
696
  .mui-c432836760e3:where([data-mendy-ui], [data-mendy-ui] *) {
661
697
  padding: calc(var(--spacing) * 6);
662
698
  }
@@ -739,6 +775,10 @@
739
775
  font-size: var(--text-base);
740
776
  line-height: var(--mendy-tw-leading, var(--text-base--line-height));
741
777
  }
778
+ .mui-035bd245837f:where([data-mendy-ui], [data-mendy-ui] *) {
779
+ font-size: var(--text-lg);
780
+ line-height: var(--mendy-tw-leading, var(--text-lg--line-height));
781
+ }
742
782
  .mui-c74ab393b96d:where([data-mendy-ui], [data-mendy-ui] *) {
743
783
  font-size: var(--text-sm);
744
784
  line-height: var(--mendy-tw-leading, var(--text-sm--line-height));
@@ -762,6 +802,10 @@
762
802
  --mendy-tw-font-weight: var(--font-weight-normal);
763
803
  font-weight: var(--font-weight-normal);
764
804
  }
805
+ .mui-87e86ce38eaf:where([data-mendy-ui], [data-mendy-ui] *) {
806
+ --mendy-tw-font-weight: var(--font-weight-semibold);
807
+ font-weight: var(--font-weight-semibold);
808
+ }
765
809
  .mui-e1683b3c030a:where([data-mendy-ui], [data-mendy-ui] *) {
766
810
  --mendy-tw-tracking: var(--tracking-widest);
767
811
  letter-spacing: var(--tracking-widest);
@@ -875,6 +919,16 @@
875
919
  transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
876
920
  transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
877
921
  }
922
+ .mui-27986534f992:where([data-mendy-ui], [data-mendy-ui] *) {
923
+ transition-property: inset-inline-start,inset-inline-end;
924
+ transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
925
+ transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
926
+ }
927
+ .mui-55fc320dcf4a:where([data-mendy-ui], [data-mendy-ui] *) {
928
+ transition-property: padding;
929
+ transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
930
+ transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
931
+ }
878
932
  .mui-eae178841c68:where([data-mendy-ui], [data-mendy-ui] *) {
879
933
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --mendy-tw-gradient-from, --mendy-tw-gradient-via, --mendy-tw-gradient-to;
880
934
  transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
@@ -893,6 +947,10 @@
893
947
  .mui-b4b2fd95f324:where([data-mendy-ui], [data-mendy-ui] *) {
894
948
  transition-property: none;
895
949
  }
950
+ .mui-f07df86364db:where([data-mendy-ui], [data-mendy-ui] *) {
951
+ --mendy-tw-duration: 300ms;
952
+ transition-duration: 300ms;
953
+ }
896
954
  .mui-b30fc56058b6:where([data-mendy-ui], [data-mendy-ui] *) {
897
955
  --mendy-tw-outline-style: none;
898
956
  outline-style: none;
@@ -1475,6 +1533,12 @@
1475
1533
  animation: mendy-exit var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
1476
1534
  }
1477
1535
  }
1536
+ .mui-afc0930525cc:where([data-mendy-ui], [data-mendy-ui] *) {
1537
+ &[data-state="closed"] {
1538
+ --mendy-tw-duration: 200ms;
1539
+ transition-duration: 200ms;
1540
+ }
1541
+ }
1478
1542
  .mui-bb5869ef903b:where([data-mendy-ui], [data-mendy-ui] *) {
1479
1543
  &[data-state="closed"] {
1480
1544
  --mendy-tw-exit-opacity: calc(0/100);
@@ -1487,6 +1551,16 @@
1487
1551
  --mendy-tw-exit-scale: .95;
1488
1552
  }
1489
1553
  }
1554
+ .mui-5984dbdad10e:where([data-mendy-ui], [data-mendy-ui] *) {
1555
+ &[data-state="closed"] {
1556
+ --mendy-tw-exit-translate-x: -100%;
1557
+ }
1558
+ }
1559
+ .mui-bddf3012e102:where([data-mendy-ui], [data-mendy-ui] *) {
1560
+ &[data-state="closed"] {
1561
+ --mendy-tw-exit-translate-x: 100%;
1562
+ }
1563
+ }
1490
1564
  .mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
1491
1565
  &[data-state="indeterminate"] {
1492
1566
  opacity: 100%;
@@ -1524,6 +1598,12 @@
1524
1598
  opacity: 100%;
1525
1599
  }
1526
1600
  }
1601
+ .mui-f1c50715f473:where([data-mendy-ui], [data-mendy-ui] *) {
1602
+ &[data-state="open"] {
1603
+ --mendy-tw-duration: 300ms;
1604
+ transition-duration: 300ms;
1605
+ }
1606
+ }
1527
1607
  .mui-45464a92c1f6:where([data-mendy-ui], [data-mendy-ui] *) {
1528
1608
  &[data-state="open"] {
1529
1609
  --mendy-tw-enter-opacity: calc(0/100);
@@ -1536,6 +1616,16 @@
1536
1616
  --mendy-tw-enter-scale: .95;
1537
1617
  }
1538
1618
  }
1619
+ .mui-55ef7b573ebd:where([data-mendy-ui], [data-mendy-ui] *) {
1620
+ &[data-state="open"] {
1621
+ --mendy-tw-enter-translate-x: -100%;
1622
+ }
1623
+ }
1624
+ .mui-783958b1d2bd:where([data-mendy-ui], [data-mendy-ui] *) {
1625
+ &[data-state="open"] {
1626
+ --mendy-tw-enter-translate-x: 100%;
1627
+ }
1628
+ }
1539
1629
  .mui-f3f7a9c5e1b3:where([data-mendy-ui], [data-mendy-ui] *) {
1540
1630
  &[data-variant="destructive"] {
1541
1631
  color: var(--destructive, #dc2626);
@@ -1563,6 +1653,25 @@
1563
1653
  animation: none;
1564
1654
  }
1565
1655
  }
1656
+ .mui-b2ed949e45a3:where([data-mendy-ui], [data-mendy-ui] *) {
1657
+ @media (prefers-reduced-motion: reduce) {
1658
+ transition-property: none;
1659
+ }
1660
+ }
1661
+ .mui-1129583edd8e:where([data-mendy-ui], [data-mendy-ui] *) {
1662
+ &[data-state="closed"] {
1663
+ @media (prefers-reduced-motion: reduce) {
1664
+ animation: none;
1665
+ }
1666
+ }
1667
+ }
1668
+ .mui-c94eb5dd463e:where([data-mendy-ui], [data-mendy-ui] *) {
1669
+ &[data-state="open"] {
1670
+ @media (prefers-reduced-motion: reduce) {
1671
+ animation: none;
1672
+ }
1673
+ }
1674
+ }
1566
1675
  .mui-0cc20f4e20c8:where([data-mendy-ui], [data-mendy-ui] *) {
1567
1676
  @media (width >= 40rem) {
1568
1677
  width: 21.875rem;
@@ -1573,6 +1682,16 @@
1573
1682
  flex-direction: row;
1574
1683
  }
1575
1684
  }
1685
+ .mui-44cb2048f000:where([data-mendy-ui], [data-mendy-ui] *) {
1686
+ @media (width >= 48rem) {
1687
+ padding: calc(var(--spacing) * 0);
1688
+ }
1689
+ }
1690
+ .mui-d946caa1a695:where([data-mendy-ui], [data-mendy-ui] *) {
1691
+ @media (width >= 48rem) {
1692
+ padding: calc(var(--spacing) * 4);
1693
+ }
1694
+ }
1576
1695
  .mui-c05c9b99939d:where([data-mendy-ui], [data-mendy-ui] *) {
1577
1696
  @media (width >= 48rem) {
1578
1697
  font-size: var(--text-sm);
@@ -2164,6 +2283,10 @@
2164
2283
  syntax: "*";
2165
2284
  inherits: false;
2166
2285
  }
2286
+ @property --mendy-tw-duration {
2287
+ syntax: "*";
2288
+ inherits: false;
2289
+ }
2167
2290
  @keyframes mendy-spin {
2168
2291
  to {
2169
2292
  transform: rotate(360deg);
@@ -2232,6 +2355,7 @@
2232
2355
  --mendy-tw-drop-shadow-color: initial;
2233
2356
  --mendy-tw-drop-shadow-alpha: 100%;
2234
2357
  --mendy-tw-drop-shadow-size: initial;
2358
+ --mendy-tw-duration: initial;
2235
2359
  --mendy-tw-animation-delay: 0s;
2236
2360
  --mendy-tw-animation-direction: normal;
2237
2361
  --mendy-tw-animation-duration: initial;
@@ -5,12 +5,15 @@
5
5
  --color-green-100: oklch(96.2% 0.044 156.743);
6
6
  --color-green-950: oklch(26.6% 0.065 152.934);
7
7
  --spacing: 0.25rem;
8
+ --container-md: 28rem;
8
9
  --text-xs: 0.75rem;
9
10
  --text-xs--line-height: calc(1 / 0.75);
10
11
  --text-sm: 0.875rem;
11
12
  --text-sm--line-height: calc(1.25 / 0.875);
12
13
  --text-base: 1rem;
13
14
  --text-base--line-height: calc(1.5 / 1);
15
+ --text-lg: 1.125rem;
16
+ --text-lg--line-height: calc(1.75 / 1.125);
14
17
  --font-weight-normal: 400;
15
18
  --font-weight-medium: 500;
16
19
  --font-weight-semibold: 600;
@@ -72,6 +75,9 @@
72
75
  .mui-8368bbb62f66:where([data-mendy-ui], [data-mendy-ui] *) {
73
76
  inset-inline-start: calc(var(--spacing) * 0);
74
77
  }
78
+ .mui-69b8e049976d:where([data-mendy-ui], [data-mendy-ui] *) {
79
+ inset-inline-start: calc(1/2 * 100%);
80
+ }
75
81
  .mui-207bd0b3f259:where([data-mendy-ui], [data-mendy-ui] *) {
76
82
  inset-inline-start: calc(var(--spacing) * 2);
77
83
  }
@@ -120,6 +126,12 @@
120
126
  .mui-3eef1ce97dba:where([data-mendy-ui], [data-mendy-ui] *) {
121
127
  z-index: 50;
122
128
  }
129
+ .mui-e749b7f89462:where([data-mendy-ui], [data-mendy-ui] *) {
130
+ z-index: 70;
131
+ }
132
+ .mui-d0957da54446:where([data-mendy-ui], [data-mendy-ui] *) {
133
+ z-index: 71;
134
+ }
123
135
  .mui-29a5b1dea191:where([data-mendy-ui], [data-mendy-ui] *) {
124
136
  grid-column-start: 2;
125
137
  }
@@ -348,6 +360,9 @@
348
360
  .mui-a4cce7869436:where([data-mendy-ui], [data-mendy-ui] *) {
349
361
  width: 300px;
350
362
  }
363
+ .mui-42be1194a64d:where([data-mendy-ui], [data-mendy-ui] *) {
364
+ width: calc(100% - 2rem);
365
+ }
351
366
  .mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
352
367
  width: var(--mendy-filter-editor-width,19rem);
353
368
  }
@@ -372,6 +387,9 @@
372
387
  .mui-81b198a2db84:where([data-mendy-ui], [data-mendy-ui] *) {
373
388
  max-width: 100%;
374
389
  }
390
+ .mui-7b7574448a48:where([data-mendy-ui], [data-mendy-ui] *) {
391
+ max-width: var(--container-md);
392
+ }
375
393
  .mui-1458e495e3ae:where([data-mendy-ui], [data-mendy-ui] *) {
376
394
  min-width: var(--cell-size);
377
395
  }
@@ -533,6 +551,9 @@
533
551
  .mui-b005d61d0953:where([data-mendy-ui], [data-mendy-ui] *) {
534
552
  border-radius: calc(infinity * 1px);
535
553
  }
554
+ .mui-49abc543ea42:where([data-mendy-ui], [data-mendy-ui] *) {
555
+ border-radius: var(--radius, 0.5rem);
556
+ }
536
557
  .mui-3fa8c572949b:where([data-mendy-ui], [data-mendy-ui] *) {
537
558
  border-radius: max(0px, calc(var(--radius, 0.5rem) - 2px));
538
559
  }
@@ -608,6 +629,18 @@
608
629
  .mui-5b272f3c5076:where([data-mendy-ui], [data-mendy-ui] *) {
609
630
  background-color: var(--background, #fff);
610
631
  }
632
+ .mui-4a30330fe460:where([data-mendy-ui], [data-mendy-ui] *) {
633
+ background-color: var(--background, #fff);
634
+ @supports (color: color-mix(in lab, red, red)) {
635
+ background-color: color-mix(in oklab, var(--background, #fff) 60%, transparent);
636
+ }
637
+ }
638
+ .mui-8e5a84e37552:where([data-mendy-ui], [data-mendy-ui] *) {
639
+ background-color: var(--background, #fff);
640
+ @supports (color: color-mix(in lab, red, red)) {
641
+ background-color: color-mix(in oklab, var(--background, #fff) 80%, transparent);
642
+ }
643
+ }
611
644
  .mui-a943bea85d66:where([data-mendy-ui], [data-mendy-ui] *) {
612
645
  background-color: var(--border, #e5e5e5);
613
646
  }
@@ -656,6 +689,9 @@
656
689
  .mui-094f5333853b:where([data-mendy-ui], [data-mendy-ui] *) {
657
690
  padding: calc(var(--spacing) * 3);
658
691
  }
692
+ .mui-014b941a7774:where([data-mendy-ui], [data-mendy-ui] *) {
693
+ padding: calc(var(--spacing) * 5);
694
+ }
659
695
  .mui-c432836760e3:where([data-mendy-ui], [data-mendy-ui] *) {
660
696
  padding: calc(var(--spacing) * 6);
661
697
  }
@@ -738,6 +774,10 @@
738
774
  font-size: var(--text-base);
739
775
  line-height: var(--mendy-tw-leading, var(--text-base--line-height));
740
776
  }
777
+ .mui-035bd245837f:where([data-mendy-ui], [data-mendy-ui] *) {
778
+ font-size: var(--text-lg);
779
+ line-height: var(--mendy-tw-leading, var(--text-lg--line-height));
780
+ }
741
781
  .mui-c74ab393b96d:where([data-mendy-ui], [data-mendy-ui] *) {
742
782
  font-size: var(--text-sm);
743
783
  line-height: var(--mendy-tw-leading, var(--text-sm--line-height));
@@ -761,6 +801,10 @@
761
801
  --mendy-tw-font-weight: var(--font-weight-normal);
762
802
  font-weight: var(--font-weight-normal);
763
803
  }
804
+ .mui-87e86ce38eaf:where([data-mendy-ui], [data-mendy-ui] *) {
805
+ --mendy-tw-font-weight: var(--font-weight-semibold);
806
+ font-weight: var(--font-weight-semibold);
807
+ }
764
808
  .mui-e1683b3c030a:where([data-mendy-ui], [data-mendy-ui] *) {
765
809
  --mendy-tw-tracking: var(--tracking-widest);
766
810
  letter-spacing: var(--tracking-widest);
@@ -874,6 +918,16 @@
874
918
  transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
875
919
  transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
876
920
  }
921
+ .mui-27986534f992:where([data-mendy-ui], [data-mendy-ui] *) {
922
+ transition-property: inset-inline-start,inset-inline-end;
923
+ transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
924
+ transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
925
+ }
926
+ .mui-55fc320dcf4a:where([data-mendy-ui], [data-mendy-ui] *) {
927
+ transition-property: padding;
928
+ transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
929
+ transition-duration: var(--mendy-tw-duration, var(--default-transition-duration));
930
+ }
877
931
  .mui-eae178841c68:where([data-mendy-ui], [data-mendy-ui] *) {
878
932
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --mendy-tw-gradient-from, --mendy-tw-gradient-via, --mendy-tw-gradient-to;
879
933
  transition-timing-function: var(--mendy-tw-ease, var(--default-transition-timing-function));
@@ -892,6 +946,10 @@
892
946
  .mui-b4b2fd95f324:where([data-mendy-ui], [data-mendy-ui] *) {
893
947
  transition-property: none;
894
948
  }
949
+ .mui-f07df86364db:where([data-mendy-ui], [data-mendy-ui] *) {
950
+ --mendy-tw-duration: 300ms;
951
+ transition-duration: 300ms;
952
+ }
895
953
  .mui-b30fc56058b6:where([data-mendy-ui], [data-mendy-ui] *) {
896
954
  --mendy-tw-outline-style: none;
897
955
  outline-style: none;
@@ -1474,6 +1532,12 @@
1474
1532
  animation: mendy-exit var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
1475
1533
  }
1476
1534
  }
1535
+ .mui-afc0930525cc:where([data-mendy-ui], [data-mendy-ui] *) {
1536
+ &[data-state="closed"] {
1537
+ --mendy-tw-duration: 200ms;
1538
+ transition-duration: 200ms;
1539
+ }
1540
+ }
1477
1541
  .mui-bb5869ef903b:where([data-mendy-ui], [data-mendy-ui] *) {
1478
1542
  &[data-state="closed"] {
1479
1543
  --mendy-tw-exit-opacity: calc(0/100);
@@ -1486,6 +1550,16 @@
1486
1550
  --mendy-tw-exit-scale: .95;
1487
1551
  }
1488
1552
  }
1553
+ .mui-5984dbdad10e:where([data-mendy-ui], [data-mendy-ui] *) {
1554
+ &[data-state="closed"] {
1555
+ --mendy-tw-exit-translate-x: -100%;
1556
+ }
1557
+ }
1558
+ .mui-bddf3012e102:where([data-mendy-ui], [data-mendy-ui] *) {
1559
+ &[data-state="closed"] {
1560
+ --mendy-tw-exit-translate-x: 100%;
1561
+ }
1562
+ }
1489
1563
  .mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
1490
1564
  &[data-state="indeterminate"] {
1491
1565
  opacity: 100%;
@@ -1523,6 +1597,12 @@
1523
1597
  opacity: 100%;
1524
1598
  }
1525
1599
  }
1600
+ .mui-f1c50715f473:where([data-mendy-ui], [data-mendy-ui] *) {
1601
+ &[data-state="open"] {
1602
+ --mendy-tw-duration: 300ms;
1603
+ transition-duration: 300ms;
1604
+ }
1605
+ }
1526
1606
  .mui-45464a92c1f6:where([data-mendy-ui], [data-mendy-ui] *) {
1527
1607
  &[data-state="open"] {
1528
1608
  --mendy-tw-enter-opacity: calc(0/100);
@@ -1535,6 +1615,16 @@
1535
1615
  --mendy-tw-enter-scale: .95;
1536
1616
  }
1537
1617
  }
1618
+ .mui-55ef7b573ebd:where([data-mendy-ui], [data-mendy-ui] *) {
1619
+ &[data-state="open"] {
1620
+ --mendy-tw-enter-translate-x: -100%;
1621
+ }
1622
+ }
1623
+ .mui-783958b1d2bd:where([data-mendy-ui], [data-mendy-ui] *) {
1624
+ &[data-state="open"] {
1625
+ --mendy-tw-enter-translate-x: 100%;
1626
+ }
1627
+ }
1538
1628
  .mui-f3f7a9c5e1b3:where([data-mendy-ui], [data-mendy-ui] *) {
1539
1629
  &[data-variant="destructive"] {
1540
1630
  color: var(--destructive, #dc2626);
@@ -1562,6 +1652,25 @@
1562
1652
  animation: none;
1563
1653
  }
1564
1654
  }
1655
+ .mui-b2ed949e45a3:where([data-mendy-ui], [data-mendy-ui] *) {
1656
+ @media (prefers-reduced-motion: reduce) {
1657
+ transition-property: none;
1658
+ }
1659
+ }
1660
+ .mui-1129583edd8e:where([data-mendy-ui], [data-mendy-ui] *) {
1661
+ &[data-state="closed"] {
1662
+ @media (prefers-reduced-motion: reduce) {
1663
+ animation: none;
1664
+ }
1665
+ }
1666
+ }
1667
+ .mui-c94eb5dd463e:where([data-mendy-ui], [data-mendy-ui] *) {
1668
+ &[data-state="open"] {
1669
+ @media (prefers-reduced-motion: reduce) {
1670
+ animation: none;
1671
+ }
1672
+ }
1673
+ }
1565
1674
  .mui-0cc20f4e20c8:where([data-mendy-ui], [data-mendy-ui] *) {
1566
1675
  @media (width >= 40rem) {
1567
1676
  width: 21.875rem;
@@ -1572,6 +1681,16 @@
1572
1681
  flex-direction: row;
1573
1682
  }
1574
1683
  }
1684
+ .mui-44cb2048f000:where([data-mendy-ui], [data-mendy-ui] *) {
1685
+ @media (width >= 48rem) {
1686
+ padding: calc(var(--spacing) * 0);
1687
+ }
1688
+ }
1689
+ .mui-d946caa1a695:where([data-mendy-ui], [data-mendy-ui] *) {
1690
+ @media (width >= 48rem) {
1691
+ padding: calc(var(--spacing) * 4);
1692
+ }
1693
+ }
1575
1694
  .mui-c05c9b99939d:where([data-mendy-ui], [data-mendy-ui] *) {
1576
1695
  @media (width >= 48rem) {
1577
1696
  font-size: var(--text-sm);
@@ -2162,6 +2281,10 @@
2162
2281
  syntax: "*";
2163
2282
  inherits: false;
2164
2283
  }
2284
+ @property --mendy-tw-duration {
2285
+ syntax: "*";
2286
+ inherits: false;
2287
+ }
2165
2288
  @keyframes mendy-spin {
2166
2289
  to {
2167
2290
  transform: rotate(360deg);
@@ -2230,6 +2353,7 @@
2230
2353
  --mendy-tw-drop-shadow-color: initial;
2231
2354
  --mendy-tw-drop-shadow-alpha: 100%;
2232
2355
  --mendy-tw-drop-shadow-size: initial;
2356
+ --mendy-tw-duration: initial;
2233
2357
  --mendy-tw-animation-delay: 0s;
2234
2358
  --mendy-tw-animation-direction: normal;
2235
2359
  --mendy-tw-animation-duration: initial;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mendylanda/ui",
3
- "version": "0.4.2",
4
- "description": "Mendy Landa’s reusable React components. Typed filters and tables with shared interaction behavior and customizable UI.",
3
+ "version": "0.4.3-dev.69.b44a9721f450",
4
+ "description": "Mendy Landa's reusable React components. Tables, filters, and sheets with shared interactions and customizable UI.",
5
5
  "homepage": "https://ui.mendylanda.com",
6
6
  "license": "MIT",
7
7
  "author": "Mendy Landa",
@@ -71,6 +71,11 @@
71
71
  "types": "./dist/locales/*.d.ts",
72
72
  "import": "./dist/locales/*.js",
73
73
  "default": "./dist/locales/*.js"
74
+ },
75
+ "./sheet": {
76
+ "types": "./dist/sheet/index.d.ts",
77
+ "import": "./dist/sheet/index.js",
78
+ "default": "./dist/sheet/index.js"
74
79
  }
75
80
  },
76
81
  "publishConfig": {
@@ -78,9 +83,12 @@
78
83
  },
79
84
  "dependencies": {
80
85
  "@hello-pangea/dnd": "18.0.1",
86
+ "@radix-ui/react-alert-dialog": "1.1.15",
81
87
  "@radix-ui/react-checkbox": "^1.3.3",
88
+ "@radix-ui/react-dialog": "1.1.15",
82
89
  "@radix-ui/react-direction": "^1.1.4",
83
- "@radix-ui/react-dropdown-menu": "^2.1.16",
90
+ "@radix-ui/react-dropdown-menu": "2.1.16",
91
+ "@radix-ui/react-focus-scope": "1.1.7",
84
92
  "@radix-ui/react-label": "^2.1.7",
85
93
  "@radix-ui/react-popover": "1.1.15",
86
94
  "@radix-ui/react-slot": "^1.2.3",
@@ -118,5 +126,5 @@
118
126
  "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
119
127
  "typecheck": "tsc -p tsconfig.build.json --noEmit"
120
128
  },
121
- "gitHead": "12e49c5c762b783794b6a371d2008ff4f6960f8f"
129
+ "gitHead": "b44a9721f450b4f8ce6e0bb3dc7e9e76452d2649"
122
130
  }