klun-ui 0.3.0 → 0.4.1

package/dist/styles.css

@@ -3171,6 +3171,125 @@ body {
   color: var(--klun-text-white-0);
 }
 
+/* src/components/data-display/Kanban.css */
+.klun-kanban {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+.klun-kanban__column {
+  flex: 0 0 var(--klun-kanban-col, 280px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border-radius: var(--klun-radius-xl);
+  background: var(--klun-bg-weak-50);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-kanban__column--over {
+  box-shadow: inset 0 0 0 2px var(--klun-primary-base);
+}
+.klun-kanban__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px;
+}
+.klun-kanban__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--klun-radius-pill);
+}
+.klun-kanban__title {
+  flex: 1;
+  min-width: 0;
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-strong-950);
+}
+.klun-kanban__count {
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-sub-600);
+  background: var(--klun-bg-white-0);
+  border-radius: var(--klun-radius-pill);
+  padding: 1px 8px;
+}
+.klun-kanban__count--full {
+  color: var(--klun-state-error-base);
+}
+.klun-kanban__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 60px;
+}
+.klun-kanban__card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: var(--klun-radius-lg);
+  background: var(--klun-bg-white-0);
+  box-shadow: var(--klun-shadow-xs, 0 1px 2px rgba(14, 18, 27, 0.06)), inset 0 0 0 1px var(--klun-stroke-soft-200);
+  cursor: grab;
+  transition: transform var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+  touch-action: none;
+}
+.klun-kanban__card:hover {
+  transform: translateY(-1px);
+}
+.klun-kanban__card--dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+}
+.klun-kanban__card--dropbefore {
+  box-shadow: 0 -2px 0 0 var(--klun-primary-base), inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-kanban__card--dropafter {
+  box-shadow: 0 2px 0 0 var(--klun-primary-base), inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-kanban__card-title {
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-strong-950);
+}
+.klun-kanban__card-desc {
+  font: var(--klun-text-paragraph-xs);
+  color: var(--klun-text-sub-600);
+}
+.klun-kanban__card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.klun-kanban__card-tags > * {
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-sub-600);
+  background: var(--klun-bg-weak-50);
+  border-radius: var(--klun-radius-sm);
+  padding: 1px 6px;
+}
+.klun-kanban__card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-soft-400);
+}
+.klun-kanban__empty {
+  padding: 16px 8px;
+  text-align: center;
+  border: 1px dashed var(--klun-stroke-soft-200);
+  border-radius: var(--klun-radius-lg);
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-soft-400);
+}
+.klun-kanban__footer {
+  padding: 2px;
+}
+
 /* src/components/data-display/Kbd.css */
 .klun-kbd {
   display: inline-flex;
@@ -4017,6 +4136,12 @@ body {
 }
 .klun-table__td--util {
   width: 40px;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+.klun-table__td--util:active {
+  cursor: grabbing;
 }
 .klun-table__td--nowrap {
   white-space: nowrap;
@@ -4052,13 +4177,10 @@ body {
   cursor: pointer;
 }
 .klun-table__row--dragging {
-  opacity: 0.5;
-}
-.klun-table__row--dropover {
-  box-shadow: inset 0 2px 0 var(--klun-primary-base);
-}
-.klun-table__row--dropover-after {
-  box-shadow: inset 0 -2px 0 var(--klun-primary-base);
+  position: relative;
+  z-index: 2;
+  background: var(--klun-bg-white-0);
+  box-shadow: var(--klun-shadow-lg);
 }
 .klun-table__row--status-success {
   background: var(--klun-state-success-lighter, var(--klun-green-50));
@@ -4891,6 +5013,87 @@ body {
   flex: 1;
 }
 
+/* src/components/data-display/VirtualTable.css */
+.klun-vtable {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--klun-radius-xl);
+  background: var(--klun-bg-white-0);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  overflow: hidden;
+}
+.klun-vtable__head {
+  display: grid;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  background: var(--klun-bg-weak-50);
+  box-shadow: inset 0 -1px 0 var(--klun-stroke-soft-200);
+  flex: none;
+}
+.klun-vtable__th {
+  font: var(--klun-text-label-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--klun-text-soft-400);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.klun-vtable__th--center,
+.klun-vtable__td--center {
+  text-align: center;
+}
+.klun-vtable__th--right,
+.klun-vtable__td--right {
+  text-align: right;
+}
+.klun-vtable__body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+.klun-vtable__row {
+  display: grid;
+  align-items: center;
+  padding: 0 12px;
+  box-sizing: border-box;
+  box-shadow: inset 0 -1px 0 var(--klun-stroke-soft-200);
+}
+.klun-vtable__row--zebra {
+  background: color-mix(in srgb, var(--klun-bg-weak-50) 55%, transparent);
+}
+.klun-vtable__row--clickable {
+  cursor: pointer;
+}
+.klun-vtable__row--clickable:hover {
+  background: var(--klun-bg-weak-50);
+}
+.klun-vtable__td {
+  font: var(--klun-text-label-sm);
+  color: var(--klun-text-sub-600);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.klun-vtable__empty {
+  padding: 40px 12px;
+  text-align: center;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--klun-text-soft-400);
+}
+.klun-vtable__foot {
+  flex: none;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border-top: 1px solid var(--klun-stroke-soft-200);
+  background: var(--klun-bg-weak-50);
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-soft-400);
+}
+
 /* src/components/disclosure/Accordion.css */
 .klun-accordion {
   display: flex;
@@ -6827,6 +7030,111 @@ body {
   color: var(--klun-text-soft-400);
 }
 
+/* src/components/forms/CronEditor.css */
+.klun-cron {
+  --_h: var(--klun-control-h-sm, 32px);
+  --_font: var(--klun-text-label-sm);
+  --_radius: var(--klun-radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.klun-cron--medium {
+  --_h: var(--klun-control-h-md, 36px);
+  --_font: var(--klun-text-paragraph-sm);
+}
+.klun-cron--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.klun-cron__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.klun-cron__preset {
+  height: var(--_h);
+  padding: 0 10px;
+  border: none;
+  border-radius: var(--klun-radius-pill, 999px);
+  cursor: pointer;
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-sub-600);
+  font: var(--_font);
+  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-cron__preset:hover {
+  background: var(--klun-primary-lighter);
+  color: var(--klun-primary-base);
+}
+.klun-cron__preset[data-active] {
+  background: var(--klun-primary-lighter);
+  color: var(--klun-primary-base);
+}
+.klun-cron__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 10px;
+}
+.klun-cron__field,
+.klun-cron__raw {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.klun-cron__field-label {
+  font: var(--klun-text-label-xs);
+  color: var(--klun-text-soft-400);
+}
+.klun-cron__select,
+.klun-cron__input {
+  width: 100%;
+  height: var(--_h);
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--_radius);
+  background: var(--klun-bg-white-0);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  color: var(--klun-text-strong-950);
+  font: var(--_font);
+  box-sizing: border-box;
+}
+.klun-cron__select:focus,
+.klun-cron__input:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--klun-primary-base);
+}
+.klun-cron__input {
+  font-family: var(--klun-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  letter-spacing: 0.04em;
+}
+.klun-cron__footer {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr);
+  gap: 10px;
+  align-items: end;
+}
+.klun-cron__preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--_h);
+  padding: 0 10px;
+  border-radius: var(--_radius);
+  background: var(--klun-state-information-lighter, var(--klun-bg-weak-50));
+  color: var(--klun-text-sub-600);
+  font: var(--_font);
+}
+.klun-cron__preview i {
+  color: var(--klun-state-information-base, var(--klun-primary-base));
+}
+@media (max-width: 520px) {
+  .klun-cron__footer {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* src/components/forms/DatePicker.css */
 .klun-date-field {
   display: inline-block;
@@ -7801,6 +8109,120 @@ body {
   pointer-events: none;
 }
 
+/* src/components/forms/RichEditor.css */
+.klun-rich-editor {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--klun-radius-lg);
+  background: var(--klun-bg-white-0);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+  overflow: hidden;
+  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+}
+.klun-rich-editor:focus-within {
+  box-shadow: inset 0 0 0 1px var(--klun-primary-base), 0 0 0 3px var(--klun-primary-alpha-10, rgba(51, 92, 255, 0.12));
+}
+.klun-rich-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.klun-rich-editor__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--klun-stroke-soft-200);
+  background: var(--klun-bg-weak-50);
+  flex-wrap: wrap;
+}
+.klun-rich-editor__bar .klun-rich-editor-toolbar {
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+  flex: 1;
+}
+.klun-rich-editor__source {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--klun-radius-sm);
+  background: transparent;
+  color: var(--klun-text-sub-600);
+  font: var(--klun-text-label-xs);
+  cursor: pointer;
+}
+.klun-rich-editor__source:hover,
+.klun-rich-editor__source[data-active] {
+  background: var(--klun-bg-white-0);
+  color: var(--klun-text-strong-950);
+  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
+}
+.klun-rich-editor__sourcearea {
+  border-bottom: 1px solid var(--klun-stroke-soft-200);
+}
+.klun-rich-editor__sourcearea textarea {
+  border-radius: 0;
+}
+.klun-rich-editor__area {
+  padding: 12px 14px;
+  font: var(--klun-text-paragraph-sm);
+  color: var(--klun-text-strong-950);
+  outline: none;
+  overflow-wrap: anywhere;
+}
+.klun-rich-editor__area:empty::before {
+  content: attr(data-placeholder);
+  color: var(--klun-text-soft-400);
+  pointer-events: none;
+}
+.klun-rich-editor__area h1 {
+  font: var(--klun-text-title-h4);
+  margin: 12px 0 6px;
+}
+.klun-rich-editor__area h2 {
+  font: var(--klun-text-title-h5);
+  margin: 10px 0 4px;
+}
+.klun-rich-editor__area p {
+  margin: 0 0 8px;
+}
+.klun-rich-editor__area ul,
+.klun-rich-editor__area ol {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+.klun-rich-editor__area blockquote {
+  margin: 8px 0;
+  padding: 4px 12px;
+  border-left: 3px solid var(--klun-primary-base);
+  background: var(--klun-bg-weak-50);
+  color: var(--klun-text-sub-600);
+}
+.klun-rich-editor__area pre {
+  margin: 8px 0;
+  padding: 10px 12px;
+  border-radius: var(--klun-radius-md);
+  background: var(--klun-bg-strong-950, #0e121b);
+  color: var(--klun-text-white-0, #fff);
+  font-family: var(--klun-font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  overflow-x: auto;
+}
+.klun-rich-editor__area a {
+  color: var(--klun-primary-base);
+  text-decoration: underline;
+}
+.klun-rich-editor__area img {
+  max-width: 100%;
+  border-radius: var(--klun-radius-md);
+}
+.klun-rich-editor__area:focus-visible {
+  outline: none;
+}
+
 /* src/components/forms/RichEditorToolbar.css */
 .klun-rich-editor-toolbar {
   display: inline-flex;