mbt-ui-kit 0.1.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 (41) hide show
  1. package/README.md +160 -0
  2. package/dist/components/button/button.d.ts +54 -0
  3. package/dist/components/button/button.d.ts.map +1 -0
  4. package/dist/components/button/index.d.ts +3 -0
  5. package/dist/components/button/index.d.ts.map +1 -0
  6. package/dist/components/input/SearchIcon.d.ts +26 -0
  7. package/dist/components/input/SearchIcon.d.ts.map +1 -0
  8. package/dist/components/input/index.d.ts +4 -0
  9. package/dist/components/input/index.d.ts.map +1 -0
  10. package/dist/components/input/input.d.ts +100 -0
  11. package/dist/components/input/input.d.ts.map +1 -0
  12. package/dist/components/menu-button/GraduationCapIcon.d.ts +6 -0
  13. package/dist/components/menu-button/GraduationCapIcon.d.ts.map +1 -0
  14. package/dist/components/menu-button/index.d.ts +4 -0
  15. package/dist/components/menu-button/index.d.ts.map +1 -0
  16. package/dist/components/menu-button/menu-button.d.ts +63 -0
  17. package/dist/components/menu-button/menu-button.d.ts.map +1 -0
  18. package/dist/components/typography/Heading.d.ts +34 -0
  19. package/dist/components/typography/Heading.d.ts.map +1 -0
  20. package/dist/components/typography/Metric.d.ts +50 -0
  21. package/dist/components/typography/Metric.d.ts.map +1 -0
  22. package/dist/components/typography/Text.d.ts +64 -0
  23. package/dist/components/typography/Text.d.ts.map +1 -0
  24. package/dist/components/typography/index.d.ts +7 -0
  25. package/dist/components/typography/index.d.ts.map +1 -0
  26. package/dist/index.cjs +1 -0
  27. package/dist/index.d.ts +14 -0
  28. package/dist/index.d.ts.map +1 -0
  29. package/dist/index.js +217 -0
  30. package/dist/styles/mbt-ui-kit.css +1 -0
  31. package/dist/styles/tokens.css +111 -0
  32. package/dist/styles/tokens.d.ts +174 -0
  33. package/dist/styles/tokens.d.ts.map +1 -0
  34. package/dist/tokens-Bab0xxwT.cjs +1 -0
  35. package/dist/tokens-Dmbd19AM.js +96 -0
  36. package/dist/tokens-only.cjs +1 -0
  37. package/dist/tokens-only.d.ts +9 -0
  38. package/dist/tokens-only.d.ts.map +1 -0
  39. package/dist/tokens-only.js +12 -0
  40. package/package.json +67 -0
  41. package/src/styles/_tokens.scss +108 -0
package/dist/index.js ADDED
@@ -0,0 +1,217 @@
1
+ import { c as v, a as C, b as y, f as I, r as M, s as W, t as T, d as z, z as S } from "./tokens-Dmbd19AM.js";
2
+ import { jsx as n, jsxs as c } from "react/jsx-runtime";
3
+ function x({
4
+ children: t,
5
+ fullWidth: e,
6
+ disabled: o,
7
+ className: s,
8
+ ...a
9
+ }) {
10
+ const i = [
11
+ "mbt-button",
12
+ e && "mbt-button--full-width",
13
+ o && "mbt-button--disabled",
14
+ s
15
+ ].filter(Boolean).join(" ");
16
+ return /* @__PURE__ */ n("button", { type: "button", className: i, disabled: o, ...a, children: t });
17
+ }
18
+ function p({ className: t }) {
19
+ return /* @__PURE__ */ c(
20
+ "svg",
21
+ {
22
+ width: "24",
23
+ height: "24",
24
+ viewBox: "0 0 24 24",
25
+ fill: "none",
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ className: t,
28
+ children: [
29
+ /* @__PURE__ */ n(
30
+ "circle",
31
+ {
32
+ cx: "10.5",
33
+ cy: "10.5",
34
+ r: "6.5",
35
+ stroke: "currentColor",
36
+ strokeWidth: "1.5",
37
+ strokeLinecap: "round",
38
+ strokeLinejoin: "round"
39
+ }
40
+ ),
41
+ /* @__PURE__ */ n(
42
+ "path",
43
+ {
44
+ d: "M15 15L19 19",
45
+ stroke: "currentColor",
46
+ strokeWidth: "1.5",
47
+ strokeLinecap: "round",
48
+ strokeLinejoin: "round"
49
+ }
50
+ )
51
+ ]
52
+ }
53
+ );
54
+ }
55
+ function N({
56
+ label: t,
57
+ muted: e = !1,
58
+ showSearchIcon: o = !1,
59
+ icon: s,
60
+ fullWidth: a = !1,
61
+ className: i,
62
+ ...r
63
+ }) {
64
+ const l = [
65
+ "mbt-input",
66
+ a && "mbt-input--full-width",
67
+ i
68
+ ].filter(Boolean).join(" "), u = [
69
+ "mbt-input__label",
70
+ e && "mbt-input__label--muted"
71
+ ].filter(Boolean).join(" "), m = [
72
+ "mbt-input__wrapper",
73
+ e && "mbt-input__wrapper--muted"
74
+ ].filter(Boolean).join(" "), b = [
75
+ "mbt-input__field",
76
+ e && "mbt-input__field--muted"
77
+ ].filter(Boolean).join(" "), f = [
78
+ "mbt-input__icon",
79
+ e && "mbt-input__icon--muted"
80
+ ].filter(Boolean).join(" "), d = s || o && /* @__PURE__ */ n(p, {});
81
+ return /* @__PURE__ */ n("div", { className: l, children: /* @__PURE__ */ c("div", { className: "mbt-input__container", children: [
82
+ t && /* @__PURE__ */ n("label", { className: u, children: t }),
83
+ /* @__PURE__ */ c("div", { className: m, children: [
84
+ /* @__PURE__ */ n("input", { type: "text", className: b, ...r }),
85
+ d && /* @__PURE__ */ n("div", { className: f, children: d })
86
+ ] })
87
+ ] }) });
88
+ }
89
+ function k({
90
+ level: t,
91
+ children: e,
92
+ className: o,
93
+ ...s
94
+ }) {
95
+ const a = `h${t}`, i = [`mbt-h${t}`, o].filter(Boolean).join(" ");
96
+ return /* @__PURE__ */ n(a, { className: i, ...s, children: e });
97
+ }
98
+ function w({
99
+ children: t,
100
+ strong: e = !1,
101
+ small: o = !1,
102
+ label: s = !1,
103
+ muted: a = !1,
104
+ as: i = "p",
105
+ className: r,
106
+ ...l
107
+ }) {
108
+ const u = i, m = [
109
+ "mbt-text",
110
+ e && "mbt-text--strong",
111
+ o && "mbt-text--small",
112
+ s && "mbt-text--label",
113
+ a && "mbt-text--muted",
114
+ r
115
+ ].filter(Boolean).join(" ");
116
+ return /* @__PURE__ */ n(u, { className: m, ...l, children: t });
117
+ }
118
+ function g({
119
+ children: t,
120
+ large: e = !1,
121
+ muted: o = !1,
122
+ as: s = "div",
123
+ className: a,
124
+ ...i
125
+ }) {
126
+ const r = s, l = [
127
+ "mbt-metric",
128
+ e && "mbt-metric--large",
129
+ o && "mbt-metric--muted",
130
+ a
131
+ ].filter(Boolean).join(" ");
132
+ return /* @__PURE__ */ n(r, { className: l, ...i, children: t });
133
+ }
134
+ function h({ className: t }) {
135
+ return /* @__PURE__ */ c(
136
+ "svg",
137
+ {
138
+ width: "24",
139
+ height: "24",
140
+ viewBox: "0 0 24 24",
141
+ fill: "none",
142
+ xmlns: "http://www.w3.org/2000/svg",
143
+ className: t,
144
+ children: [
145
+ /* @__PURE__ */ n(
146
+ "path",
147
+ {
148
+ d: "M2 9L12 4L22 9L12 14L2 9Z",
149
+ stroke: "currentColor",
150
+ strokeWidth: "1.5",
151
+ strokeLinecap: "round",
152
+ strokeLinejoin: "round"
153
+ }
154
+ ),
155
+ /* @__PURE__ */ n(
156
+ "path",
157
+ {
158
+ d: "M6 11V16L12 19L18 16V11",
159
+ stroke: "currentColor",
160
+ strokeWidth: "1.5",
161
+ strokeLinecap: "round",
162
+ strokeLinejoin: "round"
163
+ }
164
+ )
165
+ ]
166
+ }
167
+ );
168
+ }
169
+ function j({
170
+ children: t,
171
+ icon: e,
172
+ selected: o = !1,
173
+ small: s = !1,
174
+ disabled: a,
175
+ className: i,
176
+ ...r
177
+ }) {
178
+ const l = [
179
+ "mbt-menu-button",
180
+ o && "mbt-menu-button--selected",
181
+ s && "mbt-menu-button--small",
182
+ i
183
+ ].filter(Boolean).join(" ");
184
+ return /* @__PURE__ */ c(
185
+ "button",
186
+ {
187
+ type: "button",
188
+ className: l,
189
+ disabled: a,
190
+ "aria-pressed": o,
191
+ ...r,
192
+ children: [
193
+ /* @__PURE__ */ n("div", { className: "mbt-menu-button__icon", children: e ?? /* @__PURE__ */ n(h, {}) }),
194
+ /* @__PURE__ */ n("span", { className: "mbt-menu-button__text", children: t })
195
+ ]
196
+ }
197
+ );
198
+ }
199
+ export {
200
+ x as Button,
201
+ h as GraduationCapIcon,
202
+ k as Heading,
203
+ N as Input,
204
+ j as MenuButton,
205
+ g as Metric,
206
+ p as SearchIcon,
207
+ w as Text,
208
+ v as colors,
209
+ C as fontSizes,
210
+ y as fontWeights,
211
+ I as fonts,
212
+ M as radius,
213
+ W as spacing,
214
+ T as tokens,
215
+ z as transitions,
216
+ S as zIndex
217
+ };
@@ -0,0 +1 @@
1
+ .mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:0 8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:1;text-transform:uppercase;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease;background-color:#f2f4fa;color:#0b0e14}.mbt-button:hover{color:#6663fd}.mbt-button:active{opacity:.9}.mbt-button:focus-visible{box-shadow:0 0 0 2px #0b0e14,0 0 0 4px #6663fd}.mbt-button:disabled,.mbt-button--disabled{background-color:#474953;color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-button--full-width{width:100%}.mbt-input__container{display:flex;flex-direction:column;gap:10px;width:100%;max-width:296px}.mbt-input__label{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__label--muted{color:#8b92a6}.mbt-input__wrapper{position:relative;display:flex;align-items:center;width:100%;border:1px solid #F2F4FA;border-radius:8px;padding:8px 16px;background-color:transparent;transition:border-color .15s ease}.mbt-input__wrapper--muted{border-color:#8b92a6}.mbt-input__wrapper:focus-within{border-color:#6663fd}.mbt-input__field{flex:1;appearance:none;border:none;background:none;outline:none;font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-input__field::placeholder{color:#8b92a6}.mbt-input__field--muted{color:#8b92a6}.mbt-input__icon{flex-shrink:0;width:24px;height:24px;margin-left:8px;color:#f2f4fa}.mbt-input__icon--muted{color:#8b92a6}.mbt-input--full-width .mbt-input__container{max-width:none}.mbt-h1{font-family:IBM Plex Sans,sans-serif;font-size:72px;font-weight:600;line-height:80px;color:#f2f4fa;margin:0}.mbt-h2{font-family:IBM Plex Sans,sans-serif;font-size:40px;font-weight:600;line-height:48px;color:#f2f4fa;margin:0}.mbt-h3{font-family:IBM Plex Sans,sans-serif;font-size:28px;font-weight:500;line-height:36px;color:#f2f4fa;margin:0}.mbt-h4{font-family:IBM Plex Sans,sans-serif;font-size:20px;font-weight:500;line-height:28px;color:#f2f4fa;margin:0}.mbt-h5{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;margin:0}.mbt-text{font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0;font-feature-settings:"ss01" 1,"salt" 1,"ss02" 1}.mbt-text--strong{font-weight:500}.mbt-text--small{font-size:12px;line-height:18px}.mbt-text--label{font-size:12px;text-transform:uppercase}.mbt-text--muted{color:#8b92a6}.mbt-metric{font-family:IBM Plex Mono,monospace;font-size:16px;font-weight:400;line-height:1;color:#f2f4fa;margin:0}.mbt-metric--large{font-size:24px;font-weight:500;line-height:32px}.mbt-metric--muted{color:#8b92a6}.mbt-menu-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;display:flex;align-items:center;width:200px;padding:4px 12px;gap:8px;font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:24px;color:#f2f4fa;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease,color .15s ease}.mbt-menu-button__icon{flex-shrink:0;width:24px;height:24px;color:#f2f4fa;transition:color .15s ease}.mbt-menu-button__text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected){background-color:#2a3148;color:#4fa3b3;border-radius:8px}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#4fa3b3}.mbt-menu-button--selected{background-color:#1d2335;color:#6663fd;border-radius:8px}.mbt-menu-button--selected .mbt-menu-button__icon{color:#6663fd}.mbt-menu-button--small{padding:4px 8px;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.mbt-menu-button--small .mbt-menu-button__icon{width:16px;height:16px}.mbt-menu-button:disabled{color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8b92a6}*,*:before,*:after{box-sizing:border-box}:root{--mbt-color-bg-0: #0b0e14;--mbt-color-bg-1: #111520;--mbt-color-surface: #171c2a;--mbt-color-surface-raised: #1d2335;--mbt-color-text-primary: #f2f4fa;--mbt-color-text-muted: #8b92a6;--mbt-color-text-inverse: #0b0e14;--mbt-color-primary: #6663fd;--mbt-color-secondary: #4fa3b3;--mbt-color-gray: #474953;--mbt-color-border: #2a3148;--mbt-color-success: #4dba8a;--mbt-color-error: #c9636a;--mbt-color-warning: #d1a64a;--mbt-color-diamond: #e6f3ff;--mbt-color-diamond-stop-0: #beacd3;--mbt-color-diamond-stop-1: #bee3f7;--mbt-color-diamond-stop-2: #efece7;--mbt-color-diamond-stop-3: #f8ddde;--mbt-color-diamond-stop-4: #cfe6f1;--mbt-font-primary: "IBM Plex Sans", sans-serif;--mbt-font-secondary: "Inter", sans-serif;--mbt-font-mono: "IBM Plex Mono", monospace;--mbt-font-size-1: 12px;--mbt-font-size-2: 14px;--mbt-font-size-3: 16px;--mbt-font-size-4: 20px;--mbt-font-size-5: 24px;--mbt-font-size-6: 28px;--mbt-font-size-7: 40px;--mbt-font-size-8: 48px;--mbt-font-size-9: 72px;--mbt-font-weight-regular: 400;--mbt-font-weight-medium: 500;--mbt-font-weight-semibold: 600;--mbt-space-0: 0;--mbt-space-1: 4px;--mbt-space-2: 8px;--mbt-space-3: 12px;--mbt-space-4: 16px;--mbt-space-5: 24px;--mbt-space-6: 32px;--mbt-space-7: 48px;--mbt-space-8: 64px;--mbt-space-9: 96px;--mbt-space-10: 128px;--mbt-radius-0: 0;--mbt-radius-xs: 4px;--mbt-radius-sm: 8px;--mbt-radius-md: 12px;--mbt-radius-lg: 16px;--mbt-radius-xl: 24px;--mbt-radius-full: 999px;--mbt-z-index-0: 0;--mbt-z-index-1: 100;--mbt-z-index-2: 200;--mbt-z-index-3: 300;--mbt-z-index-4: 400;--mbt-z-index-5: 500;--mbt-transition-fast: .15s ease;--mbt-transition-normal: .25s ease;--mbt-transition-slow: .4s ease}
@@ -0,0 +1,111 @@
1
+ /**
2
+ * Design Tokens as CSS Custom Properties
3
+ *
4
+ * Импортируйте этот файл для доступа к дизайн-токенам через CSS переменные.
5
+ * Использование: var(--mbt-color-primary), var(--mbt-space-4), и т.д.
6
+ */
7
+
8
+ :root {
9
+ /* ========================================================================= */
10
+ /* Colors */
11
+ /* ========================================================================= */
12
+
13
+ /* Background */
14
+ --mbt-color-bg-0: #0b0e14;
15
+ --mbt-color-bg-1: #111520;
16
+ --mbt-color-surface: #171c2a;
17
+ --mbt-color-surface-raised: #1d2335;
18
+
19
+ /* Text */
20
+ --mbt-color-text-primary: #f2f4fa;
21
+ --mbt-color-text-muted: #8b92a6;
22
+ --mbt-color-text-inverse: #0b0e14;
23
+
24
+ /* Brand */
25
+ --mbt-color-primary: #6663fd;
26
+ --mbt-color-secondary: #4fa3b3;
27
+
28
+ /* State */
29
+ --mbt-color-gray: #474953;
30
+ --mbt-color-border: #2a3148;
31
+ --mbt-color-success: #4dba8a;
32
+ --mbt-color-error: #c9636a;
33
+ --mbt-color-warning: #d1a64a;
34
+
35
+ /* Diamond gradient */
36
+ --mbt-color-diamond: #e6f3ff;
37
+ --mbt-color-diamond-stop-0: #beacd3;
38
+ --mbt-color-diamond-stop-1: #bee3f7;
39
+ --mbt-color-diamond-stop-2: #efece7;
40
+ --mbt-color-diamond-stop-3: #f8ddde;
41
+ --mbt-color-diamond-stop-4: #cfe6f1;
42
+
43
+ /* ========================================================================= */
44
+ /* Typography */
45
+ /* ========================================================================= */
46
+
47
+ --mbt-font-primary: "IBM Plex Sans", sans-serif;
48
+ --mbt-font-secondary: "Inter", sans-serif;
49
+ --mbt-font-mono: "IBM Plex Mono", monospace;
50
+
51
+ --mbt-font-size-1: 12px;
52
+ --mbt-font-size-2: 14px;
53
+ --mbt-font-size-3: 16px;
54
+ --mbt-font-size-4: 20px;
55
+ --mbt-font-size-5: 24px;
56
+ --mbt-font-size-6: 28px;
57
+ --mbt-font-size-7: 40px;
58
+ --mbt-font-size-8: 48px;
59
+ --mbt-font-size-9: 72px;
60
+
61
+ --mbt-font-weight-regular: 400;
62
+ --mbt-font-weight-medium: 500;
63
+ --mbt-font-weight-semibold: 600;
64
+
65
+ /* ========================================================================= */
66
+ /* Spacing */
67
+ /* ========================================================================= */
68
+
69
+ --mbt-space-0: 0;
70
+ --mbt-space-1: 4px;
71
+ --mbt-space-2: 8px;
72
+ --mbt-space-3: 12px;
73
+ --mbt-space-4: 16px;
74
+ --mbt-space-5: 24px;
75
+ --mbt-space-6: 32px;
76
+ --mbt-space-7: 48px;
77
+ --mbt-space-8: 64px;
78
+ --mbt-space-9: 96px;
79
+ --mbt-space-10: 128px;
80
+
81
+ /* ========================================================================= */
82
+ /* Border Radius */
83
+ /* ========================================================================= */
84
+
85
+ --mbt-radius-0: 0;
86
+ --mbt-radius-xs: 4px;
87
+ --mbt-radius-sm: 8px;
88
+ --mbt-radius-md: 12px;
89
+ --mbt-radius-lg: 16px;
90
+ --mbt-radius-xl: 24px;
91
+ --mbt-radius-full: 999px;
92
+
93
+ /* ========================================================================= */
94
+ /* Z-Index */
95
+ /* ========================================================================= */
96
+
97
+ --mbt-z-index-0: 0;
98
+ --mbt-z-index-1: 100;
99
+ --mbt-z-index-2: 200;
100
+ --mbt-z-index-3: 300;
101
+ --mbt-z-index-4: 400;
102
+ --mbt-z-index-5: 500;
103
+
104
+ /* ========================================================================= */
105
+ /* Transitions */
106
+ /* ========================================================================= */
107
+
108
+ --mbt-transition-fast: 150ms ease;
109
+ --mbt-transition-normal: 250ms ease;
110
+ --mbt-transition-slow: 400ms ease;
111
+ }
@@ -0,0 +1,174 @@
1
+ /**
2
+ * Design Tokens
3
+ *
4
+ * Токены дизайн-системы, экспортируемые для использования в JavaScript/TypeScript.
5
+ * Синхронизированы с _tokens.scss
6
+ */
7
+ export declare const colors: {
8
+ readonly bg0: "#0B0E14";
9
+ readonly bg1: "#111520";
10
+ readonly surface: "#171C2A";
11
+ readonly surfaceRaised: "#1D2335";
12
+ readonly textPrimary: "#F2F4FA";
13
+ readonly textMuted: "#8B92A6";
14
+ readonly textInverse: "#0B0E14";
15
+ readonly primary: "#6663FD";
16
+ readonly secondary: "#4FA3B3";
17
+ readonly gray: "#474953";
18
+ readonly border: "#2A3148";
19
+ readonly success: "#4DBA8A";
20
+ readonly error: "#C9636A";
21
+ readonly warning: "#D1A64A";
22
+ readonly diamond: "#E6F3FF";
23
+ readonly diamondStop0: "#BEACD3";
24
+ readonly diamondStop1: "#BEE3F7";
25
+ readonly diamondStop2: "#EFECE7";
26
+ readonly diamondStop3: "#F8DDDE";
27
+ readonly diamondStop4: "#CFE6F1";
28
+ };
29
+ export declare const fonts: {
30
+ readonly primary: "\"IBM Plex Sans\", sans-serif";
31
+ readonly secondary: "\"Inter\", sans-serif";
32
+ readonly mono: "\"IBM Plex Mono\", monospace";
33
+ };
34
+ export declare const fontSizes: {
35
+ readonly 1: "12px";
36
+ readonly 2: "14px";
37
+ readonly 3: "16px";
38
+ readonly 4: "20px";
39
+ readonly 5: "24px";
40
+ readonly 6: "28px";
41
+ readonly 7: "40px";
42
+ readonly 8: "48px";
43
+ readonly 9: "72px";
44
+ };
45
+ export declare const fontWeights: {
46
+ readonly regular: 400;
47
+ readonly medium: 500;
48
+ readonly semibold: 600;
49
+ };
50
+ export declare const spacing: {
51
+ readonly 0: "0";
52
+ readonly 1: "4px";
53
+ readonly 2: "8px";
54
+ readonly 3: "12px";
55
+ readonly 4: "16px";
56
+ readonly 5: "24px";
57
+ readonly 6: "32px";
58
+ readonly 7: "48px";
59
+ readonly 8: "64px";
60
+ readonly 9: "96px";
61
+ readonly 10: "128px";
62
+ };
63
+ export declare const radius: {
64
+ readonly 0: "0";
65
+ readonly xs: "4px";
66
+ readonly sm: "8px";
67
+ readonly md: "12px";
68
+ readonly lg: "16px";
69
+ readonly xl: "24px";
70
+ readonly full: "999px";
71
+ };
72
+ export declare const zIndex: {
73
+ readonly 0: 0;
74
+ readonly 1: 100;
75
+ readonly 2: 200;
76
+ readonly 3: 300;
77
+ readonly 4: 400;
78
+ readonly 5: 500;
79
+ };
80
+ export declare const transitions: {
81
+ readonly fast: "150ms ease";
82
+ readonly normal: "250ms ease";
83
+ readonly slow: "400ms ease";
84
+ };
85
+ export declare const tokens: {
86
+ readonly colors: {
87
+ readonly bg0: "#0B0E14";
88
+ readonly bg1: "#111520";
89
+ readonly surface: "#171C2A";
90
+ readonly surfaceRaised: "#1D2335";
91
+ readonly textPrimary: "#F2F4FA";
92
+ readonly textMuted: "#8B92A6";
93
+ readonly textInverse: "#0B0E14";
94
+ readonly primary: "#6663FD";
95
+ readonly secondary: "#4FA3B3";
96
+ readonly gray: "#474953";
97
+ readonly border: "#2A3148";
98
+ readonly success: "#4DBA8A";
99
+ readonly error: "#C9636A";
100
+ readonly warning: "#D1A64A";
101
+ readonly diamond: "#E6F3FF";
102
+ readonly diamondStop0: "#BEACD3";
103
+ readonly diamondStop1: "#BEE3F7";
104
+ readonly diamondStop2: "#EFECE7";
105
+ readonly diamondStop3: "#F8DDDE";
106
+ readonly diamondStop4: "#CFE6F1";
107
+ };
108
+ readonly fonts: {
109
+ readonly primary: "\"IBM Plex Sans\", sans-serif";
110
+ readonly secondary: "\"Inter\", sans-serif";
111
+ readonly mono: "\"IBM Plex Mono\", monospace";
112
+ };
113
+ readonly fontSizes: {
114
+ readonly 1: "12px";
115
+ readonly 2: "14px";
116
+ readonly 3: "16px";
117
+ readonly 4: "20px";
118
+ readonly 5: "24px";
119
+ readonly 6: "28px";
120
+ readonly 7: "40px";
121
+ readonly 8: "48px";
122
+ readonly 9: "72px";
123
+ };
124
+ readonly fontWeights: {
125
+ readonly regular: 400;
126
+ readonly medium: 500;
127
+ readonly semibold: 600;
128
+ };
129
+ readonly spacing: {
130
+ readonly 0: "0";
131
+ readonly 1: "4px";
132
+ readonly 2: "8px";
133
+ readonly 3: "12px";
134
+ readonly 4: "16px";
135
+ readonly 5: "24px";
136
+ readonly 6: "32px";
137
+ readonly 7: "48px";
138
+ readonly 8: "64px";
139
+ readonly 9: "96px";
140
+ readonly 10: "128px";
141
+ };
142
+ readonly radius: {
143
+ readonly 0: "0";
144
+ readonly xs: "4px";
145
+ readonly sm: "8px";
146
+ readonly md: "12px";
147
+ readonly lg: "16px";
148
+ readonly xl: "24px";
149
+ readonly full: "999px";
150
+ };
151
+ readonly zIndex: {
152
+ readonly 0: 0;
153
+ readonly 1: 100;
154
+ readonly 2: 200;
155
+ readonly 3: 300;
156
+ readonly 4: 400;
157
+ readonly 5: 500;
158
+ };
159
+ readonly transitions: {
160
+ readonly fast: "150ms ease";
161
+ readonly normal: "250ms ease";
162
+ readonly slow: "400ms ease";
163
+ };
164
+ };
165
+ export default tokens;
166
+ export type Color = keyof typeof colors;
167
+ export type Font = keyof typeof fonts;
168
+ export type FontSize = keyof typeof fontSizes;
169
+ export type FontWeight = keyof typeof fontWeights;
170
+ export type Spacing = keyof typeof spacing;
171
+ export type Radius = keyof typeof radius;
172
+ export type ZIndex = keyof typeof zIndex;
173
+ export type Transition = keyof typeof transitions;
174
+ //# sourceMappingURL=tokens.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CA8BT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAMX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAST,CAAC;AAEX,eAAe,MAAM,CAAC;AAMtB,MAAM,MAAM,KAAK,GAAG,MAAM,OAAO,MAAM,CAAC;AACxC,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC"}
@@ -0,0 +1 @@
1
+ "use strict";const s={bg0:"#0B0E14",bg1:"#111520",surface:"#171C2A",surfaceRaised:"#1D2335",textPrimary:"#F2F4FA",textMuted:"#8B92A6",textInverse:"#0B0E14",primary:"#6663FD",secondary:"#4FA3B3",gray:"#474953",border:"#2A3148",success:"#4DBA8A",error:"#C9636A",warning:"#D1A64A",diamond:"#E6F3FF",diamondStop0:"#BEACD3",diamondStop1:"#BEE3F7",diamondStop2:"#EFECE7",diamondStop3:"#F8DDDE",diamondStop4:"#CFE6F1"},o={primary:'"IBM Plex Sans", sans-serif',secondary:'"Inter", sans-serif',mono:'"IBM Plex Mono", monospace'},n={1:"12px",2:"14px",3:"16px",4:"20px",5:"24px",6:"28px",7:"40px",8:"48px",9:"72px"},t={regular:400,medium:500,semibold:600},e={0:"0",1:"4px",2:"8px",3:"12px",4:"16px",5:"24px",6:"32px",7:"48px",8:"64px",9:"96px",10:"128px"},p={0:"0",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"999px"},x={0:0,1:100,2:200,3:300,4:400,5:500},a={fast:"150ms ease",normal:"250ms ease",slow:"400ms ease"},r={colors:s,fonts:o,fontSizes:n,fontWeights:t,spacing:e,radius:p,zIndex:x,transitions:a};exports.colors=s;exports.fontSizes=n;exports.fontWeights=t;exports.fonts=o;exports.radius=p;exports.spacing=e;exports.tokens=r;exports.transitions=a;exports.zIndex=x;
@@ -0,0 +1,96 @@
1
+ const s = {
2
+ // Background
3
+ bg0: "#0B0E14",
4
+ bg1: "#111520",
5
+ surface: "#171C2A",
6
+ surfaceRaised: "#1D2335",
7
+ // Text
8
+ textPrimary: "#F2F4FA",
9
+ textMuted: "#8B92A6",
10
+ textInverse: "#0B0E14",
11
+ // Brand
12
+ primary: "#6663FD",
13
+ secondary: "#4FA3B3",
14
+ // State
15
+ gray: "#474953",
16
+ border: "#2A3148",
17
+ success: "#4DBA8A",
18
+ error: "#C9636A",
19
+ warning: "#D1A64A",
20
+ // Diamond gradient stops
21
+ diamond: "#E6F3FF",
22
+ diamondStop0: "#BEACD3",
23
+ diamondStop1: "#BEE3F7",
24
+ diamondStop2: "#EFECE7",
25
+ diamondStop3: "#F8DDDE",
26
+ diamondStop4: "#CFE6F1"
27
+ }, o = {
28
+ primary: '"IBM Plex Sans", sans-serif',
29
+ secondary: '"Inter", sans-serif',
30
+ mono: '"IBM Plex Mono", monospace'
31
+ }, a = {
32
+ 1: "12px",
33
+ 2: "14px",
34
+ 3: "16px",
35
+ 4: "20px",
36
+ 5: "24px",
37
+ 6: "28px",
38
+ 7: "40px",
39
+ 8: "48px",
40
+ 9: "72px"
41
+ }, n = {
42
+ regular: 400,
43
+ medium: 500,
44
+ semibold: 600
45
+ }, p = {
46
+ 0: "0",
47
+ 1: "4px",
48
+ 2: "8px",
49
+ 3: "12px",
50
+ 4: "16px",
51
+ 5: "24px",
52
+ 6: "32px",
53
+ 7: "48px",
54
+ 8: "64px",
55
+ 9: "96px",
56
+ 10: "128px"
57
+ }, e = {
58
+ 0: "0",
59
+ xs: "4px",
60
+ sm: "8px",
61
+ md: "12px",
62
+ lg: "16px",
63
+ xl: "24px",
64
+ full: "999px"
65
+ }, x = {
66
+ 0: 0,
67
+ 1: 100,
68
+ 2: 200,
69
+ 3: 300,
70
+ 4: 400,
71
+ 5: 500
72
+ }, t = {
73
+ fast: "150ms ease",
74
+ normal: "250ms ease",
75
+ slow: "400ms ease"
76
+ }, r = {
77
+ colors: s,
78
+ fonts: o,
79
+ fontSizes: a,
80
+ fontWeights: n,
81
+ spacing: p,
82
+ radius: e,
83
+ zIndex: x,
84
+ transitions: t
85
+ };
86
+ export {
87
+ a,
88
+ n as b,
89
+ s as c,
90
+ t as d,
91
+ o as f,
92
+ e as r,
93
+ p as s,
94
+ r as t,
95
+ x as z
96
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./tokens-Bab0xxwT.cjs");exports.colors=s.colors;exports.fontSizes=s.fontSizes;exports.fontWeights=s.fontWeights;exports.fonts=s.fonts;exports.radius=s.radius;exports.spacing=s.spacing;exports.tokens=s.tokens;exports.transitions=s.transitions;exports.zIndex=s.zIndex;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Tokens-only export
3
+ *
4
+ * Используйте этот импорт, если нужны только токены без компонентов
5
+ */
6
+ import "./styles/tokens.css";
7
+ export { tokens, colors, fonts, fontSizes, fontWeights, spacing, radius, zIndex, transitions, } from "./styles/tokens";
8
+ export type { Color, Font, FontSize, FontWeight, Spacing, Radius, ZIndex, Transition, } from "./styles/tokens";
9
+ //# sourceMappingURL=tokens-only.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens-only.d.ts","sourceRoot":"","sources":["../src/tokens-only.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,OAAO,EACP,MAAM,EACN,MAAM,EACN,UAAU,GACX,MAAM,iBAAiB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { c as o, a as t, b as n, f as i, r, s as e, t as f, d as c, z as d } from "./tokens-Dmbd19AM.js";
2
+ export {
3
+ o as colors,
4
+ t as fontSizes,
5
+ n as fontWeights,
6
+ i as fonts,
7
+ r as radius,
8
+ e as spacing,
9
+ f as tokens,
10
+ c as transitions,
11
+ d as zIndex
12
+ };