@j3m-quantum/ui 0.7.1 → 0.7.2
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/styles/index.css +122 -0
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -822,3 +822,125 @@ textarea,
|
|
|
822
822
|
.animate-spin {
|
|
823
823
|
animation: spin 1s linear infinite;
|
|
824
824
|
}
|
|
825
|
+
|
|
826
|
+
/* ========================================
|
|
827
|
+
DATA-STATE ANIMATION VARIANTS
|
|
828
|
+
For Radix UI components (Dialog, Select, Popover, etc.)
|
|
829
|
+
These match Tailwind's data-[state=*] variants
|
|
830
|
+
======================================== */
|
|
831
|
+
|
|
832
|
+
/* Open state - apply enter animation */
|
|
833
|
+
[data-state="open"].animate-in,
|
|
834
|
+
[data-state="open"] .animate-in {
|
|
835
|
+
animation-name: enter;
|
|
836
|
+
animation-duration: 150ms;
|
|
837
|
+
animation-timing-function: ease-out;
|
|
838
|
+
animation-fill-mode: forwards;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
/* Closed state - apply exit animation */
|
|
842
|
+
[data-state="closed"].animate-out,
|
|
843
|
+
[data-state="closed"] .animate-out {
|
|
844
|
+
animation-name: exit;
|
|
845
|
+
animation-duration: 150ms;
|
|
846
|
+
animation-timing-function: ease-in;
|
|
847
|
+
animation-fill-mode: forwards;
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
/* Fade in/out with data-state */
|
|
851
|
+
[data-state="open"].fade-in-0,
|
|
852
|
+
[data-state="open"] .fade-in-0 { --tw-enter-opacity: 0; }
|
|
853
|
+
|
|
854
|
+
[data-state="closed"].fade-out-0,
|
|
855
|
+
[data-state="closed"] .fade-out-0 { --tw-exit-opacity: 0; }
|
|
856
|
+
|
|
857
|
+
/* Zoom in/out with data-state */
|
|
858
|
+
[data-state="open"].zoom-in-95,
|
|
859
|
+
[data-state="open"] .zoom-in-95 { --tw-enter-scale: 0.95; }
|
|
860
|
+
|
|
861
|
+
[data-state="open"].zoom-in-90,
|
|
862
|
+
[data-state="open"] .zoom-in-90 { --tw-enter-scale: 0.90; }
|
|
863
|
+
|
|
864
|
+
[data-state="closed"].zoom-out-95,
|
|
865
|
+
[data-state="closed"] .zoom-out-95 { --tw-exit-scale: 0.95; }
|
|
866
|
+
|
|
867
|
+
[data-state="closed"].zoom-out-90,
|
|
868
|
+
[data-state="closed"] .zoom-out-90 { --tw-exit-scale: 0.90; }
|
|
869
|
+
|
|
870
|
+
/* Slide in from directions with data-state */
|
|
871
|
+
[data-state="open"].slide-in-from-top-2,
|
|
872
|
+
[data-state="open"] .slide-in-from-top-2,
|
|
873
|
+
[data-side="bottom"].slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
|
|
874
|
+
|
|
875
|
+
[data-state="open"].slide-in-from-bottom-2,
|
|
876
|
+
[data-state="open"] .slide-in-from-bottom-2,
|
|
877
|
+
[data-side="top"].slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
|
|
878
|
+
|
|
879
|
+
[data-state="open"].slide-in-from-left-2,
|
|
880
|
+
[data-state="open"] .slide-in-from-left-2,
|
|
881
|
+
[data-side="right"].slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
|
|
882
|
+
|
|
883
|
+
[data-state="open"].slide-in-from-right-2,
|
|
884
|
+
[data-state="open"] .slide-in-from-right-2,
|
|
885
|
+
[data-side="left"].slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
|
|
886
|
+
|
|
887
|
+
/* Sheet/Drawer slide animations */
|
|
888
|
+
[data-state="open"].slide-in-from-right,
|
|
889
|
+
[data-state="open"] .slide-in-from-right { --tw-enter-translate-x: 100%; }
|
|
890
|
+
|
|
891
|
+
[data-state="open"].slide-in-from-left,
|
|
892
|
+
[data-state="open"] .slide-in-from-left { --tw-enter-translate-x: -100%; }
|
|
893
|
+
|
|
894
|
+
[data-state="open"].slide-in-from-top,
|
|
895
|
+
[data-state="open"] .slide-in-from-top { --tw-enter-translate-y: -100%; }
|
|
896
|
+
|
|
897
|
+
[data-state="open"].slide-in-from-bottom,
|
|
898
|
+
[data-state="open"] .slide-in-from-bottom { --tw-enter-translate-y: 100%; }
|
|
899
|
+
|
|
900
|
+
[data-state="closed"].slide-out-to-right,
|
|
901
|
+
[data-state="closed"] .slide-out-to-right { --tw-exit-translate-x: 100%; }
|
|
902
|
+
|
|
903
|
+
[data-state="closed"].slide-out-to-left,
|
|
904
|
+
[data-state="closed"] .slide-out-to-left { --tw-exit-translate-x: -100%; }
|
|
905
|
+
|
|
906
|
+
[data-state="closed"].slide-out-to-top,
|
|
907
|
+
[data-state="closed"] .slide-out-to-top { --tw-exit-translate-y: -100%; }
|
|
908
|
+
|
|
909
|
+
[data-state="closed"].slide-out-to-bottom,
|
|
910
|
+
[data-state="closed"] .slide-out-to-bottom { --tw-exit-translate-y: 100%; }
|
|
911
|
+
|
|
912
|
+
/* Navigation menu motion variants */
|
|
913
|
+
[data-motion^="from-"].animate-in,
|
|
914
|
+
[data-motion="from-start"].slide-in-from-left-52 { --tw-enter-translate-x: -13rem; }
|
|
915
|
+
[data-motion="from-end"].slide-in-from-right-52 { --tw-enter-translate-x: 13rem; }
|
|
916
|
+
|
|
917
|
+
[data-motion^="to-"].animate-out,
|
|
918
|
+
[data-motion="to-start"].slide-out-to-left-52 { --tw-exit-translate-x: -13rem; }
|
|
919
|
+
[data-motion="to-end"].slide-out-to-right-52 { --tw-exit-translate-x: 13rem; }
|
|
920
|
+
|
|
921
|
+
/* Data-side variants (for popovers, dropdowns, tooltips) */
|
|
922
|
+
[data-side="bottom"] {
|
|
923
|
+
--tw-enter-translate-y: -0.5rem;
|
|
924
|
+
}
|
|
925
|
+
[data-side="top"] {
|
|
926
|
+
--tw-enter-translate-y: 0.5rem;
|
|
927
|
+
}
|
|
928
|
+
[data-side="left"] {
|
|
929
|
+
--tw-enter-translate-x: 0.5rem;
|
|
930
|
+
}
|
|
931
|
+
[data-side="right"] {
|
|
932
|
+
--tw-enter-translate-x: -0.5rem;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
/* Visible/hidden states (for NavigationMenu indicator) */
|
|
936
|
+
[data-state="visible"].animate-in,
|
|
937
|
+
[data-state="visible"] .animate-in {
|
|
938
|
+
animation-name: enter;
|
|
939
|
+
animation-duration: 150ms;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
[data-state="hidden"].animate-out,
|
|
943
|
+
[data-state="hidden"] .animate-out {
|
|
944
|
+
animation-name: exit;
|
|
945
|
+
animation-duration: 150ms;
|
|
946
|
+
}
|