@krometra/ui-kit 0.0.0-stage → 0.3.0

package/src/components/KPagination.vue

@@ -0,0 +1,113 @@
+<script setup>
+/**
+ * KPagination — постраничная навигация на @zag-js/pagination.
+ *
+ * Контролируемая: компонент не хранит состояние, а сообщает нужную страницу
+ * через update:page. Диапазон страниц сворачивается многоточиями, чтобы ширина
+ * не зависела от объёма выборки.
+ *
+ *   <KPagination v-model:page="page" :page-size="20" :total="total" />
+ */
+import * as pagination from '@zag-js/pagination'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  page: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 20 },
+  total: { type: Number, default: 0 },
+  siblings: { type: Number, default: 1 },
+  showInfo: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:page'])
+
+const service = useMachine(pagination.machine, {
+  id: useId(),
+  translations: {
+    rootLabel: 'Постраничная навигация',
+    prevTriggerLabel: 'Назад',
+    nextTriggerLabel: 'Вперёд',
+    itemLabel: ({ page }) => `Страница ${page}`,
+  },
+  get count() {
+    return props.total
+  },
+  get pageSize() {
+    return props.pageSize || 1
+  },
+  get siblingCount() {
+    return props.siblings
+  },
+  get page() {
+    return props.page
+  },
+  onPageChange({ page }) {
+    if (page !== props.page) emit('update:page', page)
+  },
+})
+
+const api = computed(() => pagination.connect(service, normalizeProps))
+
+const rangeFrom = computed(() => (props.total ? api.value.pageRange.start + 1 : 0))
+const rangeTo = computed(() => api.value.pageRange.end)
+</script>
+
+<template>
+  <nav class="k-pagination" v-bind="api.getRootProps()">
+    <span v-if="showInfo" class="k-pagination__info">{{ rangeFrom }}–{{ rangeTo }} из {{ total }}</span>
+    <div class="k-pagination__pages">
+      <button class="k-pagination__nav" v-bind="api.getPrevTriggerProps()">
+        <KIcon name="chevron-left" :size="16" />
+      </button>
+      <template v-for="(item, i) in api.pages" :key="item.type === 'page' ? item.value : `ellipsis-${i}`">
+        <span v-if="item.type === 'ellipsis'" class="k-pagination__gap" v-bind="api.getEllipsisProps({ index: i })">…</span>
+        <button v-else class="k-pagination__page" v-bind="api.getItemProps(item)">{{ item.value }}</button>
+      </template>
+      <button class="k-pagination__nav" v-bind="api.getNextTriggerProps()">
+        <KIcon name="chevron-right" :size="16" />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.k-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 0.875rem;
+  border-top: 1px solid var(--k-border);
+}
+.k-pagination__info { font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-pagination__pages { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
+.k-pagination__page,
+.k-pagination__nav {
+  min-width: var(--k-control-h-sm);
+  height: var(--k-control-h-sm);
+  padding: 0 0.4rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-sm);
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--k-text-muted);
+  cursor: pointer;
+}
+.k-pagination__page:hover,
+.k-pagination__nav:hover:not(:disabled) { background: var(--k-surface-muted); color: var(--k-text); }
+.k-pagination__page[data-selected] {
+  background: var(--k-primary-soft);
+  border-color: currentColor;
+  color: var(--k-primary);
+  font-weight: 600;
+}
+.k-pagination__nav:disabled { opacity: 0.4; cursor: not-allowed; }
+.k-pagination__gap { padding: 0 0.25rem; color: var(--k-text-faint); }
+</style>

package/src/components/KProgress.vue

@@ -0,0 +1,63 @@
+<script setup>
+/**
+ * KProgress — линейный индикатор на @zag-js/progress: заполненность, ход
+ * операции, доля от нормы. `value: null` — неопределённое состояние.
+ */
+import * as progress from '@zag-js/progress'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  label: { type: String, default: '' },
+  tone: { type: String, default: 'primary' }, // primary | success | warning | danger
+  showValue: { type: Boolean, default: false },
+})
+
+const service = useMachine(progress.machine, {
+  id: useId(),
+  min: 0,
+  locale: 'ru-RU',
+  get value() {
+    return props.value
+  },
+  get max() {
+    return props.max
+  },
+})
+
+const api = computed(() => progress.connect(service, normalizeProps))
+</script>
+
+<template>
+  <div class="k-progress" v-bind="api.getRootProps()">
+    <div v-if="label || showValue" class="k-progress__head">
+      <span class="k-progress__label" v-bind="api.getLabelProps()">{{ label }}</span>
+      <span v-if="showValue" class="k-progress__value" v-bind="api.getValueTextProps()">{{ api.percentAsString }}</span>
+    </div>
+    <div class="k-progress__track" v-bind="api.getTrackProps()">
+      <div class="k-progress__bar" :class="`k-progress__bar--${tone}`" v-bind="api.getRangeProps()" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-progress__head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; font-size: 0.8125rem; }
+.k-progress__label { color: var(--k-text-muted); }
+.k-progress__value { font-weight: 600; font-variant-numeric: tabular-nums; }
+.k-progress__track { height: 0.5rem; background: var(--k-surface-muted); border-radius: 999px; overflow: hidden; }
+.k-progress__bar { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
+.k-progress__bar[data-state="indeterminate"] {
+  width: 40%;
+  animation: k-progress-slide 1.2s ease-in-out infinite;
+}
+.k-progress__bar--primary { background: var(--k-primary); }
+.k-progress__bar--success { background: var(--k-success); }
+.k-progress__bar--warning { background: var(--k-warning); }
+.k-progress__bar--danger { background: var(--k-danger); }
+@keyframes k-progress-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+</style>

package/src/components/KRadioGroup.vue

@@ -0,0 +1,103 @@
+<script setup>
+/**
+ * KRadioGroup — группа радио-кнопок на @zag-js/radio-group: навигация
+ * стрелками и roving tabindex от машины. Опции — строки или
+ * { value, label, hint?, disabled? }. Направление — колонка или строка.
+ */
+import * as radio from '@zag-js/radio-group'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, null], default: null },
+  options: { type: Array, default: () => [] },
+  label: { type: String, default: '' },
+  name: { type: String, default: '' },
+  inline: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const items = computed(() =>
+  props.options.map((o) => (typeof o === 'object' && o !== null ? o : { value: o, label: String(o) })),
+)
+
+const service = useMachine(radio.machine, {
+  id: useId(),
+  get value() {
+    return props.modelValue == null ? null : String(props.modelValue)
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get name() {
+    return props.name || undefined
+  },
+  get orientation() {
+    return props.inline ? 'horizontal' : 'vertical'
+  },
+  onValueChange({ value }) {
+    const item = items.value.find((i) => String(i.value) === value)
+    emit('update:modelValue', item ? item.value : value)
+  },
+})
+
+const api = computed(() => radio.connect(service, normalizeProps))
+
+const itemProps = (item) => ({ value: String(item.value), disabled: item.disabled })
+</script>
+
+<template>
+  <div class="k-radio" v-bind="api.getRootProps()">
+    <span v-if="label" class="k-radio__legend" v-bind="api.getLabelProps()">{{ label }}</span>
+    <div class="k-radio__items" :class="{ 'k-radio__items--inline': inline }">
+      <label
+        v-for="item in items"
+        :key="item.value"
+        class="k-radio__item"
+        v-bind="api.getItemProps(itemProps(item))"
+      >
+        <input v-bind="api.getItemHiddenInputProps(itemProps(item))" />
+        <span class="k-radio__control" v-bind="api.getItemControlProps(itemProps(item))" />
+        <span class="k-radio__body">
+          <span class="k-radio__label" v-bind="api.getItemTextProps(itemProps(item))">{{ item.label }}</span>
+          <span v-if="item.hint" class="k-radio__hint">{{ item.hint }}</span>
+        </span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.k-radio { min-width: 0; }
+.k-radio__legend { display: block; padding-bottom: 0.375rem; font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-radio__items { display: flex; flex-direction: column; gap: 0.5rem; }
+.k-radio__items--inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
+.k-radio__item { display: inline-flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
+.k-radio__item[data-disabled] { cursor: not-allowed; opacity: 0.6; }
+.k-radio__control {
+  position: relative;
+  width: 1.05rem;
+  height: 1.05rem;
+  margin-top: 0.15rem;
+  flex: none;
+  background: var(--k-surface);
+  border: 1px solid var(--k-border-strong);
+  border-radius: 50%;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+.k-radio__control[data-hover]:not([data-disabled]) { border-color: var(--k-primary); }
+.k-radio__control[data-focus-visible] { box-shadow: 0 0 0 3px var(--k-primary-soft); border-color: var(--k-primary); }
+.k-radio__control[data-state="checked"] { border-color: var(--k-primary); }
+.k-radio__control[data-state="checked"]::after {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border-radius: 50%;
+  background: var(--k-primary);
+}
+.k-radio__body { display: flex; flex-direction: column; gap: 0.1rem; }
+.k-radio__label { font-size: 0.9375rem; }
+.k-radio__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+</style>

package/src/components/KSegmented.vue

@@ -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

@@ -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>