@krometra/ui-kit 0.0.0-stage → 0.3.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 (48) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +228 -2
  3. package/dist/ui-kit.css +2 -0
  4. package/dist/ui-kit.js +14955 -0
  5. package/dist/ui-kit.umd.cjs +3 -0
  6. package/package.json +74 -3
  7. package/src/base.css +32 -0
  8. package/src/components/KAlert.vue +65 -0
  9. package/src/components/KAvatar.vue +67 -0
  10. package/src/components/KBadge.vue +47 -0
  11. package/src/components/KButton.vue +98 -0
  12. package/src/components/KCard.vue +63 -0
  13. package/src/components/KCheckbox.vue +105 -0
  14. package/src/components/KCombobox.vue +232 -0
  15. package/src/components/KCountdown.vue +74 -0
  16. package/src/components/KDescriptions.vue +40 -0
  17. package/src/components/KDropdown.vue +111 -0
  18. package/src/components/KEmpty.vue +39 -0
  19. package/src/components/KFileUpload.vue +121 -0
  20. package/src/components/KFilterBar.vue +91 -0
  21. package/src/components/KIcon.vue +53 -0
  22. package/src/components/KInput.vue +108 -0
  23. package/src/components/KMenuItem.vue +56 -0
  24. package/src/components/KModal.vue +136 -0
  25. package/src/components/KMoney.vue +44 -0
  26. package/src/components/KPage.vue +93 -0
  27. package/src/components/KPagination.vue +113 -0
  28. package/src/components/KProgress.vue +63 -0
  29. package/src/components/KRadioGroup.vue +103 -0
  30. package/src/components/KSegmented.vue +88 -0
  31. package/src/components/KSelect.vue +231 -0
  32. package/src/components/KShell.vue +176 -0
  33. package/src/components/KStat.vue +74 -0
  34. package/src/components/KSteps.vue +119 -0
  35. package/src/components/KSwitch.vue +82 -0
  36. package/src/components/KTable.vue +161 -0
  37. package/src/components/KTabs.vue +102 -0
  38. package/src/components/KTextarea.vue +79 -0
  39. package/src/components/KTimeline.vue +72 -0
  40. package/src/components/KToast.vue +34 -0
  41. package/src/components/KToastItem.vue +86 -0
  42. package/src/components/KTooltip.vue +67 -0
  43. package/src/components/icon-registry.js +143 -0
  44. package/src/composables/useToast.js +52 -0
  45. package/src/format.js +137 -0
  46. package/src/index.js +84 -0
  47. package/src/theme.js +417 -0
  48. package/src/tokens.css +109 -0
package/src/tokens.css ADDED
@@ -0,0 +1,109 @@
1
+ /*
2
+ * Дизайн-токены @krometra/ui-kit. Файл сгенерирован scripts/build-tokens.mjs из
3
+ * theme.js — править палитру там, затем `yarn tokens`.
4
+ *
5
+ * Светлая схема — по умолчанию; тёмная включается атрибутом
6
+ * <html data-k-scheme="dark"> или через applyTheme({ scheme: 'dark' | 'system' }).
7
+ * Все примитивы берут размеры и цвета отсюда, поэтому строка «инпут + селект +
8
+ * кнопка» выравнивается без правок в вёрстке приложения.
9
+ */
10
+
11
+ :root {
12
+ --k-primary: #2563eb;
13
+ --k-primary-hover: #1d4ed8;
14
+ --k-primary-soft: #eff6ff;
15
+ --k-on-primary: #ffffff;
16
+ --k-bg: #f6f8fb;
17
+ --k-surface: #ffffff;
18
+ --k-surface-muted: #f8fafc;
19
+ --k-border: #e4e9f0;
20
+ --k-border-strong: #cbd5e1;
21
+ --k-text: #172033;
22
+ --k-text-muted: #64748b;
23
+ --k-text-faint: #94a3b8;
24
+ --k-overlay: rgba(15, 23, 42, 0.35);
25
+ --k-tooltip-bg: #172033;
26
+ --k-tooltip-text: #ffffff;
27
+ --k-selection: #d3e0fb;
28
+ --k-radius-sm: 6px;
29
+ --k-radius: 8px;
30
+ --k-radius-lg: 14px;
31
+ --k-control-h: 2.5rem;
32
+ --k-control-h-sm: 2rem;
33
+ --k-gap: 0.5rem;
34
+ --k-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
35
+ --k-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
36
+ --k-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.14);
37
+ --k-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
38
+ --k-success: #059669;
39
+ --k-success-hover: #047857;
40
+ --k-success-soft: #ecfdf5;
41
+ --k-success-strong: #065f46;
42
+ --k-on-success: #ffffff;
43
+ --k-warning: #f59e0b;
44
+ --k-warning-hover: #d97706;
45
+ --k-warning-soft: #fffbeb;
46
+ --k-warning-strong: #b45309;
47
+ --k-on-warning: #ffffff;
48
+ --k-danger: #dc2626;
49
+ --k-danger-hover: #b91c1c;
50
+ --k-danger-soft: #fef2f2;
51
+ --k-danger-strong: #991b1b;
52
+ --k-on-danger: #ffffff;
53
+ --k-info: #4f46e5;
54
+ --k-info-hover: #4338ca;
55
+ --k-info-soft: #eef2ff;
56
+ --k-info-strong: #3730a3;
57
+ --k-on-info: #ffffff;
58
+ color-scheme: light;
59
+ }
60
+
61
+ :root[data-k-scheme="dark"] {
62
+ --k-primary: #3f76ed;
63
+ --k-primary-hover: #5a89f0;
64
+ --k-primary-soft: #1b2e56;
65
+ --k-on-primary: #ffffff;
66
+ --k-bg: #0b1220;
67
+ --k-surface: #111a2b;
68
+ --k-surface-muted: #18233a;
69
+ --k-border: #24314a;
70
+ --k-border-strong: #354764;
71
+ --k-text: #e5eaf3;
72
+ --k-text-muted: #9aa7bb;
73
+ --k-text-faint: #66748c;
74
+ --k-overlay: rgba(0, 0, 0, 0.6);
75
+ --k-tooltip-bg: #e5eaf3;
76
+ --k-tooltip-text: #0b1220;
77
+ --k-selection: #233f79;
78
+ --k-radius-sm: 6px;
79
+ --k-radius: 8px;
80
+ --k-radius-lg: 14px;
81
+ --k-control-h: 2.5rem;
82
+ --k-control-h-sm: 2rem;
83
+ --k-gap: 0.5rem;
84
+ --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
85
+ --k-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
86
+ --k-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
87
+ --k-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
88
+ --k-success: #34d399;
89
+ --k-success-hover: #6ee7b7;
90
+ --k-success-soft: #173b3f;
91
+ --k-success-strong: #6ee7b7;
92
+ --k-on-success: #0f172a;
93
+ --k-warning: #fbbf24;
94
+ --k-warning-hover: #fcd34d;
95
+ --k-warning-soft: #3b382a;
96
+ --k-warning-strong: #fcd34d;
97
+ --k-on-warning: #0f172a;
98
+ --k-danger: #f87171;
99
+ --k-danger-hover: #fca5a5;
100
+ --k-danger-soft: #3b2a38;
101
+ --k-danger-strong: #fca5a5;
102
+ --k-on-danger: #ffffff;
103
+ --k-info: #818cf8;
104
+ --k-info-hover: #a5b4fc;
105
+ --k-info-soft: #252f50;
106
+ --k-info-strong: #a5b4fc;
107
+ --k-on-info: #ffffff;
108
+ color-scheme: dark;
109
+ }