@class-kit/react 0.1.0 → 0.1.2

package/dist/styles/components/chat-textarea.css

@@ -0,0 +1,124 @@
+@import "../base.css";
+
+.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-chat-textarea {
+  color: var(--cc-form-color-text);
+  display: block;
+  min-width: 0;
+  position: relative;
+  width: 100%;
+}
+
+.cc-chat-textarea__control {
+  appearance: none;
+  background: var(--cc-form-control-background);
+  border: 1px solid var(--cc-form-color-border);
+  border-radius: var(--cc-form-control-radius);
+  box-shadow: none;
+  color: inherit;
+  display: block;
+  font: inherit;
+  line-height: 1.5;
+  min-height: var(--cc-form-control-height);
+  outline: none;
+  overflow-wrap: break-word;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding: 8px 12px;
+  resize: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cc-form-color-border-hover) transparent;
+  word-break: normal;
+  transition:
+    background-color 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),
+    color var(--cc-animation-duration) var(--cc-animation-easing);
+  width: 100%;
+}
+
+.cc-chat-textarea__control--clearable {
+  padding-right: 38px;
+}
+
+.cc-chat-textarea__clear {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  color: var(--cc-form-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 18px;
+  height: 18px;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 12px;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+  width: 18px;
+}
+
+.cc-chat-textarea__clear:hover {
+  background: var(--cc-form-color-surface-soft);
+  color: var(--cc-form-color-text);
+}
+
+.cc-chat-textarea__clear:focus-visible {
+  box-shadow: var(--cc-form-shadow-focus);
+  outline: none;
+}
+
+.cc-chat-textarea__control::placeholder {
+  color: var(--cc-form-placeholder-color);
+}
+
+.cc-chat-textarea__control:hover:not(:disabled):not([readonly]) {
+  background: var(--cc-form-control-hover-background);
+  border-color: var(--cc-form-color-border-hover);
+}
+
+.cc-chat-textarea__control:focus {
+  background: var(--cc-form-control-focus-background);
+  border-color: var(--cc-form-color-border-focus);
+  box-shadow: var(--cc-form-shadow-focus);
+}
+
+.cc-chat-textarea__control:disabled,
+.cc-chat-textarea__control[readonly] {
+  background: var(--cc-form-readonly-background);
+  border-color: var(--cc-form-readonly-border-color);
+  box-shadow: none;
+  color: var(--cc-form-readonly-color);
+  cursor: default;
+}
+
+.cc-chat-textarea__control:disabled {
+  opacity: var(--cc-form-disabled-opacity);
+}
+

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

@@ -48,13 +48,14 @@
   will-change: transform;
 }
 
-.cc-chat-virtual-list__top-loading {
+.cc-loading.cc-chat-virtual-list__top-loading {
   align-items: center;
-  background: color-mix(in srgb, var(--cc-color-surface) 92%, transparent);
-  border: 1px solid color-mix(in srgb, var(--cc-color-border) 72%, transparent);
+  background: color-mix(in srgb, var(--cc-form-color-surface) 92%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--cc-form-color-border) 72%, transparent);
   border-radius: 999px;
   box-shadow: var(--cc-shadow-sm);
-  color: var(--cc-color-text-muted);
+  color: var(--cc-form-color-accent);
   display: inline-flex;
   font-size: 12px;
   font-weight: 600;
@@ -75,34 +76,22 @@
   z-index: 2;
 }
 
-.cc-chat-virtual-list__top-loading::before {
-  animation: cc-chat-top-loading-spin 720ms linear infinite;
-  border: 2px solid color-mix(in srgb, var(--cc-color-primary) 24%, transparent);
-  border-top-color: var(--cc-color-primary);
-  border-radius: 999px;
-  content: "";
-  height: 12px;
-  width: 12px;
-}
-
-.cc-chat-virtual-list__top-loading[data-active="true"] {
+.cc-loading.cc-chat-virtual-list__top-loading[data-active="true"] {
   opacity: 1;
   transform: translate3d(-50%, 0, 0);
 }
 
-@media (prefers-reduced-motion: reduce) {
-.cc-chat-virtual-list__top-loading {
-    transition-duration: 1ms;
-  }
-
-.cc-chat-virtual-list__top-loading::before {
-    animation: none;
-  }
+.cc-loading.cc-chat-virtual-list__top-loading .cc-loading__bolt {
+  filter: drop-shadow(
+    0 4px 8px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
+  );
+  height: 16px;
+  width: 16px;
 }
 
-@keyframes cc-chat-top-loading-spin {
-  to {
-    transform: rotate(360deg);
+@media (prefers-reduced-motion: reduce) {
+.cc-loading.cc-chat-virtual-list__top-loading {
+    transition-duration: 1ms;
   }
 }
 

package/dist/styles/components/checkbox.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/checked.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/code-preview.css

@@ -0,0 +1,208 @@
+@import "../base.css";
+
+.cc-code-preview {
+  color: var(--cc-code-preview-color);
+  font-family: var(--cc-form-font);
+  position: relative;
+}
+
+.cc-code-preview__bar {
+  align-items: center;
+  background: var(--cc-code-preview-bar-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--cc-code-preview-background) 84%, transparent);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 8px 10px 8px 14px;
+}
+
+.cc-code-preview__meta {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.cc-code-preview__title {
+  font-size: 13px;
+  font-weight: 780;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-code-preview__lang {
+  background: color-mix(
+    in srgb,
+    var(--cc-code-preview-panel-background) 78%,
+    transparent
+  );
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: 999px;
+  color: var(--cc-code-preview-muted-color);
+  font-size: 11px;
+  font-weight: 720;
+  padding: 3px 8px;
+}
+
+.cc-code-preview__actions {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+}
+
+.cc-code-preview__actions button {
+  appearance: none;
+  background: var(--cc-code-preview-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-md);
+  color: var(--cc-code-preview-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 760;
+  height: 30px;
+  padding: 0 10px;
+  transition:
+    background var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    border-color var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease),
+    color var(--cc-animation-duration, 180ms) var(--cc-animation-easing, ease),
+    transform var(--cc-animation-duration, 180ms)
+      var(--cc-animation-easing, ease);
+}
+
+.cc-code-preview__actions button:hover {
+  background: color-mix(
+    in srgb,
+    var(--cc-code-preview-accent-color) 7%,
+    var(--cc-code-preview-background)
+  );
+  border-color: var(--cc-code-preview-accent-color);
+  color: var(--cc-code-preview-accent-color);
+}
+
+.cc-code-preview__actions button:active {
+  transform: translateY(1px);
+}
+
+.cc-code-preview__actions button:focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--cc-code-preview-accent-color) 28%, transparent);
+  outline-offset: 2px;
+}
+
+.cc-code-preview__panel {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--cc-code-preview-background) 42%, transparent),
+      transparent 36%
+    ),
+    var(--cc-code-preview-panel-background);
+  border: 1px solid var(--cc-code-preview-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow:
+    inset 0 1px 0
+      color-mix(in srgb, var(--cc-code-preview-background) 78%, transparent),
+    var(--cc-code-preview-shadow);
+  left: 0;
+  margin: 0;
+  max-height: min(420px, calc(100vh - 48px));
+  overflow: auto;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: calc(100% + 10px);
+  width: min(720px, calc(100vw - 48px));
+  z-index: 40;
+}
+
+.cc-code-preview__panel[data-expanded="false"] {
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cc-code-preview__transition {
+  width: 100%;
+}
+
+.cc-code-preview[data-strategy="fixed"] .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"] {
+  bottom: auto;
+  max-height: min(420px, calc(100dvh - 20px));
+  position: fixed;
+  right: auto;
+  z-index: 1000;
+}
+
+.cc-code-preview__panel::before {
+  background: var(--cc-code-preview-line-color);
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cc-code-preview[data-placement="top"] .cc-code-preview__panel {
+  bottom: calc(100% + 10px);
+  top: auto;
+}
+
+.cc-code-preview[data-placement="right"] .cc-code-preview__panel {
+  left: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-placement="left"] .cc-code-preview__panel {
+  left: auto;
+  right: calc(100% + 10px);
+  top: 0;
+}
+
+.cc-code-preview[data-strategy="fixed"][data-placement="top"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="right"]
+  .cc-code-preview__panel,
+.cc-code-preview[data-strategy="fixed"][data-placement="left"]
+  .cc-code-preview__panel,
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="top"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="right"],
+.cc-code-preview__panel[data-strategy="fixed"][data-placement="left"] {
+  bottom: auto;
+  right: auto;
+}
+
+.cc-code-preview__panel-content {
+  min-height: 0;
+}
+
+.cc-code-preview__panel pre {
+  margin: 0;
+  padding: 16px;
+}
+
+.cc-code-preview__panel > code {
+  padding: 16px;
+}
+
+.cc-code-preview__panel code {
+  color: var(--cc-code-preview-color);
+  display: block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 520;
+  line-height: 1.68;
+  tab-size: 2;
+  white-space: pre;
+}
+

package/dist/styles/components/color-picker.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;
 }
@@ -245,13 +261,13 @@
 
 .cc-color-picker__channels {
   display: grid;
-  gap: 8px;
+  gap: 6px;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 .cc-color-picker__channels label {
   display: grid;
-  gap: 4px;
+  gap: 3px;
 }
 
 .cc-color-picker__channels span {
@@ -263,10 +279,13 @@
   background: transparent;
   border: 1px solid var(--cc-form-color-border);
   border-radius: var(--cc-radius-md);
+  box-sizing: border-box;
   color: var(--cc-form-color-text);
-  font-size: 14px;
+  font-size: 12px;
+  height: 24px;
+  line-height: 1.2;
   min-width: 0;
-  padding: 7px 8px;
+  padding: 2px 6px;
 }
 
 .cc-color-picker__channels[data-show-steppers="false"] input[type="number"] {

package/dist/styles/components/config-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;