@j3m-quantum/ui 0.7.12 → 0.8.1

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 (8) hide show
  1. package/dist/index.cjs +312 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +33 -1
  4. package/dist/index.d.ts +33 -1
  5. package/dist/index.js +296 -4
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/index.css +141 -77
  8. package/package.json +1 -1
package/dist/styles/index.css CHANGED
@@ -233,11 +233,11 @@
233
233
  --sidebar-ring: var(--j3m-primary-300);
234
234
 
235
235
  /* Chart Colors */
236
- --chart-1: var(--j3m-primary-300);
237
- --chart-2: var(--j3m-green-200);
238
- --chart-3: var(--j3m-neutral-700);
239
- --chart-4: var(--j3m-yellow-100);
240
- --chart-5: var(--j3m-primary-200);
236
+ --chart-1: var(--j3m-primary-250);
237
+ --chart-2: var(--j3m-primary-200);
238
+ --chart-3: var(--j3m-primary-300);
239
+ --chart-4: var(--j3m-primary-100);
240
+ --chart-5: var(--j3m-primary-350);
241
241
 
242
242
  /* Global Radius */
243
243
  --radius: 12px;
@@ -483,11 +483,12 @@ textarea,
483
483
  border-radius: var(--radius) !important;
484
484
  }
485
485
 
486
- /* Select - pill shape */
486
+ /* Select - pill shape trigger and rounded content */
487
487
  [data-slot="select-trigger"] {
488
488
  border-radius: var(--j3m-radius-full) !important;
489
489
  }
490
490
 
491
+
491
492
  /* Button Group - pill with squared middle (must override !important on base buttons) */
492
493
  [data-slot="button-group"] > * {
493
494
  border-radius: 0 !important;
@@ -814,93 +815,117 @@ textarea,
814
815
  }
815
816
 
816
817
  /* --- CALENDAR --- */
818
+ /* Glass mode - same background as input boxes, keep default hover/selected states */
817
819
  .glass-context [data-slot="calendar"],
818
820
  .glass-context .rdp {
819
821
  background: rgba(255, 255, 255, 0.8) !important;
820
- }
821
-
822
- /* Remove inner white boxes around date grid */
822
+ border: 1px solid rgba(0, 0, 0, 0.15) !important;
823
+ border-radius: var(--j3m-radius-l) !important;
824
+ }
825
+
826
+ /* Remove inner white background from calendar grid */
827
+ .glass-context [data-slot="calendar"] table,
828
+ .glass-context [data-slot="calendar"] tbody,
829
+ .glass-context [data-slot="calendar"] thead,
830
+ .glass-context [data-slot="calendar"] .rdp-months,
831
+ .glass-context [data-slot="calendar"] .rdp-month,
832
+ .glass-context [data-slot="calendar"] .rdp-month_grid,
833
+ .glass-context [data-slot="calendar"] .rdp-weeks,
834
+ .glass-context [data-slot="calendar"] .rdp-week,
835
+ .glass-context .rdp table,
836
+ .glass-context .rdp tbody,
837
+ .glass-context .rdp thead,
823
838
  .glass-context .rdp-months,
824
839
  .glass-context .rdp-month,
825
- .glass-context .rdp-table,
826
- .glass-context .rdp-tbody,
827
- .glass-context .rdp-row,
828
- .glass-context .rdp-cell {
840
+ .glass-context .rdp-month_grid,
841
+ .glass-context .rdp-weeks,
842
+ .glass-context .rdp-week {
829
843
  background: transparent !important;
844
+ background-color: transparent !important;
830
845
  }
831
846
 
832
- /* Day cells - only circular */
833
- .glass-context .rdp-day,
834
- .glass-context [data-slot="calendar-day"] {
835
- color: rgba(0, 0, 0, 0.85) !important;
836
- background: transparent !important;
837
- border-radius: 9999px !important;
847
+ /* --- COLLAPSIBLE --- */
848
+ .glass-context [data-slot="collapsible-content"] > *,
849
+ .glass-context [data-state="open"] > [data-slot="collapsible-content"] > * {
850
+ background: rgba(255, 255, 255, 0.8) !important;
851
+ border-color: rgba(0, 0, 0, 0.15) !important;
838
852
  }
839
853
 
840
- /* Day button inside - circular hover with orange */
841
- .glass-context .rdp-day button,
842
- .glass-context .rdp-button,
843
- .glass-context [data-slot="calendar-day"] button {
844
- border-radius: 9999px !important;
845
- background: transparent !important;
854
+ /* --- EMPTY STATE --- */
855
+ .glass-context [data-slot="empty"] {
856
+ background: rgba(255, 255, 255, 0.8) !important;
857
+ border: 2px dashed rgba(0, 0, 0, 0.25) !important;
858
+ border-radius: var(--j3m-radius-l) !important;
846
859
  }
847
860
 
848
- .glass-context .rdp-day:hover,
849
- .glass-context .rdp-day button:hover,
850
- .glass-context .rdp-button:hover,
851
- .glass-context [data-slot="calendar-day"]:hover {
852
- background: var(--j3m-primary-250) !important;
861
+ /* --- ITEM --- */
862
+ .glass-context [data-slot="item-group"] {
863
+ background: rgba(255, 255, 255, 0.8) !important;
864
+ border: 1px solid rgba(0, 0, 0, 0.15) !important;
865
+ border-radius: var(--j3m-radius-l) !important;
866
+ overflow: hidden;
867
+ }
868
+
869
+ .glass-context [data-slot="item"] {
870
+ background-color: transparent !important;
871
+ border-color: rgba(0, 0, 0, 0.15) !important;
872
+ }
873
+
874
+ .glass-context [data-slot="item-separator"] {
875
+ background-color: rgba(0, 0, 0, 0.15) !important;
876
+ }
877
+
878
+ /* --- NAVIGATION MENU --- */
879
+ /* Solid mode - orange gradient hover */
880
+ [data-slot="navigation-menu-link"]:hover,
881
+ [data-slot="navigation-menu-link"]:focus {
882
+ background: linear-gradient(135deg, var(--j3m-primary-200) 0%, var(--j3m-primary-250) 50%, var(--j3m-primary-300) 100%) !important;
853
883
  color: #FFFFFF !important;
854
- border-radius: 9999px !important;
855
884
  }
856
885
 
857
- /* Selected date - orange with white text */
858
- .glass-context .rdp-day_selected,
859
- .glass-context .rdp-day_selected button,
860
- .glass-context [data-slot="calendar-day"][data-selected] {
886
+ [data-slot="navigation-menu-link"]:hover *,
887
+ [data-slot="navigation-menu-link"]:focus * {
888
+ color: #FFFFFF !important;
889
+ }
890
+
891
+ /* Glass mode - default orange hover, bright text */
892
+ .glass-context [data-slot="navigation-menu-content"] a:hover,
893
+ .glass-context [data-slot="navigation-menu-content"] a:focus {
861
894
  background: var(--j3m-primary-250) !important;
862
895
  color: #FFFFFF !important;
863
- border-radius: 9999px !important;
864
896
  }
865
897
 
866
- /* Today indicator */
867
- .glass-context .rdp-day_today,
868
- .glass-context [data-slot="calendar-day"][data-today] {
869
- border-color: var(--j3m-primary-250) !important;
898
+ .glass-context [data-slot="navigation-menu-content"] a:hover *,
899
+ .glass-context [data-slot="navigation-menu-content"] a:focus * {
900
+ color: #FFFFFF !important;
870
901
  }
871
902
 
872
- /* Calendar navigation buttons - transparent, no background */
873
- .glass-context .rdp-nav_button,
874
- .glass-context [data-slot="calendar"] button:not(.rdp-button) {
875
- background: transparent !important;
876
- border: none !important;
877
- border-radius: 9999px !important;
903
+ /* --- MENUBAR --- */
904
+ .glass-context [data-slot="menubar"] {
905
+ background: rgba(255, 255, 255, 0.8) !important;
906
+ border: 1px solid rgba(0, 0, 0, 0.15) !important;
907
+ border-radius: var(--j3m-radius-l) !important;
878
908
  }
879
909
 
880
- .glass-context .rdp-nav_button:hover,
881
- .glass-context [data-slot="calendar"] button:not(.rdp-button):hover {
882
- background: rgba(0, 0, 0, 0.1) !important;
910
+ .glass-context [data-slot="menubar-trigger"] {
911
+ color: rgba(0, 0, 0, 0.85) !important;
883
912
  }
884
913
 
885
- /* --- COLLAPSIBLE --- */
886
- .glass-context [data-slot="collapsible-content"] > *,
887
- .glass-context [data-state="open"] > [data-slot="collapsible-content"] > * {
888
- background: rgba(255, 255, 255, 0.8) !important;
889
- border-color: rgba(0, 0, 0, 0.15) !important;
914
+ .glass-context [data-slot="menubar-trigger"]:hover,
915
+ .glass-context [data-slot="menubar-trigger"][data-state="open"] {
916
+ background: var(--j3m-primary-250) !important;
917
+ color: #FFFFFF !important;
890
918
  }
891
919
 
892
- /* --- NAVIGATION MENU --- */
893
- .glass-context [data-slot="navigation-menu-trigger"],
894
- .glass-context [data-slot="navigation-menu-link"] {
895
- border-radius: 9999px !important;
896
- background: rgba(255, 255, 255, 0.8) !important;
920
+ .glass-context [data-slot="menubar-content"] {
921
+ background: rgba(255, 255, 255, 0.9) !important;
922
+ backdrop-filter: blur(12px) !important;
897
923
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
898
924
  }
899
925
 
900
- .glass-context [data-slot="navigation-menu-trigger"]:hover,
901
- .glass-context [data-slot="navigation-menu-link"]:hover {
902
- background: var(--j3m-primary-300) !important;
903
- border-color: var(--j3m-primary-300) !important;
926
+ .glass-context [data-slot="menubar-item"]:hover,
927
+ .glass-context [data-slot="menubar-item"]:focus {
928
+ background: var(--j3m-primary-250) !important;
904
929
  color: #FFFFFF !important;
905
930
  }
906
931
 
@@ -980,7 +1005,7 @@ textarea,
980
1005
  .glass-context [role="menuitem"]:hover,
981
1006
  .glass-context [data-slot="dropdown-menu-item"]:focus,
982
1007
  .glass-context [role="menuitem"]:focus {
983
- background: var(--j3m-primary-300) !important;
1008
+ background: var(--j3m-primary-250) !important;
984
1009
  color: #FFFFFF !important;
985
1010
  }
986
1011
 
@@ -1003,7 +1028,7 @@ textarea,
1003
1028
  }
1004
1029
 
1005
1030
  .glass-context [data-slot="progress-indicator"] {
1006
- background: var(--j3m-primary-300) !important;
1031
+ background: var(--j3m-primary-250) !important;
1007
1032
  }
1008
1033
 
1009
1034
  /* --- ALERT --- */
@@ -1016,12 +1041,15 @@ textarea,
1016
1041
  .glass-context [data-slot="sheet-content"] {
1017
1042
  background: rgba(255, 255, 255, 0.95) !important;
1018
1043
  backdrop-filter: blur(16px) !important;
1044
+ padding-left: 1.5rem !important;
1045
+ padding-right: 1.5rem !important;
1019
1046
  }
1020
1047
 
1021
- .glass-context [data-slot="sheet-content"] input,
1022
- .glass-context [data-slot="sheet-content"] [data-slot="input"] {
1023
- margin-left: 0 !important;
1024
- margin-right: 0 !important;
1048
+ .glass-context [data-slot="sheet-header"],
1049
+ .glass-context [data-slot="sheet-footer"],
1050
+ .glass-context [data-slot="sheet-body"] {
1051
+ padding-left: 0 !important;
1052
+ padding-right: 0 !important;
1025
1053
  }
1026
1054
 
1027
1055
  /* --- DIALOG --- */
@@ -1031,9 +1059,18 @@ textarea,
1031
1059
  }
1032
1060
 
1033
1061
  /* --- COMMAND / SEARCH INPUT --- */
1062
+ /* Solid mode - icon color on selected */
1063
+ [data-slot="command-item"][data-selected=true] svg {
1064
+ color: var(--accent-foreground) !important;
1065
+ }
1066
+
1034
1067
  .glass-context [data-slot="command"] {
1035
1068
  background: transparent !important;
1069
+ background-color: transparent !important;
1036
1070
  border: none !important;
1071
+ box-shadow: none !important;
1072
+ outline: none !important;
1073
+ --tw-bg-opacity: 0 !important;
1037
1074
  }
1038
1075
 
1039
1076
  .glass-context [data-slot="command-input-wrapper"] {
@@ -1058,11 +1095,34 @@ textarea,
1058
1095
  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
1059
1096
  }
1060
1097
 
1098
+ .glass-context [data-slot="command-list"] {
1099
+ background: rgba(255, 255, 255, 0.7) !important;
1100
+ border: 1px solid rgba(0, 0, 0, 0.15) !important;
1101
+ border-radius: var(--j3m-radius-l) !important;
1102
+ margin-top: 0.25rem !important;
1103
+ }
1104
+
1105
+ .glass-context [data-slot="command-group"] {
1106
+ background: transparent !important;
1107
+ }
1108
+
1109
+ .glass-context [data-slot="command-item"] {
1110
+ color: rgba(0, 0, 0, 0.85) !important;
1111
+ }
1112
+
1061
1113
  .glass-context [data-slot="command-item"][data-selected=true] {
1062
- background: var(--j3m-primary-300) !important;
1114
+ background: var(--j3m-primary-250) !important;
1063
1115
  color: #FFFFFF !important;
1064
1116
  }
1065
1117
 
1118
+ .glass-context [data-slot="command-item"][data-selected=true] svg {
1119
+ color: #FFFFFF !important;
1120
+ }
1121
+
1122
+ .glass-context [data-slot="command-separator"] {
1123
+ background: rgba(0, 0, 0, 0.15) !important;
1124
+ }
1125
+
1066
1126
  /* --- SCROLL AREA --- */
1067
1127
  .glass-context [data-slot="scroll-area"] {
1068
1128
  background: rgba(255, 255, 255, 0.8) !important;
@@ -1070,15 +1130,19 @@ textarea,
1070
1130
  border-radius: var(--radius) !important;
1071
1131
  }
1072
1132
 
1133
+ .glass-context [data-slot="scroll-area-thumb"] {
1134
+ background: rgba(0, 0, 0, 0.5) !important;
1135
+ }
1136
+
1137
+ .glass-context [data-slot="scroll-area-thumb"]:hover {
1138
+ background: rgba(0, 0, 0, 0.7) !important;
1139
+ }
1140
+
1073
1141
  /* --- COLLAPSIBLE --- */
1142
+ /* Trigger button - transparent, no fill */
1074
1143
  .glass-context [data-slot="collapsible-trigger"] {
1075
- background: rgba(255, 255, 255, 0.8) !important;
1076
- border: 1px solid rgba(0, 0, 0, 0.15) !important;
1077
- border-radius: var(--radius) !important;
1078
- padding: 0.5rem 1rem !important;
1079
- width: 100% !important;
1080
- text-align: left !important;
1081
- color: rgba(0, 0, 0, 0.85) !important;
1144
+ background: transparent !important;
1145
+ border: none !important;
1082
1146
  }
1083
1147
 
1084
1148
  /* --- CARD (ensure frosted glass in glass context) --- */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@j3m-quantum/ui",
3
- "version": "0.7.12",
3
+ "version": "0.8.1",
4
4
  "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",