@krometra/ui-kit 0.0.0-stage → 0.4.0

package/src/components/KSwitch.vue

@@ -0,0 +1,82 @@
+<script setup>
+/**
+ * KSwitch — переключатель булевой настройки на @zag-js/switch. Семантически
+ * это checkbox с role="switch"; скрытый input остаётся в форме и в фокусе.
+ */
+import * as zagSwitch from '@zag-js/switch'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  name: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const service = useMachine(zagSwitch.machine, {
+  id: useId(),
+  get checked() {
+    return props.modelValue
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get name() {
+    return props.name || undefined
+  },
+  onCheckedChange({ checked }) {
+    emit('update:modelValue', checked)
+  },
+})
+
+const api = computed(() => zagSwitch.connect(service, normalizeProps))
+</script>
+
+<template>
+  <label class="k-switch" v-bind="api.getRootProps()">
+    <input v-bind="api.getHiddenInputProps()" />
+    <span class="k-switch__track" v-bind="api.getControlProps()">
+      <span class="k-switch__thumb" v-bind="api.getThumbProps()" />
+    </span>
+    <span v-if="label || hint || $slots.default" class="k-switch__body">
+      <span class="k-switch__label" v-bind="api.getLabelProps()"><slot>{{ label }}</slot></span>
+      <span v-if="hint" class="k-switch__hint">{{ hint }}</span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.k-switch { display: inline-flex; align-items: flex-start; gap: 0.625rem; margin: 0; cursor: pointer; font-weight: 400; }
+.k-switch[data-disabled] { cursor: not-allowed; opacity: 0.6; }
+.k-switch__track {
+  position: relative;
+  width: 2.25rem;
+  height: 1.3rem;
+  margin-top: 0.1rem;
+  background: var(--k-border-strong);
+  border-radius: 999px;
+  flex: none;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+.k-switch__track[data-state="checked"] { background: var(--k-primary); }
+.k-switch__track[data-focus-visible] { box-shadow: 0 0 0 3px var(--k-primary-soft); }
+.k-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.05rem;
+  height: 1.05rem;
+  background: var(--k-surface);
+  border-radius: 50%;
+  box-shadow: var(--k-shadow-sm);
+  transition: transform 0.15s;
+}
+.k-switch__thumb[data-state="checked"] { transform: translateX(0.95rem); }
+.k-switch__body { display: flex; flex-direction: column; gap: 0.1rem; }
+.k-switch__label { font-size: 0.9375rem; }
+.k-switch__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+</style>

package/src/components/KTable.vue

@@ -0,0 +1,161 @@
+<script setup>
+/**
+ * KTable — таблица данных с сортировкой, пустым состоянием и пагинацией.
+ *
+ * Колонки описываются спецификацией, ячейки по умолчанию берут row[col.key];
+ * любую можно переопределить слотом `#cell-<key>`. Пагинация контролируемая
+ * (серверная): передайте total + pageSize и v-model:page.
+ *
+ *   columns: [{ key, label, width?, align?, nowrap?, sortable?, actions? }]
+ *
+ *   <KTable :columns="cols" :rows="rows" v-model:page="page"
+ *            :page-size="20" :total="total" clickable @row-click="open">
+ *     <template #cell-status="{ row }"><KBadge>{{ row.status }}</KBadge></template>
+ *   </KTable>
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+import KPagination from './KPagination.vue'
+
+const props = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, default: () => [] },
+  rowKey: { type: [String, Function], default: 'id' },
+  loading: { type: Boolean, default: false },
+  emptyText: { type: String, default: 'Ничего не найдено' },
+  clickable: { type: Boolean, default: false },
+  dense: { type: Boolean, default: false },
+  sortKey: { type: String, default: '' },
+  sortDir: { type: String, default: 'asc' }, // asc | desc
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 0 },
+  total: { type: Number, default: 0 },
+})
+
+const emit = defineEmits(['update:page', 'update:sortKey', 'update:sortDir', 'row-click'])
+
+function keyOf(row, i) {
+  return typeof props.rowKey === 'function' ? props.rowKey(row) : (row[props.rowKey] ?? i)
+}
+
+function toggleSort(col) {
+  if (!col.sortable) return
+  if (props.sortKey === col.key) {
+    emit('update:sortDir', props.sortDir === 'asc' ? 'desc' : 'asc')
+  } else {
+    emit('update:sortKey', col.key)
+    emit('update:sortDir', 'asc')
+  }
+}
+
+const showPagination = computed(() => props.pageSize > 0 && props.total > props.pageSize)
+</script>
+
+<template>
+  <div class="k-table" :class="{ 'k-table--dense': dense }">
+    <div class="k-table__scroll">
+      <table class="k-table__table">
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              :style="{ width: col.width, textAlign: col.align || 'left' }"
+              :class="{ 'k-table__th--sortable': col.sortable }"
+              @click="toggleSort(col)"
+            >
+              <span class="k-table__th-inner">
+                {{ col.label }}
+                <KIcon
+                  v-if="col.sortable"
+                  :name="sortKey === col.key && sortDir === 'desc' ? 'chevron-down' : 'chevron-up'"
+                  :size="13"
+                  :class="['k-table__sort', { 'k-table__sort--active': sortKey === col.key }]"
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="columns.length" class="k-table__msg">
+              <KIcon name="spinner" :size="18" spin /> Загрузка…
+            </td>
+          </tr>
+          <tr v-else-if="!rows.length">
+            <td :colspan="columns.length" class="k-table__msg">
+              <slot name="empty">{{ emptyText }}</slot>
+            </td>
+          </tr>
+          <tr
+            v-for="(row, i) in rows"
+            v-else
+            :key="keyOf(row, i)"
+            :class="{ 'k-table__row--clickable': clickable }"
+            @click="clickable && emit('row-click', row)"
+          >
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              :style="{ textAlign: col.align || 'left', whiteSpace: col.nowrap ? 'nowrap' : null }"
+            >
+              <div v-if="col.actions" class="k-table__actions" @click.stop>
+                <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :index="i" />
+              </div>
+              <slot v-else :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :index="i">
+                {{ row[col.key] }}
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <KPagination
+      v-if="showPagination"
+      :page="page"
+      :page-size="pageSize"
+      :total="total"
+      @update:page="emit('update:page', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.k-table__scroll { overflow-x: auto; }
+.k-table__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
+.k-table__table th,
+.k-table__table td {
+  padding: 0.7rem 0.875rem;
+  text-align: left;
+  border-bottom: 1px solid var(--k-border);
+  vertical-align: middle;
+}
+.k-table--dense .k-table__table th,
+.k-table--dense .k-table__table td { padding: 0.45rem 0.75rem; font-size: 0.875rem; }
+.k-table__table th {
+  position: sticky;
+  top: 0;
+  background: var(--k-surface-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--k-text-muted);
+  white-space: nowrap;
+}
+.k-table__th-inner { display: inline-flex; align-items: center; gap: 0.25rem; }
+.k-table__th--sortable { cursor: pointer; user-select: none; }
+.k-table__th--sortable:hover { color: var(--k-text); }
+.k-table__sort { opacity: 0.35; }
+.k-table__sort--active { opacity: 1; color: var(--k-primary); }
+.k-table__table tbody tr:last-child td { border-bottom: none; }
+.k-table__actions { display: inline-flex; align-items: center; gap: var(--k-gap); }
+.k-table__row--clickable { cursor: pointer; }
+.k-table__row--clickable:hover { background: var(--k-primary-soft); }
+.k-table__msg {
+  text-align: center;
+  color: var(--k-text-muted);
+  padding: 2rem;
+}
+</style>

package/src/components/KTabs.vue

@@ -0,0 +1,102 @@
+<script setup>
+/**
+ * KTabs — горизонтальные вкладки на @zag-js/tabs: навигация стрелками,
+ * roving tabindex и ARIA от машины.
+ *
+ * Только заголовки: содержимое рисует приложение по v-model. Так вкладки можно
+ * привязать к маршруту, не дублируя контент внутри компонента.
+ *
+ *   items: [{ value, label, hint?, icon?, count?, disabled? }]
+ *
+ * hint — пояснение второй строкой под названием вкладки.
+ */
+import * as tabs from '@zag-js/tabs'
+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: '' },
+  items: { type: Array, default: () => [] },
+  variant: { type: String, default: 'line' }, // line | pill
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const service = useMachine(tabs.machine, {
+  id: useId(),
+  get value() {
+    return props.modelValue === '' || props.modelValue == null ? null : String(props.modelValue)
+  },
+  onValueChange({ value }) {
+    const item = props.items.find((i) => String(i.value) === value)
+    emit('update:modelValue', item ? item.value : value)
+  },
+})
+
+const api = computed(() => tabs.connect(service, normalizeProps))
+</script>
+
+<template>
+  <div class="k-tabs" :class="`k-tabs--${variant}`" v-bind="api.getRootProps()">
+    <div class="k-tabs__list" v-bind="api.getListProps()">
+      <button
+        v-for="item in items"
+        :key="item.value"
+        class="k-tabs__tab"
+        :class="{ 'k-tabs__tab--hinted': item.hint }"
+        v-bind="api.getTriggerProps({ value: String(item.value), disabled: item.disabled })"
+      >
+        <span class="k-tabs__label">
+          <KIcon v-if="item.icon" :name="item.icon" :size="15" />
+          {{ item.label }}
+          <span v-if="item.count != null" class="k-tabs__count">{{ item.count }}</span>
+        </span>
+        <span v-if="item.hint" class="k-tabs__hint">{{ item.hint }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-tabs { overflow-x: auto; }
+.k-tabs__list { display: flex; align-items: stretch; gap: 0.25rem; }
+.k-tabs--line .k-tabs__list { border-bottom: 1px solid var(--k-border); }
+.k-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--k-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.k-tabs__tab:focus { outline: none; }
+.k-tabs__tab:focus-visible { outline: 2px solid var(--k-primary); outline-offset: -2px; border-radius: var(--k-radius-sm); }
+.k-tabs__tab[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+.k-tabs--line .k-tabs__tab { border-bottom: 2px solid transparent; margin-bottom: -1px; }
+.k-tabs--line .k-tabs__tab:hover:not([data-disabled]) { color: var(--k-text); }
+.k-tabs--line .k-tabs__tab[data-selected] { color: var(--k-primary); border-bottom-color: var(--k-primary); }
+.k-tabs--pill .k-tabs__tab { border-radius: 999px; padding: 0.4rem 0.85rem; }
+.k-tabs--pill .k-tabs__tab:hover:not([data-disabled]) { background: var(--k-surface-muted); }
+.k-tabs--pill .k-tabs__tab[data-selected] { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-tabs__label { display: inline-flex; align-items: center; gap: 0.4rem; }
+.k-tabs__tab--hinted { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; }
+.k-tabs__hint { font-size: 0.75rem; font-weight: 400; color: var(--k-text-muted); }
+.k-tabs--pill .k-tabs__tab--hinted { border-radius: var(--k-radius-lg); }
+.k-tabs__count {
+  padding: 0.05rem 0.35rem;
+  border-radius: 999px;
+  background: var(--k-surface-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--k-text-muted);
+}
+.k-tabs__tab[data-selected] .k-tabs__count { background: var(--k-primary-soft); color: var(--k-primary); }
+</style>

package/src/components/KTextarea.vue

@@ -0,0 +1,79 @@
+<script setup>
+/**
+ * KTextarea — многострочное поле. Подпись, подсказка и ошибка ведут себя так
+ * же, как у KInput, чтобы формы выглядели однородно.
+ */
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+/*
+ * Атрибуты разделяются: class и style остаются на корне (иначе layout-классы
+ * из родителя не могут задать ширину поля в строке фильтров), остальное —
+ * autocomplete, inputmode, min, обработчики — уходит на сам контрол.
+ */
+const attrs = useAttrs()
+const rootAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const controlAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs
+  return rest
+})
+
+defineProps({
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  rows: { type: [Number, String], default: 4 },
+  hint: { type: String, default: '' },
+  error: { type: String, default: '' },
+  required: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <label class="k-textarea" v-bind="rootAttrs">
+    <span v-if="label" class="k-textarea__label">
+      {{ label }}<span v-if="required" class="k-textarea__req">*</span>
+    </span>
+    <textarea
+      class="k-textarea__field"
+      :class="{ 'k-textarea__field--error': error }"
+      :value="modelValue"
+      :rows="rows"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      v-bind="controlAttrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <span v-if="error" class="k-textarea__error">{{ error }}</span>
+    <span v-else-if="hint" class="k-textarea__hint">{{ hint }}</span>
+  </label>
+</template>
+
+<style scoped>
+.k-textarea { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; min-width: 0; }
+.k-textarea__label { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-textarea__req { color: var(--k-danger); margin-left: 2px; }
+.k-textarea__field {
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  border-radius: var(--k-radius-sm);
+  font: inherit;
+  font-size: 0.9375rem;
+  color: inherit;
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.k-textarea__field:focus { border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
+.k-textarea__field--error { border-color: var(--k-danger); }
+.k-textarea__field:disabled { background: var(--k-surface-muted); cursor: not-allowed; }
+.k-textarea__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+.k-textarea__error { font-size: 0.75rem; color: var(--k-danger); }
+</style>

package/src/components/KTimeline.vue

@@ -0,0 +1,72 @@
+<script setup>
+/**
+ * KTimeline — хронология событий: история статусов, журнал действий, лента
+ * активности.
+ *
+ *   items: [{ time, title, text?, tone?, icon? }]
+ */
+import KIcon from './KIcon.vue'
+
+defineProps({
+  items: { type: Array, default: () => [] },
+})
+</script>
+
+<template>
+  <ol class="k-timeline">
+    <li v-for="(item, i) in items" :key="i" class="k-timeline__item">
+      <span class="k-timeline__marker" :class="`k-timeline__marker--${item.tone || 'neutral'}`">
+        <KIcon v-if="item.icon" :name="item.icon" :size="12" />
+      </span>
+      <div class="k-timeline__body">
+        <div class="k-timeline__head">
+          <span class="k-timeline__title">
+            <slot name="title" :item="item">{{ item.title }}</slot>
+          </span>
+          <span class="k-timeline__time">{{ item.time }}</span>
+        </div>
+        <p v-if="item.text" class="k-timeline__text">{{ item.text }}</p>
+        <slot name="extra" :item="item" />
+      </div>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.k-timeline { margin: 0; padding: 0; list-style: none; }
+.k-timeline__item { position: relative; display: flex; gap: 0.75rem; padding-bottom: 1rem; }
+/* Вертикальная линия между маркерами; у последнего элемента не рисуем. */
+.k-timeline__item:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: 0.53rem;
+  top: 1.35rem;
+  bottom: 0.1rem;
+  width: 1px;
+  background: var(--k-border);
+}
+.k-timeline__item:last-child { padding-bottom: 0; }
+.k-timeline__marker {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: 0.2rem;
+  border-radius: 50%;
+  flex: none;
+  border: 2px solid var(--k-surface);
+}
+.k-timeline__marker--neutral { background: var(--k-border-strong); color: var(--k-surface); }
+.k-timeline__marker--primary { background: var(--k-primary); color: var(--k-on-primary); }
+.k-timeline__marker--success { background: var(--k-success); color: var(--k-on-success); }
+.k-timeline__marker--warning { background: var(--k-warning); color: var(--k-on-warning); }
+.k-timeline__marker--danger { background: var(--k-danger); color: var(--k-on-danger); }
+.k-timeline__body { flex: 1; min-width: 0; }
+.k-timeline__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
+.k-timeline__title { font-size: 0.9375rem; }
+.k-timeline__time { font-size: 0.75rem; color: var(--k-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.k-timeline__text { font-size: 0.8125rem; color: var(--k-text-muted); margin-top: 0.1rem; }
+</style>

package/src/components/KToast.vue

@@ -0,0 +1,34 @@
+<script setup>
+/**
+ * KToast — контейнер всплывающих уведомлений на @zag-js/toast.
+ *
+ * Ставится один раз в корне приложения; сообщения добавляются через
+ * useToast() — вызывающему коду доступ к компоненту не нужен.
+ */
+import * as toast from '@zag-js/toast'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KToastItem from './KToastItem.vue'
+import { toastStore } from '../composables/useToast.js'
+
+const service = useMachine(toast.group.machine, { id: useId(), store: toastStore })
+const api = computed(() => toast.group.connect(service, normalizeProps))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="k-toasts" v-bind="api.getGroupProps({ label: 'Уведомления' })">
+      <KToastItem
+        v-for="(item, index) in api.getToasts()"
+        :key="item.id"
+        :actor="item"
+        :index="index"
+        :parent="service"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.k-toasts { z-index: 1300; }
+</style>

package/src/components/KToastItem.vue

@@ -0,0 +1,86 @@
+<script setup>
+/**
+ * KToastItem — одно уведомление внутри KToast. Внутренний компонент: машина
+ * тоста получает родительский сервис группы и свой индекс в стопке.
+ */
+import * as toast from '@zag-js/toast'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  actor: { type: Object, required: true },
+  index: { type: Number, required: true },
+  parent: { type: Object, required: true },
+})
+
+const machineProps = computed(() => ({ ...props.actor, parent: props.parent, index: props.index }))
+
+const service = useMachine(toast.machine, machineProps)
+const api = computed(() => toast.connect(service, normalizeProps))
+
+const icons = { info: 'info', success: 'check-badge', warning: 'alert', error: 'reject', loading: 'spinner' }
+</script>
+
+<template>
+  <div class="k-toast" v-bind="api.getRootProps()">
+    <span v-bind="api.getGhostBeforeProps()" />
+    <KIcon :name="icons[api.type] || 'info'" :size="18" class="k-toast__icon" :spin="api.type === 'loading'" />
+    <div class="k-toast__body">
+      <p v-if="api.title" class="k-toast__title" v-bind="api.getTitleProps()">{{ api.title }}</p>
+      <p v-if="api.description" class="k-toast__text" v-bind="api.getDescriptionProps()">{{ api.description }}</p>
+    </div>
+    <button v-if="api.closable" class="k-toast__close" aria-label="Закрыть" v-bind="api.getCloseTriggerProps()">
+      <KIcon name="close" :size="14" />
+    </button>
+    <span v-bind="api.getGhostAfterProps()" />
+  </div>
+</template>
+
+<style scoped>
+.k-toast {
+  /* Координаты и прозрачность приходят от машины в CSS-переменных; здесь они
+     только отображаются на свойства, чтобы стопка анимировалась плавно. */
+  translate: var(--x) var(--y);
+  scale: var(--scale, 1);
+  opacity: var(--opacity);
+  height: var(--height, auto);
+  z-index: var(--z-index);
+  will-change: translate, opacity, scale;
+  transition:
+    translate 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+    scale 400ms,
+    opacity 400ms,
+    height 400ms;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  width: min(24rem, calc(100vw - 2rem));
+  padding: 0.75rem 0.875rem;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-left: 3px solid var(--k-primary);
+  border-radius: var(--k-radius-sm);
+  box-shadow: var(--k-shadow-md);
+  color: var(--k-text);
+}
+.k-toast[data-type='success'] { border-left-color: var(--k-success); }
+.k-toast[data-type='warning'] { border-left-color: var(--k-warning); }
+.k-toast[data-type='error'] { border-left-color: var(--k-danger); }
+.k-toast__icon { margin-top: 0.1rem; color: var(--k-text-muted); flex: none; }
+.k-toast[data-type='success'] .k-toast__icon { color: var(--k-success); }
+.k-toast[data-type='warning'] .k-toast__icon { color: var(--k-warning-strong); }
+.k-toast[data-type='error'] .k-toast__icon { color: var(--k-danger); }
+.k-toast__body { flex: 1; min-width: 0; }
+.k-toast__title { font-size: 0.9375rem; font-weight: 600; }
+.k-toast__text { font-size: 0.8125rem; color: var(--k-text-muted); white-space: pre-line; overflow-wrap: break-word; }
+.k-toast__close {
+  background: none;
+  border: none;
+  color: var(--k-text-faint);
+  cursor: pointer;
+  padding: 0;
+  flex: none;
+}
+.k-toast__close:hover { color: var(--k-text); }
+</style>

package/src/components/KTooltip.vue

@@ -0,0 +1,67 @@
+<script setup>
+/**
+ * KTooltip — подсказка над обёрнутым элементом на @zag-js/tooltip: открывается
+ * по наведению и фокусу с задержкой, закрывается по Esc и уходу указателя.
+ * Пузырёк рендерится в <body>, поэтому не обрезается контейнерами с overflow.
+ *
+ *   <KTooltip text="Расшифровка статуса"><KBadge>В работе</KBadge></KTooltip>
+ */
+import * as tooltip from '@zag-js/tooltip'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  text: { type: String, default: '' },
+  placement: { type: String, default: 'top' }, // top | bottom | left | right
+  openDelay: { type: Number, default: 300 },
+  closeDelay: { type: Number, default: 100 },
+  disabled: { type: Boolean, default: false },
+})
+
+const service = useMachine(tooltip.machine, {
+  id: useId(),
+  get positioning() {
+    return { placement: props.placement }
+  },
+  get openDelay() {
+    return props.openDelay
+  },
+  get closeDelay() {
+    return props.closeDelay
+  },
+  get disabled() {
+    return props.disabled
+  },
+})
+
+const api = computed(() => tooltip.connect(service, normalizeProps))
+</script>
+
+<template>
+  <span class="k-tooltip" tabindex="0" v-bind="api.getTriggerProps()">
+    <slot />
+  </span>
+  <Teleport to="body">
+    <div v-if="api.open" v-bind="api.getPositionerProps()">
+      <div class="k-tooltip__bubble" v-bind="api.getContentProps()">
+        <slot name="content">{{ text }}</slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.k-tooltip { display: inline-flex; outline: none; }
+.k-tooltip:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; border-radius: var(--k-radius-sm); }
+.k-tooltip__bubble {
+  z-index: 1200;
+  max-width: 18rem;
+  padding: 0.4rem 0.55rem;
+  background: var(--k-tooltip-bg);
+  color: var(--k-tooltip-text);
+  border-radius: var(--k-radius-sm);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  box-shadow: var(--k-shadow-md);
+}
+</style>