kb-ui-vue 0.2.0

package/dist/styles/List.css

@@ -0,0 +1,29 @@
+.kb-list {
+  width: 100%;
+}
+
+.kb-list__item {
+  padding: var(--kb-space-3) var(--kb-space-2);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-list__item:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-list--bordered .kb-list__item {
+  border-bottom: 1px solid var(--kb-color-border);
+}
+
+.kb-list--bordered .kb-list__item:last-child {
+  border-bottom: none;
+}
+
+.kb-list__empty {
+  padding: var(--kb-space-5);
+  text-align: center;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}

package/dist/styles/Loading.css

@@ -0,0 +1,27 @@
+.kb-loading {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kb-space-2);
+}
+
+.kb-loading__spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: var(--kb-color-primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: kb-loading-spin 0.8s linear infinite;
+}
+
+.kb-loading__text {
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+@keyframes kb-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/styles/Message.css

@@ -0,0 +1,32 @@
+.kb-message {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-2) var(--kb-space-4);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+}
+
+.kb-message--success {
+  color: var(--kb-color-success);
+}
+
+.kb-message--error {
+  color: var(--kb-color-danger);
+}
+
+.kb-message--warning {
+  color: var(--kb-color-warning);
+}
+
+.kb-message--info {
+  color: var(--kb-color-info);
+}
+
+.kb-message__content {
+  color: var(--kb-color-text-1);
+  line-height: 1.5;
+}

package/dist/styles/Notification.css

@@ -0,0 +1,50 @@
+.kb-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kb-space-2);
+  width: 320px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-notification__icon {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.kb-notification--success .kb-notification__icon {
+  color: var(--kb-color-success);
+}
+
+.kb-notification--error .kb-notification__icon {
+  color: var(--kb-color-danger);
+}
+
+.kb-notification--warning .kb-notification__icon {
+  color: var(--kb-color-warning);
+}
+
+.kb-notification--info .kb-notification__icon {
+  color: var(--kb-color-info);
+}
+
+.kb-notification__main {
+  flex: 1;
+}
+
+.kb-notification__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 600;
+}
+
+.kb-notification__message {
+  margin-top: 2px;
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  line-height: 1.5;
+}

package/dist/styles/Pagination.css

@@ -0,0 +1,57 @@
+.kb-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-pagination__total {
+  margin-right: var(--kb-space-2);
+  color: var(--kb-color-text-2);
+}
+
+.kb-pagination__item,
+.kb-pagination__prev,
+.kb-pagination__next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 0 var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  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-pagination__prev:disabled,
+.kb-pagination__next:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.kb-pagination__item:hover:not(.kb-pagination__item--active),
+.kb-pagination__prev:hover:not(:disabled),
+.kb-pagination__next:hover:not(:disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-pagination__item--active {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}
+
+.kb-pagination__more {
+  color: var(--kb-color-text-3);
+  padding: 0 var(--kb-space-1);
+}

package/dist/styles/Popconfirm.css

@@ -0,0 +1,53 @@
+.kb-popconfirm {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-popconfirm__panel {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  z-index: var(--kb-z-index-modal);
+  min-width: 160px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+  transform: translateX(-50%);
+}
+
+.kb-popconfirm__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-popconfirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--kb-space-2);
+  margin-top: var(--kb-space-3);
+}
+
+.kb-popconfirm__cancel,
+.kb-popconfirm__ok {
+  padding: var(--kb-space-1) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+  cursor: pointer;
+}
+
+.kb-popconfirm__ok {
+  border-color: var(--kb-color-danger);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+}
+
+.kb-popconfirm__cancel:hover {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}

package/dist/styles/Popover.css

@@ -0,0 +1,54 @@
+.kb-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-popover__panel {
+  position: absolute;
+  z-index: var(--kb-z-index-modal);
+  min-width: 160px;
+  max-width: 280px;
+  box-sizing: border-box;
+  padding: var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-popover__panel--top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-popover__panel--bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.kb-popover__panel--left {
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.kb-popover__panel--right {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.kb-popover__title {
+  margin-bottom: var(--kb-space-1);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  font-weight: 600;
+}
+
+.kb-popover__content {
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  line-height: 1.6;
+}

package/dist/styles/Progress.css

@@ -0,0 +1,38 @@
+.kb-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-2);
+  width: 100%;
+}
+
+.kb-progress__track {
+  flex: 1;
+  overflow: hidden;
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-progress__bar {
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-primary-gradient);
+  transition: width var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-progress__bar--success {
+  background: var(--kb-color-success);
+}
+
+.kb-progress__bar--warning {
+  background: var(--kb-color-warning);
+}
+
+.kb-progress__bar--danger {
+  background: var(--kb-color-danger);
+}
+
+.kb-progress__text {
+  min-width: 40px;
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-sm);
+  text-align: right;
+}

package/dist/styles/Radio.css

@@ -0,0 +1,60 @@
+.kb-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kb-space-1);
+  cursor: pointer;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  user-select: none;
+}
+
+.kb-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.kb-radio__inner {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-radio__inner::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--kb-color-bg);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-radio--checked .kb-radio__inner {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-radio--checked .kb-radio__inner::after {
+  background: var(--kb-color-primary);
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.kb-radio__label {
+  line-height: 1;
+}

package/dist/styles/Rate.css

@@ -0,0 +1,21 @@
+.kb-rate {
+  display: inline-flex;
+  gap: var(--kb-space-1);
+  font-size: 20px;
+  line-height: 1;
+}
+
+.kb-rate__star {
+  color: var(--kb-color-border);
+  cursor: pointer;
+  user-select: none;
+  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-rate__star:hover {
+  color: var(--kb-color-warning);
+}
+
+.kb-rate__star--active {
+  color: var(--kb-color-warning);
+}

package/dist/styles/Result.css

@@ -0,0 +1,41 @@
+.kb-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-2);
+  padding: var(--kb-space-6);
+  text-align: center;
+}
+
+.kb-result__icon--success {
+  color: var(--kb-color-success);
+}
+
+.kb-result__icon--error {
+  color: var(--kb-color-danger);
+}
+
+.kb-result__icon--warning {
+  color: var(--kb-color-warning);
+}
+
+.kb-result__icon--info {
+  color: var(--kb-color-info);
+}
+
+.kb-result__title {
+  margin: var(--kb-space-2) 0 0;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-xl);
+}
+
+.kb-result__description {
+  margin: 0;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-result__action {
+  margin-top: var(--kb-space-3);
+}

package/dist/styles/Search.css

@@ -0,0 +1,46 @@
+.kb-search {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  overflow: hidden;
+  transition: border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-search:focus-within {
+  border-color: var(--kb-color-primary);
+}
+
+.kb-search__icon {
+  margin-left: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+}
+
+.kb-search__input {
+  flex: 1;
+  min-width: 160px;
+  padding: var(--kb-space-2);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-search__input::placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-search__button {
+  padding: var(--kb-space-2) var(--kb-space-4);
+  border: none;
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-search__button:hover {
+  filter: brightness(0.94);
+}

package/dist/styles/Segmented.css

@@ -0,0 +1,32 @@
+.kb-segmented {
+  display: inline-flex;
+  padding: 3px;
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg-elevated);
+  gap: 2px;
+}
+
+.kb-segmented__item {
+  padding: var(--kb-space-1) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing),
+    box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-segmented__item--active {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-primary);
+  box-shadow: var(--kb-shadow-1);
+  font-weight: 500;
+}
+
+.kb-segmented__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}

package/dist/styles/Select.css

@@ -0,0 +1,108 @@
+.kb-select {
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  box-sizing: border-box;
+}
+
+.kb-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  padding: 0 var(--kb-space-3);
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  cursor: pointer;
+  transition:
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-select__trigger:hover {
+  border-color: var(--kb-color-text-3);
+}
+
+.kb-select--open .kb-select__trigger {
+  border-color: var(--kb-color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-color-primary) 15%, transparent);
+}
+
+.kb-select--small .kb-select__trigger {
+  height: 28px;
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-select--large .kb-select__trigger {
+  height: 40px;
+  font-size: var(--kb-font-size-lg);
+}
+
+.kb-select--disabled .kb-select__trigger {
+  border-color: var(--kb-color-border);
+  background: var(--kb-color-bg-elevated);
+  cursor: not-allowed;
+  color: var(--kb-color-text-3);
+}
+
+.kb-select__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--kb-color-text-1);
+}
+
+.kb-select__placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-select__arrow {
+  margin-left: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-select--open .kb-select__arrow {
+  transform: rotate(180deg);
+}
+
+.kb-select__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: var(--kb-z-index-modal);
+  box-sizing: border-box;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--kb-space-1);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-select__option {
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-1);
+  cursor: pointer;
+}
+
+.kb-select__option:hover:not(.kb-select__option--disabled) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-select__option--selected {
+  color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-select__option--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}

package/dist/styles/Skeleton.css

@@ -0,0 +1,40 @@
+.kb-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kb-space-2);
+}
+
+.kb-skeleton__item {
+  height: 14px;
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-skeleton__item:nth-child(2) {
+  width: 80%;
+}
+
+.kb-skeleton__item:nth-child(3) {
+  width: 60%;
+}
+
+.kb-skeleton--animated .kb-skeleton__item {
+  background: linear-gradient(
+    90deg,
+    var(--kb-color-bg-elevated) 25%,
+    color-mix(in srgb, var(--kb-color-border) 40%, var(--kb-color-bg-elevated)) 37%,
+    var(--kb-color-bg-elevated) 63%
+  );
+  background-size: 400% 100%;
+  animation: kb-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes kb-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}