@krometra/ui-kit 0.0.0-stage → 0.4.0

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@krometra/ui-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "description": "UI-kit на Vue 3 со сменными темами, светлой и тёмной схемой; интерактивные компоненты на zag.js",
+  "license": "MIT",
+  "type": "module",
+  "packageManager": "yarn@4.13.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/ui-kit.umd.cjs",
+  "module": "./dist/ui-kit.js",
+  "exports": {
+    ".": {
+      "development": "./src/index.js",
+      "import": "./dist/ui-kit.js",
+      "require": "./dist/ui-kit.umd.cjs",
+      "default": "./src/index.js"
+    },
+    "./style.css": "./dist/ui-kit.css",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:demo": "vite build --config vite.demo.config.js",
+    "preview": "vite preview",
+    "prepack": "vite build >&2",
+    "prepare": "vite build >&2",
+    "tokens": "node scripts/build-tokens.mjs"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@zag-js/checkbox": "^1.43.3",
+    "@zag-js/combobox": "^1.43.3",
+    "@zag-js/dialog": "^1.43.3",
+    "@zag-js/file-upload": "^1.43.3",
+    "@zag-js/pagination": "^1.43.3",
+    "@zag-js/popover": "^1.43.3",
+    "@zag-js/progress": "^1.43.3",
+    "@zag-js/radio-group": "^1.43.3",
+    "@zag-js/select": "^1.43.3",
+    "@zag-js/steps": "^1.43.3",
+    "@zag-js/switch": "^1.43.3",
+    "@zag-js/tabs": "^1.43.3",
+    "@zag-js/toast": "^1.43.3",
+    "@zag-js/tooltip": "^1.43.3",
+    "@zag-js/vue": "^1.43.3",
+    "lucide-vue-next": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vite": "^8.0.1",
+    "vue": "^3.5.30"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/krometra/ui-kit.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui-kit",
+    "design-system",
+    "components",
+    "theme",
+    "theming",
+    "light-theme",
+    "dark-theme",
+    "zag-js",
+    "accessible"
+  ]
 }

package/src/base.css

@@ -0,0 +1,32 @@
+/*
+ * Базовые стили страницы. Импортируются отдельно от токенов, чтобы приложение
+ * могло взять только примитивы, не трогая глобальный reset.
+ */
+@import './tokens.css';
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--k-font);
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--k-text);
+  background: var(--k-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
+h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; }
+h2 { font-size: 1.125rem; font-weight: 600; }
+h3 { font-size: 1rem; font-weight: 600; }
+
+a { color: var(--k-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+::selection { background: var(--k-selection); }
+
+/* Единый вид фокуса для клавиатуры во всём ките */
+:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }

package/src/components/KAlert.vue

@@ -0,0 +1,65 @@
+<script setup>
+/**
+ * KAlert — информационная плашка: подсказка, предупреждение, сообщение об
+ * ошибке.
+ *
+ *   tone — 'info' | 'success' | 'warning' | 'danger'
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  tone: { type: String, default: 'info' },
+  title: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  closable: { type: Boolean, default: false },
+})
+
+defineEmits(['close'])
+
+const defaultIcons = { info: 'info', success: 'check-badge', warning: 'alert', danger: 'reject' }
+const iconName = computed(() => props.icon || defaultIcons[props.tone] || 'info')
+</script>
+
+<template>
+  <div class="k-alert" :class="`k-alert--${tone}`" role="status">
+    <KIcon :name="iconName" :size="18" class="k-alert__icon" />
+    <div class="k-alert__body">
+      <p v-if="title" class="k-alert__title">{{ title }}</p>
+      <div v-if="$slots.default" class="k-alert__text"><slot /></div>
+    </div>
+    <button v-if="closable" class="k-alert__close" aria-label="Закрыть" @click="$emit('close')">
+      <KIcon name="close" :size="15" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.k-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-sm);
+  font-size: 0.875rem;
+}
+.k-alert__icon { margin-top: 0.1rem; flex: none; }
+.k-alert__body { flex: 1; min-width: 0; }
+.k-alert__title { font-weight: 600; }
+.k-alert__title + .k-alert__text { margin-top: 0.15rem; }
+.k-alert__close {
+  background: none;
+  border: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 0;
+  flex: none;
+}
+.k-alert__close:hover { opacity: 1; }
+.k-alert--info { background: var(--k-primary-soft); border-color: color-mix(in srgb, var(--k-primary) 25%, transparent); color: var(--k-primary-hover); }
+.k-alert--success { background: var(--k-success-soft); border-color: color-mix(in srgb, var(--k-success) 30%, transparent); color: var(--k-success-strong); }
+.k-alert--warning { background: var(--k-warning-soft); border-color: color-mix(in srgb, var(--k-warning) 35%, transparent); color: var(--k-warning-strong); }
+.k-alert--danger { background: var(--k-danger-soft); border-color: color-mix(in srgb, var(--k-danger) 30%, transparent); color: var(--k-danger-strong); }
+</style>

package/src/components/KAvatar.vue

@@ -0,0 +1,67 @@
+<script setup>
+/**
+ * KAvatar — инициалы пользователя или сущности в кружке.
+ * Оттенок детерминированно выводится из имени, чтобы не хранить его в данных;
+ * сами цвета берутся из семантических токенов темы, поэтому аватары
+ * перекрашиваются вместе с ней.
+ */
+import { computed } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  name: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  size: { type: String, default: 'md' }, // sm | md | lg
+  square: { type: Boolean, default: false },
+})
+
+const initials = computed(() =>
+  props.name
+    .replace(/["«»]/g, '')
+    .split(/[\s-]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0].toUpperCase())
+    .join(''),
+)
+
+const tones = ['primary', 'success', 'warning', 'info', 'danger']
+
+const tone = computed(() => {
+  let hash = 0
+  for (const ch of props.name) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0
+  return tones[hash % tones.length]
+})
+</script>
+
+<template>
+  <span
+    class="k-avatar"
+    :class="[`k-avatar--${size}`, `k-avatar--${tone}`, { 'k-avatar--square': square }]"
+    :title="name"
+  >
+    <KIcon v-if="icon" :name="icon" :size="size === 'sm' ? 14 : size === 'lg' ? 22 : 17" />
+    <template v-else>{{ initials }}</template>
+  </span>
+</template>
+
+<style scoped>
+.k-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: 600;
+  flex: none;
+  user-select: none;
+}
+.k-avatar--square { border-radius: var(--k-radius-sm); }
+.k-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
+.k-avatar--md { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
+.k-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
+.k-avatar--primary { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-avatar--success { background: var(--k-success-soft); color: var(--k-success-strong); }
+.k-avatar--warning { background: var(--k-warning-soft); color: var(--k-warning-strong); }
+.k-avatar--info { background: var(--k-info-soft); color: var(--k-info-strong); }
+.k-avatar--danger { background: var(--k-danger-soft); color: var(--k-danger-strong); }
+</style>

package/src/components/KBadge.vue

@@ -0,0 +1,47 @@
+<script setup>
+/**
+ * KBadge — статусная метка: состояние записи, тег, признак.
+ *
+ *   tone — 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+ *   dot  — точка-индикатор перед текстом (для состояний «идёт сейчас»)
+ *   icon — семантическое имя KIcon перед текстом
+ */
+import KIcon from './KIcon.vue'
+
+defineProps({
+  tone: { type: String, default: 'neutral' },
+  size: { type: String, default: 'md' }, // md | sm
+  dot: { type: Boolean, default: false },
+  icon: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <span class="k-badge" :class="[`k-badge--${tone}`, `k-badge--${size}`]">
+    <span v-if="dot" class="k-badge__dot" />
+    <KIcon v-if="icon" :name="icon" :size="size === 'sm' ? 11 : 13" />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.k-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.k-badge--sm { font-size: 0.6875rem; padding: 0.1rem 0.4rem; }
+.k-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
+.k-badge--neutral { background: var(--k-surface-muted); color: var(--k-text-muted); }
+.k-badge--primary { background: var(--k-primary-soft); color: var(--k-primary); }
+.k-badge--success { background: var(--k-success-soft); color: var(--k-success-strong); }
+.k-badge--warning { background: var(--k-warning-soft); color: var(--k-warning-strong); }
+.k-badge--danger { background: var(--k-danger-soft); color: var(--k-danger-strong); }
+.k-badge--info { background: var(--k-info-soft); color: var(--k-info-strong); }
+</style>

package/src/components/KButton.vue

@@ -0,0 +1,98 @@
+<script setup>
+/**
+ * KButton — единственный кнопочный примитив кита.
+ *
+ *   variant  — 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'link'
+ *   size     — 'md' (по умолчанию) | 'sm' | 'lg'
+ *   icon     — семантическое имя KIcon перед подписью
+ *   iconEnd  — иконка после подписи
+ *   loading  — блокирует кнопку и показывает спиннер вместо иконки
+ *
+ * Подпись — слот по умолчанию и необязательна: с одним `icon` кнопка
+ * рендерится квадратной иконочной.
+ */
+import { computed, useSlots } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  variant: { type: String, default: 'secondary' },
+  size: { type: String, default: 'md' },
+  icon: { type: String, default: '' },
+  iconEnd: { type: String, default: '' },
+  htmlType: { type: String, default: 'button' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  block: { type: Boolean, default: false },
+})
+
+const slots = useSlots()
+const hasLabel = computed(() => !!slots.default)
+const iconPx = computed(() => ({ sm: 15, md: 17, lg: 19 })[props.size] ?? 17)
+</script>
+
+<template>
+  <button
+    class="k-btn"
+    :class="[
+      `k-btn--${variant}`,
+      `k-btn--${size}`,
+      { 'k-btn--icon-only': (icon || loading) && !hasLabel, 'k-btn--block': block },
+    ]"
+    :type="htmlType"
+    :disabled="disabled || loading"
+  >
+    <KIcon v-if="loading" name="spinner" :size="iconPx" spin />
+    <KIcon v-else-if="icon" :name="icon" :size="iconPx" />
+    <span v-if="hasLabel" class="k-btn__label"><slot /></span>
+    <KIcon v-if="iconEnd && !loading" :name="iconEnd" :size="iconPx" />
+  </button>
+</template>
+
+<style scoped>
+.k-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: var(--k-control-h);
+  padding: 0 0.875rem;
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-sm);
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
+}
+.k-btn:focus { outline: none; }
+.k-btn:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
+.k-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.k-btn--block { width: 100%; }
+
+.k-btn--sm { min-height: var(--k-control-h-sm); padding: 0 0.625rem; font-size: 0.8125rem; }
+.k-btn--lg { min-height: 2.875rem; padding: 0 1.25rem; font-size: 1rem; }
+.k-btn--icon-only { width: var(--k-control-h); padding: 0; }
+.k-btn--icon-only.k-btn--sm { width: var(--k-control-h-sm); }
+.k-btn--icon-only.k-btn--lg { width: 2.875rem; }
+
+.k-btn--primary { background: var(--k-primary); color: var(--k-on-primary); box-shadow: var(--k-shadow-sm); }
+.k-btn--primary:hover:not(:disabled) { background: var(--k-primary-hover); }
+
+.k-btn--secondary { background: var(--k-surface); border-color: var(--k-border-strong); color: var(--k-text); }
+.k-btn--secondary:hover:not(:disabled) { background: var(--k-surface-muted); }
+
+.k-btn--ghost { background: transparent; color: var(--k-text-muted); }
+.k-btn--ghost:hover:not(:disabled) { background: var(--k-surface-muted); color: var(--k-text); }
+
+.k-btn--danger { background: var(--k-danger); color: var(--k-on-danger); }
+.k-btn--danger:hover:not(:disabled) { background: var(--k-danger-hover); }
+
+.k-btn--success { background: var(--k-success); color: var(--k-on-success); }
+.k-btn--success:hover:not(:disabled) { background: var(--k-success-hover); }
+
+.k-btn--link { background: none; color: var(--k-primary); padding: 0; min-height: 0; }
+.k-btn--link:hover:not(:disabled) { text-decoration: underline; }
+</style>

package/src/components/KCard.vue

@@ -0,0 +1,63 @@
+<script setup>
+/**
+ * KCard — базовая поверхность: белая карточка со светлой рамкой.
+ *
+ * Заголовок задаётся пропом `title` (+ `subtitle`) либо слотом #header;
+ * действия шапки — #actions, низ — #footer. `padding="none"` нужен, когда
+ * внутрь кладут таблицу во всю ширину.
+ */
+defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  padding: { type: String, default: 'md' }, // md | sm | none
+  hoverable: { type: Boolean, default: false },
+})
+</script>
+
+<template>
+  <section class="k-card" :class="[`k-card--p-${padding}`, { 'k-card--hoverable': hoverable }]">
+    <header v-if="title || subtitle || $slots.header || $slots.actions" class="k-card__header">
+      <div class="k-card__heading">
+        <slot name="header">
+          <h2 v-if="title" class="k-card__title">{{ title }}</h2>
+          <p v-if="subtitle" class="k-card__subtitle">{{ subtitle }}</p>
+        </slot>
+      </div>
+      <div v-if="$slots.actions" class="k-card__actions"><slot name="actions" /></div>
+    </header>
+    <div class="k-card__body"><slot /></div>
+    <footer v-if="$slots.footer" class="k-card__footer"><slot name="footer" /></footer>
+  </section>
+</template>
+
+<style scoped>
+.k-card {
+  background: var(--k-surface);
+  border: 1px solid var(--k-border);
+  border-radius: var(--k-radius);
+  box-shadow: var(--k-shadow-sm);
+  overflow: hidden;
+}
+.k-card--hoverable { transition: box-shadow 0.15s, border-color 0.15s; }
+.k-card--hoverable:hover { box-shadow: var(--k-shadow-md); border-color: var(--k-border-strong); }
+.k-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--k-border);
+}
+.k-card__heading { min-width: 0; }
+.k-card__title { font-size: 1rem; font-weight: 600; }
+.k-card__subtitle { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--k-text-muted); }
+.k-card__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
+.k-card--p-md .k-card__body { padding: 1.25rem; }
+.k-card--p-sm .k-card__body { padding: 0.75rem; }
+.k-card--p-none .k-card__body { padding: 0; }
+.k-card__footer {
+  padding: 0.875rem 1.25rem;
+  border-top: 1px solid var(--k-border);
+  background: var(--k-surface-muted);
+}
+</style>

package/src/components/KCheckbox.vue

@@ -0,0 +1,105 @@
+<script setup>
+/**
+ * KCheckbox — чекбокс на @zag-js/checkbox. Скрытый нативный input остаётся в
+ * потоке фокуса и участвует в формах, а видимый квадрат рисуется из токенов
+ * темы. v-model — булево или массив (тогда нужен `value`).
+ *
+ *   <KCheckbox v-model="agree" label="Принимаю условия" />
+ *   <KCheckbox v-model="selected" value="pdf" label="PDF" />
+ */
+import * as checkbox from '@zag-js/checkbox'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+import KIcon from './KIcon.vue'
+
+const props = defineProps({
+  modelValue: { type: [Boolean, Array], default: false },
+  value: { type: [String, Number, Boolean], default: undefined },
+  label: { type: String, default: '' },
+  hint: { type: String, default: '' },
+  name: { type: String, default: '' },
+  indeterminate: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isArray = computed(() => Array.isArray(props.modelValue))
+const checked = computed(() => (isArray.value ? props.modelValue.includes(props.value) : props.modelValue))
+
+const service = useMachine(checkbox.machine, {
+  id: useId(),
+  get checked() {
+    return props.indeterminate ? 'indeterminate' : checked.value
+  },
+  get disabled() {
+    return props.disabled
+  },
+  get required() {
+    return props.required
+  },
+  get name() {
+    return props.name || undefined
+  },
+  get value() {
+    return props.value != null ? String(props.value) : undefined
+  },
+  onCheckedChange({ checked: next }) {
+    const on = next === true
+    if (!isArray.value) {
+      emit('update:modelValue', on)
+      return
+    }
+    emit(
+      'update:modelValue',
+      on ? [...props.modelValue, props.value] : props.modelValue.filter((v) => v !== props.value),
+    )
+  },
+})
+
+const api = computed(() => checkbox.connect(service, normalizeProps))
+</script>
+
+<template>
+  <label class="k-check" v-bind="api.getRootProps()">
+    <input v-bind="api.getHiddenInputProps()" />
+    <span class="k-check__control" v-bind="api.getControlProps()">
+      <span class="k-check__indicator" v-bind="api.getIndicatorProps()">
+        <KIcon :name="api.indeterminate ? 'remove' : 'check'" :size="12" :stroke-width="3" />
+      </span>
+    </span>
+    <span v-if="label || hint || $slots.default" class="k-check__body">
+      <span class="k-check__label" v-bind="api.getLabelProps()"><slot>{{ label }}</slot></span>
+      <span v-if="hint" class="k-check__hint">{{ hint }}</span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.k-check { display: inline-flex; align-items: flex-start; gap: 0.5rem; margin: 0; cursor: pointer; font-weight: 400; }
+.k-check[data-disabled] { cursor: not-allowed; opacity: 0.6; }
+.k-check__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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: calc(var(--k-radius-sm) - 2px);
+  color: var(--k-on-primary);
+  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
+}
+.k-check__control[data-hover]:not([data-disabled]) { border-color: var(--k-primary); }
+.k-check__control[data-focus-visible] { box-shadow: 0 0 0 3px var(--k-primary-soft); border-color: var(--k-primary); }
+.k-check__control[data-state="checked"],
+.k-check__control[data-state="indeterminate"] { background: var(--k-primary); border-color: var(--k-primary); }
+.k-check__indicator { display: inline-flex; }
+.k-check__indicator[hidden] { display: none; }
+.k-check__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
+.k-check__label { font-size: 0.9375rem; color: var(--k-text); }
+.k-check__hint { font-size: 0.75rem; color: var(--k-text-muted); }
+</style>