kb-ui-vue 0.2.0

package/dist/styles/Slider.css

@@ -0,0 +1,46 @@
+.kb-slider {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.kb-slider__track {
+  position: relative;
+  flex: 1;
+  height: 6px;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-slider__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-primary);
+}
+
+.kb-slider__handle {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--kb-color-primary);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transform: translate(-50%, -50%);
+  box-shadow: var(--kb-shadow-1);
+  transition: box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-slider__handle:hover {
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--kb-color-primary) 15%, transparent);
+}
+
+.kb-slider--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}

package/dist/styles/Space.css

@@ -0,0 +1,27 @@
+.kb-space {
+  display: inline-flex;
+}
+
+.kb-space--vertical {
+  flex-direction: column;
+}
+
+.kb-space--wrap {
+  flex-wrap: wrap;
+}
+
+.kb-space--align-start {
+  align-items: flex-start;
+}
+
+.kb-space--align-center {
+  align-items: center;
+}
+
+.kb-space--align-end {
+  align-items: flex-end;
+}
+
+.kb-space--align-baseline {
+  align-items: baseline;
+}

package/dist/styles/Statistic.css

@@ -0,0 +1,31 @@
+.kb-statistic {
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+}
+
+.kb-statistic__title {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-statistic__value {
+  margin-top: var(--kb-space-1);
+  color: var(--kb-color-text-1);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+}
+
+.kb-statistic__prefix,
+.kb-statistic__suffix {
+  font-size: var(--kb-font-size-md);
+  font-weight: 400;
+  color: var(--kb-color-text-2);
+}
+
+.kb-statistic__extra {
+  margin-top: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}

package/dist/styles/Steps.css

@@ -0,0 +1,83 @@
+.kb-steps {
+  display: flex;
+  width: 100%;
+}
+
+.kb-steps__item {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.kb-steps__item:last-child {
+  flex: none;
+}
+
+.kb-steps__head {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.kb-steps__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  border: 2px solid var(--kb-color-border);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+  flex-shrink: 0;
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-steps__line {
+  flex: 1;
+  height: 2px;
+  margin: 0 var(--kb-space-2);
+  background: var(--kb-color-border);
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-steps__item--active .kb-steps__circle {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-steps__item--active .kb-steps__line {
+  background: var(--kb-color-primary);
+}
+
+.kb-steps__item--done .kb-steps__circle {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-steps__item--done .kb-steps__line {
+  background: var(--kb-color-primary);
+}
+
+.kb-steps__body {
+  margin-left: var(--kb-space-2);
+  padding-top: 4px;
+}
+
+.kb-steps__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 500;
+}
+
+.kb-steps__description {
+  margin-top: 2px;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}

package/dist/styles/Switch.css

@@ -0,0 +1,39 @@
+.kb-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-border);
+  cursor: pointer;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-switch--checked {
+  background: var(--kb-color-primary);
+}
+
+.kb-switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-switch__dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-1);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-switch--checked .kb-switch__dot {
+  transform: translateX(18px);
+}

package/dist/styles/Table.css

@@ -0,0 +1,43 @@
+.kb-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-table th {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-weight: 600;
+  text-align: left;
+}
+
+.kb-table td {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-1);
+}
+
+.kb-table tbody tr:hover {
+  background: color-mix(in srgb, var(--kb-color-primary) 4%, transparent);
+}
+
+.kb-table--stripe tbody tr:nth-child(even) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-table--border {
+  border: 1px solid var(--kb-color-border);
+}
+
+.kb-table--border th,
+.kb-table--border td {
+  border-right: 1px solid var(--kb-color-border);
+}
+
+.kb-table--border th:last-child,
+.kb-table--border td:last-child {
+  border-right: none;
+}

package/dist/styles/Tabs.css

@@ -0,0 +1,41 @@
+.kb-tabs {
+  width: 100%;
+}
+
+.kb-tabs__nav {
+  display: flex;
+  gap: var(--kb-space-1);
+  border-bottom: 1px solid var(--kb-color-border);
+}
+
+.kb-tabs__tab {
+  padding: var(--kb-space-2) var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition:
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-tabs__tab:hover:not(.kb-tabs__tab--disabled) {
+  color: var(--kb-color-primary);
+}
+
+.kb-tabs__tab--active {
+  color: var(--kb-color-primary);
+  border-bottom-color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-tabs__tab--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-tabs__panel {
+  padding: var(--kb-space-3) 0;
+}

package/dist/styles/Tag.css

@@ -0,0 +1,71 @@
+.kb-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  box-sizing: border-box;
+  padding: 0 var(--kb-space-2);
+  height: 24px;
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kb-tag--small {
+  height: 20px;
+  font-size: var(--kb-font-size-xs);
+}
+
+.kb-tag--large {
+  height: 28px;
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-tag--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-tag--primary {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-tag--success {
+  background: color-mix(in srgb, var(--kb-color-success) 12%, transparent);
+  color: var(--kb-color-success);
+}
+
+.kb-tag--warning {
+  background: color-mix(in srgb, var(--kb-color-warning) 12%, transparent);
+  color: var(--kb-color-warning);
+}
+
+.kb-tag--danger {
+  background: color-mix(in srgb, var(--kb-color-danger) 12%, transparent);
+  color: var(--kb-color-danger);
+}
+
+.kb-tag--info {
+  background: color-mix(in srgb, var(--kb-color-info) 12%, transparent);
+  color: var(--kb-color-info);
+}
+
+.kb-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.kb-tag__close:hover {
+  opacity: 1;
+}

package/dist/styles/Textarea.css

@@ -0,0 +1,43 @@
+.kb-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.kb-textarea__inner {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  outline: none;
+  resize: vertical;
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-family: var(--kb-font-family);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-textarea__inner:focus {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-textarea__inner::placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-textarea--disabled .kb-textarea__inner {
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-textarea__count {
+  position: absolute;
+  right: var(--kb-space-2);
+  bottom: var(--kb-space-1);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-xs);
+}

package/dist/styles/Timeline.css

@@ -0,0 +1,70 @@
+.kb-timeline {
+  padding: var(--kb-space-2) 0;
+}
+
+.kb-timeline__item {
+  display: flex;
+}
+
+.kb-timeline__node {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: var(--kb-space-3);
+}
+
+.kb-timeline__dot {
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid var(--kb-color-primary);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.kb-timeline__dot--default {
+  border-color: var(--kb-color-border);
+  background: var(--kb-color-border);
+}
+
+.kb-timeline__dot--success {
+  border-color: var(--kb-color-success);
+}
+
+.kb-timeline__dot--warning {
+  border-color: var(--kb-color-warning);
+}
+
+.kb-timeline__dot--danger {
+  border-color: var(--kb-color-danger);
+}
+
+.kb-timeline__tail {
+  position: absolute;
+  top: 16px;
+  bottom: -8px;
+  left: 50%;
+  width: 2px;
+  background: var(--kb-color-border);
+  transform: translateX(-50%);
+}
+
+.kb-timeline__main {
+  flex: 1;
+  padding-bottom: var(--kb-space-4);
+}
+
+.kb-timeline__content {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.5;
+}
+
+.kb-timeline__time {
+  margin-top: 2px;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}

package/dist/styles/Tooltip.css

@@ -0,0 +1,42 @@
+.kb-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-tooltip__popper {
+  position: absolute;
+  z-index: var(--kb-z-index-modal);
+  max-width: 240px;
+  padding: var(--kb-space-1) var(--kb-space-2);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-text-1);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1.5;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.kb-tooltip__popper--top {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-tooltip__popper--bottom {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-tooltip__popper--left {
+  top: 50%;
+  right: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+
+.kb-tooltip__popper--right {
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+}

package/dist/styles/Transfer.css

@@ -0,0 +1,64 @@
+.kb-transfer {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+}
+
+.kb-transfer__box {
+  width: 180px;
+  height: 220px;
+  overflow-y: auto;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+}
+
+.kb-transfer__title {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-transfer__item {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-transfer__item:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-transfer__item--selected {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-transfer__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-2);
+}
+
+.kb-transfer__move {
+  width: 36px;
+  height: 32px;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-transfer__move:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.kb-transfer__move:hover:not(:disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}

package/dist/styles/Tree.css

@@ -0,0 +1,50 @@
+.kb-tree {
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+}
+
+.kb-tree__row {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  border-radius: var(--kb-radius-sm);
+}
+
+.kb-tree__row:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-tree__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--kb-color-text-3);
+  cursor: pointer;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+  flex-shrink: 0;
+}
+
+.kb-tree__toggle--open {
+  transform: rotate(90deg);
+}
+
+.kb-tree__toggle--leaf {
+  cursor: default;
+}
+
+.kb-tree__label {
+  padding: 2px var(--kb-space-2);
+  border-radius: var(--kb-radius-sm);
+  cursor: pointer;
+}
+
+.kb-tree__label--selected {
+  background: color-mix(in srgb, var(--kb-color-primary) 12%, transparent);
+  color: var(--kb-color-primary);
+}
+
+.kb-tree__children {
+  margin-left: var(--kb-space-4);
+}