@class-kit/react 0.1.1 → 0.1.2

package/dist/styles/components/menu.css

@@ -0,0 +1,286 @@
+@import "../base.css";
+
+.cc-menu {
+  background: var(--cc-menu-background);
+  border: 1px solid var(--cc-menu-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-sizing: border-box;
+  box-shadow: var(--cc-menu-shadow);
+  color: var(--cc-menu-text-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--cc-form-font);
+  gap: 8px;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 8px;
+  transition:
+    width var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+  width: var(--cc-menu-width);
+}
+
+.cc-menu *,
+.cc-menu *::before,
+.cc-menu *::after {
+  box-sizing: border-box;
+}
+
+.cc-menu[data-collapsed="true"] {
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  width: var(--cc-menu-collapsed-width);
+}
+
+.cc-menu__collapse,
+.cc-menu__button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cc-radius-md);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  transition:
+    background-color var(--cc-animation-duration) var(--cc-animation-easing),
+    color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-menu__collapse {
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-menu-muted-color);
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  margin-left: auto;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu__collapse > .cc-icon {
+  height: 16px;
+  stroke-width: 2.2;
+  width: 16px;
+}
+
+.cc-menu__collapse:hover,
+.cc-menu__button:hover {
+  background: var(--cc-menu-item-hover-background);
+  color: var(--cc-menu-text-color);
+}
+
+.cc-menu__collapse:focus-visible,
+.cc-menu__button:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+}
+
+.cc-menu__list {
+  display: grid;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  scrollbar-width: thin;
+  width: 100%;
+}
+
+.cc-menu__list--child {
+  border-left: 1px solid
+    color-mix(in srgb, var(--cc-menu-border-color) 72%, transparent);
+  gap: 2px;
+  margin-left: calc(var(--cc-menu-icon-size) / 2);
+  margin-top: 0;
+  overflow: visible;
+  padding-left: 10px;
+}
+
+.cc-menu__transition {
+  width: 100%;
+}
+
+.cc-menu__transition-content {
+  min-height: 0;
+}
+
+.cc-menu__item {
+  min-width: 0;
+}
+
+.cc-menu__button {
+  gap: 10px;
+  color: var(--cc-menu-item-color);
+  min-height: var(--cc-menu-item-height);
+  padding: 0 10px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+
+.cc-menu__button::before {
+  background: var(--cc-menu-item-active-border-color);
+  border-radius: 999px;
+  content: "";
+  height: 18px;
+  left: 2px;
+  opacity: 0;
+  position: absolute;
+  transition: opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 3px;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button {
+  background: var(--cc-menu-item-active-background);
+  color: var(--cc-menu-item-active-color);
+  font-weight: 700;
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button::before {
+  opacity: 1;
+}
+
+.cc-menu__item[data-disabled="true"] {
+  opacity: var(--cc-form-disabled-opacity);
+  pointer-events: none;
+}
+
+.cc-menu__icon {
+  align-items: center;
+  border-radius: var(--cc-menu-icon-radius);
+  color: var(--cc-menu-item-icon-color);
+  display: inline-flex;
+  flex: 0 0 var(--cc-menu-icon-size);
+  font-size: 13px;
+  font-weight: 800;
+  height: var(--cc-menu-icon-size);
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu__icon :where(svg, img) {
+  border-radius: inherit;
+  display: block;
+  height: var(--cc-menu-icon-inner-size);
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+  width: var(--cc-menu-icon-inner-size);
+}
+
+.cc-menu__item[data-active="true"] > .cc-menu__button .cc-menu__icon {
+  color: var(--cc-menu-item-active-icon-color);
+}
+
+.cc-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-menu__arrow {
+  color: var(--cc-menu-item-muted-color);
+  flex: 0 0 14px;
+  font-size: 14px;
+  height: 14px;
+  transition: transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 14px;
+}
+
+.cc-menu__item[data-expanded="true"] > .cc-menu__button .cc-menu__arrow {
+  transform: rotate(180deg);
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button {
+  color: var(--cc-menu-item-muted-color);
+  font-size: 13px;
+  font-weight: 560;
+  min-height: 36px;
+}
+
+.cc-menu__item[data-level="2"] > .cc-menu__button,
+.cc-menu__item[data-level="3"] > .cc-menu__button {
+  color: color-mix(
+    in srgb,
+    var(--cc-menu-item-muted-color) 88%,
+    var(--cc-menu-item-color)
+  );
+  font-size: 12.5px;
+  min-height: 34px;
+}
+
+.cc-menu__item[data-level="1"] > .cc-menu__button::before,
+.cc-menu__item[data-level="2"] > .cc-menu__button::before,
+.cc-menu__item[data-level="3"] > .cc-menu__button::before {
+  height: 14px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__collapse {
+  margin-left: 0;
+}
+
+.cc-menu[data-collapsed="true"] > .cc-menu__list {
+  gap: 2px;
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__button {
+  height: var(--cc-menu-collapsed-item-size);
+  justify-content: center;
+  padding: 0;
+  width: var(--cc-menu-collapsed-item-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__icon {
+  flex-basis: var(--cc-menu-icon-size);
+  height: var(--cc-menu-icon-size);
+  width: var(--cc-menu-icon-size);
+}
+
+.cc-menu[data-collapsed="true"] .cc-menu__label,
+.cc-menu[data-collapsed="true"] .cc-menu__arrow {
+  display: none;
+}
+
+@media (max-width: 640px) {
+.cc-menu {
+    --cc-menu-width: min(100%, calc(100vw - 24px));
+    --cc-menu-collapsed-width: 56px;
+    --cc-menu-collapsed-item-size: 44px;
+    --cc-menu-icon-size: 24px;
+    --cc-menu-item-height: 38px;
+    border-radius: var(--cc-radius-md);
+    gap: 6px;
+    padding: 6px;
+  }
+
+.cc-menu__list {
+    gap: 3px;
+    max-height: min(70dvh, 520px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 2px;
+    scrollbar-width: thin;
+  }
+
+.cc-menu__button {
+    gap: 8px;
+    padding: 0 10px;
+  }
+
+.cc-menu__list--child {
+    margin-left: 12px;
+    padding-left: 8px;
+  }
+}
+

package/dist/styles/components/modal.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-modal {
   inset: 0;
   overflow: visible;
@@ -151,6 +128,8 @@
   .cc-popup__overlay,
   .cc-popup__panel,
   .cc-tooltip__content,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
   .cc-tilt-card,
   .cc-tilt-card__surface,
   .cc-tilt-card__glare,

package/dist/styles/components/number-input.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-form {
   display: grid;
   gap: var(--cc-form-gap);
@@ -66,6 +43,45 @@
     box-shadow 120ms ease;
 }
 
+.cc-field__control:-webkit-autofill,
+.cc-field__control:-webkit-autofill:hover,
+.cc-field__control:-webkit-autofill:focus,
+.cc-chat-textarea__control:-webkit-autofill,
+.cc-chat-textarea__control:-webkit-autofill:hover,
+.cc-chat-textarea__control:-webkit-autofill:focus,
+.cc-canvas-editor__card input:-webkit-autofill,
+.cc-canvas-editor__card input:-webkit-autofill:hover,
+.cc-canvas-editor__card input:-webkit-autofill:focus,
+.cc-canvas-editor__card textarea:-webkit-autofill,
+.cc-canvas-editor__card textarea:-webkit-autofill:hover,
+.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
+  caret-color: var(--cc-form-color-text);
+  transition:
+    background-color 9999s ease-out,
+    color 9999s ease-out;
+  -webkit-text-fill-color: var(--cc-form-color-text);
+}
+
+.cc-field__control::-ms-clear,
+.cc-field__control::-ms-reveal,
+.cc-field__control::-webkit-search-cancel-button,
+.cc-field__control::-webkit-search-decoration {
+  display: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.cc-field__control[type="number"]::-webkit-inner-spin-button,
+.cc-field__control[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+  -webkit-appearance: none;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }

package/dist/styles/components/orbital-sphere.css

@@ -0,0 +1,224 @@
+@import "../base.css";
+
+.cc-orbital-sphere {
+  color: var(--cc-form-color-text);
+  display: grid;
+  font-family: var(--cc-form-font);
+  height: var(--cc-orbital-sphere-size);
+  isolation: isolate;
+  place-items: center;
+  position: relative;
+  width: var(--cc-orbital-sphere-size);
+}
+
+.cc-orbital-sphere *,
+.cc-orbital-sphere *::before,
+.cc-orbital-sphere *::after {
+  box-sizing: border-box;
+}
+
+.cc-orbital-sphere__shell {
+  border: 1px solid var(--cc-orbital-sphere-border-color);
+  border-radius: var(--cc-orbital-sphere-radius);
+  box-shadow:
+    inset 22px 22px 46px var(--cc-orbital-sphere-shadow-color),
+    inset -18px -18px 42px rgba(255, 255, 255, 0.46),
+    0 22px 70px color-mix(in srgb, var(--cc-form-color-text) 12%, transparent);
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  transform: translateZ(0);
+}
+
+.cc-orbital-sphere__shell::before {
+  background:
+    radial-gradient(
+      circle at 30% 22%,
+      rgba(255, 255, 255, 0.42),
+      transparent 22%
+    ),
+    radial-gradient(
+      circle at 68% 76%,
+      var(--cc-orbital-sphere-shadow-color),
+      transparent 34%
+    );
+  border-radius: inherit;
+  content: "";
+  inset: 0;
+  opacity: 0.9;
+  position: absolute;
+}
+
+.cc-orbital-sphere__stage {
+  border-radius: inherit;
+  height: calc(100% - var(--cc-orbital-sphere-item-size));
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - var(--cc-orbital-sphere-item-size));
+}
+
+.cc-orbital-sphere__item {
+  --cc-orbital-item-travel-x: calc(
+    var(--cc-orbital-sphere-size) - (var(--cc-orbital-sphere-item-size) * 2)
+  );
+  --cc-orbital-item-travel-y: calc(
+    var(--cc-orbital-sphere-size) - (var(--cc-orbital-sphere-item-size) * 2)
+  );
+  align-items: center;
+  appearance: none;
+  background: var(--cc-orbital-sphere-item-background);
+  border: 1px solid var(--cc-orbital-sphere-item-border-color);
+  border-radius: var(--cc-radius-md);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.62),
+    0 12px 30px color-mix(in srgb, var(--cc-form-color-text) 14%, transparent);
+  color: var(--cc-form-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 760;
+  height: var(--cc-orbital-sphere-item-size);
+  justify-content: center;
+  left: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 10px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transform: translate3d(
+      calc(var(--cc-orbital-item-start-x) * var(--cc-orbital-item-travel-x)),
+      calc(var(--cc-orbital-item-start-y) * var(--cc-orbital-item-travel-y)),
+      0
+    )
+    scale(var(--cc-orbital-item-scale));
+  transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity 420ms var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: var(--cc-orbital-sphere-item-size);
+  z-index: calc(10 + var(--cc-orbital-index));
+}
+
+.cc-orbital-sphere[data-animated="true"] .cc-orbital-sphere__item {
+  animation: cc-orbital-item-drift var(--cc-orbital-item-duration) linear
+    var(--cc-orbital-item-delay) infinite;
+}
+
+.cc-orbital-sphere[data-animated="true"][data-overflow="true"]
+  .cc-orbital-sphere__item {
+  animation:
+    cc-orbital-item-drift var(--cc-orbital-item-duration) linear
+      var(--cc-orbital-item-delay) infinite,
+    cc-orbital-item-presence var(--cc-orbital-sphere-cycle-duration) ease-in-out
+      var(--cc-orbital-item-presence-delay) infinite;
+}
+
+.cc-orbital-sphere__item:hover,
+.cc-orbital-sphere__item:focus-visible {
+  border-color: var(--cc-form-color-accent);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 16px 38px color-mix(in srgb, var(--cc-form-color-accent) 20%, transparent);
+  outline: none;
+}
+
+.cc-orbital-sphere[data-disabled="true"] .cc-orbital-sphere__item {
+  cursor: default;
+  opacity: var(--cc-form-disabled-opacity);
+  pointer-events: none;
+}
+
+.cc-orbital-sphere__item-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.cc-modal__overlay,
+  .cc-modal__panel,
+  .cc-popup__overlay,
+  .cc-popup__panel,
+  .cc-tooltip__content,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
+  .cc-tilt-card,
+  .cc-tilt-card__surface,
+  .cc-tilt-card__glare,
+  .cc-design-effect,
+  .cc-typewriter-text__cursor,
+  .cc-gradient-text,
+  .cc-toast {
+    transition-duration: 1ms;
+  }
+
+.cc-gradient-text,
+  .cc-design-effect,
+  .cc-design-effect__overlay,
+  .cc-design-effect::after,
+  .cc-orbital-sphere__stage,
+  .cc-orbital-sphere__item,
+  .cc-typewriter-text__cursor {
+    animation: none;
+  }
+}
+
+@keyframes cc-orbital-item-drift {
+  0%,
+  100% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-start-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-start-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  28% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-mid-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-mid-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  54% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-end-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-end-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+
+  78% {
+    transform: translate3d(
+        calc(var(--cc-orbital-item-alt-x) * var(--cc-orbital-item-travel-x)),
+        calc(var(--cc-orbital-item-alt-y) * var(--cc-orbital-item-travel-y)),
+        0
+      )
+      scale(var(--cc-orbital-item-scale));
+  }
+}
+
+@keyframes cc-orbital-item-presence {
+  0%,
+  58%,
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  68%,
+  84% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+

package/dist/styles/components/password-input.css

@@ -1,28 +1,5 @@
 @import "../base.css";
 
-.cc-field__control,
-.cc-color-picker__panel,
-.cc-verification-code__input,
-.cc-select__menu,
-.cc-virtual-select__menu,
-.cc-date-picker__panel,
-.cc-date-range-picker__panel,
-.cc-calendar,
-.cc-canvas-image,
-.cc-canvas-editor,
-.cc-canvas-editor__toolbar,
-.cc-canvas-editor__card,
-.cc-tilt-card__surface,
-.cc-table,
-.cc-upload,
-.cc-modal__panel,
-.cc-popup__panel,
-.cc-tooltip__content,
-.cc-toast {
-  backdrop-filter: var(--cc-theme-backdrop-filter);
-  -webkit-backdrop-filter: var(--cc-theme-backdrop-filter);
-}
-
 .cc-form {
   display: grid;
   gap: var(--cc-form-gap);
@@ -66,6 +43,45 @@
     box-shadow 120ms ease;
 }
 
+.cc-field__control:-webkit-autofill,
+.cc-field__control:-webkit-autofill:hover,
+.cc-field__control:-webkit-autofill:focus,
+.cc-chat-textarea__control:-webkit-autofill,
+.cc-chat-textarea__control:-webkit-autofill:hover,
+.cc-chat-textarea__control:-webkit-autofill:focus,
+.cc-canvas-editor__card input:-webkit-autofill,
+.cc-canvas-editor__card input:-webkit-autofill:hover,
+.cc-canvas-editor__card input:-webkit-autofill:focus,
+.cc-canvas-editor__card textarea:-webkit-autofill,
+.cc-canvas-editor__card textarea:-webkit-autofill:hover,
+.cc-canvas-editor__card textarea:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px var(--cc-form-control-background) inset;
+  caret-color: var(--cc-form-color-text);
+  transition:
+    background-color 9999s ease-out,
+    color 9999s ease-out;
+  -webkit-text-fill-color: var(--cc-form-color-text);
+}
+
+.cc-field__control::-ms-clear,
+.cc-field__control::-ms-reveal,
+.cc-field__control::-webkit-search-cancel-button,
+.cc-field__control::-webkit-search-decoration {
+  display: none;
+}
+
+.cc-field__control[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.cc-field__control[type="number"]::-webkit-inner-spin-button,
+.cc-field__control[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+  -webkit-appearance: none;
+}
+
 .cc-field__control--clearable {
   padding-right: 38px;
 }

package/dist/styles/components/popconfirm.css

@@ -21,6 +21,11 @@
   position: relative;
 }
 
+.cc-popconfirm--portal {
+  position: fixed;
+  z-index: 1200;
+}
+
 .cc-popconfirm__panel {
   background: var(--cc-form-color-surface);
   border: 1px solid var(--cc-form-color-border);