@class-kit/react 0.1.0

package/dist/styles/components/design-effect.css

@@ -0,0 +1,285 @@
+@import "../base.css";
+
+.cc-design-effect {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid var(--cc-design-effect-border-color);
+  border-radius: var(--cc-design-effect-radius);
+  background: var(--cc-design-effect-background);
+  box-shadow: var(--cc-design-effect-shadow);
+  color: var(--cc-form-color-text);
+  transition:
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    box-shadow var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-design-effect[data-interactive="true"]:hover {
+  border-color: color-mix(
+    in srgb,
+    var(--cc-design-effect-color-1) 58%,
+    var(--cc-form-color-border)
+  );
+  box-shadow: 0 22px 64px
+    color-mix(in srgb, var(--cc-design-effect-color-1) 26%, transparent);
+  transform: translateY(-1px);
+}
+
+.cc-design-effect[data-disabled="true"] {
+  opacity: 0.58;
+  pointer-events: none;
+}
+
+.cc-design-effect__content {
+  position: relative;
+  z-index: 1;
+}
+
+.cc-design-effect__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.cc-design-effect--glass,
+.cc-design-effect--frosted {
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, #fff 72%, transparent),
+      color-mix(in srgb, var(--cc-design-effect-color-2) 10%, transparent)
+    ),
+    color-mix(in srgb, var(--cc-form-color-surface) 68%, transparent);
+  backdrop-filter: blur(calc(10px + 10px * var(--cc-design-effect-alpha)))
+    saturate(1.24);
+}
+
+.cc-design-effect--glass .cc-design-effect__overlay,
+.cc-design-effect--frosted .cc-design-effect__overlay {
+  background:
+    radial-gradient(
+      circle at 18% 12%,
+      color-mix(in srgb, #fff 54%, transparent),
+      transparent 26%
+    ),
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, #fff 28%, transparent),
+      transparent 42%
+    );
+  opacity: var(--cc-design-effect-alpha);
+}
+
+.cc-design-effect--gradient {
+  background: linear-gradient(
+    135deg,
+    var(--cc-design-effect-color-1),
+    var(--cc-design-effect-color-2),
+    var(--cc-design-effect-color-3)
+  );
+  color: var(--cc-color-accent-contrast);
+}
+
+.cc-design-effect--gradient .cc-design-effect__overlay,
+.cc-design-effect--aurora .cc-design-effect__overlay,
+.cc-design-effect--mesh .cc-design-effect__overlay {
+  background:
+    radial-gradient(
+      circle at 18% 22%,
+      color-mix(in srgb, var(--cc-design-effect-color-1) 64%, transparent),
+      transparent 28%
+    ),
+    radial-gradient(
+      circle at 82% 18%,
+      color-mix(in srgb, var(--cc-design-effect-color-2) 58%, transparent),
+      transparent 30%
+    ),
+    radial-gradient(
+      circle at 48% 86%,
+      color-mix(in srgb, var(--cc-design-effect-color-3) 54%, transparent),
+      transparent 34%
+    );
+  filter: blur(8px);
+  opacity: var(--cc-design-effect-alpha);
+}
+
+.cc-design-effect--aurora,
+.cc-design-effect--mesh {
+  background: color-mix(
+    in srgb,
+    var(--cc-form-color-surface) 78%,
+    var(--cc-design-effect-color-1)
+  );
+}
+
+.cc-design-effect--spotlight .cc-design-effect__overlay {
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      color-mix(in srgb, var(--cc-design-effect-color-1) 42%, transparent),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, #fff 16%, transparent),
+      transparent
+    );
+  opacity: var(--cc-design-effect-alpha);
+}
+
+.cc-design-effect--border-glow {
+  border-color: color-mix(
+    in srgb,
+    var(--cc-design-effect-color-1) 72%,
+    var(--cc-form-color-border)
+  );
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, #fff 42%, transparent),
+    0 0 0 1px
+      color-mix(in srgb, var(--cc-design-effect-color-2) 26%, transparent),
+    0 18px 50px
+      color-mix(in srgb, var(--cc-design-effect-color-1) 24%, transparent);
+}
+
+.cc-design-effect--neon {
+  background: color-mix(in srgb, #0f172a 88%, var(--cc-design-effect-color-1));
+  border-color: color-mix(
+    in srgb,
+    var(--cc-design-effect-color-2) 68%,
+    transparent
+  );
+  color: #fff;
+  text-shadow: 0 0 18px
+    color-mix(in srgb, var(--cc-design-effect-color-2) 62%, transparent);
+}
+
+.cc-design-effect--noise::after,
+.cc-design-effect--soft-grid::after,
+.cc-design-effect--scanline::after,
+.cc-design-effect--holographic::after {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  content: "";
+  pointer-events: none;
+}
+
+.cc-design-effect--noise::after {
+  background-image: repeating-radial-gradient(
+    circle at 0 0,
+    color-mix(in srgb, var(--cc-design-effect-color-1) 22%, transparent) 0 1px,
+    transparent 1px 4px
+  );
+  opacity: calc(var(--cc-design-effect-alpha) * 0.32);
+}
+
+.cc-design-effect--soft-grid::after {
+  background-image:
+    linear-gradient(
+      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 22px 22px;
+  opacity: var(--cc-design-effect-alpha);
+}
+
+.cc-design-effect--scanline::after {
+  background: repeating-linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--cc-design-effect-color-1) 20%, transparent) 0 1px,
+    transparent 1px 6px
+  );
+  opacity: calc(var(--cc-design-effect-alpha) * 0.52);
+}
+
+.cc-design-effect--holographic {
+  background: linear-gradient(
+    115deg,
+    var(--cc-design-effect-color-1),
+    var(--cc-design-effect-color-2),
+    var(--cc-design-effect-color-3),
+    var(--cc-design-effect-color-1)
+  );
+  background-size: 260% 260%;
+}
+
+.cc-design-effect--holographic::after {
+  background: linear-gradient(
+    110deg,
+    transparent 20%,
+    color-mix(in srgb, #fff 34%, transparent) 42%,
+    transparent 64%
+  );
+  mix-blend-mode: screen;
+}
+
+.cc-design-effect[data-animated="true"].cc-design-effect--aurora
+  .cc-design-effect__overlay,
+.cc-design-effect[data-animated="true"].cc-design-effect--gradient
+  .cc-design-effect__overlay,
+.cc-design-effect[data-animated="true"].cc-design-effect--mesh
+  .cc-design-effect__overlay {
+  animation: cc-design-effect-drift 8200ms ease-in-out infinite alternate;
+}
+
+.cc-design-effect[data-animated="true"].cc-design-effect--holographic {
+  animation: cc-design-effect-holographic 5400ms linear infinite;
+}
+
+.cc-design-effect[data-animated="true"].cc-design-effect--scanline::after {
+  animation: cc-design-effect-scanline 1800ms linear infinite;
+}
+
+@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;
+  }
+
+.cc-gradient-text,
+  .cc-design-effect,
+  .cc-design-effect__overlay,
+  .cc-design-effect::after,
+  .cc-typewriter-text__cursor {
+    animation: none;
+  }
+}
+
+@keyframes cc-design-effect-drift {
+  from {
+    transform: translate3d(-2%, -1%, 0) scale(1);
+  }
+  to {
+    transform: translate3d(2%, 1%, 0) scale(1.06);
+  }
+}
+
+@keyframes cc-design-effect-holographic {
+  to {
+    background-position: 260% 50%;
+  }
+}
+
+@keyframes cc-design-effect-scanline {
+  to {
+    transform: translateY(12px);
+  }
+}
+

package/dist/styles/components/drag-drop-board.css

@@ -0,0 +1,87 @@
+@import "../base.css";
+
+.cc-drag-drop-board {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(var(--cc-drag-drop-columns, 3), minmax(0, 1fr));
+  position: relative;
+}
+
+.cc-drag-drop-board__slot {
+  border: 1px solid transparent;
+  border-radius: var(--cc-radius-lg);
+  cursor: grab;
+  min-height: 72px;
+  touch-action: none;
+  transition:
+    background var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    opacity var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-drag-drop-motion-duration, 300ms)
+      cubic-bezier(0.2, 0.85, 0.22, 1);
+  user-select: none;
+  will-change: transform;
+}
+
+.cc-drag-drop-board__slot[data-dragging="true"] {
+  cursor: grabbing;
+  background: var(--cc-drag-drop-slot-dragging-background);
+  border-color: var(--cc-drag-drop-slot-dragging-border-color);
+  border-style: dashed;
+}
+
+.cc-drag-drop-board__slot[data-over="true"] {
+  background: var(--cc-drag-drop-slot-over-background);
+  border-color: var(--cc-drag-drop-slot-over-border-color);
+  border-style: dashed;
+}
+
+.cc-drag-drop-board__slot[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.cc-drag-drop-board__item {
+  height: 100%;
+  transition: opacity var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-drag-drop-board__slot[data-dragging="true"] .cc-drag-drop-board__item {
+  opacity: 0;
+}
+
+.cc-drag-drop-board__preview {
+  box-sizing: border-box;
+  cursor: grabbing;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  transform-origin: 50% 50%;
+  z-index: 1300;
+  will-change: transform;
+}
+
+.cc-drag-drop-board__preview[data-dropping="true"] {
+  transition:
+    transform var(--cc-drag-drop-motion-duration, 300ms)
+      cubic-bezier(0.2, 0.85, 0.22, 1),
+    width var(--cc-drag-drop-motion-duration, 300ms)
+      cubic-bezier(0.2, 0.85, 0.22, 1),
+    height var(--cc-drag-drop-motion-duration, 300ms)
+      cubic-bezier(0.2, 0.85, 0.22, 1);
+}
+
+.cc-drag-drop-board__preview > * {
+  box-shadow: var(--cc-drag-drop-preview-shadow);
+  filter: saturate(1.06);
+  height: 100%;
+  transform: scale(0.96);
+  transition: transform var(--cc-drag-drop-motion-duration, 300ms)
+    cubic-bezier(0.2, 0.85, 0.22, 1);
+}
+
+.cc-drag-drop-board__preview[data-dropping="true"] > * {
+  transform: scale(1);
+}
+

package/dist/styles/components/draggable.css

@@ -0,0 +1,37 @@
+@import "../base.css";
+
+.cc-draggable {
+  cursor: grab;
+  display: inline-block;
+  position: absolute;
+  touch-action: none;
+  transition:
+    filter var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+  user-select: none;
+  will-change: transform;
+}
+
+.cc-draggable[data-dragging="true"] {
+  cursor: grabbing;
+  filter: drop-shadow(
+    0 12px 26px color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent)
+  );
+  transition: filter var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-draggable[data-over-target="true"] {
+  filter: drop-shadow(
+      0 0 0 color-mix(in srgb, var(--cc-form-color-accent) 0%, transparent)
+    )
+    drop-shadow(
+      0 14px 30px
+        color-mix(in srgb, var(--cc-form-color-accent) 28%, transparent)
+    );
+}
+
+.cc-draggable[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+

package/dist/styles/components/ellipsis-text.css

@@ -0,0 +1,59 @@
+@import "../base.css";
+
+.cc-ellipsis {
+  --cc-ellipsis-background: var(--cc-form-color-surface);
+  --cc-ellipsis-line-height: 1.6em;
+  --cc-ellipsis-text-color: var(--cc-form-color-text);
+  color: var(--cc-ellipsis-text-color);
+  display: block;
+  font-family: var(--cc-form-font);
+  line-height: var(--cc-ellipsis-line-height);
+  min-width: 0;
+  position: relative;
+}
+
+.cc-ellipsis__content {
+  box-sizing: border-box;
+  line-height: var(--cc-ellipsis-line-height);
+  max-height: var(
+    --cc-ellipsis-collapsed-height,
+    var(--cc-ellipsis-line-height)
+  );
+  min-width: 0;
+  overflow: hidden;
+  width: 100%;
+  transition: max-height var(--cc-ellipsis-transition-duration, 180ms) ease;
+}
+
+.cc-ellipsis[data-expandable="true"] {
+  cursor: pointer;
+}
+
+.cc-ellipsis[data-expandable="true"]:focus-visible {
+  border-radius: var(--cc-radius-sm);
+  outline: 2px solid var(--cc-form-color-accent);
+  outline-offset: 3px;
+}
+
+.cc-ellipsis[data-lines="multiple"] .cc-ellipsis__content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--cc-ellipsis-lines, 1);
+  line-clamp: var(--cc-ellipsis-lines, 1);
+}
+
+.cc-ellipsis[data-lines="single"] .cc-ellipsis__content {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-ellipsis[data-expanded="true"] .cc-ellipsis__content {
+  display: block;
+  max-height: var(--cc-ellipsis-expanded-max-height, 999px);
+  text-overflow: clip;
+  white-space: normal;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+}
+

package/dist/styles/components/empty.css

@@ -0,0 +1,168 @@
+@import "../base.css";
+
+.cc-loading,
+.cc-empty {
+  align-items: center;
+  color: var(--cc-form-color-muted);
+  display: inline-flex;
+  gap: 8px;
+  justify-content: center;
+  line-height: 1.5;
+  min-height: 36px;
+  vertical-align: middle;
+}
+
+.cc-empty {
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px;
+  text-align: center;
+}
+
+.cc-empty__icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  line-height: 0;
+}
+
+.cc-empty__illustration {
+  animation: cc-empty-bolt-float 2.4s var(--cc-animation-easing) infinite;
+  display: block;
+  filter: drop-shadow(
+    0 10px 18px color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent)
+  );
+  height: 58px;
+  overflow: visible;
+  transform-origin: 50% 56%;
+  width: 58px;
+}
+
+.cc-empty__illustration-shadow {
+  animation: cc-empty-bolt-shadow 2.4s var(--cc-animation-easing) infinite;
+  fill: color-mix(in srgb, var(--cc-form-color-muted) 18%, transparent);
+  transform-origin: 51px 74px;
+}
+
+.cc-empty__tray-back {
+  fill: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 10%,
+    var(--cc-form-color-surface)
+  );
+  stroke: color-mix(in srgb, var(--cc-form-color-muted) 28%, transparent);
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.cc-empty__tray-front {
+  fill: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 16%,
+    var(--cc-form-color-surface)
+  );
+  stroke: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 26%,
+    var(--cc-form-color-muted)
+  );
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.cc-empty__tray-lip,
+.cc-empty__tray-glow {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cc-empty__tray-lip {
+  opacity: 0.58;
+  stroke: color-mix(in srgb, var(--cc-form-color-muted) 44%, transparent);
+  stroke-width: 2;
+}
+
+.cc-empty__tray-glow {
+  animation: cc-empty-tray-glow 2.4s var(--cc-animation-easing) infinite;
+  stroke: color-mix(in srgb, var(--cc-form-color-accent) 42%, transparent);
+  stroke-width: 3;
+}
+
+.cc-empty__mini-bolt-side {
+  fill: color-mix(in srgb, var(--cc-form-color-accent) 52%, #3b1c8f);
+  transform: translate(4px, 3px);
+}
+
+.cc-empty__mini-bolt-face {
+  fill: color-mix(in srgb, var(--cc-form-color-accent) 82%, #ffd84d);
+  stroke: color-mix(in srgb, var(--cc-form-color-accent) 46%, #ffffff);
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.cc-empty__mini-bolt-highlight {
+  animation: cc-empty-bolt-glint 2.4s var(--cc-animation-easing) infinite;
+  fill: color-mix(in srgb, #ffffff 42%, transparent);
+}
+
+.cc-empty__spark {
+  fill: none;
+  opacity: 0.46;
+  stroke: color-mix(in srgb, var(--cc-form-color-accent) 54%, transparent);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.cc-empty__spark--small {
+  opacity: 0.34;
+}
+
+@keyframes cc-empty-bolt-float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(-2deg) scale(1);
+  }
+
+  50% {
+    transform: translateY(-4px) rotate(3deg) scale(1.03);
+  }
+}
+
+@keyframes cc-empty-bolt-shadow {
+  0%,
+  100% {
+    opacity: 0.72;
+    transform: scaleX(1);
+  }
+
+  50% {
+    opacity: 0.42;
+    transform: scaleX(0.78);
+  }
+}
+
+@keyframes cc-empty-bolt-glint {
+  0%,
+  100% {
+    opacity: 0.34;
+  }
+
+  45%,
+  60% {
+    opacity: 0.84;
+  }
+}
+
+@keyframes cc-empty-tray-glow {
+  0%,
+  100% {
+    opacity: 0.24;
+  }
+
+  50% {
+    opacity: 0.72;
+  }
+}
+