@class-kit/react 0.1.0

package/dist/styles/components/slide-captcha.css

@@ -0,0 +1,420 @@
+@import "../base.css";
+
+.cc-slide-captcha {
+  max-width: min(100%, var(--cc-slide-captcha-width, 320px));
+}
+
+.cc-slide-captcha__card {
+  border: 1px solid var(--cc-slide-captcha-border-color);
+  border-radius: var(--cc-slide-captcha-radius);
+  height: var(--cc-slide-captcha-height, 260px);
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  width: var(--cc-slide-captcha-width, 320px);
+}
+
+.cc-slide-captcha__puzzle {
+  height: 100%;
+  inset: 0;
+  position: absolute;
+  transform-origin: center bottom;
+  width: 100%;
+  z-index: 1;
+}
+
+.cc-slide-captcha__image,
+.cc-slide-captcha__piece {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  user-select: none;
+  width: 100%;
+}
+
+.cc-slide-captcha__image {
+  pointer-events: none;
+}
+
+.cc-slide-captcha__gap {
+  background:
+    linear-gradient(135deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.28)),
+    rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: var(--cc-radius-md);
+  box-shadow:
+    inset 0 2px 8px rgba(0, 0, 0, 0.28),
+    0 0 0 999px rgba(0, 0, 0, 0.04);
+  height: var(--cc-slide-captcha-piece-height, 52px);
+  left: var(--cc-slide-captcha-target-x, 188px);
+  position: absolute;
+  top: var(
+    --cc-slide-captcha-target-y,
+    var(--cc-slide-captcha-piece-top, 98px)
+  );
+  width: var(--cc-slide-captcha-piece-width, 52px);
+  z-index: 2;
+}
+
+.cc-slide-captcha__piece {
+  border-radius: var(--cc-radius-md);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
+  cursor: grab;
+  height: var(--cc-slide-captcha-piece-height, 52px);
+  left: 0;
+  object-position: left top;
+  position: absolute;
+  top: var(--cc-slide-captcha-piece-top, 98px);
+  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.22, 1);
+  width: var(--cc-slide-captcha-piece-width, 52px);
+  z-index: 3;
+}
+
+.cc-slide-captcha__result {
+  align-items: center;
+  background:
+    radial-gradient(
+      circle at 50% 48%,
+      color-mix(
+        in srgb,
+        var(--cc-slide-captcha-success-color) 18%,
+        transparent
+      ),
+      transparent 46%
+    ),
+    color-mix(in srgb, var(--cc-form-color-surface) 70%, transparent);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transform: translate3d(0, -42px, 0) scale(0.78);
+  transform-origin: center;
+  z-index: 5;
+}
+
+.cc-slide-captcha__result-icon {
+  align-items: center;
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--cc-slide-captcha-success-color) 18%, white),
+    var(--cc-slide-captcha-success-color)
+  );
+  border-radius: var(--cc-radius-pill);
+  box-shadow:
+    0 18px 38px
+      color-mix(in srgb, var(--cc-slide-captcha-success-color) 34%, transparent),
+    0 0 0 10px
+      color-mix(in srgb, var(--cc-slide-captcha-success-color) 12%, transparent);
+  color: var(--cc-form-color-accent-contrast);
+  display: inline-flex;
+  font: 900 42px/1 var(--cc-font-family);
+  height: 92px;
+  justify-content: center;
+  position: relative;
+  width: 92px;
+}
+
+.cc-slide-captcha__result-icon::before,
+.cc-slide-captcha__result-icon::after {
+  border: 2px solid
+    color-mix(in srgb, var(--cc-slide-captcha-success-color) 46%, transparent);
+  border-radius: inherit;
+  content: "";
+  inset: -10px;
+  opacity: 0;
+  position: absolute;
+}
+
+.cc-slide-captcha__result-icon::after {
+  inset: -18px;
+}
+
+.cc-slide-captcha__result-bolt {
+  display: inline-block;
+  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.72));
+  transform-origin: center;
+}
+
+.cc-slide-captcha[data-status="dragging"] .cc-slide-captcha__piece {
+  cursor: grabbing;
+  transition-duration: 0ms;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__puzzle {
+  animation: cc-slide-captcha-puzzle-exit 620ms cubic-bezier(0.16, 1, 0.3, 1)
+    forwards;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__result {
+  animation: cc-slide-captcha-result-enter 680ms 260ms
+    cubic-bezier(0.18, 1.24, 0.36, 1) forwards;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__result-icon {
+  animation: cc-slide-captcha-result-glow 1200ms 760ms ease-in-out infinite;
+}
+
+.cc-slide-captcha[data-status="success"]
+  .cc-slide-captcha__result-icon::before {
+  animation: cc-slide-captcha-result-ring 1400ms 520ms ease-out infinite;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__result-icon::after {
+  animation: cc-slide-captcha-result-ring 1400ms 740ms ease-out infinite;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__result-bolt {
+  animation: cc-slide-captcha-bolt-pop 920ms 560ms ease-in-out infinite;
+}
+
+.cc-slide-captcha[data-status="failed"] .cc-slide-captcha__piece,
+.cc-slide-captcha[data-status="failed"] .cc-slide-captcha__thumb {
+  animation: cc-slide-captcha-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+.cc-slide-captcha__track {
+  align-items: center;
+  background: var(--cc-slide-captcha-track-background);
+  border: 1px solid var(--cc-slide-captcha-border-color);
+  border-radius: var(--cc-radius-pill);
+  box-sizing: border-box;
+  color: var(--cc-form-color-muted);
+  display: flex;
+  height: 42px;
+  margin-top: 12px;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0 12px 0 48px;
+  position: relative;
+  width: var(--cc-slide-captcha-width, 320px);
+}
+
+.cc-slide-captcha__track-fill {
+  background: var(--cc-slide-captcha-track-fill);
+  inset: 0;
+  position: absolute;
+  transform-origin: left center;
+  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.22, 1);
+  z-index: 1;
+}
+
+.cc-slide-captcha__track[data-dragging="true"] .cc-slide-captcha__track-fill {
+  transition-duration: 0ms;
+}
+
+.cc-slide-captcha__thumb {
+  align-items: center;
+  appearance: none;
+  background: var(--cc-slide-captcha-thumb-background);
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  box-shadow: 0 8px 18px
+    color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent);
+  color: var(--cc-slide-captcha-thumb-color);
+  cursor: grab;
+  display: inline-flex;
+  font: 900 24px/1 var(--cc-font-family);
+  height: 34px;
+  justify-content: center;
+  left: 4px;
+  padding: 0;
+  position: absolute;
+  top: 3px;
+  transition:
+    transform 180ms cubic-bezier(0.2, 0.8, 0.22, 1),
+    opacity 180ms ease;
+  width: 34px;
+  z-index: 3;
+}
+
+.cc-slide-captcha__track[data-dragging="true"] .cc-slide-captcha__thumb {
+  cursor: grabbing;
+  transition-duration: 0ms;
+}
+
+.cc-slide-captcha__thumb:disabled {
+  cursor: not-allowed;
+  opacity: 0.78;
+}
+
+.cc-slide-captcha__track-text {
+  font-size: 13px;
+  font-weight: 700;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.cc-slide-captcha__reset {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--cc-slide-captcha-error-color);
+  cursor: pointer;
+  font: 800 12px/1 var(--cc-font-family);
+  margin-left: auto;
+  padding: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.cc-slide-captcha[data-status="success"] .cc-slide-captcha__track {
+  border-color: color-mix(
+    in srgb,
+    var(--cc-slide-captcha-success-color) 48%,
+    var(--cc-slide-captcha-border-color)
+  );
+  color: var(--cc-slide-captcha-success-color);
+}
+
+.cc-slide-captcha[data-status="failed"] .cc-slide-captcha__track {
+  border-color: color-mix(
+    in srgb,
+    var(--cc-slide-captcha-error-color) 52%,
+    var(--cc-slide-captcha-border-color)
+  );
+  color: var(--cc-slide-captcha-error-color);
+}
+
+.cc-slide-captcha[data-disabled="true"],
+.cc-slide-captcha[data-readonly="true"] {
+  opacity: var(--cc-form-disabled-opacity);
+}
+
+.cc-slide-captcha[data-disabled="true"] .cc-slide-captcha__piece,
+.cc-slide-captcha[data-readonly="true"] .cc-slide-captcha__piece {
+  cursor: not-allowed;
+}
+
+@keyframes cc-slide-captcha-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+
+  18% {
+    translate: -8px 0;
+  }
+
+  36% {
+    translate: 8px 0;
+  }
+
+  54% {
+    translate: -6px 0;
+  }
+
+  72% {
+    translate: 6px 0;
+  }
+}
+
+@keyframes cc-slide-captcha-puzzle-exit {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  34% {
+    opacity: 1;
+    transform: translate3d(0, -16px, 0) scale(1.015);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 112%, 0) scale(0.92);
+  }
+}
+
+@keyframes cc-slide-captcha-result-enter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -44px, 0) scale(0.76);
+  }
+
+  62% {
+    opacity: 1;
+    transform: translate3d(0, 10px, 0) scale(1.08);
+  }
+
+  82% {
+    opacity: 1;
+    transform: translate3d(0, -3px, 0) scale(0.98);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cc-slide-captcha-result-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 18px 38px
+        color-mix(
+          in srgb,
+          var(--cc-slide-captcha-success-color) 34%,
+          transparent
+        ),
+      0 0 0 10px
+        color-mix(
+          in srgb,
+          var(--cc-slide-captcha-success-color) 12%,
+          transparent
+        );
+  }
+
+  46% {
+    box-shadow:
+      0 20px 44px
+        color-mix(
+          in srgb,
+          var(--cc-slide-captcha-success-color) 46%,
+          transparent
+        ),
+      0 0 0 14px
+        color-mix(
+          in srgb,
+          var(--cc-slide-captcha-success-color) 18%,
+          transparent
+        );
+  }
+}
+
+@keyframes cc-slide-captcha-result-ring {
+  0% {
+    opacity: 0.72;
+    transform: scale(0.84);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.28);
+  }
+}
+
+@keyframes cc-slide-captcha-bolt-pop {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.72));
+    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+  }
+
+  42% {
+    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.92));
+    transform: translate3d(0, -2px, 0) scale(1.12) rotate(-6deg);
+  }
+
+  58% {
+    transform: translate3d(0, 1px, 0) scale(0.98) rotate(4deg);
+  }
+}
+

package/dist/styles/components/swiper.css

@@ -0,0 +1,199 @@
+@import "../base.css";
+
+.cc-swiper {
+  border-radius: var(--cc-swiper-radius);
+  overflow: hidden;
+  position: relative;
+  touch-action: pan-y;
+}
+
+.cc-swiper[data-direction="vertical"] {
+  touch-action: pan-x;
+}
+
+.cc-swiper[data-effect="cinema"] {
+  overflow: hidden;
+}
+
+.cc-swiper__viewport {
+  overflow: hidden;
+  cursor: grab;
+  touch-action: pan-y;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__viewport {
+  height: var(--cc-swiper-viewport-height, 320px);
+  touch-action: pan-x;
+}
+
+.cc-swiper__viewport:active {
+  cursor: grabbing;
+}
+
+.cc-swiper__track {
+  display: flex;
+  transition: transform 260ms var(--cc-animation-easing);
+  will-change: transform;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__track {
+  flex-direction: column;
+  height: max-content;
+}
+
+.cc-swiper__track[data-dragging="true"] {
+  transition: none;
+}
+
+.cc-swiper__track[data-initializing="true"] {
+  transition: none;
+}
+
+.cc-swiper__slide {
+  box-sizing: border-box;
+  flex: 0 0 var(--cc-swiper-slide-size, 100%);
+  margin-right: var(--cc-swiper-space-between, 0px);
+  min-width: 0;
+  opacity: 1;
+  transform: scale(1);
+  transform-origin: center;
+  transition:
+    filter 260ms var(--cc-animation-easing),
+    opacity 260ms var(--cc-animation-easing),
+    transform 320ms var(--cc-animation-easing);
+  will-change: opacity, transform;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__slide {
+  margin-bottom: var(--cc-swiper-space-between, 0px);
+  margin-right: 0;
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__viewport {
+  overflow: hidden;
+  padding: 10px 0;
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__slide {
+  opacity: var(--cc-swiper-slide-opacity, var(--cc-swiper-inactive-opacity));
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__viewport {
+  perspective: 1200px;
+  perspective-origin: center;
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__track {
+  transform-style: preserve-3d;
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__slide {
+  backface-visibility: hidden;
+  cursor: pointer;
+  filter: saturate(var(--cc-swiper-slide-saturate, 1));
+  transform: translate3d(
+      var(--cc-swiper-slide-shift-x, 0),
+      0,
+      var(--cc-swiper-slide-depth, 0)
+    )
+    rotateY(var(--cc-swiper-slide-rotate-y, 0deg))
+    scale(var(--cc-swiper-slide-scale, 1));
+  transform-origin: center center;
+  transform-style: preserve-3d;
+}
+
+.cc-swiper[data-direction="vertical"][data-effect="cinema"] .cc-swiper__slide {
+  transform: translate3d(
+      0,
+      var(--cc-swiper-slide-shift-y, 0),
+      var(--cc-swiper-slide-depth, 0)
+    )
+    rotateX(var(--cc-swiper-slide-rotate-x, 0deg))
+    scale(var(--cc-swiper-slide-scale, 1));
+}
+
+.cc-swiper[data-effect="cinema"] .cc-swiper__slide[data-active="true"] {
+  cursor: default;
+  filter: saturate(1);
+  opacity: 1;
+}
+
+.cc-swiper__arrow {
+  align-items: center;
+  background: var(--cc-swiper-arrow-background);
+  border: 1px solid
+    color-mix(in srgb, var(--cc-form-color-border) 70%, transparent);
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-form-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 28px;
+  height: 36px;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  z-index: 2;
+}
+
+.cc-swiper__arrow--prev {
+  left: 10px;
+}
+
+.cc-swiper__arrow--next {
+  right: 10px;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__arrow {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__arrow--prev {
+  top: 10px;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__arrow--next {
+  bottom: 10px;
+  top: auto;
+}
+
+.cc-swiper__dots {
+  bottom: 10px;
+  display: flex;
+  gap: 6px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.cc-swiper[data-direction="vertical"] .cc-swiper__dots {
+  bottom: auto;
+  flex-direction: column;
+  left: auto;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.cc-swiper__dot {
+  background: color-mix(in srgb, var(--cc-swiper-dot-color) 26%, white);
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  cursor: pointer;
+  height: 7px;
+  padding: 0;
+  transition:
+    width var(--cc-animation-duration) var(--cc-animation-easing),
+    background var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 7px;
+}
+
+.cc-swiper__dot[data-active="true"] {
+  background: var(--cc-swiper-dot-color);
+  width: 18px;
+}
+