npm - @krometra/ui-kit - Versions diffs - 0.0.0-stage → 0.4.0 - Mend

@krometra/ui-kit 0.0.0-stage → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/LICENSE +21 -0
package/README.md +235 -2
package/dist/ui-kit.css +2 -0
package/dist/ui-kit.js +15222 -0
package/dist/ui-kit.umd.cjs +3 -0
package/package.json +74 -3
package/src/base.css +32 -0
package/src/components/KAlert.vue +65 -0
package/src/components/KAvatar.vue +67 -0
package/src/components/KBadge.vue +47 -0
package/src/components/KButton.vue +98 -0
package/src/components/KCard.vue +63 -0
package/src/components/KCheckbox.vue +105 -0
package/src/components/KCombobox.vue +232 -0
package/src/components/KCountdown.vue +74 -0
package/src/components/KDescriptions.vue +40 -0
package/src/components/KDropdown.vue +111 -0
package/src/components/KEmpty.vue +39 -0
package/src/components/KFileUpload.vue +121 -0
package/src/components/KFilterBar.vue +91 -0
package/src/components/KGantt.vue +398 -0
package/src/components/KIcon.vue +53 -0
package/src/components/KInput.vue +108 -0
package/src/components/KMenuItem.vue +56 -0
package/src/components/KModal.vue +136 -0
package/src/components/KMoney.vue +44 -0
package/src/components/KPage.vue +93 -0
package/src/components/KPagination.vue +113 -0
package/src/components/KProgress.vue +63 -0
package/src/components/KRadioGroup.vue +103 -0
package/src/components/KSegmented.vue +88 -0
package/src/components/KSelect.vue +231 -0
package/src/components/KShell.vue +176 -0
package/src/components/KStat.vue +74 -0
package/src/components/KSteps.vue +119 -0
package/src/components/KSwitch.vue +82 -0
package/src/components/KTable.vue +161 -0
package/src/components/KTabs.vue +102 -0
package/src/components/KTextarea.vue +79 -0
package/src/components/KTimeline.vue +72 -0
package/src/components/KToast.vue +34 -0
package/src/components/KToastItem.vue +86 -0
package/src/components/KTooltip.vue +67 -0
package/src/components/icon-registry.js +143 -0
package/src/composables/useToast.js +52 -0
package/src/format.js +137 -0
package/src/index.js +85 -0
package/src/theme.js +417 -0
package/src/tokens.css +109 -0

package/src/components/KSegmented.vue ADDED Viewed

@@ -0,0 +1,88 @@
+<script setup>
+/**
+ * KSegmented — компактный переключатель режимов (карточки/таблица, день/месяц)
+ * на @zag-js/radio-group: семантически это радио-группа, поэтому стрелки и
+ * фокус работают как у неё. В отличие от KTabs не претендует на навигацию.
+ *
+ *   options: [{ value, label?, icon?, title? }]
+ */
+import * as radio from '@zag-js/radio-group'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  options: { type: Array, default: () => [] },
+  size: { type: String, default: 'md' }, // sm | md
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue'])
+const service = useMachine(radio.machine, {
+  id: useId(),
+  orientation: 'horizontal',
+  get value() {
+    return props.modelValue === '' || props.modelValue == null ? null : String(props.modelValue)
+  },
+  get disabled() {
+    return props.disabled
+  },
+  onValueChange({ value }) {
+    const item = props.options.find((o) => String(o.value) === value)
+    emit('update:modelValue', item ? item.value : value)
+  },
+})
+const api = computed(() => radio.connect(service, normalizeProps))
+</script>
+<template>
+  <div class="k-segmented" :class="`k-segmented--${size}`" v-bind="api.getRootProps()">
+    <label
+      v-for="opt in options"
+      :key="opt.value"
+      class="k-segmented__item"
+      :title="opt.title"
+      v-bind="api.getItemProps({ value: String(opt.value) })"
+    >
+      <input v-bind="api.getItemHiddenInputProps({ value: String(opt.value) })" />
+      <KIcon v-if="opt.icon" :name="opt.icon" :size="size === 'sm' ? 14 : 16" />
+      <span v-if="opt.label" v-bind="api.getItemTextProps({ value: String(opt.value) })">{{ opt.label }}</span>
+    </label>
+  </div>
+</template>
+<style scoped>
+.k-segmented {
+  display: inline-flex;
+  padding: 0.15rem;
+  background: var(--k-surface-muted);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius-sm);
+  gap: 0.15rem;
+}
+.k-segmented__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.65rem;
+  border-radius: calc(var(--k-radius-sm) - 2px);
+  font-size: 0.875rem;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
+}
+.k-segmented--sm .k-segmented__item { padding: 0.2rem 0.5rem; font-size: 0.8125rem; }
+.k-segmented__item[data-hover]:not([data-disabled]) { color: var(--k-text); }
+.k-segmented__item[data-focus-visible] { box-shadow: 0 0 0 2px var(--k-primary); }
+.k-segmented__item[data-disabled] { cursor: not-allowed; opacity: 0.5; }
+.k-segmented__item[data-state="checked"] {
+  background: var(--k-surface);
+  color: var(--k-text);
+  font-weight: 550;
+  box-shadow: var(--k-shadow-sm);
+}
+</style>

package/src/components/KSelect.vue ADDED Viewed

@@ -0,0 +1,231 @@
+<script setup>
+/**
+ * KSelect — выпадающий список с одиночным выбором на @zag-js/select.
+ *
+ * Опции — массив строк или любых объектов; ключ и подпись извлекаются через
+ * `getValue`/`getLabel`, поэтому в v-model живёт исходное значение (число,
+ * строка, id), а не его строковое представление. Список рендерится в <body>,
+ * чтобы не обрезаться внутри модалок и карточек с overflow.
+ *
+ *   <KSelect v-model="role" label="Роль" :options="[{ value: 'admin', label: 'Администратор' }]" />
+ *   <KSelect v-model="volumeId" :options="volumes" :get-value="v => v.id" :get-label="v => v.name" clearable />
+ */
+import * as select from '@zag-js/select'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, ref, useAttrs, useId } from 'vue'
+import KIcon from './KIcon.vue'
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, null], default: null },
+  options: { type: Array, default: () => [] },
+  getValue: { type: Function, default: (o) => o.value },
+  getLabel: { type: Function, default: (o) => o.label },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: 'Выберите…' },
+  hint: { type: String, default: '' },
+  error: { type: String, default: '' },
+  name: { type: String, default: '' },
+  required: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue'])
+const box = ref(null)
+const items = computed(() =>
+  props.options.map((o) => (typeof o === 'object' && o !== null ? o : { value: o, label: String(o) })),
+)
+const keyOf = (item) => String(props.getValue(item))
+const labelOf = (item) => String(props.getLabel(item))
+const collection = computed(() =>
+  select.collection({ items: items.value, itemToValue: keyOf, itemToString: labelOf }),
+)
+function itemFor(raw) {
+  if (raw == null || raw === '') return undefined
+  return items.value.find((i) => keyOf(i) === String(raw))
+}
+const service = useMachine(select.machine, {
+  id: useId(),
+  positioning: { sameWidth: true, getAnchorElement: () => box.value },
+  get collection() {
+    return collection.value
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get invalid() {
+    return !!props.error
+  },
+  get required() {
+    return props.required
+  },
+  get name() {
+    return props.name || undefined
+  },
+  get value() {
+    const match = itemFor(props.modelValue)
+    return match ? [keyOf(match)] : []
+  },
+  onValueChange({ value }) {
+    const item = itemFor(value[0])
+    emit('update:modelValue', item !== undefined ? props.getValue(item) : null)
+  },
+})
+const api = computed(() => select.connect(service, normalizeProps))
+</script>
+<template>
+  <div class="k-select" v-bind="{ ...rootAttrs, ...api.getRootProps() }">
+    <label v-if="label" class="k-select__label" v-bind="api.getLabelProps()">
+      {{ label }}<span v-if="required" class="k-select__req">*</span>
+    </label>
+    <div
+      ref="box"
+      class="k-select__box"
+      :class="{ 'k-select__box--error': error, 'k-select__box--disabled': disabled }"
+      v-bind="api.getControlProps()"
+    >
+      <button class="k-select__trigger" v-bind="api.getTriggerProps()">
+        <span
+          class="k-select__value"
+          :class="{ 'k-select__value--placeholder': !api.hasSelectedItems }"
+          v-bind="api.getValueTextProps()"
+        >{{ api.hasSelectedItems ? api.valueAsString : placeholder }}</span>
+      </button>
+      <button
+        v-if="clearable && api.hasSelectedItems"
+        class="k-select__clear"
+        aria-label="Очистить"
+        v-bind="api.getClearTriggerProps()"
+      >
+        <KIcon name="close" :size="14" />
+      </button>
+      <span class="k-select__chevron" v-bind="api.getIndicatorProps()">
+        <KIcon name="chevron-down" :size="16" />
+      </span>
+    </div>
+    <select v-bind="api.getHiddenSelectProps()">
+      <option v-for="item in items" :key="keyOf(item)" :value="keyOf(item)">{{ labelOf(item) }}</option>
+    </select>
+    <span v-if="error" class="k-select__error">{{ error }}</span>
+    <span v-else-if="hint" class="k-select__hint">{{ hint }}</span>
+    <Teleport to="body">
+      <div v-bind="api.getPositionerProps()">
+        <ul class="k-select__content" v-bind="api.getContentProps()">
+          <li
+            v-for="item in items"
+            :key="keyOf(item)"
+            class="k-select__item"
+            v-bind="api.getItemProps({ item })"
+          >
+            <span class="k-select__item-text" v-bind="api.getItemTextProps({ item })">{{ labelOf(item) }}</span>
+            <span class="k-select__item-check" v-bind="api.getItemIndicatorProps({ item })">
+              <KIcon name="check" :size="15" />
+            </span>
+          </li>
+          <li v-if="!items.length" class="k-select__empty">Нет вариантов</li>
+        </ul>
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style scoped>
+.k-select { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; min-width: 0; }
+.k-select__label { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-select__req { color: var(--k-danger); margin-left: 2px; }
+.k-select__box {
+  display: flex;
+  align-items: center;
+  height: var(--k-control-h);
+  padding-right: 0.5rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  border-radius: var(--k-radius-sm);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.k-select__box:focus-within { border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
+.k-select__box--error { border-color: var(--k-danger); }
+.k-select__box--error:focus-within { box-shadow: 0 0 0 3px var(--k-danger-soft); }
+.k-select__box--disabled { background: var(--k-surface-muted); }
+.k-select__trigger {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 0.625rem;
+  border: none;
+  background: none;
+  outline: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.k-select__trigger:disabled { cursor: not-allowed; color: var(--k-text-muted); }
+.k-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k-select__value--placeholder { color: var(--k-text-faint); }
+.k-select__clear {
+  display: inline-flex;
+  padding: 0.15rem;
+  border: none;
+  border-radius: var(--k-radius-sm);
+  background: none;
+  color: var(--k-text-faint);
+  cursor: pointer;
+}
+.k-select__clear:hover { color: var(--k-text); background: var(--k-surface-muted); }
+.k-select__chevron { display: inline-flex; color: var(--k-text-faint); pointer-events: none; transition: transform 0.15s; }
+.k-select__chevron[data-state="open"] { transform: rotate(180deg); }
+.k-select__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+.k-select__error { font-size: 0.75rem; color: var(--k-danger); }
+/* zag читает вычисленный z-index контента и переносит его на positioner —
+   задаём здесь, выше модалки (1000), чтобы список не прятался под ней. */
+.k-select__content {
+  z-index: 1100;
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem;
+  max-height: 260px;
+  overflow-y: auto;
+  min-width: var(--reference-width);
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-md);
+  outline: none;
+}
+.k-select__content[hidden] { display: none; }
+.k-select__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: var(--k-radius-sm);
+  font-size: 0.9rem;
+  color: var(--k-text);
+  cursor: pointer;
+}
+.k-select__item[data-highlighted] { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-select__item[data-state="checked"] { font-weight: 600; }
+.k-select__item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+.k-select__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.k-select__item-check { display: inline-flex; flex: none; }
+.k-select__item-check[hidden] { display: none; }
+.k-select__empty { padding: 0.5rem 0.6rem; font-size: 0.875rem; color: var(--k-text-muted); }
+</style>

package/src/components/KShell.vue ADDED Viewed

@@ -0,0 +1,176 @@
+<script setup>
+/**
+ * KShell — каркас приложения: светлый боковой навигатор + верхняя шапка.
+ *
+ * Сайдбар намеренно светлый: в интерфейсах с плотными таблицами тёмная колонка
+ * перетягивает внимание с данных. Цвета берутся из темы, поэтому под конкретный
+ * проект каркас перекрашивается без правок разметки.
+ *
+ *   nav: [{ section?, items: [{ label, to, icon?, badge? }] }]
+ *
+ * Слоты: #logo, #header-actions, #user, по умолчанию — контент страницы.
+ */
+import { ref } from 'vue'
+import KIcon from './KIcon.vue'
+defineProps({
+  nav: { type: Array, default: () => [] },
+  title: { type: String, default: '' },
+})
+const open = ref(false)
+</script>
+<template>
+  <div class="k-shell" :class="{ 'k-shell--nav-open': open }">
+    <aside class="k-shell__sidebar">
+      <div class="k-shell__logo">
+        <slot name="logo">{{ title }}</slot>
+      </div>
+      <nav class="k-shell__nav">
+        <template v-for="(group, gi) in nav" :key="gi">
+          <p v-if="group.section" class="k-shell__section">{{ group.section }}</p>
+          <router-link
+            v-for="item in group.items"
+            :key="item.to"
+            :to="item.to"
+            class="k-shell__link"
+            @click="open = false"
+          >
+            <KIcon v-if="item.icon" :name="item.icon" :size="17" class="k-shell__link-icon" />
+            <span class="k-shell__link-label">{{ item.label }}</span>
+            <span v-if="item.badge" class="k-shell__badge">{{ item.badge }}</span>
+          </router-link>
+        </template>
+      </nav>
+      <div v-if="$slots.sidebarFooter" class="k-shell__sidebar-footer">
+        <slot name="sidebarFooter" />
+      </div>
+    </aside>
+    <div class="k-shell__main">
+      <header class="k-shell__header">
+        <button class="k-shell__burger" aria-label="Меню" @click="open = !open">
+          <KIcon :name="open ? 'close' : 'menu'" :size="20" />
+        </button>
+        <div class="k-shell__header-left"><slot name="header-left" /></div>
+        <div class="k-shell__header-actions">
+          <slot name="header-actions" />
+          <slot name="user" />
+        </div>
+      </header>
+      <main class="k-shell__content"><slot /></main>
+    </div>
+    <div class="k-shell__overlay" @click="open = false" />
+  </div>
+</template>
+<style scoped>
+.k-shell { display: flex; min-height: 100vh; background: var(--k-bg); }
+.k-shell__sidebar {
+  width: 15rem;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  background: var(--k-surface);
+  border-right: 1px solid var(--k-border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+.k-shell__logo {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  height: 3.75rem;
+  padding: 0 1.125rem;
+  border-bottom: 1px solid var(--k-border);
+  font-size: 1.0625rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.k-shell__nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.625rem; }
+.k-shell__section {
+  padding: 0.9rem 0.55rem 0.35rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--k-text-faint);
+}
+.k-shell__link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.55rem;
+  border-radius: var(--k-radius-sm);
+  color: var(--k-text-muted);
+  font-size: 0.9375rem;
+  text-decoration: none;
+  transition: background 0.12s, color 0.12s;
+}
+.k-shell__link:hover { background: var(--k-surface-muted); color: var(--k-text); text-decoration: none; }
+.k-shell__link.router-link-active {
+  background: var(--k-primary-soft);
+  color: var(--k-primary);
+  font-weight: 550;
+}
+.k-shell__link-icon { color: currentColor; }
+.k-shell__link-label { flex: 1; min-width: 0; }
+.k-shell__badge {
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+  background: var(--k-danger);
+  color: var(--k-on-danger);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+.k-shell__sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--k-border); }
+.k-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.k-shell__header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: 3.75rem;
+  padding: 0 1.25rem;
+  background: color-mix(in srgb, var(--k-surface) 85%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--k-border);
+}
+.k-shell__header-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; }
+.k-shell__header-actions { display: flex; align-items: center; gap: 0.5rem; }
+.k-shell__burger {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  padding: 0.25rem;
+}
+.k-shell__content { flex: 1; min-width: 0; }
+.k-shell__overlay { display: none; }
+@media (max-width: 900px) {
+  .k-shell__sidebar {
+    position: fixed;
+    z-index: 70;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    box-shadow: var(--k-shadow-lg);
+  }
+  .k-shell--nav-open .k-shell__sidebar { transform: none; }
+  .k-shell--nav-open .k-shell__overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    background: var(--k-overlay);
+  }
+  .k-shell__burger { display: inline-flex; }
+}
+</style>

package/src/components/KStat.vue ADDED Viewed

@@ -0,0 +1,74 @@
+<script setup>
+/**
+ * KStat — плитка ключевой метрики для дашборда.
+ *
+ * `trend` — изменение в процентах: положительное красится в зелёный со стрелкой
+ * вверх, отрицательное в красный. Для метрик, где снижение это хорошо (расходы,
+ * время отклика, число ошибок), передайте `invert`.
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+const props = defineProps({
+  label: { type: String, default: '' },
+  value: { type: [String, Number], default: '' },
+  hint: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  tone: { type: String, default: 'neutral' }, // neutral | primary | success | warning | danger
+  trend: { type: Number, default: null },
+  invert: { type: Boolean, default: false },
+})
+const good = computed(() => (props.invert ? props.trend < 0 : props.trend > 0))
+</script>
+<template>
+  <div class="k-stat">
+    <div class="k-stat__head">
+      <span class="k-stat__label">{{ label }}</span>
+      <span v-if="icon" class="k-stat__icon" :class="`k-stat__icon--${tone}`">
+        <KIcon :name="icon" :size="16" />
+      </span>
+    </div>
+    <div class="k-stat__value"><slot>{{ value }}</slot></div>
+    <div v-if="hint || trend != null" class="k-stat__foot">
+      <span v-if="trend != null" class="k-stat__trend" :class="good ? 'k-stat__trend--good' : 'k-stat__trend--bad'">
+        <KIcon :name="trend > 0 ? 'up' : 'down'" :size="13" />
+        {{ Math.abs(trend).toLocaleString('ru-RU') }}%
+      </span>
+      <span v-if="hint" class="k-stat__hint">{{ hint }}</span>
+    </div>
+  </div>
+</template>
+<style scoped>
+.k-stat {
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-sm);
+  padding: 1rem 1.125rem;
+}
+.k-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+.k-stat__label { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-stat__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--k-radius-sm);
+  background: var(--k-surface-muted);
+  color: var(--k-text-muted);
+}
+.k-stat__icon--primary { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-stat__icon--success { background: var(--k-success-soft); color: var(--k-success); }
+.k-stat__icon--warning { background: var(--k-warning-soft); color: var(--k-warning); }
+.k-stat__icon--danger { background: var(--k-danger-soft); color: var(--k-danger); }
+.k-stat__value { margin-top: 0.35rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
+.k-stat__foot { margin-top: 0.35rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
+.k-stat__trend { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 600; }
+.k-stat__trend--good { color: var(--k-success); }
+.k-stat__trend--bad { color: var(--k-danger); }
+.k-stat__hint { color: var(--k-text-muted); }
+</style>

package/src/components/KSteps.vue ADDED Viewed

@@ -0,0 +1,119 @@
+<script setup>
+/**
+ * KSteps — индикатор шагов мастера на @zag-js/steps.
+ *
+ *   items:   [{ label, hint? }] или строки
+ *   current: индекс текущего шага (с нуля), контролируемый
+ *   clickable: разрешить переход по клику на пройденные шаги (событие `select`)
+ */
+import * as steps from '@zag-js/steps'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  current: { type: Number, default: 0 },
+  clickable: { type: Boolean, default: false },
+})
+const emit = defineEmits(['select'])
+const service = useMachine(steps.machine, {
+  id: useId(),
+  linear: false,
+  get step() {
+    return props.current
+  },
+  get count() {
+    return props.items.length
+  },
+  onStepChange({ step }) {
+    if (step !== props.current) emit('select', step)
+  },
+})
+const api = computed(() => steps.connect(service, normalizeProps))
+const labelOf = (item) => (typeof item === 'string' ? item : item.label)
+const hintOf = (item) => (typeof item === 'string' ? '' : item.hint)
+</script>
+<template>
+  <div class="k-steps" v-bind="api.getRootProps()">
+    <ol class="k-steps__list" v-bind="api.getListProps()">
+      <li v-for="(item, i) in items" :key="i" class="k-steps__item" v-bind="api.getItemProps({ index: i })">
+        <component
+          :is="clickable ? 'button' : 'div'"
+          class="k-steps__trigger"
+          :class="{ 'k-steps__trigger--clickable': clickable && i <= current }"
+          v-bind="clickable ? api.getTriggerProps({ index: i }) : {}"
+          :disabled="clickable && i > current ? true : null"
+        >
+          <span class="k-steps__marker" v-bind="api.getIndicatorProps({ index: i })">
+            <KIcon v-if="i < current" name="check" :size="14" />
+            <template v-else>{{ i + 1 }}</template>
+          </span>
+          <span class="k-steps__body">
+            <span class="k-steps__label">{{ labelOf(item) }}</span>
+            <span v-if="hintOf(item)" class="k-steps__hint">{{ hintOf(item) }}</span>
+          </span>
+        </component>
+        <span v-if="i < items.length - 1" class="k-steps__sep" v-bind="api.getSeparatorProps({ index: i })" />
+      </li>
+    </ol>
+  </div>
+</template>
+<style scoped>
+.k-steps { overflow-x: auto; }
+.k-steps__list {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.k-steps__item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
+.k-steps__trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: var(--k-radius-sm);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
+.k-steps__trigger--clickable { cursor: pointer; }
+.k-steps__trigger--clickable:hover { background: var(--k-surface-muted); }
+.k-steps__trigger:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
+.k-steps__trigger:disabled { cursor: default; }
+.k-steps__sep { width: 1.5rem; height: 1px; background: var(--k-border-strong); flex: none; }
+.k-steps__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 50%;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--k-text-muted);
+  flex: none;
+}
+.k-steps__body { display: flex; flex-direction: column; }
+.k-steps__label { font-size: 0.875rem; color: var(--k-text-muted); }
+.k-steps__hint { font-size: 0.6875rem; color: var(--k-text-faint); }
+.k-steps__marker[data-complete] { background: var(--k-success-soft); border-color: currentColor; color: var(--k-success); }
+.k-steps__trigger[data-complete] .k-steps__label { color: var(--k-text); }
+.k-steps__marker[data-current] { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-on-primary); }
+.k-steps__trigger[data-current] .k-steps__label { color: var(--k-text); font-weight: 600; }
+.k-steps__item[data-complete] .k-steps__label { color: var(--k-text); }
+.k-steps__item[data-current] .k-steps__label { color: var(--k-text); font-weight: 600; }
+</style>