@class-kit/react 0.1.0

package/dist/styles/components/marquee.css

@@ -0,0 +1,281 @@
+@import "../base.css";
+
+.cc-marquee {
+  background: var(--cc-marquee-background);
+  border: 1px solid var(--cc-marquee-border-color);
+  border-radius: var(--cc-marquee-radius);
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  padding: var(--cc-marquee-padding);
+}
+
+.cc-marquee__content {
+  overflow: hidden;
+}
+
+.cc-marquee__track {
+  display: flex;
+  width: max-content;
+}
+
+.cc-marquee__group {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--cc-marquee-gap);
+  padding-right: var(--cc-marquee-gap);
+}
+
+.cc-marquee__item {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.cc-marquee__item[data-clickable="true"] {
+  cursor: pointer;
+}
+
+.cc-marquee__item[data-clickable="true"]:focus-visible {
+  border-radius: var(--cc-radius-sm);
+  outline: 2px solid var(--cc-marquee-focus-outline-color);
+  outline-offset: 3px;
+}
+
+.cc-marquee[data-animated="true"] .cc-marquee__track {
+  animation: cc-marquee-horizontal var(--cc-marquee-duration) linear infinite;
+  will-change: transform;
+}
+
+.cc-marquee[data-direction="vertical"] .cc-marquee__content {
+  max-height: var(--cc-marquee-vertical-height, 2.8em);
+}
+
+.cc-marquee[data-direction="vertical"] .cc-marquee__track {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cc-marquee[data-direction="vertical"] .cc-marquee__group {
+  align-items: stretch;
+  flex-direction: column;
+  padding-bottom: var(--cc-marquee-gap);
+  padding-right: 0;
+}
+
+.cc-marquee[data-direction="vertical"] .cc-marquee__item {
+  white-space: normal;
+}
+
+.cc-marquee[data-direction="vertical"][data-vertical-mode="step"]
+  .cc-marquee__content {
+  height: var(--cc-marquee-item-height);
+  max-height: var(--cc-marquee-item-height);
+}
+
+.cc-marquee[data-direction="vertical"][data-vertical-mode="step"]
+  .cc-marquee__group {
+  gap: 0;
+  padding-bottom: 0;
+}
+
+.cc-marquee__step-track {
+  animation: none !important;
+  display: block;
+  height: var(--cc-marquee-item-height);
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.cc-marquee[data-direction="vertical"][data-vertical-mode="step"]
+  .cc-marquee__step-item {
+  align-items: center;
+  display: flex;
+  height: var(--cc-marquee-item-height);
+  inset: 0;
+  min-height: var(--cc-marquee-item-height);
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.cc-marquee[data-direction="vertical"][data-animated="true"]
+  .cc-marquee__track {
+  animation-name: cc-marquee-vertical;
+}
+
+.cc-marquee[data-direction="vertical"][data-vertical-mode="step"]
+  .cc-marquee__step-item {
+  animation-duration: var(--cc-marquee-step-animation-duration);
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.22, 0.8, 0.28, 1);
+}
+
+.cc-marquee[data-step-animation="slide"]
+  .cc-marquee__step-item[data-phase="current"] {
+  animation-name: cc-marquee-step-slide-in;
+}
+
+.cc-marquee[data-step-animation="slide"]
+  .cc-marquee__step-item[data-phase="previous"] {
+  animation-name: cc-marquee-step-slide-out;
+}
+
+.cc-marquee[data-step-animation="slide"][data-reverse="true"]
+  .cc-marquee__step-item[data-phase="current"] {
+  animation-name: cc-marquee-step-slide-reverse-in;
+}
+
+.cc-marquee[data-step-animation="slide"][data-reverse="true"]
+  .cc-marquee__step-item[data-phase="previous"] {
+  animation-name: cc-marquee-step-slide-reverse-out;
+}
+
+.cc-marquee[data-step-animation="fade"]
+  .cc-marquee__step-item[data-phase="current"] {
+  animation-name: cc-marquee-step-fade-in;
+}
+
+.cc-marquee[data-step-animation="fade"]
+  .cc-marquee__step-item[data-phase="previous"] {
+  animation-name: cc-marquee-step-fade-out;
+}
+
+.cc-marquee[data-step-animation="flip"] .cc-marquee__step-track {
+  perspective: 480px;
+}
+
+.cc-marquee[data-step-animation="flip"]
+  .cc-marquee__step-item[data-phase="current"] {
+  animation-name: cc-marquee-step-flip-in;
+}
+
+.cc-marquee[data-step-animation="flip"]
+  .cc-marquee__step-item[data-phase="previous"] {
+  animation-name: cc-marquee-step-flip-out;
+}
+
+.cc-marquee[data-step-animation="none"] .cc-marquee__step-item {
+  animation: none;
+}
+
+.cc-marquee[data-reverse="true"][data-animated="true"] .cc-marquee__track {
+  animation-direction: reverse;
+}
+
+.cc-marquee[data-pause-on-hover="true"]:hover .cc-marquee__track {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.cc-marquee__track {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes cc-marquee-horizontal {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes cc-marquee-vertical {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes cc-marquee-step-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cc-marquee-step-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes cc-marquee-step-slide-reverse-in {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cc-marquee-step-slide-reverse-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes cc-marquee-step-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cc-marquee-step-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes cc-marquee-step-flip-in {
+  from {
+    opacity: 0;
+    transform: rotateX(-70deg) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0) translateY(0);
+  }
+}
+
+@keyframes cc-marquee-step-flip-out {
+  from {
+    opacity: 1;
+    transform: rotateX(0) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(70deg) translateY(-10px);
+  }
+}
+

package/dist/styles/components/masonry-virtual-list.css

@@ -0,0 +1,29 @@
+@import "../base.css";
+
+.cc-masonry-virtual-list {
+  --cc-masonry-virtual-list-height: 520px;
+  border-radius: var(--cc-masonry-virtual-list-radius);
+  color: var(--cc-masonry-virtual-list-text-color);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cc-masonry-virtual-list__viewport {
+  height: var(--cc-masonry-virtual-list-height);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative;
+  scrollbar-gutter: stable;
+}
+
+.cc-masonry-virtual-list__inner {
+  position: relative;
+}
+
+.cc-masonry-virtual-list__item {
+  left: 0;
+  position: absolute;
+  top: 0;
+  will-change: transform;
+}
+

package/dist/styles/components/modal.css

@@ -0,0 +1,164 @@
+@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;
+  position: fixed;
+  z-index: 1000;
+}
+
+.cc-modal[data-contained="true"] {
+  overflow: hidden;
+  position: absolute;
+}
+
+.cc-modal__overlay {
+  background: var(--cc-modal-overlay-background);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  padding: 0;
+  position: absolute;
+  transition: opacity var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 100%;
+}
+
+.cc-modal__panel {
+  background: var(--cc-modal-background);
+  border-radius: var(--cc-modal-radius);
+  box-shadow: var(--cc-modal-shadow);
+  color: var(--cc-modal-color);
+  left: 50%;
+  max-width: min(520px, calc(100vw - 32px));
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition:
+    opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 100%;
+}
+
+.cc-modal[data-state="enter"] .cc-modal__overlay {
+  opacity: var(--cc-modal-overlay-enter-opacity);
+}
+
+.cc-modal[data-state="exit"] .cc-modal__overlay {
+  opacity: var(--cc-modal-overlay-exit-opacity);
+}
+
+.cc-modal[data-state="enter"] .cc-modal__panel {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(var(--cc-modal-panel-active-scale));
+}
+
+.cc-modal[data-state="exit"] .cc-modal__panel {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(var(--cc-modal-panel-enter-scale));
+}
+
+.cc-modal[data-animation="fade"][data-state="exit"] .cc-modal__panel {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.cc-modal[data-animation="slide"][data-state="exit"] .cc-modal__panel {
+  transform: translate(-50%, -44%) scale(1);
+}
+
+.cc-modal[data-animation="none"] .cc-modal__overlay,
+.cc-modal[data-animation="none"] .cc-modal__panel {
+  transition-duration: 0ms;
+}
+
+.cc-modal__header {
+  align-items: center;
+  border-bottom: 1px solid var(--cc-modal-header-border-color);
+  background: var(--cc-modal-header-background);
+  color: var(--cc-modal-header-color);
+  display: flex;
+  font-weight: 700;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 16px 18px;
+}
+
+.cc-modal__close,
+.cc-popup__close {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--cc-radius-md);
+  color: var(--cc-form-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font: inherit;
+  font-size: 20px;
+  height: 30px;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+  width: 30px;
+}
+
+.cc-modal__close:hover,
+.cc-popup__close:hover {
+  background: var(--cc-form-color-surface-soft);
+  border-color: var(--cc-form-color-border);
+  color: var(--cc-form-color-text);
+}
+
+.cc-modal__close:focus-visible,
+.cc-popup__close:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+  outline: none;
+}
+
+.cc-modal__body {
+  padding: 18px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.cc-modal__overlay,
+  .cc-modal__panel,
+  .cc-popup__overlay,
+  .cc-popup__panel,
+  .cc-tooltip__content,
+  .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;
+  }
+}
+

package/dist/styles/components/multi-column-picker.css

@@ -0,0 +1,97 @@
+@import "../base.css";
+
+.cc-picker {
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-radius-lg);
+  color: var(--cc-form-color-text);
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+}
+
+.cc-picker__column {
+  overflow: hidden;
+  perspective: 900px;
+  position: relative;
+  z-index: 1;
+}
+
+.cc-picker__wheel {
+  transform-style: preserve-3d;
+  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
+}
+
+.cc-picker__option {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  height: var(--cc-picker-option-height);
+  padding: 0 14px;
+  text-align: center;
+  transform-origin: center center -72px;
+  transition:
+    color var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 100%;
+}
+
+.cc-picker__option[data-selected="true"] {
+  color: var(--cc-picker-active-color);
+  font-weight: 760;
+}
+
+.cc-picker__option:not([data-selected="true"]) {
+  opacity: 0.58;
+}
+
+.cc-picker__mask {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.cc-picker__mask--top {
+  background: linear-gradient(
+    180deg,
+    var(--cc-picker-mask-background),
+    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    transparent
+  );
+  height: calc(var(--cc-picker-option-height) * 2);
+  top: 0;
+}
+
+.cc-picker__mask--bottom {
+  background: linear-gradient(
+    0deg,
+    var(--cc-picker-mask-background),
+    color-mix(in srgb, var(--cc-picker-mask-background) 72%, transparent),
+    transparent
+  );
+  bottom: 0;
+  height: calc(var(--cc-picker-option-height) * 2);
+}
+
+.cc-picker__indicator {
+  border-bottom: 1px solid var(--cc-picker-indicator-border-color);
+  border-top: 1px solid var(--cc-picker-indicator-border-color);
+  height: var(--cc-picker-option-height);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: calc(
+    (var(--cc-picker-option-height) * (var(--cc-picker-visible-count) - 1)) / 2
+  );
+  z-index: 3;
+}
+