@krometra/ui-kit 0.0.0-stage → 0.4.0

package/src/components/icon-registry.js

@@ -0,0 +1,143 @@
+/**
+ * Реестр иконок кита: семантическое имя → компонент Lucide.
+ *
+ * Отдельный модуль, чтобы витрина и тесты могли перечислить имена, не
+ * инстанцируя компонент. Имена задаются по роли в интерфейсе ("delete",
+ * "settings"), а не по форме ("trash", "gear"): так набор можно заменить
+ * целиком, не переписывая вызовы.
+ *
+ * Набор общего назначения. Иконки, специфичные для конкретного продукта,
+ * добавляйте в приложении через проп `component` или собственный реестр.
+ */
+import {
+  Activity, AlertTriangle, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp,
+  BadgeCheck, Banknote, Bell, Bookmark, Building2, Calendar, Check,
+  ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clipboard, Clock,
+  Copy, CreditCard, Database, Download, ExternalLink, Eye, EyeOff, File,
+  FileText, FileUp, Filter, Folder, FolderInput, FolderOpen, Globe, Heart, Home, Image, Info,
+  KeyRound, LayoutDashboard, LayoutGrid, LifeBuoy, Link, List, ListChecks, Loader2, Lock,
+  LogIn, LogOut, Mail, MapPin, Menu, MessageSquare, MinusCircle,
+  MoreHorizontal, MoreVertical, Paperclip, Pencil, Percent, Phone, Play,
+  Plus, RefreshCw, RotateCw, Save, Scissors, Search, Send, Settings, Share2, Shield,
+  ShieldCheck, SlidersHorizontal, Star, Sun, Moon, Tag, Trash2, TrendingDown,
+  TrendingUp, Upload, User, Users, Wallet, X, XCircle, Zap,
+} from 'lucide-vue-next'
+
+export const iconRegistry = {
+  // навигация
+  back: ArrowLeft,
+  forward: ArrowRight,
+  up: ArrowUp,
+  down: ArrowDown,
+  'chevron-up': ChevronUp,
+  'chevron-down': ChevronDown,
+  'chevron-left': ChevronLeft,
+  'chevron-right': ChevronRight,
+  menu: Menu,
+  more: MoreVertical,
+  'more-horizontal': MoreHorizontal,
+  home: Home,
+  dashboard: LayoutDashboard,
+  external: ExternalLink,
+  link: Link,
+
+  // действия
+  add: Plus,
+  edit: Pencil,
+  delete: Trash2,
+  save: Save,
+  copy: Copy,
+  search: Search,
+  filter: Filter,
+  sliders: SlidersHorizontal,
+  refresh: RefreshCw,
+  rotate: RotateCw,
+  scissors: Scissors,
+  restore: ArchiveRestore,
+  'file-up': FileUp,
+  move: FolderInput,
+  upload: Upload,
+  download: Download,
+  share: Share2,
+  send: Send,
+  play: Play,
+  close: X,
+  check: Check,
+  reject: XCircle,
+  remove: MinusCircle,
+
+  // состояния и статусы
+  info: Info,
+  alert: AlertTriangle,
+  'check-badge': BadgeCheck,
+  spinner: Loader2,
+  activity: Activity,
+  trending: TrendingUp,
+  declining: TrendingDown,
+  zap: Zap,
+
+  // объекты
+  document: FileText,
+  file: File,
+  folder: Folder,
+  'folder-open': FolderOpen,
+  attach: Paperclip,
+  image: Image,
+  clipboard: Clipboard,
+  checklist: ListChecks,
+  list: List,
+  grid: LayoutGrid,
+  database: Database,
+  tag: Tag,
+  bookmark: Bookmark,
+  star: Star,
+  heart: Heart,
+
+  // люди и организации
+  user: User,
+  users: Users,
+  organization: Building2,
+
+  // связь
+  mail: Mail,
+  phone: Phone,
+  message: MessageSquare,
+  bell: Bell,
+
+  // безопасность
+  lock: Lock,
+  key: KeyRound,
+  shield: Shield,
+  'shield-check': ShieldCheck,
+  login: LogIn,
+  logout: LogOut,
+  eye: Eye,
+  'eye-off': EyeOff,
+
+  // деньги
+  finance: Banknote,
+  wallet: Wallet,
+  card: CreditCard,
+  percent: Percent,
+
+  // прочее
+  calendar: Calendar,
+  clock: Clock,
+  location: MapPin,
+  globe: Globe,
+  settings: Settings,
+  help: LifeBuoy,
+  sun: Sun,
+  moon: Moon,
+}
+
+/**
+ * Расширяет реестр из приложения: registerIcons({ rescan: RotateCw }). Имена
+ * действуют для всех компонентов кита, включая проп `icon` у KButton.
+ */
+export function registerIcons(icons) {
+  Object.assign(iconRegistry, icons)
+  iconNames.splice(0, iconNames.length, ...Object.keys(iconRegistry))
+}
+
+export const iconNames = Object.keys(iconRegistry)

package/src/composables/useToast.js

@@ -0,0 +1,52 @@
+/**
+ * Всплывающие уведомления на @zag-js/toast.
+ *
+ * Очередь живёт в модуле, а не в компоненте: любому стору или обработчику
+ * достаточно импортировать useToast(), не пробрасывая ссылку на <KToast>.
+ * Сам контейнер монтируется один раз в корне приложения.
+ *
+ *   const toast = useToast()
+ *   toast.success('Сохранено', 'Изменения применены')
+ *   toast.error('Ошибка', 'Не удалось связаться с сервером')
+ *   pushToast({ title: 'Идёт загрузка', tone: 'loading', timeout: 0 })  // висит до dismiss
+ */
+import { createStore } from '@zag-js/toast'
+
+export const toastStore = createStore({
+  placement: 'top-end',
+  duration: 4000,
+  removeDelay: 400,
+  gap: 12,
+})
+
+const types = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error',
+  error: 'error',
+  loading: 'loading',
+}
+
+export function pushToast({ title = '', text = '', tone = 'info', timeout } = {}) {
+  const data = { title, description: text, type: types[tone] ?? 'info' }
+  if (timeout === 0) data.duration = Infinity
+  else if (timeout != null) data.duration = timeout
+  return toastStore.create(data)
+}
+
+export function dismissToast(id) {
+  toastStore.dismiss(id)
+}
+
+export function useToast() {
+  return {
+    toast: pushToast,
+    success: (title, text) => pushToast({ title, text, tone: 'success' }),
+    info: (title, text) => pushToast({ title, text, tone: 'info' }),
+    warning: (title, text) => pushToast({ title, text, tone: 'warning' }),
+    error: (title, text) => pushToast({ title, text, tone: 'danger' }),
+    loading: (title, text) => pushToast({ title, text, tone: 'loading', timeout: 0 }),
+    dismiss: dismissToast,
+  }
+}

package/src/format.js

@@ -0,0 +1,137 @@
+/**
+ * Форматтеры для интерфейса.
+ *
+ * Небольшой набор общих утилит: числа, деньги, даты, размеры файлов,
+ * склонение. Живут в ките, потому что одни и те же значения показываются на
+ * десятках экранов и должны выглядеть одинаково. Все функции чистые и не
+ * зависят от Vue.
+ *
+ * Локаль по умолчанию — ru-RU; переопределяется параметром `locale`.
+ */
+
+const DEFAULT_LOCALE = 'ru-RU'
+
+/** Денежная сумма: formatMoney(1234567) → «1 234 567 ₽» */
+export function formatMoney(value, { fraction = false, currency = 'RUB', compact = false, locale = DEFAULT_LOCALE } = {}) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return '—'
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: fraction ? 2 : 0,
+    maximumFractionDigits: fraction ? 2 : 0,
+    notation: compact ? 'compact' : 'standard',
+  }).format(n)
+}
+
+/** Число с разделителями разрядов. */
+export function formatNumber(value, { digits = 0, compact = false, locale = DEFAULT_LOCALE } = {}) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return '—'
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+    notation: compact ? 'compact' : 'standard',
+  }).format(n)
+}
+
+/** Процент: formatPercent(0.125) → «12,5 %» */
+export function formatPercent(value, { digits = 1, locale = DEFAULT_LOCALE } = {}) {
+  const n = Number(value)
+  if (!Number.isFinite(n)) return '—'
+  return new Intl.NumberFormat(locale, {
+    style: 'percent',
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  }).format(n)
+}
+
+/** Дата: «05.09.2026» */
+export function formatDate(value, { locale = DEFAULT_LOCALE, style = 'short' } = {}) {
+  if (!value) return '—'
+  return new Intl.DateTimeFormat(locale, { dateStyle: style }).format(new Date(value))
+}
+
+/** Дата и время: «05.09.2026, 14:30» */
+export function formatDateTime(value, { locale = DEFAULT_LOCALE } = {}) {
+  if (!value) return '—'
+  return new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' }).format(new Date(value))
+}
+
+/** Относительное время: «через 3 дня», «2 часа назад». */
+export function formatRelative(value, { locale = DEFAULT_LOCALE } = {}) {
+  if (!value) return '—'
+  const diff = new Date(value).getTime() - Date.now()
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+  const units = [
+    ['year', 31536000000],
+    ['month', 2592000000],
+    ['day', 86400000],
+    ['hour', 3600000],
+    ['minute', 60000],
+    ['second', 1000],
+  ]
+  for (const [unit, ms] of units) {
+    if (Math.abs(diff) >= ms || unit === 'second') return rtf.format(Math.round(diff / ms), unit)
+  }
+  return ''
+}
+
+/** Длительность в секундах → «02:45:10» или «3 д 04:12:00». */
+export function formatDuration(totalSeconds) {
+  const s = Math.max(0, Math.floor(Number(totalSeconds) || 0))
+  const pad = (n) => String(n).padStart(2, '0')
+  const d = Math.floor(s / 86400)
+  const h = Math.floor((s % 86400) / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  return d > 0 ? `${d} д ${pad(h)}:${pad(m)}:${pad(sec)}` : `${pad(h)}:${pad(m)}:${pad(sec)}`
+}
+
+/** Размер файла: formatBytes(482301) → «471 КБ» */
+export function formatBytes(bytes, { units = ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'] } = {}) {
+  const b = Number(bytes)
+  if (!Number.isFinite(b) || b <= 0) return '—'
+  let n = b
+  let u = 0
+  while (n >= 1024 && u < units.length - 1) {
+    n /= 1024
+    u++
+  }
+  return `${n.toFixed(u === 0 ? 0 : 1).replace('.', ',')} ${units[u]}`
+}
+
+/** Обрезка строки по длине с многоточием. */
+export function truncate(text, max = 80) {
+  const s = String(text ?? '')
+  return s.length > max ? `${s.slice(0, max - 1)}…` : s
+}
+
+/** Инициалы из имени: «Иванов Иван» → «ИИ» */
+export function initials(name, count = 2) {
+  return String(name ?? '')
+    .replace(/["«»]/g, '')
+    .split(/[\s-]+/)
+    .filter(Boolean)
+    .slice(0, count)
+    .map((w) => w[0].toUpperCase())
+    .join('')
+}
+
+/**
+ * Склонение по числу: plural(3, ['файл', 'файла', 'файлов']) → «файла».
+ * Формы: [одна, две-четыре, много].
+ */
+export function plural(count, forms) {
+  const n = Math.abs(Number(count)) % 100
+  const n1 = n % 10
+  if (n > 10 && n < 20) return forms[2]
+  if (n1 > 1 && n1 < 5) return forms[1]
+  if (n1 === 1) return forms[0]
+  return forms[2]
+}
+
+/** Число вместе со склонённым словом: «3 файла». */
+export function pluralize(count, forms, { locale = DEFAULT_LOCALE } = {}) {
+  return `${formatNumber(count, { locale })} ${plural(count, forms)}`
+}

package/src/index.js

@@ -0,0 +1,85 @@
+/**
+ * @krometra/ui-kit — UI-kit на Vue 3 со сменными темами оформления и светлой /
+ * тёмной схемой. Интерактивные компоненты построены на машинах @zag-js.
+ *
+ * Точка входа: именованные экспорты компонентов + плагин для глобальной
+ * регистрации. Стили токенов подключаются автоматически; базовый reset
+ * (`@krometra/ui-kit/src/base.css`) приложение импортирует само, чтобы кит не
+ * навязывал глобальные правила.
+ *
+ *   import { KButton, KTable } from '@krometra/ui-kit'
+ *   import '@krometra/ui-kit/style.css'
+ *
+ * либо всё сразу:
+ *   import KrometraUiKit from '@krometra/ui-kit'
+ *   app.use(KrometraUiKit)
+ */
+import './tokens.css'
+
+import KAlert from './components/KAlert.vue'
+import KAvatar from './components/KAvatar.vue'
+import KBadge from './components/KBadge.vue'
+import KButton from './components/KButton.vue'
+import KCard from './components/KCard.vue'
+import KCheckbox from './components/KCheckbox.vue'
+import KCombobox from './components/KCombobox.vue'
+import KCountdown from './components/KCountdown.vue'
+import KDescriptions from './components/KDescriptions.vue'
+import KDropdown from './components/KDropdown.vue'
+import KEmpty from './components/KEmpty.vue'
+import KFileUpload from './components/KFileUpload.vue'
+import KFilterBar from './components/KFilterBar.vue'
+import KGantt from './components/KGantt.vue'
+import KIcon from './components/KIcon.vue'
+import KInput from './components/KInput.vue'
+import KMenuItem from './components/KMenuItem.vue'
+import KModal from './components/KModal.vue'
+import KMoney from './components/KMoney.vue'
+import KPage from './components/KPage.vue'
+import KPagination from './components/KPagination.vue'
+import KProgress from './components/KProgress.vue'
+import KRadioGroup from './components/KRadioGroup.vue'
+import KSegmented from './components/KSegmented.vue'
+import KSelect from './components/KSelect.vue'
+import KShell from './components/KShell.vue'
+import KStat from './components/KStat.vue'
+import KSteps from './components/KSteps.vue'
+import KSwitch from './components/KSwitch.vue'
+import KTable from './components/KTable.vue'
+import KTabs from './components/KTabs.vue'
+import KTextarea from './components/KTextarea.vue'
+import KTimeline from './components/KTimeline.vue'
+import KToast from './components/KToast.vue'
+import KTooltip from './components/KTooltip.vue'
+
+export {
+  KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
+  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  KInput, KMenuItem, KModal, KMoney, KPage, KPagination, KProgress,
+  KRadioGroup, KSegmented, KSelect, KShell, KStat, KSteps, KSwitch, KTable,
+  KTabs, KTextarea, KTimeline, KToast, KTooltip,
+}
+
+export { iconNames, iconRegistry, registerIcons } from './components/icon-registry.js'
+export {
+  applyTheme, buildTheme, themeToCss, resolveScheme, themes, schemes,
+  presets, neutrals, semantics, radiusScales, densities, elevations, fontStacks,
+} from './theme.js'
+export { useToast, pushToast, dismissToast, toastStore } from './composables/useToast.js'
+export * from './format.js'
+
+const components = {
+  KAlert, KAvatar, KBadge, KButton, KCard, KCheckbox, KCombobox, KCountdown,
+  KDescriptions, KDropdown, KEmpty, KFileUpload, KFilterBar, KGantt, KIcon,
+  KInput, KMenuItem, KModal, KMoney, KPage, KPagination, KProgress,
+  KRadioGroup, KSegmented, KSelect, KShell, KStat, KSteps, KSwitch, KTable,
+  KTabs, KTextarea, KTimeline, KToast, KTooltip,
+}
+
+export default {
+  install(app) {
+    for (const [name, component] of Object.entries(components)) {
+      app.component(name, component)
+    }
+  },
+}