shadcn-ui-react 0.5.1 → 0.5.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.
package/dist/style.css CHANGED
@@ -545,8 +545,8 @@
545
545
  .h-12 {
546
546
  height: calc(var(--spacing) * 12);
547
547
  }
548
- .h-24 {
549
- height: calc(var(--spacing) * 24);
548
+ .h-28 {
549
+ height: calc(var(--spacing) * 28);
550
550
  }
551
551
  .h-36 {
552
552
  height: calc(var(--spacing) * 36);
@@ -554,8 +554,8 @@
554
554
  .h-\[1px\] {
555
555
  height: 1px;
556
556
  }
557
- .h-\[calc\(80vh-220px\)\] {
558
- height: calc(80vh - 220px);
557
+ .h-\[clamp\(22rem\,80vh\,44rem\)\] {
558
+ height: clamp(22rem, 80vh, 44rem);
559
559
  }
560
560
  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
561
561
  height: var(--radix-navigation-menu-viewport-height);
@@ -578,6 +578,9 @@
578
578
  .max-h-screen {
579
579
  max-height: 100vh;
580
580
  }
581
+ .min-h-0 {
582
+ min-height: calc(var(--spacing) * 0);
583
+ }
581
584
  .min-h-\[60px\] {
582
585
  min-height: 60px;
583
586
  }
@@ -611,15 +614,27 @@
611
614
  .w-10 {
612
615
  width: calc(var(--spacing) * 10);
613
616
  }
617
+ .w-17\.5 {
618
+ width: calc(var(--spacing) * 17.5);
619
+ }
614
620
  .w-20 {
615
621
  width: calc(var(--spacing) * 20);
616
622
  }
623
+ .w-21 {
624
+ width: calc(var(--spacing) * 21);
625
+ }
617
626
  .w-24 {
618
627
  width: calc(var(--spacing) * 24);
619
628
  }
629
+ .w-25 {
630
+ width: calc(var(--spacing) * 25);
631
+ }
620
632
  .w-36 {
621
633
  width: calc(var(--spacing) * 36);
622
634
  }
635
+ .w-37\.5 {
636
+ width: calc(var(--spacing) * 37.5);
637
+ }
623
638
  .w-40 {
624
639
  width: calc(var(--spacing) * 40);
625
640
  }
@@ -632,18 +647,9 @@
632
647
  .w-\[1px\] {
633
648
  width: 1px;
634
649
  }
635
- .w-\[70px\] {
636
- width: 70px;
637
- }
638
650
  .w-\[100px\] {
639
651
  width: 100px;
640
652
  }
641
- .w-\[110px\] {
642
- width: 110px;
643
- }
644
- .w-\[150px\] {
645
- width: 150px;
646
- }
647
653
  .w-full {
648
654
  width: 100%;
649
655
  }
@@ -670,6 +676,9 @@
670
676
  .min-w-32 {
671
677
  min-width: calc(var(--spacing) * 32);
672
678
  }
679
+ .min-w-35 {
680
+ min-width: calc(var(--spacing) * 35);
681
+ }
673
682
  .min-w-\[8rem\] {
674
683
  min-width: 8rem;
675
684
  }
@@ -740,6 +749,9 @@
740
749
  .list-none {
741
750
  list-style-type: none;
742
751
  }
752
+ .grid-cols-1 {
753
+ grid-template-columns: repeat(1, minmax(0, 1fr));
754
+ }
743
755
  .flex-col {
744
756
  flex-direction: column;
745
757
  }
@@ -820,6 +832,10 @@
820
832
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
821
833
  }
822
834
  }
835
+ .gap-x-3 {
836
+ -moz-column-gap: calc(var(--spacing) * 3);
837
+ column-gap: calc(var(--spacing) * 3);
838
+ }
823
839
  .space-x-1 {
824
840
  :where(& > :not(:last-child)) {
825
841
  --tw-space-x-reverse: 0;
@@ -834,6 +850,9 @@
834
850
  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
835
851
  }
836
852
  }
853
+ .gap-y-1 {
854
+ row-gap: calc(var(--spacing) * 1);
855
+ }
837
856
  .self-center {
838
857
  align-self: center;
839
858
  }
@@ -843,6 +862,9 @@
843
862
  .overflow-hidden {
844
863
  overflow: hidden;
845
864
  }
865
+ .overflow-visible {
866
+ overflow: visible;
867
+ }
846
868
  .overflow-x-hidden {
847
869
  overflow-x: hidden;
848
870
  }
@@ -958,6 +980,24 @@
958
980
  .bg-background {
959
981
  background-color: var(--background);
960
982
  }
983
+ .bg-background\/60 {
984
+ background-color: var(--background);
985
+ @supports (color: color-mix(in lab, red, red)) {
986
+ background-color: color-mix(in oklab, var(--background) 60%, transparent);
987
+ }
988
+ }
989
+ .bg-background\/70 {
990
+ background-color: var(--background);
991
+ @supports (color: color-mix(in lab, red, red)) {
992
+ background-color: color-mix(in oklab, var(--background) 70%, transparent);
993
+ }
994
+ }
995
+ .bg-background\/80 {
996
+ background-color: var(--background);
997
+ @supports (color: color-mix(in lab, red, red)) {
998
+ background-color: color-mix(in oklab, var(--background) 80%, transparent);
999
+ }
1000
+ }
961
1001
  .bg-black\/80 {
962
1002
  background-color: color-mix(in srgb, #000 80%, transparent);
963
1003
  @supports (color: color-mix(in lab, red, red)) {
@@ -1747,6 +1787,16 @@
1747
1787
  }
1748
1788
  }
1749
1789
  }
1790
+ .hover\:bg-muted\/60 {
1791
+ &:hover {
1792
+ @media (hover: hover) {
1793
+ background-color: var(--muted);
1794
+ @supports (color: color-mix(in lab, red, red)) {
1795
+ background-color: color-mix(in oklab, var(--muted) 60%, transparent);
1796
+ }
1797
+ }
1798
+ }
1799
+ }
1750
1800
  .hover\:bg-primary {
1751
1801
  &:hover {
1752
1802
  @media (hover: hover) {
@@ -2094,6 +2144,14 @@
2094
2144
  scale: var(--tw-scale-x) var(--tw-scale-y);
2095
2145
  }
2096
2146
  }
2147
+ .active\:bg-muted\/80 {
2148
+ &:active {
2149
+ background-color: var(--muted);
2150
+ @supports (color: color-mix(in lab, red, red)) {
2151
+ background-color: color-mix(in oklab, var(--muted) 80%, transparent);
2152
+ }
2153
+ }
2154
+ }
2097
2155
  .disabled\:pointer-events-none {
2098
2156
  &:disabled {
2099
2157
  pointer-events: none;
@@ -2629,6 +2687,22 @@
2629
2687
  transition-property: none;
2630
2688
  }
2631
2689
  }
2690
+ .supports-backdrop-filter\:bg-background\/40 {
2691
+ @supports (backdrop-filter: var(--tw)) {
2692
+ background-color: var(--background);
2693
+ @supports (color: color-mix(in lab, red, red)) {
2694
+ background-color: color-mix(in oklab, var(--background) 40%, transparent);
2695
+ }
2696
+ }
2697
+ }
2698
+ .supports-backdrop-filter\:bg-background\/50 {
2699
+ @supports (backdrop-filter: var(--tw)) {
2700
+ background-color: var(--background);
2701
+ @supports (color: color-mix(in lab, red, red)) {
2702
+ background-color: color-mix(in oklab, var(--background) 50%, transparent);
2703
+ }
2704
+ }
2705
+ }
2632
2706
  .supports-\[backdrop-filter\]\:bg-popover\/60 {
2633
2707
  @supports (backdrop-filter: var(--tw)) {
2634
2708
  background-color: var(--popover);
@@ -2637,6 +2711,11 @@
2637
2711
  }
2638
2712
  }
2639
2713
  }
2714
+ .supports-\[height\:100dvh\]\:h-\[clamp\(22rem\,80dvh\,44rem\)\] {
2715
+ @supports (height:100dvh) {
2716
+ height: clamp(22rem, 80dvh, 44rem);
2717
+ }
2718
+ }
2640
2719
  .sm\:top-auto {
2641
2720
  @media (width >= 40rem) {
2642
2721
  top: auto;
@@ -2657,11 +2736,26 @@
2657
2736
  margin-top: calc(var(--spacing) * 0);
2658
2737
  }
2659
2738
  }
2739
+ .sm\:flex {
2740
+ @media (width >= 40rem) {
2741
+ display: flex;
2742
+ }
2743
+ }
2744
+ .sm\:hidden {
2745
+ @media (width >= 40rem) {
2746
+ display: none;
2747
+ }
2748
+ }
2660
2749
  .sm\:max-w-sm {
2661
2750
  @media (width >= 40rem) {
2662
2751
  max-width: var(--container-sm);
2663
2752
  }
2664
2753
  }
2754
+ .sm\:grid-cols-\[1fr_auto\] {
2755
+ @media (width >= 40rem) {
2756
+ grid-template-columns: 1fr auto;
2757
+ }
2758
+ }
2665
2759
  .sm\:flex-col {
2666
2760
  @media (width >= 40rem) {
2667
2761
  flex-direction: column;
@@ -2677,11 +2771,6 @@
2677
2771
  align-items: center;
2678
2772
  }
2679
2773
  }
2680
- .sm\:justify-between {
2681
- @media (width >= 40rem) {
2682
- justify-content: space-between;
2683
- }
2684
- }
2685
2774
  .sm\:justify-end {
2686
2775
  @media (width >= 40rem) {
2687
2776
  justify-content: flex-end;
@@ -2757,11 +2846,6 @@
2757
2846
  position: absolute;
2758
2847
  }
2759
2848
  }
2760
- .md\:h-\[calc\(80dvh-80px\)\] {
2761
- @media (width >= 48rem) {
2762
- height: calc(80dvh - 80px);
2763
- }
2764
- }
2765
2849
  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
2766
2850
  @media (width >= 48rem) {
2767
2851
  width: var(--radix-navigation-menu-viewport-width);
@@ -2792,9 +2876,9 @@
2792
2876
  display: flex;
2793
2877
  }
2794
2878
  }
2795
- .lg\:w-\[250px\] {
2879
+ .lg\:w-62\.5 {
2796
2880
  @media (width >= 64rem) {
2797
- width: 250px;
2881
+ width: calc(var(--spacing) * 62.5);
2798
2882
  }
2799
2883
  }
2800
2884
  .lg\:gap-8 {
@@ -2960,10 +3044,12 @@
2960
3044
  padding-right: calc(var(--spacing) * 0);
2961
3045
  }
2962
3046
  }
2963
- .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
2964
- & > [role=checkbox] {
2965
- --tw-translate-y: 2px;
2966
- translate: var(--tw-translate-x) var(--tw-translate-y);
3047
+ .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
3048
+ :is(& > *) {
3049
+ &:is([role=checkbox]) {
3050
+ --tw-translate-y: calc(var(--spacing) * 0.5);
3051
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3052
+ }
2967
3053
  }
2968
3054
  }
2969
3055
  .\[\&\>span\]\:line-clamp-1 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shadcn-ui-react",
3
- "version": "0.5.1",
3
+ "version": "0.5.3",
4
4
  "private": false,
5
5
  "author": "Bleker Cordova <bleker@gliyen.com>",
6
6
  "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -46,8 +46,8 @@
46
46
  "test:watch": "jest --watch"
47
47
  },
48
48
  "devDependencies": {
49
- "@babel/core": "^7.28.5",
50
- "@babel/preset-env": "^7.28.5",
49
+ "@babel/core": "^7.28.6",
50
+ "@babel/preset-env": "^7.28.6",
51
51
  "@babel/preset-react": "^7.28.5",
52
52
  "@babel/preset-typescript": "^7.28.5",
53
53
  "@eslint/config-array": "^0.23.0",
@@ -57,14 +57,14 @@
57
57
  "@tailwindcss/vite": "^4.1.18",
58
58
  "@testing-library/dom": "^10.4.1",
59
59
  "@testing-library/jest-dom": "^6.9.1",
60
- "@testing-library/react": "^16.3.1",
60
+ "@testing-library/react": "^16.3.2",
61
61
  "@testing-library/user-event": "^14.6.1",
62
62
  "@types/jest": "^30.0.0",
63
- "@types/node": "^25.0.6",
64
- "@types/react": "^19.2.8",
63
+ "@types/node": "^25.0.9",
64
+ "@types/react": "^19.2.9",
65
65
  "@types/react-dom": "^19.2.3",
66
- "@typescript-eslint/eslint-plugin": "^8.52.0",
67
- "@typescript-eslint/parser": "^8.52.0",
66
+ "@typescript-eslint/eslint-plugin": "^8.53.1",
67
+ "@typescript-eslint/parser": "^8.53.1",
68
68
  "autoprefixer": "^10.4.23",
69
69
  "babel-jest": "^30.2.0",
70
70
  "cross-env": "^10.1.0",
@@ -132,14 +132,14 @@
132
132
  "clsx": "^2.1.1",
133
133
  "cmdk": "^1.1.1",
134
134
  "embla-carousel-react": "^8.6.0",
135
- "framer-motion": "^12.25.0",
135
+ "framer-motion": "^12.27.5",
136
136
  "input-otp": "^1.4.2",
137
137
  "lucide-react": "^0.562.0",
138
138
  "next-themes": "^0.4.6",
139
139
  "react-dropzone": "^14.3.8",
140
140
  "react-helmet-next": "^0.0.2",
141
- "react-hook-form": "^7.70.0",
142
- "react-resizable-panels": "^4.3.3",
141
+ "react-hook-form": "^7.71.1",
142
+ "react-resizable-panels": "^4.4.1",
143
143
  "sonner": "^2.0.7",
144
144
  "tailwind-merge": "^3.4.0",
145
145
  "tailwind-variants": "^3.2.2",