mbt-ui-kit 0.1.14 → 0.1.15
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.
- package/README.md +45 -0
- package/dist/fonts/ibm-plex-mono-v20-latin-500.woff2 +0 -0
- package/dist/fonts/ibm-plex-mono-v20-latin-600.woff2 +0 -0
- package/dist/fonts/ibm-plex-mono-v20-latin-regular.woff2 +0 -0
- package/dist/fonts/ibm-plex-sans-v23-latin-500.woff2 +0 -0
- package/dist/fonts/ibm-plex-sans-v23-latin-600.woff2 +0 -0
- package/dist/fonts/ibm-plex-sans-v23-latin-regular.woff2 +0 -0
- package/dist/index.mjs +1 -1
- package/dist/styles/fonts.css +55 -0
- package/dist/styles/mbt-ui-kit.css +1 -1
- package/dist/{tokens-DRT06tcO.js → tokens-Bxhg1IBs.js} +2 -2
- package/dist/tokens-only.mjs +1 -1
- package/package.json +5 -3
- package/dist/fonts/Inter-Italic-VariableFont_opsz,wght.ttf +0 -0
package/README.md
CHANGED
|
@@ -26,6 +26,51 @@ function App() {
|
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
### Preload fonts in consumer app
|
|
30
|
+
|
|
31
|
+
The library now ships fonts locally instead of loading them from Google Fonts. For the best first paint in the consumer app, preload the font files in your app shell and import the dedicated font stylesheet early.
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import "mbt-ui-kit/fonts.css";
|
|
35
|
+
import "mbt-ui-kit/styles";
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Example with bundler-resolved asset URLs:
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import plexSansRegularUrl from "mbt-ui-kit/fonts/ibm-plex-sans-v23-latin-regular.woff2";
|
|
42
|
+
import plexSansMediumUrl from "mbt-ui-kit/fonts/ibm-plex-sans-v23-latin-500.woff2";
|
|
43
|
+
import plexSansSemiboldUrl from "mbt-ui-kit/fonts/ibm-plex-sans-v23-latin-600.woff2";
|
|
44
|
+
import interVariableUrl from "mbt-ui-kit/fonts/Inter-VariableFont_opsz,wght.ttf";
|
|
45
|
+
import plexMonoRegularUrl from "mbt-ui-kit/fonts/ibm-plex-mono-v20-latin-regular.woff2";
|
|
46
|
+
import plexMonoMediumUrl from "mbt-ui-kit/fonts/ibm-plex-mono-v20-latin-500.woff2";
|
|
47
|
+
import plexMonoSemiboldUrl from "mbt-ui-kit/fonts/ibm-plex-mono-v20-latin-600.woff2";
|
|
48
|
+
|
|
49
|
+
const preloadFonts = [
|
|
50
|
+
plexSansRegularUrl,
|
|
51
|
+
plexSansMediumUrl,
|
|
52
|
+
plexSansSemiboldUrl,
|
|
53
|
+
interVariableUrl,
|
|
54
|
+
plexMonoRegularUrl,
|
|
55
|
+
plexMonoMediumUrl,
|
|
56
|
+
plexMonoSemiboldUrl,
|
|
57
|
+
];
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Example preload tags:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<link rel="preload" href="...resolved IBM Plex Sans 400 url..." as="font" type="font/woff2" crossorigin>
|
|
64
|
+
<link rel="preload" href="...resolved IBM Plex Sans 500 url..." as="font" type="font/woff2" crossorigin>
|
|
65
|
+
<link rel="preload" href="...resolved IBM Plex Sans 600 url..." as="font" type="font/woff2" crossorigin>
|
|
66
|
+
<link rel="preload" href="...resolved Inter variable url..." as="font" type="font/ttf" crossorigin>
|
|
67
|
+
<link rel="preload" href="...resolved IBM Plex Mono 400 url..." as="font" type="font/woff2" crossorigin>
|
|
68
|
+
<link rel="preload" href="...resolved IBM Plex Mono 500 url..." as="font" type="font/woff2" crossorigin>
|
|
69
|
+
<link rel="preload" href="...resolved IBM Plex Mono 600 url..." as="font" type="font/woff2" crossorigin>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The library publishes the font files in `dist/fonts/`, exposes them under `mbt-ui-kit/fonts/*`, and ships the matching declarations in `mbt-ui-kit/fonts.css`.
|
|
73
|
+
|
|
29
74
|
## Компоненты
|
|
30
75
|
|
|
31
76
|
### Button
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as W,
|
|
1
|
+
import { c as W, f as z, a as M, b as T, d as $, r as S, s as D, t as F, e as G, z as H } from "./tokens-Bxhg1IBs.js";
|
|
2
2
|
import { jsxs as c, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as h } from "react";
|
|
4
4
|
function _({ size: e = "md", className: n, ...o }) {
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "IBM Plex Sans";
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
font-display: swap;
|
|
6
|
+
src: url("../fonts/ibm-plex-sans-v23-latin-regular.woff2") format("woff2");
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: "IBM Plex Sans";
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-weight: 500;
|
|
13
|
+
font-display: swap;
|
|
14
|
+
src: url("../fonts/ibm-plex-sans-v23-latin-500.woff2") format("woff2");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: "IBM Plex Sans";
|
|
19
|
+
font-style: normal;
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
font-display: swap;
|
|
22
|
+
src: url("../fonts/ibm-plex-sans-v23-latin-600.woff2") format("woff2");
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@font-face {
|
|
26
|
+
font-family: "Inter";
|
|
27
|
+
font-style: normal;
|
|
28
|
+
font-weight: 100 900;
|
|
29
|
+
font-display: swap;
|
|
30
|
+
src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@font-face {
|
|
34
|
+
font-family: "IBM Plex Mono";
|
|
35
|
+
font-style: normal;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
font-display: swap;
|
|
38
|
+
src: url("../fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@font-face {
|
|
42
|
+
font-family: "IBM Plex Mono";
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
font-display: swap;
|
|
46
|
+
src: url("../fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@font-face {
|
|
50
|
+
font-family: "IBM Plex Mono";
|
|
51
|
+
font-style: normal;
|
|
52
|
+
font-weight: 600;
|
|
53
|
+
font-display: swap;
|
|
54
|
+
src: url("../fonts/ibm-plex-mono-v20-latin-600.woff2") format("woff2");
|
|
55
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@
|
|
1
|
+
@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-v23-latin-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-regular.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-v20-latin-600.woff2) format("woff2")}.mbt-button{appearance:none;border:none;background:none;cursor:pointer;outline:none;padding:8px 16px;display:grid;place-items:center;border-radius:8px}.mbt-button--diagonal{border-radius:0 8px}.mbt-button{font-family:IBM Plex Sans,sans-serif;font-size:16px;font-weight:500;line-height:normal;text-transform:uppercase;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.mbt-button--primary{background-color:#f2f4fa;color:#0b0e14}.mbt-button--secondary{background-color:#474953;color:#f2f4fa}.mbt-button__content,.mbt-button__loader{grid-area:1/1}.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{background-color:#474953;color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-button--loading{cursor:not-allowed;pointer-events:none}.mbt-button--loading .mbt-button__content{visibility:hidden}.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:#f2f4fa}.mbt-input__field--muted{color:#8b92a6}.mbt-input__field--muted::placeholder{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:normal;color:#f2f4fa;margin:0;font-feature-settings:"salt" on,"ss01" on,"ss02" on}.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-text--no-features{font-feature-settings:normal}.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:248px;height:44px;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;border-radius:8px;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:#3d91ff}.mbt-menu-button:hover:not(:disabled):not(.mbt-menu-button--selected) .mbt-menu-button__icon{color:#3d91ff}.mbt-menu-button--selected{background-color:#1d2335;color:#6663fd}.mbt-menu-button--selected .mbt-menu-button__icon{color:#6663fd}.mbt-menu-button--small{padding:4px 8px;height:32px;gap:8px;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.mbt-menu-button--small .mbt-menu-button__icon{width:20px;height:20px}.mbt-menu-button:disabled{color:#8b92a6;cursor:not-allowed;pointer-events:none}.mbt-menu-button:disabled .mbt-menu-button__icon{color:#8b92a6}.mbt-loader{display:inline-flex;align-items:center;gap:4px}.mbt-loader__dot{display:inline-block;background-color:currentColor;border-radius:999px;animation:mbt-loader-bounce 1.4s infinite ease-in-out both}.mbt-loader__dot:nth-child(1){animation-delay:-.32s}.mbt-loader__dot:nth-child(2){animation-delay:-.16s}.mbt-loader--sm .mbt-loader__dot{width:6px;height:6px}.mbt-loader--md .mbt-loader__dot{width:9px;height:9px}.mbt-loader--lg .mbt-loader__dot{width:12px;height:12px}@keyframes mbt-loader-bounce{0%,80%,to{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1)}}*,*: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: #3d91ff;--mbt-color-gray: #474953;--mbt-color-border: #2a3148;--mbt-color-success: #4dba8a;--mbt-color-error: #c9636a;--mbt-color-warning: #d1a64a;--mbt-color-brilliant: #74cee9;--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-color-gold: #D1A64A;--mbt-color-silver: #A09EA6;--mbt-color-bronze: #956C68;--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-font-feature-inter-stylistic: "salt" on, "ss01" on, "ss02" on;--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}
|
package/dist/tokens-only.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as t,
|
|
1
|
+
import { c as t, f as o, a as n, b as e, d as r, r as f, s as i, t as c, e as d, z } from "./tokens-Bxhg1IBs.js";
|
|
2
2
|
export {
|
|
3
3
|
t as colors,
|
|
4
4
|
o as fontFeatures,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mbt-ui-kit",
|
|
3
3
|
"description": "React component library with SCSS",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.15",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
7
|
"module": "dist/index.mjs",
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"require": "./dist/index.cjs"
|
|
22
22
|
},
|
|
23
23
|
"./styles": "./dist/styles/mbt-ui-kit.css",
|
|
24
|
+
"./fonts.css": "./dist/styles/fonts.css",
|
|
25
|
+
"./fonts/*": "./dist/fonts/*",
|
|
24
26
|
"./tokens": {
|
|
25
27
|
"types": "./dist/tokens-only.d.ts",
|
|
26
28
|
"import": "./dist/tokens-only.mjs",
|
|
@@ -30,7 +32,7 @@
|
|
|
30
32
|
},
|
|
31
33
|
"scripts": {
|
|
32
34
|
"typecheck": "tsc --noEmit",
|
|
33
|
-
"build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly && cp src/styles/tokens.css dist/styles/tokens.css && mkdir -p dist/fonts && cp src/assets/
|
|
35
|
+
"build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly && cp src/styles/tokens.css dist/styles/tokens.css && cp src/styles/fonts.css dist/styles/fonts.css && mkdir -p dist/fonts && cp src/assets/fonts/*.woff2 dist/fonts/ && cp src/assets/Inter/Inter-VariableFont_opsz,wght.ttf dist/fonts/",
|
|
34
36
|
"dev": "vite build --watch",
|
|
35
37
|
"clean": "rm -rf dist",
|
|
36
38
|
"lint": "biome check ./src",
|
|
@@ -64,4 +66,4 @@
|
|
|
64
66
|
"ui",
|
|
65
67
|
"scss"
|
|
66
68
|
]
|
|
67
|
-
}
|
|
69
|
+
}
|
|
Binary file
|