@rozenite/network-activity-plugin 1.0.0-alpha.9 → 1.0.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.
Files changed (111) hide show
  1. package/README.md +2 -0
  2. package/dist/App.html +2 -2
  3. package/dist/assets/{App-DoHQsY5s.css → App-BrSkOkws.css} +223 -2
  4. package/dist/assets/{App-CA1Fbh0I.js → App-C6wCDVkW.js} +8157 -2677
  5. package/dist/react-native.cjs +4 -1
  6. package/dist/react-native.js +4 -1
  7. package/dist/rozenite.json +1 -1
  8. package/dist/src/react-native/config.d.ts +20 -0
  9. package/dist/src/react-native/http/overrides-registry.d.ts +6 -0
  10. package/dist/src/react-native/http/xhr-interceptor.d.ts +7 -1
  11. package/dist/src/react-native/sse/sse-interceptor.d.ts +2 -2
  12. package/dist/src/react-native/useNetworkActivityDevTools.d.ts +2 -1
  13. package/dist/src/react-native/utils/getBlobName.d.ts +35 -0
  14. package/dist/src/react-native/utils/getFormDataEntries.d.ts +18 -0
  15. package/dist/src/shared/client.d.ts +48 -4
  16. package/dist/src/shared/sse-events.d.ts +4 -1
  17. package/dist/src/ui/components/Button.d.ts +2 -2
  18. package/dist/src/ui/components/CodeBlock.d.ts +3 -0
  19. package/dist/src/ui/components/CodeEditor.d.ts +5 -0
  20. package/dist/src/ui/components/CookieCard.d.ts +7 -0
  21. package/dist/src/ui/components/CopyRequestDropdown.d.ts +7 -0
  22. package/dist/src/ui/components/DropdownMenu.d.ts +27 -0
  23. package/dist/src/ui/components/FilterBar.d.ts +10 -0
  24. package/dist/src/ui/components/JsonTreeCopyableItem.d.ts +1 -1
  25. package/dist/src/ui/components/KeyValueGrid.d.ts +13 -0
  26. package/dist/src/ui/components/OverrideResponse.d.ts +8 -0
  27. package/dist/src/ui/components/RequestBody.d.ts +6 -0
  28. package/dist/src/ui/components/RequestList.d.ts +9 -4
  29. package/dist/src/ui/components/ScrollArea.d.ts +3 -2
  30. package/dist/src/ui/components/Section.d.ts +8 -0
  31. package/dist/src/ui/components/Separator.d.ts +2 -1
  32. package/dist/src/ui/components/Tabs.d.ts +7 -0
  33. package/dist/src/ui/state/hooks.d.ts +4 -0
  34. package/dist/src/ui/state/model.d.ts +12 -7
  35. package/dist/src/ui/state/store.d.ts +27 -3
  36. package/dist/src/ui/utils/checkRequestBodyBinary.d.ts +2 -0
  37. package/dist/src/ui/utils/escapeShellArg.d.ts +1 -0
  38. package/dist/src/ui/utils/generateCurlCommand.d.ts +2 -0
  39. package/dist/src/ui/utils/generateFetchCall.d.ts +2 -0
  40. package/dist/src/ui/utils/generateMultipartBody.d.ts +4 -0
  41. package/dist/src/utils/applyReactNativeRequestHeadersLogic.d.ts +7 -0
  42. package/dist/src/utils/applyReactNativeResponseHeadersLogic.d.ts +9 -0
  43. package/dist/src/utils/cookieParser.d.ts +6 -0
  44. package/dist/src/utils/getContentTypeMimeType.d.ts +2 -0
  45. package/dist/src/utils/getHttpHeader.d.ts +5 -0
  46. package/dist/src/utils/getHttpHeaderValueAsString.d.ts +11 -0
  47. package/dist/src/utils/getStringSizeInBytes.d.ts +1 -0
  48. package/dist/src/utils/inferContentTypeFromPostData.d.ts +2 -0
  49. package/dist/src/utils/safeStringify.d.ts +1 -0
  50. package/dist/src/utils/typeChecks.d.ts +9 -0
  51. package/dist/useNetworkActivityDevTools.cjs +319 -24
  52. package/dist/useNetworkActivityDevTools.js +320 -25
  53. package/package.json +7 -4
  54. package/react-native.ts +6 -1
  55. package/src/react-native/config.ts +43 -0
  56. package/src/react-native/http/network-inspector.ts +170 -8
  57. package/src/react-native/http/overrides-registry.ts +32 -0
  58. package/src/react-native/http/xhr-interceptor.ts +19 -2
  59. package/src/react-native/sse/sse-inspector.ts +27 -5
  60. package/src/react-native/sse/sse-interceptor.ts +26 -8
  61. package/src/react-native/useNetworkActivityDevTools.ts +86 -8
  62. package/src/react-native/utils/getBlobName.ts +45 -0
  63. package/src/react-native/utils/getFormDataEntries.ts +32 -0
  64. package/src/react-native/utils.ts +3 -3
  65. package/src/shared/client.ts +73 -4
  66. package/src/shared/sse-events.ts +4 -1
  67. package/src/ui/components/Button.tsx +1 -0
  68. package/src/ui/components/CodeBlock.tsx +19 -0
  69. package/src/ui/components/CodeEditor.tsx +26 -0
  70. package/src/ui/components/CookieCard.tsx +64 -0
  71. package/src/ui/components/CopyRequestDropdown.tsx +95 -0
  72. package/src/ui/components/DropdownMenu.tsx +206 -0
  73. package/src/ui/components/FilterBar.tsx +117 -0
  74. package/src/ui/components/Input.tsx +1 -1
  75. package/src/ui/components/JsonTree.tsx +10 -3
  76. package/src/ui/components/JsonTreeCopyableItem.tsx +14 -10
  77. package/src/ui/components/KeyValueGrid.tsx +51 -0
  78. package/src/ui/components/OverrideResponse.tsx +132 -0
  79. package/src/ui/components/RequestBody.tsx +86 -0
  80. package/src/ui/components/RequestList.tsx +65 -13
  81. package/src/ui/components/ScrollArea.tsx +1 -0
  82. package/src/ui/components/Section.tsx +46 -0
  83. package/src/ui/components/SidePanel.tsx +15 -5
  84. package/src/ui/globals.css +4 -0
  85. package/src/ui/hooks/useCopyToClipboard.ts +2 -2
  86. package/src/ui/state/hooks.ts +8 -0
  87. package/src/ui/state/model.ts +18 -7
  88. package/src/ui/state/store.ts +610 -500
  89. package/src/ui/tabs/CookiesTab.tsx +60 -263
  90. package/src/ui/tabs/HeadersTab.tsx +78 -89
  91. package/src/ui/tabs/RequestTab.tsx +58 -46
  92. package/src/ui/tabs/ResponseTab.tsx +98 -67
  93. package/src/ui/tabs/SSEMessagesTab.tsx +50 -39
  94. package/src/ui/utils/checkRequestBodyBinary.ts +7 -0
  95. package/src/ui/utils/escapeShellArg.ts +12 -0
  96. package/src/ui/utils/generateCurlCommand.ts +83 -0
  97. package/src/ui/utils/generateFetchCall.ts +64 -0
  98. package/src/ui/utils/generateMultipartBody.ts +19 -0
  99. package/src/ui/views/InspectorView.tsx +15 -3
  100. package/src/utils/applyReactNativeRequestHeadersLogic.ts +30 -0
  101. package/src/utils/applyReactNativeResponseHeadersLogic.ts +28 -0
  102. package/src/utils/cookieParser.ts +126 -0
  103. package/src/utils/getContentTypeMimeType.ts +17 -0
  104. package/src/utils/getHttpHeader.ts +17 -0
  105. package/src/utils/getHttpHeaderValueAsString.ts +13 -0
  106. package/src/utils/getStringSizeInBytes.ts +3 -0
  107. package/src/utils/inferContentTypeFromPostData.ts +9 -0
  108. package/src/utils/safeStringify.ts +7 -0
  109. package/src/utils/typeChecks.ts +27 -0
  110. package/dist/src/ui/utils/getHttpHeaderValue.d.ts +0 -2
  111. package/src/ui/utils/getHttpHeaderValue.ts +0 -14
package/README.md CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  The Rozenite Network Activity Plugin provides real-time network request monitoring, detailed request/response inspection within your React Native DevTools environment. It offers comprehensive network debugging capabilities similar to browser DevTools Network panel.
8
8
 
9
+ ![Network Activity Plugin](https://rozenite.dev/network-activity-plugin.png)
10
+
9
11
  ## Features
10
12
 
11
13
  - **Real-time Network Monitoring**: Track all HTTP/HTTPS requests in real-time
package/dist/App.html CHANGED
@@ -22,8 +22,8 @@
22
22
  <script>
23
23
  var __ROZENITE_PANEL__ = true;
24
24
  </script>
25
- <script type="module" crossorigin src="./assets/App-CA1Fbh0I.js"></script>
26
- <link rel="stylesheet" crossorigin href="./assets/App-DoHQsY5s.css">
25
+ <script type="module" crossorigin src="./assets/App-C6wCDVkW.js"></script>
26
+ <link rel="stylesheet" crossorigin href="./assets/App-BrSkOkws.css">
27
27
  </head>
28
28
  <body>
29
29
  <div id="root"></div>
package/dist/assets/{App-DoHQsY5s.css → App-BrSkOkws.css} RENAMED
@@ -541,36 +541,77 @@ video {
541
541
  background-color: hsl(var(--background));
542
542
  color: hsl(var(--foreground));
543
543
  }
544
+ .absolute {
545
+ position: absolute;
546
+ }
544
547
  .relative {
545
548
  position: relative;
546
549
  }
547
550
  .sticky {
548
551
  position: sticky;
549
552
  }
553
+ .left-2 {
554
+ left: 0.5rem;
555
+ }
550
556
  .top-0 {
551
557
  top: 0px;
552
558
  }
553
559
  .z-10 {
554
560
  z-index: 10;
555
561
  }
562
+ .z-50 {
563
+ z-index: 50;
564
+ }
565
+ .col-span-2 {
566
+ grid-column: span 2 / span 2;
567
+ }
556
568
  .-m-2 {
557
569
  margin: -0.5rem;
558
570
  }
559
571
  .m-0 {
560
572
  margin: 0px;
561
573
  }
574
+ .-mx-1 {
575
+ margin-left: -0.25rem;
576
+ margin-right: -0.25rem;
577
+ }
578
+ .my-1 {
579
+ margin-top: 0.25rem;
580
+ margin-bottom: 0.25rem;
581
+ }
562
582
  .mb-2 {
563
583
  margin-bottom: 0.5rem;
564
584
  }
565
585
  .mb-3 {
566
586
  margin-bottom: 0.75rem;
567
587
  }
588
+ .me-auto {
589
+ margin-inline-end: auto;
590
+ }
568
591
  .ml-0 {
569
592
  margin-left: 0px;
570
593
  }
594
+ .ml-1 {
595
+ margin-left: 0.25rem;
596
+ }
571
597
  .ml-2 {
572
598
  margin-left: 0.5rem;
573
599
  }
600
+ .ml-auto {
601
+ margin-left: auto;
602
+ }
603
+ .mr-1 {
604
+ margin-right: 0.25rem;
605
+ }
606
+ .mr-2 {
607
+ margin-right: 0.5rem;
608
+ }
609
+ .ms-2 {
610
+ margin-inline-start: 0.5rem;
611
+ }
612
+ .mt-1 {
613
+ margin-top: 0.25rem;
614
+ }
574
615
  .mt-2 {
575
616
  margin-top: 0.5rem;
576
617
  }
@@ -598,18 +639,27 @@ video {
598
639
  .h-12 {
599
640
  height: 3rem;
600
641
  }
642
+ .h-2 {
643
+ height: 0.5rem;
644
+ }
601
645
  .h-2\.5 {
602
646
  height: 0.625rem;
603
647
  }
604
648
  .h-3 {
605
649
  height: 0.75rem;
606
650
  }
651
+ .h-3\.5 {
652
+ height: 0.875rem;
653
+ }
607
654
  .h-4 {
608
655
  height: 1rem;
609
656
  }
610
657
  .h-6 {
611
658
  height: 1.5rem;
612
659
  }
660
+ .h-7 {
661
+ height: 1.75rem;
662
+ }
613
663
  .h-8 {
614
664
  height: 2rem;
615
665
  }
@@ -622,6 +672,9 @@ video {
622
672
  .h-full {
623
673
  height: 100%;
624
674
  }
675
+ .h-px {
676
+ height: 1px;
677
+ }
625
678
  .h-screen {
626
679
  height: 100vh;
627
680
  }
@@ -640,14 +693,17 @@ video {
640
693
  .w-12 {
641
694
  width: 3rem;
642
695
  }
696
+ .w-2 {
697
+ width: 0.5rem;
698
+ }
643
699
  .w-2\.5 {
644
700
  width: 0.625rem;
645
701
  }
646
702
  .w-3 {
647
703
  width: 0.75rem;
648
704
  }
649
- .w-32 {
650
- width: 8rem;
705
+ .w-3\.5 {
706
+ width: 0.875rem;
651
707
  }
652
708
  .w-4 {
653
709
  width: 1rem;
@@ -667,12 +723,21 @@ video {
667
723
  .min-w-0 {
668
724
  min-width: 0px;
669
725
  }
726
+ .min-w-\[8rem\] {
727
+ min-width: 8rem;
728
+ }
729
+ .max-w-24 {
730
+ max-width: 6rem;
731
+ }
670
732
  .max-w-xs {
671
733
  max-width: 20rem;
672
734
  }
673
735
  .flex-1 {
674
736
  flex: 1 1 0%;
675
737
  }
738
+ .flex-shrink-0 {
739
+ flex-shrink: 0;
740
+ }
676
741
  .shrink-0 {
677
742
  flex-shrink: 0;
678
743
  }
@@ -680,6 +745,10 @@ video {
680
745
  --tw-translate-y: 0.1875rem;
681
746
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
682
747
  }
748
+ .rotate-90 {
749
+ --tw-rotate: 90deg;
750
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
751
+ }
683
752
  @keyframes spin {
684
753
 
685
754
  to {
@@ -689,6 +758,9 @@ video {
689
758
  .animate-spin {
690
759
  animation: spin 1s linear infinite;
691
760
  }
761
+ .cursor-default {
762
+ cursor: default;
763
+ }
692
764
  .cursor-pointer {
693
765
  cursor: pointer;
694
766
  }
@@ -706,6 +778,9 @@ video {
706
778
  .grid-cols-5 {
707
779
  grid-template-columns: repeat(5, minmax(0, 1fr));
708
780
  }
781
+ .grid-cols-\[minmax\(7rem\2c 25\%\)_minmax\(3rem\2c 1fr\)\] {
782
+ grid-template-columns: minmax(7rem,25%) minmax(3rem,1fr);
783
+ }
709
784
  .flex-col {
710
785
  flex-direction: column;
711
786
  }
@@ -727,6 +802,13 @@ video {
727
802
  .gap-4 {
728
803
  gap: 1rem;
729
804
  }
805
+ .gap-x-2 {
806
+ -moz-column-gap: 0.5rem;
807
+ column-gap: 0.5rem;
808
+ }
809
+ .gap-y-2 {
810
+ row-gap: 0.5rem;
811
+ }
730
812
  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
731
813
  --tw-space-y-reverse: 0;
732
814
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -772,6 +854,9 @@ video {
772
854
  .whitespace-nowrap {
773
855
  white-space: nowrap;
774
856
  }
857
+ .whitespace-pre {
858
+ white-space: pre;
859
+ }
775
860
  .whitespace-pre-wrap {
776
861
  white-space: pre-wrap;
777
862
  }
@@ -811,9 +896,16 @@ video {
811
896
  .border-t {
812
897
  border-top-width: 1px;
813
898
  }
899
+ .border-blue-500\/50 {
900
+ border-color: rgb(59 130 246 / 0.5);
901
+ }
814
902
  .border-current {
815
903
  border-color: currentColor;
816
904
  }
905
+ .border-gray-600 {
906
+ --tw-border-opacity: 1;
907
+ border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
908
+ }
817
909
  .border-gray-700 {
818
910
  --tw-border-opacity: 1;
819
911
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
@@ -849,6 +941,9 @@ video {
849
941
  --tw-bg-opacity: 1;
850
942
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
851
943
  }
944
+ .bg-blue-600\/20 {
945
+ background-color: rgb(37 99 235 / 0.2);
946
+ }
852
947
  .bg-blue-900\/30 {
853
948
  background-color: rgb(30 58 138 / 0.3);
854
949
  }
@@ -899,6 +994,10 @@ video {
899
994
  .bg-secondary {
900
995
  background-color: hsl(var(--secondary));
901
996
  }
997
+ .bg-violet-300 {
998
+ --tw-bg-opacity: 1;
999
+ background-color: rgb(196 181 253 / var(--tw-bg-opacity, 1));
1000
+ }
902
1001
  .bg-yellow-600 {
903
1002
  --tw-bg-opacity: 1;
904
1003
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
@@ -960,6 +1059,12 @@ video {
960
1059
  padding-top: 0.5rem;
961
1060
  padding-bottom: 0.5rem;
962
1061
  }
1062
+ .pl-8 {
1063
+ padding-left: 2rem;
1064
+ }
1065
+ .pr-2 {
1066
+ padding-right: 0.5rem;
1067
+ }
963
1068
  .pt-4 {
964
1069
  padding-top: 1rem;
965
1070
  }
@@ -1000,6 +1105,13 @@ video {
1000
1105
  .italic {
1001
1106
  font-style: italic;
1002
1107
  }
1108
+ .tracking-widest {
1109
+ letter-spacing: 0.1em;
1110
+ }
1111
+ .text-blue-300 {
1112
+ --tw-text-opacity: 1;
1113
+ color: rgb(147 197 253 / var(--tw-text-opacity, 1));
1114
+ }
1003
1115
  .text-blue-400 {
1004
1116
  --tw-text-opacity: 1;
1005
1117
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -1082,6 +1194,14 @@ video {
1082
1194
  .text-secondary-foreground {
1083
1195
  color: hsl(var(--secondary-foreground));
1084
1196
  }
1197
+ .text-violet-300 {
1198
+ --tw-text-opacity: 1;
1199
+ color: rgb(196 181 253 / var(--tw-text-opacity, 1));
1200
+ }
1201
+ .text-white {
1202
+ --tw-text-opacity: 1;
1203
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1204
+ }
1085
1205
  .text-yellow-400 {
1086
1206
  --tw-text-opacity: 1;
1087
1207
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
@@ -1096,12 +1216,27 @@ video {
1096
1216
  .opacity-0 {
1097
1217
  opacity: 0;
1098
1218
  }
1219
+ .shadow-lg {
1220
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1221
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1222
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1223
+ }
1224
+ .outline-none {
1225
+ outline: 2px solid transparent;
1226
+ outline-offset: 2px;
1227
+ }
1099
1228
  .outline {
1100
1229
  outline-style: solid;
1101
1230
  }
1102
1231
  .ring-offset-background {
1103
1232
  --tw-ring-offset-color: hsl(var(--background));
1104
1233
  }
1234
+ .ring-offset-blue-500 {
1235
+ --tw-ring-offset-color: #3b82f6;
1236
+ }
1237
+ .\!filter {
1238
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1239
+ }
1105
1240
  .filter {
1106
1241
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1107
1242
  }
@@ -1129,6 +1264,9 @@ video {
1129
1264
  transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
1130
1265
  }
1131
1266
  }
1267
+ .wrap-anywhere {
1268
+ overflow-wrap: anywhere;
1269
+ }
1132
1270
  .file\:border-0::file-selector-button {
1133
1271
  border-width: 0px;
1134
1272
  }
@@ -1145,6 +1283,14 @@ video {
1145
1283
  .file\:text-foreground::file-selector-button {
1146
1284
  color: hsl(var(--foreground));
1147
1285
  }
1286
+ .placeholder\:text-gray-400::-moz-placeholder {
1287
+ --tw-text-opacity: 1;
1288
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
1289
+ }
1290
+ .placeholder\:text-gray-400::placeholder {
1291
+ --tw-text-opacity: 1;
1292
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
1293
+ }
1148
1294
  .placeholder\:text-muted-foreground::-moz-placeholder {
1149
1295
  color: hsl(var(--muted-foreground));
1150
1296
  }
@@ -1154,6 +1300,9 @@ video {
1154
1300
  .hover\:bg-accent:hover {
1155
1301
  background-color: hsl(var(--accent));
1156
1302
  }
1303
+ .hover\:bg-blue-600\/30:hover {
1304
+ background-color: rgb(37 99 235 / 0.3);
1305
+ }
1157
1306
  .hover\:bg-destructive\/80:hover {
1158
1307
  background-color: hsl(var(--destructive) / 0.8);
1159
1308
  }
@@ -1196,9 +1345,25 @@ video {
1196
1345
  --tw-text-opacity: 1;
1197
1346
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
1198
1347
  }
1348
+ .hover\:text-violet-300:hover {
1349
+ --tw-text-opacity: 1;
1350
+ color: rgb(196 181 253 / var(--tw-text-opacity, 1));
1351
+ }
1352
+ .hover\:text-white:hover {
1353
+ --tw-text-opacity: 1;
1354
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1355
+ }
1199
1356
  .hover\:underline:hover {
1200
1357
  text-decoration-line: underline;
1201
1358
  }
1359
+ .focus\:bg-gray-700:focus {
1360
+ --tw-bg-opacity: 1;
1361
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
1362
+ }
1363
+ .focus\:text-gray-100:focus {
1364
+ --tw-text-opacity: 1;
1365
+ color: rgb(243 244 246 / var(--tw-text-opacity, 1));
1366
+ }
1202
1367
  .focus\:outline-none:focus {
1203
1368
  outline: 2px solid transparent;
1204
1369
  outline-offset: 2px;
@@ -1241,6 +1406,9 @@ video {
1241
1406
  .group:hover .group-hover\:opacity-100 {
1242
1407
  opacity: 1;
1243
1408
  }
1409
+ .data-\[disabled\]\:pointer-events-none[data-disabled] {
1410
+ pointer-events: none;
1411
+ }
1244
1412
  .data-\[state\=active\]\:bg-background[data-state="active"] {
1245
1413
  background-color: hsl(var(--background));
1246
1414
  }
@@ -1248,15 +1416,68 @@ video {
1248
1416
  --tw-bg-opacity: 1;
1249
1417
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
1250
1418
  }
1419
+ .data-\[state\=open\]\:bg-gray-700[data-state="open"] {
1420
+ --tw-bg-opacity: 1;
1421
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
1422
+ }
1251
1423
  .data-\[state\=active\]\:text-gray-100[data-state="active"] {
1252
1424
  --tw-text-opacity: 1;
1253
1425
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
1254
1426
  }
1427
+ .data-\[state\=open\]\:text-gray-100[data-state="open"] {
1428
+ --tw-text-opacity: 1;
1429
+ color: rgb(243 244 246 / var(--tw-text-opacity, 1));
1430
+ }
1431
+ .data-\[disabled\]\:opacity-50[data-disabled] {
1432
+ opacity: 0.5;
1433
+ }
1255
1434
  .data-\[state\=active\]\:shadow-sm[data-state="active"] {
1256
1435
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1257
1436
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1258
1437
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1259
1438
  }
1439
+ .data-\[state\=open\]\:animate-in[data-state="open"] {
1440
+ animation-name: enter;
1441
+ animation-duration: 150ms;
1442
+ --tw-enter-opacity: initial;
1443
+ --tw-enter-scale: initial;
1444
+ --tw-enter-rotate: initial;
1445
+ --tw-enter-translate-x: initial;
1446
+ --tw-enter-translate-y: initial;
1447
+ }
1448
+ .data-\[state\=closed\]\:animate-out[data-state="closed"] {
1449
+ animation-name: exit;
1450
+ animation-duration: 150ms;
1451
+ --tw-exit-opacity: initial;
1452
+ --tw-exit-scale: initial;
1453
+ --tw-exit-rotate: initial;
1454
+ --tw-exit-translate-x: initial;
1455
+ --tw-exit-translate-y: initial;
1456
+ }
1457
+ .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
1458
+ --tw-exit-opacity: 0;
1459
+ }
1460
+ .data-\[state\=open\]\:fade-in-0[data-state="open"] {
1461
+ --tw-enter-opacity: 0;
1462
+ }
1463
+ .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
1464
+ --tw-exit-scale: .95;
1465
+ }
1466
+ .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
1467
+ --tw-enter-scale: .95;
1468
+ }
1469
+ .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
1470
+ --tw-enter-translate-y: -0.5rem;
1471
+ }
1472
+ .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
1473
+ --tw-enter-translate-x: 0.5rem;
1474
+ }
1475
+ .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
1476
+ --tw-enter-translate-x: -0.5rem;
1477
+ }
1478
+ .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
1479
+ --tw-enter-translate-y: 0.5rem;
1480
+ }
1260
1481
  @media (min-width: 768px) {
1261
1482
 
1262
1483
  .md\:text-sm {