@cck-ui/core 0.11.0 → 0.12.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 (60) hide show
  1. package/cjs/components/alert/alert.cjs +493 -0
  2. package/cjs/components/alert/alert.cjs.map +1 -0
  3. package/cjs/components/alert/alert.module.cjs +16 -0
  4. package/cjs/components/alert/alert.module.cjs.map +1 -0
  5. package/cjs/components/alert/alert.utils.cjs +21 -0
  6. package/cjs/components/alert/alert.utils.cjs.map +1 -0
  7. package/cjs/components/alert/index.cjs +14 -0
  8. package/cjs/components/alert/index.cjs.map +1 -0
  9. package/cjs/components/aspect-ratio/aspect-ratio.cjs +1 -1
  10. package/cjs/components/aspect-ratio/aspect-ratio.cjs.map +1 -1
  11. package/cjs/components/button/button.cjs +1 -1
  12. package/cjs/components/close-button/close-button.cjs +434 -0
  13. package/cjs/components/close-button/close-button.cjs.map +1 -0
  14. package/cjs/components/close-button/close-button.module.cjs +10 -0
  15. package/cjs/components/close-button/close-button.module.cjs.map +1 -0
  16. package/cjs/components/close-button/close-button.utils.cjs +13 -0
  17. package/cjs/components/close-button/close-button.utils.cjs.map +1 -0
  18. package/cjs/components/close-button/close-icon.cjs +56 -0
  19. package/cjs/components/close-button/close-icon.cjs.map +1 -0
  20. package/cjs/components/close-button/index.cjs +14 -0
  21. package/cjs/components/close-button/index.cjs.map +1 -0
  22. package/cjs/index.cjs +57 -50
  23. package/cjs/index.cjs.map +1 -1
  24. package/esm/components/alert/alert.mjs +493 -0
  25. package/esm/components/alert/alert.mjs.map +1 -0
  26. package/esm/components/alert/alert.module.mjs +16 -0
  27. package/esm/components/alert/alert.module.mjs.map +1 -0
  28. package/esm/components/alert/alert.utils.mjs +22 -0
  29. package/esm/components/alert/alert.utils.mjs.map +1 -0
  30. package/esm/components/alert/index.mjs +11 -0
  31. package/esm/components/alert/index.mjs.map +1 -0
  32. package/esm/components/aspect-ratio/aspect-ratio.mjs +1 -1
  33. package/esm/components/aspect-ratio/aspect-ratio.mjs.map +1 -1
  34. package/esm/components/button/button.mjs +1 -1
  35. package/esm/components/close-button/close-button.mjs +434 -0
  36. package/esm/components/close-button/close-button.mjs.map +1 -0
  37. package/esm/components/close-button/close-button.module.mjs +10 -0
  38. package/esm/components/close-button/close-button.module.mjs.map +1 -0
  39. package/esm/components/close-button/close-button.utils.mjs +14 -0
  40. package/esm/components/close-button/close-button.utils.mjs.map +1 -0
  41. package/esm/components/close-button/close-icon.mjs +56 -0
  42. package/esm/components/close-button/close-icon.mjs.map +1 -0
  43. package/esm/components/close-button/index.mjs +11 -0
  44. package/esm/components/close-button/index.mjs.map +1 -0
  45. package/esm/index.mjs +7 -2
  46. package/esm/index.mjs.map +1 -1
  47. package/lib/components/alert/alert.types.d.ts +42 -0
  48. package/lib/components/alert/alert.utils.d.ts +7 -0
  49. package/lib/components/alert/index.d.ts +6 -0
  50. package/lib/components/close-button/close-button.types.d.ts +39 -0
  51. package/lib/components/close-button/close-button.utils.d.ts +8 -0
  52. package/lib/components/close-button/index.d.ts +6 -0
  53. package/lib/components/index.d.ts +2 -0
  54. package/package.json +1 -1
  55. package/styles/alert.css +82 -0
  56. package/styles/alert.layer.css +83 -0
  57. package/styles/close-button.css +58 -0
  58. package/styles/close-button.layer.css +59 -0
  59. package/styles.css +142 -0
  60. package/styles.layer.css +142 -0
package/styles.layer.css CHANGED
@@ -882,6 +882,89 @@ fieldset:disabled .c-active:active {
882
882
  justify-content: center;
883
883
  }
884
884
 
885
+ .m_efb192b3 {
886
+ --alert-radius: var(--c-radius-default);
887
+ --alert-bg: var(--c-primary-color-light);
888
+ --alert-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
889
+ --alert-color: var(--c-primary-color-light-color);
890
+
891
+ padding: var(--c-spacing-md) var(--c-spacing-md);
892
+ border-radius: var(--alert-radius);
893
+ position: relative;
894
+ overflow: hidden;
895
+ background-color: var(--alert-bg);
896
+ border: var(--alert-bd);
897
+ color: var(--alert-color);
898
+ }
899
+
900
+ .m_7636d522 {
901
+ display: flex;
902
+ }
903
+
904
+ .m_efaa4b73 {
905
+ flex: 1;
906
+ display: flex;
907
+ flex-direction: column;
908
+ gap: var(--c-spacing-xs);
909
+ }
910
+
911
+ .m_69a4aa7 {
912
+ display: flex;
913
+ align-items: center;
914
+ justify-content: space-between;
915
+ font-size: var(--c-font-size-sm);
916
+ font-weight: var(--c-font-weight-bold);
917
+ }
918
+
919
+ .m_69a4aa7:where([data-with-close-button]) {
920
+ padding-inline-end: var(--c-spacing-md);
921
+ }
922
+
923
+ .m_625a743 {
924
+ display: block;
925
+ overflow: hidden;
926
+ text-overflow: ellipsis;
927
+ }
928
+
929
+ .m_efad4e4a {
930
+ line-height: 1;
931
+ width: calc(1.25rem * var(--c-scale));
932
+ height: calc(1.25rem * var(--c-scale));
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: flex-start;
936
+ margin-inline-end: var(--c-spacing-md);
937
+ margin-top: calc(0.0625rem * var(--c-scale));
938
+ }
939
+
940
+ .m_50085096 {
941
+ text-overflow: ellipsis;
942
+ overflow: hidden;
943
+ font-size: var(--c-font-size-sm);
944
+ }
945
+
946
+ :where([data-c-color-scheme='light']) .m_50085096 {
947
+ color: var(--c-color-black);
948
+ }
949
+
950
+ :where([data-c-color-scheme='dark']) .m_50085096 {
951
+ color: var(--c-color-white);
952
+ }
953
+
954
+ .m_50085096:where([data-variant='filled']) {
955
+ color: var(--alert-color);
956
+ }
957
+
958
+ .m_50085096:where([data-variant='white']) {
959
+ color: var(--c-color-black);
960
+ }
961
+
962
+ .m_91af3d78 {
963
+ width: calc(1.25rem * var(--c-scale));
964
+ height: calc(1.25rem * var(--c-scale));
965
+ color: var(--alert-color);
966
+ }
967
+
885
968
  .m_31f351f9 {
886
969
  --ar-ratio: 1;
887
970
  max-width: 100%;
@@ -906,6 +989,65 @@ fieldset:disabled .c-active:active {
906
989
  display: inline-flex;
907
990
  }
908
991
 
992
+ .m_504ae648 {
993
+ --cb-size-xs: calc(1.125rem * var(--c-scale));
994
+ --cb-size-sm: calc(1.375rem * var(--c-scale));
995
+ --cb-size-md: calc(1.75rem * var(--c-scale));
996
+ --cb-size-lg: calc(2.125rem * var(--c-scale));
997
+ --cb-size-xl: calc(2.75rem * var(--c-scale));
998
+
999
+ --cb-size: var(--cb-size-md);
1000
+ --cb-icon-size: 70%;
1001
+ --cb-radius: var(--c-radius-default);
1002
+
1003
+ line-height: 1;
1004
+ display: inline-flex;
1005
+ align-items: center;
1006
+ justify-content: center;
1007
+ position: relative;
1008
+ user-select: none;
1009
+
1010
+ width: var(--cb-size);
1011
+ height: var(--cb-size);
1012
+ min-width: var(--cb-size);
1013
+ min-height: var(--cb-size);
1014
+ border-radius: var(--cb-radius);
1015
+ }
1016
+
1017
+ :where([data-c-color-scheme='light']) .m_504ae648 {
1018
+ color: var(--c-color-gray-7);
1019
+ }
1020
+
1021
+ :where([data-c-color-scheme='dark']) .m_504ae648 {
1022
+ color: var(--c-color-dark-1);
1023
+ }
1024
+
1025
+ .m_504ae648[data-disabled],
1026
+ .m_504ae648:disabled {
1027
+ cursor: not-allowed;
1028
+ opacity: 0.6;
1029
+ }
1030
+
1031
+ @media (hover: hover) {
1032
+ :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
1033
+ background-color: var(--c-color-gray-0);
1034
+ }
1035
+
1036
+ :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):hover {
1037
+ background-color: var(--c-color-dark-6);
1038
+ }
1039
+ }
1040
+
1041
+ @media (hover: none) {
1042
+ :where([data-c-color-scheme='light']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
1043
+ background-color: var(--c-color-gray-0);
1044
+ }
1045
+
1046
+ :where([data-c-color-scheme='dark']) .m_ef2dc695:where(:not([data-disabled], :disabled)):active {
1047
+ background-color: var(--c-color-dark-6);
1048
+ }
1049
+ }
1050
+
909
1051
  .m_b03efeae {
910
1052
  --container-size-xs: calc(33.75rem * var(--c-scale));
911
1053
  --container-size-sm: calc(45rem * var(--c-scale));