@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/components/textarea.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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/tilt-card.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-tilt-card {
   color: var(--cc-tilt-card-color);
   display: block;
@@ -101,6 +78,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/toast.css

@@ -1,33 +1,18 @@
 @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-toast-viewport {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
-  display: grid;
-  gap: 10px;
+  --cc-toast-enter-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
+  --cc-toast-stack-gap: 10px;
+  --cc-toast-max-height: 160px;
+  display: flex;
+  flex-direction: column;
   max-width: min(360px, calc(100vw - 32px));
   position: fixed;
   right: 16px;
@@ -39,24 +24,26 @@
   --cc-toast-enter-transform: translateY(
       calc(-1 * var(--cc-toast-slide-distance))
     )
-    scale(1);
+    scale(0.98);
   left: 50%;
   right: auto;
   transform: translateX(-50%);
 }
 
 .cc-toast-viewport--top-left {
-  --cc-toast-enter-transform: translateX(
+  --cc-toast-enter-transform: translateY(
       calc(-1 * var(--cc-toast-slide-distance))
     )
-    scale(1);
+    scale(0.98);
   left: 16px;
   right: auto;
 }
 
 .cc-toast-viewport--top-right {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
+  --cc-toast-enter-transform: translateY(
+      calc(-1 * var(--cc-toast-slide-distance))
+    )
+    scale(0.98);
   right: 16px;
 }
 
@@ -69,24 +56,28 @@
 
 .cc-toast-viewport--bottom {
   --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
-    scale(1);
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   left: 50%;
   right: auto;
   transform: translateX(-50%);
 }
 
 .cc-toast-viewport--bottom-left {
-  --cc-toast-enter-transform: translateX(
-      calc(-1 * var(--cc-toast-slide-distance))
-    )
-    scale(1);
+  --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   left: 16px;
   right: auto;
 }
 
 .cc-toast-viewport--bottom-right {
-  --cc-toast-enter-transform: translateX(var(--cc-toast-slide-distance))
-    scale(1);
+  --cc-toast-enter-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
+  --cc-toast-exit-transform: translateY(var(--cc-toast-slide-distance))
+    scale(0.98);
   right: 16px;
 }
 
@@ -99,6 +90,8 @@
 }
 
 .cc-toast {
+  --cc-toast-stack-offset: 0px;
+  --cc-toast-stack-index: 0;
   align-items: start;
   background: var(--cc-toast-background);
   border: 1px solid var(--cc-toast-border-color);
@@ -110,39 +103,84 @@
   font-family: var(--cc-form-font);
   gap: 4px 10px;
   grid-template-columns: 1fr auto;
+  max-height: var(--cc-toast-max-height);
+  margin: 0;
   opacity: 0;
+  overflow: hidden;
   padding: 12px;
-  transform: var(--cc-toast-enter-transform);
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-enter-transform);
   transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    filter var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  will-change: auto;
+}
+
+.cc-toast[data-motion="true"] {
+  transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    filter var(--cc-animation-duration) var(--cc-animation-easing),
+    margin var(--cc-animation-duration) var(--cc-animation-easing),
+    max-height var(--cc-animation-duration) var(--cc-animation-easing),
     opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    padding var(--cc-animation-duration) var(--cc-animation-easing),
     transform var(--cc-animation-duration) var(--cc-animation-easing);
+  will-change: transform, opacity, filter;
+}
+
+.cc-toast + .cc-toast {
+  margin-top: var(--cc-toast-stack-gap);
 }
 
 .cc-toast[data-state="enter"] {
+  filter: blur(0);
   opacity: 1;
-  transform: translate3d(0, 0, 0) scale(var(--cc-toast-scale-active));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-active));
+}
+
+.cc-toast[data-state="prepare"] {
+  filter: blur(2px);
+  opacity: 0;
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-enter-transform);
 }
 
 .cc-toast[data-state="exit"] {
+  filter: blur(2px);
+  margin-top: 0;
+  max-height: 0;
   opacity: 0;
-  transform: var(--cc-toast-enter-transform);
+  padding-bottom: 0;
+  padding-top: 0;
+  pointer-events: none;
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    var(--cc-toast-exit-transform);
+}
+
+.cc-toast[data-state="exit"] + .cc-toast {
+  margin-top: 0;
 }
 
 .cc-toast[data-animation="fade"],
 .cc-toast[data-animation="fade"][data-state="exit"] {
-  transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0) scale(1);
 }
 
 .cc-toast[data-animation="scale"] {
-  transform: scale(var(--cc-toast-scale-enter));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-enter));
 }
 
 .cc-toast[data-animation="scale"][data-state="enter"] {
-  transform: scale(var(--cc-toast-scale-active));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-active));
 }
 
 .cc-toast[data-animation="scale"][data-state="exit"] {
-  transform: scale(var(--cc-toast-scale-enter));
+  transform: translate3d(0, var(--cc-toast-stack-offset), 0)
+    scale(var(--cc-toast-scale-enter));
 }
 
 .cc-toast[data-animation="none"] {
@@ -175,14 +213,35 @@
 }
 
 .cc-toast__close {
+  align-items: center;
   background: transparent;
-  border: 0;
+  border: 1px solid transparent;
+  border-radius: var(--cc-radius-md);
   color: var(--cc-form-color-muted);
   cursor: pointer;
+  display: inline-flex;
   font: inherit;
   grid-column: 2;
   grid-row: 1 / span 2;
-  padding: 0 2px;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+  width: 28px;
+}
+
+.cc-toast__close:hover {
+  background: var(--cc-form-color-surface-soft);
+  border-color: var(--cc-form-color-border);
+  color: var(--cc-form-color-text);
+}
+
+.cc-toast__close:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+  outline: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -191,6 +250,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/tooltip.css

@@ -1,33 +1,16 @@
 @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-tooltip {
   display: inline-flex;
   position: relative;
 }
 
+.cc-tooltip--portal {
+  pointer-events: none;
+  position: fixed;
+  z-index: 1200;
+}
+
 .cc-tooltip__content {
   background: var(--cc-tooltip-background);
   border-radius: var(--cc-tooltip-radius);
@@ -124,6 +107,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/typewriter-text.css

@@ -50,6 +50,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,
@@ -64,6 +66,8 @@
   .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;
   }

package/dist/styles/components/upload.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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/verification-code.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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/virtual-select.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-field {
   display: grid;
   gap: 6px;
@@ -59,6 +36,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/virtual-table.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-choice-group {
   border: 0;
   margin: 0;