@j3m-quantum/ui 0.7.11 → 0.7.12
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.cjs +51 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -11
- package/dist/index.d.ts +1 -11
- package/dist/index.js +51 -107
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +107 -75
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -162,11 +162,11 @@
|
|
|
162
162
|
--j3m-glass-light-20: rgba(255, 255, 255, 0.2);
|
|
163
163
|
--j3m-glass-light-40: rgba(255, 255, 255, 0.4);
|
|
164
164
|
--j3m-glass-light-50: rgba(255, 255, 255, 0.5);
|
|
165
|
-
--j3m-glass-light-70: rgba(255, 255, 255, 0.
|
|
165
|
+
--j3m-glass-light-70: rgba(255, 255, 255, 0.8);
|
|
166
166
|
--j3m-glass-light-80: rgba(255, 255, 255, 0.8);
|
|
167
167
|
--j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
|
|
168
168
|
--j3m-glass-light: rgba(255, 255, 255, 0.5);
|
|
169
|
-
--j3m-glass-light-hover: rgba(255, 255, 255, 0.
|
|
169
|
+
--j3m-glass-light-hover: rgba(255, 255, 255, 0.8);
|
|
170
170
|
--j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
|
|
171
171
|
--j3m-glass-dark: rgba(51, 51, 51, 0.6);
|
|
172
172
|
--j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
|
|
@@ -452,10 +452,11 @@
|
|
|
452
452
|
.glass-context {
|
|
453
453
|
--background: rgba(255, 255, 255, 0.8);
|
|
454
454
|
--input: rgba(255, 255, 255, 0.3);
|
|
455
|
-
--card: rgba(255, 255, 255, 0.
|
|
455
|
+
--card: rgba(255, 255, 255, 0.8);
|
|
456
456
|
--popover: rgba(255, 255, 255, 0.85);
|
|
457
457
|
--muted: rgba(255, 255, 255, 0.6);
|
|
458
|
-
--
|
|
458
|
+
--muted-foreground: rgba(0, 0, 0, 0.55);
|
|
459
|
+
--secondary: rgba(255, 255, 255, 0.8);
|
|
459
460
|
--border: rgba(255, 255, 255, 0.3);
|
|
460
461
|
}
|
|
461
462
|
|
|
@@ -543,26 +544,9 @@ textarea,
|
|
|
543
544
|
border-radius: var(--j3m-radius-full) !important;
|
|
544
545
|
}
|
|
545
546
|
|
|
546
|
-
/* OTP Input Group - pill with squared middle */
|
|
547
|
-
[data-slot="input-otp-group"] {
|
|
548
|
-
background: var(--background);
|
|
549
|
-
border: 1px solid var(--input);
|
|
550
|
-
border-radius: var(--j3m-radius-full) !important;
|
|
551
|
-
overflow: hidden;
|
|
552
|
-
}
|
|
553
|
-
[data-slot="input-otp-slot"] {
|
|
554
|
-
border-radius: 0 !important;
|
|
555
|
-
border: none !important;
|
|
556
|
-
border-right: 1px solid var(--input) !important;
|
|
557
|
-
box-shadow: none !important;
|
|
558
|
-
}
|
|
559
|
-
[data-slot="input-otp-slot"]:last-child {
|
|
560
|
-
border-right: none !important;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
547
|
/* Native Select - pill shape */
|
|
564
548
|
[data-slot="native-select"] {
|
|
565
|
-
border-radius:
|
|
549
|
+
border-radius: 9999px !important;
|
|
566
550
|
}
|
|
567
551
|
|
|
568
552
|
/* ========================================
|
|
@@ -646,7 +630,7 @@ textarea,
|
|
|
646
630
|
.glass-context [data-slot="input"],
|
|
647
631
|
.glass-context textarea,
|
|
648
632
|
.glass-context [data-slot="textarea"] {
|
|
649
|
-
background: rgba(255, 255, 255, 0.
|
|
633
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
650
634
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
651
635
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
652
636
|
}
|
|
@@ -672,7 +656,7 @@ textarea,
|
|
|
672
656
|
|
|
673
657
|
/* --- SELECT TRIGGER --- */
|
|
674
658
|
.glass-context [data-slot="select-trigger"] {
|
|
675
|
-
background: rgba(255, 255, 255, 0.
|
|
659
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
676
660
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
677
661
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
678
662
|
}
|
|
@@ -691,8 +675,9 @@ textarea,
|
|
|
691
675
|
/* --- NATIVE SELECT --- */
|
|
692
676
|
.glass-context select,
|
|
693
677
|
.glass-context [data-slot="native-select"] {
|
|
694
|
-
background: rgba(255, 255, 255, 0.
|
|
678
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
695
679
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
680
|
+
border-radius: 9999px !important;
|
|
696
681
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
697
682
|
}
|
|
698
683
|
|
|
@@ -702,19 +687,6 @@ textarea,
|
|
|
702
687
|
--tw-ring-color: rgba(243, 108, 33, 0.3);
|
|
703
688
|
}
|
|
704
689
|
|
|
705
|
-
/* --- INPUT OTP --- */
|
|
706
|
-
.glass-context [data-slot="input-otp-slot"],
|
|
707
|
-
.glass-context [data-input-otp-slot] {
|
|
708
|
-
background: rgba(255, 255, 255, 0.7) !important;
|
|
709
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
710
|
-
color: rgba(0, 0, 0, 0.85) !important;
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
.glass-context [data-slot="input-otp-slot"][data-active=true],
|
|
714
|
-
.glass-context [data-input-otp-slot][data-active=true] {
|
|
715
|
-
border-color: var(--j3m-primary-300) !important;
|
|
716
|
-
}
|
|
717
|
-
|
|
718
690
|
/* --- BUTTONS --- */
|
|
719
691
|
/* Default button hover in glass */
|
|
720
692
|
.glass-context [data-slot="button"][data-variant="default"]:hover,
|
|
@@ -726,30 +698,30 @@ textarea,
|
|
|
726
698
|
.glass-context [data-slot="button"][data-variant="outline"],
|
|
727
699
|
.glass-context [data-slot="button"][data-variant="secondary"],
|
|
728
700
|
.glass-context [data-slot="button"][data-variant="ghost"] {
|
|
729
|
-
background: rgba(255, 255, 255, 0.
|
|
701
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
730
702
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
731
703
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
732
704
|
}
|
|
733
705
|
|
|
734
|
-
/* Button hover: orange
|
|
706
|
+
/* Button hover: default orange with white text */
|
|
735
707
|
.glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
736
708
|
.glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
737
709
|
.glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
738
|
-
background: var(--j3m-primary-
|
|
739
|
-
border-color: var(--j3m-primary-
|
|
710
|
+
background: var(--j3m-primary-250) !important;
|
|
711
|
+
border-color: var(--j3m-primary-250) !important;
|
|
740
712
|
color: #FFFFFF !important;
|
|
741
713
|
}
|
|
742
714
|
|
|
743
715
|
/* --- RADIO BUTTONS --- */
|
|
744
716
|
.glass-context [data-slot="radio-group-item"],
|
|
745
717
|
.glass-context [role="radio"] {
|
|
746
|
-
background: rgba(255, 255, 255, 0.
|
|
718
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
747
719
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
748
720
|
}
|
|
749
721
|
|
|
750
722
|
.glass-context [data-slot="radio-group-item"][data-state="checked"],
|
|
751
723
|
.glass-context [role="radio"][data-state="checked"] {
|
|
752
|
-
background: rgba(255, 255, 255, 0.
|
|
724
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
753
725
|
border-color: var(--j3m-primary-300) !important;
|
|
754
726
|
}
|
|
755
727
|
|
|
@@ -761,7 +733,7 @@ textarea,
|
|
|
761
733
|
/* --- CHECKBOX --- */
|
|
762
734
|
.glass-context [data-slot="checkbox"],
|
|
763
735
|
.glass-context [role="checkbox"] {
|
|
764
|
-
background: rgba(255, 255, 255, 0.
|
|
736
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
765
737
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
766
738
|
}
|
|
767
739
|
|
|
@@ -780,14 +752,19 @@ textarea,
|
|
|
780
752
|
|
|
781
753
|
.glass-context [data-slot="switch"][data-state="checked"],
|
|
782
754
|
.glass-context [role="switch"][data-state="checked"] {
|
|
783
|
-
background: var(--j3m-primary-
|
|
784
|
-
border-color: var(--j3m-primary-
|
|
755
|
+
background: var(--j3m-primary-250) !important;
|
|
756
|
+
border-color: var(--j3m-primary-250) !important;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/* Switch thumb - always white */
|
|
760
|
+
.glass-context [data-slot="switch-thumb"] {
|
|
761
|
+
background: #FFFFFF !important;
|
|
785
762
|
}
|
|
786
763
|
|
|
787
764
|
/* --- DATA TABLE --- */
|
|
788
765
|
.glass-context table,
|
|
789
766
|
.glass-context [data-slot="table"] {
|
|
790
|
-
background: rgba(255, 255, 255, 0.
|
|
767
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
791
768
|
}
|
|
792
769
|
|
|
793
770
|
.glass-context thead,
|
|
@@ -795,16 +772,43 @@ textarea,
|
|
|
795
772
|
background: rgba(255, 255, 255, 0.5) !important;
|
|
796
773
|
}
|
|
797
774
|
|
|
775
|
+
.glass-context tfoot,
|
|
776
|
+
.glass-context [data-slot="table-footer"] {
|
|
777
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
.glass-context caption,
|
|
781
|
+
.glass-context [data-slot="table-caption"] {
|
|
782
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
783
|
+
margin-top: 0 !important;
|
|
784
|
+
padding: 0.75rem 0.5rem !important;
|
|
785
|
+
border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
786
|
+
}
|
|
787
|
+
|
|
798
788
|
.glass-context th,
|
|
799
789
|
.glass-context td {
|
|
800
|
-
border-color: rgba(0, 0, 0, 0.
|
|
790
|
+
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
801
791
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
802
792
|
}
|
|
803
793
|
|
|
794
|
+
.glass-context tr {
|
|
795
|
+
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
/* --- SEPARATOR --- */
|
|
799
|
+
.glass-context [data-slot="separator"],
|
|
800
|
+
.glass-context hr {
|
|
801
|
+
background-color: rgba(0, 0, 0, 0.15) !important;
|
|
802
|
+
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
/* --- SKELETON --- */
|
|
806
|
+
/* Keep default orange pulsating animation */
|
|
807
|
+
|
|
804
808
|
/* --- BADGE (outline) --- */
|
|
805
809
|
.glass-context [data-slot="badge"][data-variant="outline"],
|
|
806
810
|
.glass-context .badge-outline {
|
|
807
|
-
background: rgba(255, 255, 255, 0.
|
|
811
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
808
812
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
809
813
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
810
814
|
}
|
|
@@ -812,48 +816,76 @@ textarea,
|
|
|
812
816
|
/* --- CALENDAR --- */
|
|
813
817
|
.glass-context [data-slot="calendar"],
|
|
814
818
|
.glass-context .rdp {
|
|
815
|
-
background: rgba(255, 255, 255, 0.
|
|
819
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
816
820
|
}
|
|
817
821
|
|
|
822
|
+
/* Remove inner white boxes around date grid */
|
|
823
|
+
.glass-context .rdp-months,
|
|
824
|
+
.glass-context .rdp-month,
|
|
825
|
+
.glass-context .rdp-table,
|
|
826
|
+
.glass-context .rdp-tbody,
|
|
827
|
+
.glass-context .rdp-row,
|
|
828
|
+
.glass-context .rdp-cell {
|
|
829
|
+
background: transparent !important;
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/* Day cells - only circular */
|
|
818
833
|
.glass-context .rdp-day,
|
|
819
834
|
.glass-context [data-slot="calendar-day"] {
|
|
820
835
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
836
|
+
background: transparent !important;
|
|
837
|
+
border-radius: 9999px !important;
|
|
838
|
+
}
|
|
839
|
+
|
|
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;
|
|
821
846
|
}
|
|
822
847
|
|
|
823
848
|
.glass-context .rdp-day:hover,
|
|
849
|
+
.glass-context .rdp-day button:hover,
|
|
850
|
+
.glass-context .rdp-button:hover,
|
|
824
851
|
.glass-context [data-slot="calendar-day"]:hover {
|
|
825
|
-
background:
|
|
852
|
+
background: var(--j3m-primary-250) !important;
|
|
853
|
+
color: #FFFFFF !important;
|
|
854
|
+
border-radius: 9999px !important;
|
|
826
855
|
}
|
|
827
856
|
|
|
857
|
+
/* Selected date - orange with white text */
|
|
828
858
|
.glass-context .rdp-day_selected,
|
|
859
|
+
.glass-context .rdp-day_selected button,
|
|
829
860
|
.glass-context [data-slot="calendar-day"][data-selected] {
|
|
830
|
-
background: var(--j3m-primary-
|
|
861
|
+
background: var(--j3m-primary-250) !important;
|
|
831
862
|
color: #FFFFFF !important;
|
|
863
|
+
border-radius: 9999px !important;
|
|
832
864
|
}
|
|
833
865
|
|
|
866
|
+
/* Today indicator */
|
|
834
867
|
.glass-context .rdp-day_today,
|
|
835
868
|
.glass-context [data-slot="calendar-day"][data-today] {
|
|
836
|
-
border-color: var(--j3m-primary-
|
|
869
|
+
border-color: var(--j3m-primary-250) !important;
|
|
837
870
|
}
|
|
838
871
|
|
|
839
|
-
/* Calendar navigation buttons */
|
|
872
|
+
/* Calendar navigation buttons - transparent, no background */
|
|
840
873
|
.glass-context .rdp-nav_button,
|
|
841
|
-
.glass-context [data-slot="calendar"] button {
|
|
842
|
-
background:
|
|
843
|
-
border
|
|
874
|
+
.glass-context [data-slot="calendar"] button:not(.rdp-button) {
|
|
875
|
+
background: transparent !important;
|
|
876
|
+
border: none !important;
|
|
877
|
+
border-radius: 9999px !important;
|
|
844
878
|
}
|
|
845
879
|
|
|
846
880
|
.glass-context .rdp-nav_button:hover,
|
|
847
|
-
.glass-context [data-slot="calendar"] button:hover {
|
|
848
|
-
background:
|
|
849
|
-
border-color: var(--j3m-primary-300) !important;
|
|
850
|
-
color: #FFFFFF !important;
|
|
881
|
+
.glass-context [data-slot="calendar"] button:not(.rdp-button):hover {
|
|
882
|
+
background: rgba(0, 0, 0, 0.1) !important;
|
|
851
883
|
}
|
|
852
884
|
|
|
853
885
|
/* --- COLLAPSIBLE --- */
|
|
854
886
|
.glass-context [data-slot="collapsible-content"] > *,
|
|
855
887
|
.glass-context [data-state="open"] > [data-slot="collapsible-content"] > * {
|
|
856
|
-
background: rgba(255, 255, 255, 0.
|
|
888
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
857
889
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
858
890
|
}
|
|
859
891
|
|
|
@@ -861,7 +893,7 @@ textarea,
|
|
|
861
893
|
.glass-context [data-slot="navigation-menu-trigger"],
|
|
862
894
|
.glass-context [data-slot="navigation-menu-link"] {
|
|
863
895
|
border-radius: 9999px !important;
|
|
864
|
-
background: rgba(255, 255, 255, 0.
|
|
896
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
865
897
|
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
866
898
|
}
|
|
867
899
|
|
|
@@ -901,33 +933,33 @@ textarea,
|
|
|
901
933
|
}
|
|
902
934
|
|
|
903
935
|
.glass-context [data-slot="slider-range"] {
|
|
904
|
-
background: var(--j3m-primary-
|
|
936
|
+
background: var(--j3m-primary-250) !important;
|
|
905
937
|
}
|
|
906
938
|
|
|
907
939
|
.glass-context [data-slot="slider-thumb"] {
|
|
908
940
|
background: #FFFFFF !important;
|
|
909
|
-
border-color: var(--j3m-primary-
|
|
941
|
+
border-color: var(--j3m-primary-250) !important;
|
|
910
942
|
}
|
|
911
943
|
|
|
912
944
|
/* --- TOGGLE / TOGGLE GROUP --- */
|
|
913
945
|
.glass-context [data-slot="toggle"],
|
|
914
946
|
.glass-context [data-slot="toggle-group-item"] {
|
|
915
|
-
background: rgba(255, 255, 255, 0.
|
|
947
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
916
948
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
917
949
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
918
950
|
}
|
|
919
951
|
|
|
920
952
|
.glass-context [data-slot="toggle"][data-state="on"],
|
|
921
953
|
.glass-context [data-slot="toggle-group-item"][data-state="on"] {
|
|
922
|
-
background: var(--j3m-primary-
|
|
923
|
-
border-color: var(--j3m-primary-
|
|
954
|
+
background: var(--j3m-primary-250) !important;
|
|
955
|
+
border-color: var(--j3m-primary-250) !important;
|
|
924
956
|
color: #FFFFFF !important;
|
|
925
957
|
}
|
|
926
958
|
|
|
927
959
|
.glass-context [data-slot="toggle"]:hover,
|
|
928
960
|
.glass-context [data-slot="toggle-group-item"]:hover {
|
|
929
|
-
background: var(--j3m-primary-
|
|
930
|
-
border-color: var(--j3m-primary-
|
|
961
|
+
background: var(--j3m-primary-250) !important;
|
|
962
|
+
border-color: var(--j3m-primary-250) !important;
|
|
931
963
|
color: #FFFFFF !important;
|
|
932
964
|
}
|
|
933
965
|
|
|
@@ -976,7 +1008,7 @@ textarea,
|
|
|
976
1008
|
|
|
977
1009
|
/* --- ALERT --- */
|
|
978
1010
|
.glass-context [data-slot="alert"] {
|
|
979
|
-
background: rgba(255, 255, 255, 0.
|
|
1011
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
980
1012
|
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
981
1013
|
}
|
|
982
1014
|
|
|
@@ -1005,7 +1037,7 @@ textarea,
|
|
|
1005
1037
|
}
|
|
1006
1038
|
|
|
1007
1039
|
.glass-context [data-slot="command-input-wrapper"] {
|
|
1008
|
-
background: rgba(255, 255, 255, 0.
|
|
1040
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
1009
1041
|
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1010
1042
|
border-radius: var(--j3m-radius-full) !important;
|
|
1011
1043
|
padding-left: 1rem !important;
|
|
@@ -1033,14 +1065,14 @@ textarea,
|
|
|
1033
1065
|
|
|
1034
1066
|
/* --- SCROLL AREA --- */
|
|
1035
1067
|
.glass-context [data-slot="scroll-area"] {
|
|
1036
|
-
background: rgba(255, 255, 255, 0.
|
|
1068
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
1037
1069
|
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1038
1070
|
border-radius: var(--radius) !important;
|
|
1039
1071
|
}
|
|
1040
1072
|
|
|
1041
1073
|
/* --- COLLAPSIBLE --- */
|
|
1042
1074
|
.glass-context [data-slot="collapsible-trigger"] {
|
|
1043
|
-
background: rgba(255, 255, 255, 0.
|
|
1075
|
+
background: rgba(255, 255, 255, 0.8) !important;
|
|
1044
1076
|
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1045
1077
|
border-radius: var(--radius) !important;
|
|
1046
1078
|
padding: 0.5rem 1rem !important;
|