kb-ui-vue 0.2.0

package/dist/styles/Alert.css

@@ -0,0 +1,68 @@
+.kb-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kb-space-2);
+  box-sizing: border-box;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-radius: var(--kb-radius-md);
+  border: 1px solid transparent;
+  font-size: var(--kb-font-size-md);
+}
+
+.kb-alert--info {
+  border-color: color-mix(in srgb, var(--kb-color-info) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-info) 8%, transparent);
+  color: var(--kb-color-info);
+}
+
+.kb-alert--success {
+  border-color: color-mix(in srgb, var(--kb-color-success) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-success) 8%, transparent);
+  color: var(--kb-color-success);
+}
+
+.kb-alert--warning {
+  border-color: color-mix(in srgb, var(--kb-color-warning) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-warning) 8%, transparent);
+  color: var(--kb-color-warning);
+}
+
+.kb-alert--danger {
+  border-color: color-mix(in srgb, var(--kb-color-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--kb-color-danger) 8%, transparent);
+  color: var(--kb-color-danger);
+}
+
+.kb-alert__icon {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.kb-alert__main {
+  flex: 1;
+}
+
+.kb-alert__title {
+  font-weight: 600;
+  color: var(--kb-color-text-1);
+}
+
+.kb-alert__content {
+  color: var(--kb-color-text-2);
+  line-height: 1.6;
+}
+
+.kb-alert__close {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: var(--kb-font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.kb-alert__close:hover {
+  opacity: 1;
+}

package/dist/styles/Avatar.css

@@ -0,0 +1,31 @@
+.kb-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-text-2);
+  flex-shrink: 0;
+}
+
+.kb-avatar--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kb-avatar__fallback {
+  font-size: 0.5em;
+  line-height: 1;
+}
+
+.kb-avatar__icon {
+  width: 50%;
+  height: 50%;
+}

package/dist/styles/Badge.css

@@ -0,0 +1,49 @@
+.kb-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.kb-badge--independent {
+  display: inline-flex;
+}
+
+.kb-badge__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--kb-space-1);
+  border-radius: var(--kb-radius-round);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+  font-size: var(--kb-font-size-xs);
+  line-height: 1;
+}
+
+.kb-badge--independent .kb-badge__content {
+  position: static;
+}
+
+.kb-badge__content:not(.kb-badge--independent, .kb-badge__content--dot) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.kb-badge__content--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+}
+
+.kb-badge__content--dot:not(.kb-badge--independent) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}

package/dist/styles/Breadcrumb.css

@@ -0,0 +1,28 @@
+.kb-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--kb-space-1);
+  font-size: var(--kb-font-size-md);
+  color: var(--kb-color-text-2);
+}
+
+.kb-breadcrumb__item a {
+  color: var(--kb-color-text-2);
+  text-decoration: none;
+  transition: color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-breadcrumb__item a:hover {
+  color: var(--kb-color-primary);
+}
+
+.kb-breadcrumb__item--current {
+  color: var(--kb-color-text-1);
+  font-weight: 500;
+}
+
+.kb-breadcrumb__separator {
+  color: var(--kb-color-text-3);
+  margin: 0 var(--kb-space-1);
+}

package/dist/styles/Button.css

@@ -0,0 +1,108 @@
+.kb-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kb-space-1);
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  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;
+  cursor: pointer;
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing),
+    color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-button:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.kb-button--round {
+  border-radius: var(--kb-radius-round);
+}
+
+.kb-button--small {
+  padding: var(--kb-space-1) var(--kb-space-2);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-button--medium {
+  padding: var(--kb-space-2) var(--kb-space-4);
+}
+
+.kb-button--large {
+  padding: var(--kb-space-3) var(--kb-space-5);
+  font-size: var(--kb-font-size-lg);
+}
+
+.kb-button--primary {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary-gradient);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--primary:hover:not(.kb-button--disabled) {
+  border-color: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+  filter: brightness(0.94);
+}
+
+.kb-button--success {
+  border-color: var(--kb-color-success);
+  background: var(--kb-color-success);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--warning {
+  border-color: var(--kb-color-warning);
+  background: var(--kb-color-warning);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--danger {
+  border-color: var(--kb-color-danger);
+  background: var(--kb-color-danger);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--info {
+  border-color: var(--kb-color-info);
+  background: var(--kb-color-info);
+  color: var(--kb-color-bg);
+}
+
+.kb-button--plain.kb-button--primary {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-primary);
+}
+
+.kb-button--plain.kb-button--success {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-success);
+}
+
+.kb-button--plain.kb-button--warning {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-warning);
+}
+
+.kb-button--plain.kb-button--danger {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-danger);
+}
+
+.kb-button--plain.kb-button--info {
+  background: var(--kb-color-bg);
+  color: var(--kb-color-info);
+}

package/dist/styles/Calendar.css

@@ -0,0 +1,79 @@
+.kb-calendar {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  padding: var(--kb-space-3);
+  background: var(--kb-color-bg);
+}
+
+.kb-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--kb-space-3);
+}
+
+.kb-calendar__title {
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-calendar__nav {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-2);
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.kb-calendar__nav:hover {
+  background: var(--kb-color-bg-elevated);
+  color: var(--kb-color-primary);
+}
+
+.kb-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--kb-space-1);
+}
+
+.kb-calendar__week-label {
+  text-align: center;
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.kb-calendar__day {
+  aspect-ratio: 1;
+  border: none;
+  border-radius: var(--kb-radius-sm);
+  background: transparent;
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-sm);
+  cursor: pointer;
+}
+
+.kb-calendar__day:hover:not(.kb-calendar__day--active) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-calendar__day--outside {
+  color: var(--kb-color-text-3);
+  opacity: 0.5;
+}
+
+.kb-calendar__day--active {
+  background: var(--kb-color-primary);
+  color: var(--kb-color-bg);
+}

package/dist/styles/Card.css

@@ -0,0 +1,40 @@
+.kb-card {
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-lg);
+  background: var(--kb-color-bg);
+}
+
+.kb-card--shadow-always {
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-card--shadow-hover {
+  transition: box-shadow var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-card--shadow-hover:hover {
+  box-shadow: var(--kb-shadow-2);
+}
+
+.kb-card__header {
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-bottom: 1px solid var(--kb-color-border);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-lg);
+  font-weight: 600;
+}
+
+.kb-card__body {
+  padding: var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+}
+
+.kb-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  border-top: 1px solid var(--kb-color-border);
+}

package/dist/styles/Carousel.css

@@ -0,0 +1,87 @@
+.kb-carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--kb-radius-lg);
+}
+
+.kb-carousel__item {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--kb-transition-duration) var(--kb-transition-timing);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--kb-color-primary) 18%, transparent), transparent),
+    var(--kb-color-bg-elevated);
+}
+
+.kb-carousel__item--active {
+  opacity: 1;
+}
+
+.kb-carousel__title {
+  color: var(--kb-color-text-1);
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.kb-carousel__description {
+  margin-top: var(--kb-space-2);
+  color: var(--kb-color-text-3);
+  font-size: var(--kb-font-size-sm);
+}
+
+.kb-carousel__prev,
+.kb-carousel__next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 25%);
+  color: var(--kb-color-bg);
+  font-size: 18px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-carousel__prev {
+  left: var(--kb-space-3);
+}
+
+.kb-carousel__next {
+  right: var(--kb-space-3);
+}
+
+.kb-carousel:hover .kb-carousel__prev,
+.kb-carousel:hover .kb-carousel__next {
+  opacity: 1;
+}
+
+.kb-carousel__dots {
+  position: absolute;
+  bottom: var(--kb-space-2);
+  left: 50%;
+  display: flex;
+  gap: var(--kb-space-1);
+  transform: translateX(-50%);
+}
+
+.kb-carousel__dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kb-radius-round);
+  background: rgb(255 255 255 / 50%);
+  cursor: pointer;
+}
+
+.kb-carousel__dot--active {
+  background: var(--kb-color-bg);
+}

package/dist/styles/Cascader.css

@@ -0,0 +1,75 @@
+.kb-cascader {
+  position: relative;
+  display: inline-block;
+}
+
+.kb-cascader__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 200px;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+}
+
+.kb-cascader__placeholder {
+  color: var(--kb-color-text-3);
+}
+
+.kb-cascader__arrow {
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+}
+
+.kb-cascader__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--kb-z-index-modal);
+  display: flex;
+  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-cascader__column {
+  min-width: 140px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--kb-space-1);
+}
+
+.kb-cascader__column + .kb-cascader__column {
+  border-left: 1px solid var(--kb-color-border);
+}
+
+.kb-cascader__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kb-space-2) var(--kb-space-3);
+  border-radius: var(--kb-radius-sm);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.kb-cascader__option:hover {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-cascader__option--active {
+  color: var(--kb-color-primary);
+  font-weight: 500;
+}
+
+.kb-cascader__more {
+  color: var(--kb-color-text-3);
+}

package/dist/styles/Checkbox.css

@@ -0,0 +1,62 @@
+.kb-checkbox {
+  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-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.kb-checkbox__inner {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  background: var(--kb-color-bg);
+  transition:
+    background var(--kb-transition-duration) var(--kb-transition-timing),
+    border-color var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-checkbox__inner::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid var(--kb-color-bg);
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg) scale(0);
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-checkbox--checked .kb-checkbox__inner {
+  border-color: var(--kb-color-primary);
+  background: var(--kb-color-primary);
+}
+
+.kb-checkbox--checked .kb-checkbox__inner::after {
+  transform: rotate(45deg) scale(1);
+}
+
+.kb-checkbox__label {
+  line-height: 1;
+}

package/dist/styles/Collapse.css

@@ -0,0 +1,49 @@
+.kb-collapse {
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-md);
+  overflow: hidden;
+}
+
+.kb-collapse__panel + .kb-collapse__panel {
+  border-top: 1px solid var(--kb-color-border);
+}
+
+.kb-collapse__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kb-space-3) var(--kb-space-4);
+  background: var(--kb-color-bg);
+  color: var(--kb-color-text-1);
+  font-size: var(--kb-font-size-md);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-collapse__header:hover:not(.kb-collapse__header--disabled) {
+  background: var(--kb-color-bg-elevated);
+}
+
+.kb-collapse__header--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.kb-collapse__arrow {
+  color: var(--kb-color-text-3);
+  font-size: 12px;
+  transition: transform var(--kb-transition-duration) var(--kb-transition-timing);
+}
+
+.kb-collapse__arrow--open {
+  transform: rotate(180deg);
+}
+
+.kb-collapse__content {
+  padding: var(--kb-space-3) var(--kb-space-4);
+  color: var(--kb-color-text-2);
+  font-size: var(--kb-font-size-md);
+  line-height: 1.6;
+  background: var(--kb-color-bg-elevated);
+}

package/dist/styles/ColorPicker.css

@@ -0,0 +1,36 @@
+.kb-colorpicker {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-3);
+}
+
+.kb-colorpicker__value {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--kb-color-border);
+  border-radius: var(--kb-radius-sm);
+  flex-shrink: 0;
+}
+
+.kb-colorpicker__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kb-space-1);
+}
+
+.kb-colorpicker__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--kb-radius-sm);
+  cursor: pointer;
+}
+
+.kb-colorpicker__swatch--active {
+  border-color: var(--kb-color-text-1);
+}
+
+.kb-colorpicker__swatch:hover {
+  transform: scale(1.1);
+}