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/package.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "name": "mbt-ui-kit",
3
+ "description": "React component library with SCSS",
4
+ "version": "0.1.0",
5
+ "type": "module",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.mjs",
8
+ "types": "dist/index.d.ts",
9
+ "sideEffects": [
10
+ "**/*.css",
11
+ "**/*.scss"
12
+ ],
13
+ "files": [
14
+ "dist",
15
+ "src/styles/_tokens.scss"
16
+ ],
17
+ "exports": {
18
+ ".": {
19
+ "types": "./dist/index.d.ts",
20
+ "import": "./dist/index.mjs",
21
+ "require": "./dist/index.js"
22
+ },
23
+ "./styles": "./dist/styles/index.css",
24
+ "./tokens": {
25
+ "types": "./dist/tokens-only.d.ts",
26
+ "import": "./dist/tokens-only.mjs",
27
+ "require": "./dist/tokens-only.js"
28
+ },
29
+ "./tokens.css": "./dist/styles/tokens.css"
30
+ },
31
+ "scripts": {
32
+ "typecheck": "tsc --noEmit",
33
+ "build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly && cp src/styles/tokens.css dist/styles/tokens.css",
34
+ "dev": "vite build --watch",
35
+ "clean": "rm -rf dist",
36
+ "lint": "biome check ./src",
37
+ "lint:fix": "biome check --write ./src",
38
+ "format": "biome format --write ./src",
39
+ "storybook": "storybook dev -p 6006",
40
+ "build-storybook": "storybook build"
41
+ },
42
+ "peerDependencies": {
43
+ "react": "^18.0.0 || ^19.0.0",
44
+ "react-dom": "^18.0.0 || ^19.0.0"
45
+ },
46
+ "devDependencies": {
47
+ "@biomejs/biome": "^2.3.11",
48
+ "@storybook/react-vite": "10.1.11",
49
+ "@types/bun": "latest",
50
+ "@types/react": "^18.3.18",
51
+ "@types/react-dom": "^18.3.5",
52
+ "@vitejs/plugin-react": "5.1.2",
53
+ "react": "^18.3.1",
54
+ "react-dom": "^18.3.1",
55
+ "sass": "^1.77.0",
56
+ "storybook": "10.1.11",
57
+ "typescript": "^5.9.3",
58
+ "vite": "7.3.1",
59
+ "vite-plugin-dts": "^4.0.0"
60
+ },
61
+ "keywords": [
62
+ "react",
63
+ "components",
64
+ "ui",
65
+ "scss"
66
+ ]
67
+ }
package/src/styles/_tokens.scss ADDED
@@ -0,0 +1,108 @@
1
+ // =============================================================================
2
+ // Design Tokens from Figma
3
+ // =============================================================================
4
+
5
+ // -----------------------------------------------------------------------------
6
+ // Colors
7
+ // -----------------------------------------------------------------------------
8
+
9
+ // Background
10
+ $bg-0: #0B0E14;
11
+ $bg-1: #111520;
12
+ $surface: #171C2A;
13
+ $surface-raised: #1D2335;
14
+
15
+ // Text
16
+ $text-primary: #F2F4FA;
17
+ $text-muted: #8B92A6;
18
+ $text-inverse: #0B0E14;
19
+
20
+ // Brand
21
+ $primary: #6663FD;
22
+ $secondary: #4FA3B3;
23
+
24
+ // State
25
+ $gray: #474953;
26
+ $border: #2A3148;
27
+ $success: #4DBA8A;
28
+ $error: #C9636A;
29
+ $warning: #D1A64A;
30
+
31
+ // Diamond gradient stops
32
+ $diamond: #E6F3FF;
33
+ $diamond-stop-0: #BEACD3;
34
+ $diamond-stop-1: #BEE3F7;
35
+ $diamond-stop-2: #EFECE7;
36
+ $diamond-stop-3: #F8DDDE;
37
+ $diamond-stop-4: #CFE6F1;
38
+
39
+ // -----------------------------------------------------------------------------
40
+ // Typography
41
+ // -----------------------------------------------------------------------------
42
+
43
+ $font-ui-primary: "IBM Plex Sans", sans-serif;
44
+ $font-ui-secondary: "Inter", sans-serif;
45
+ $font-ui-mono: "IBM Plex Mono", monospace;
46
+
47
+ // Font sizes
48
+ $font-size-1: 12px;
49
+ $font-size-2: 14px;
50
+ $font-size-3: 16px;
51
+ $font-size-4: 20px;
52
+ $font-size-5: 24px;
53
+ $font-size-6: 28px;
54
+ $font-size-7: 40px;
55
+ $font-size-8: 48px;
56
+ $font-size-9: 72px;
57
+
58
+ // Font weights
59
+ $font-weight-regular: 400;
60
+ $font-weight-medium: 500;
61
+ $font-weight-semibold: 600;
62
+
63
+ // -----------------------------------------------------------------------------
64
+ // Spacing
65
+ // -----------------------------------------------------------------------------
66
+
67
+ $space-0: 0;
68
+ $space-1: 4px;
69
+ $space-2: 8px;
70
+ $space-3: 12px;
71
+ $space-4: 16px;
72
+ $space-5: 24px;
73
+ $space-6: 32px;
74
+ $space-7: 48px;
75
+ $space-8: 64px;
76
+ $space-9: 96px;
77
+ $space-10: 128px;
78
+
79
+ // -----------------------------------------------------------------------------
80
+ // Border Radius
81
+ // -----------------------------------------------------------------------------
82
+
83
+ $radius-0: 0;
84
+ $radius-xs: 4px;
85
+ $radius-sm: 8px;
86
+ $radius-md: 12px;
87
+ $radius-lg: 16px;
88
+ $radius-xl: 24px;
89
+ $radius-full: 999px;
90
+
91
+ // -----------------------------------------------------------------------------
92
+ // Z-Index
93
+ // -----------------------------------------------------------------------------
94
+
95
+ $z-index-0: 0;
96
+ $z-index-1: 100;
97
+ $z-index-2: 200;
98
+ $z-index-3: 300;
99
+ $z-index-4: 400;
100
+ $z-index-5: 500;
101
+
102
+ // -----------------------------------------------------------------------------
103
+ // Transitions
104
+ // -----------------------------------------------------------------------------
105
+
106
+ $transition-fast: 150ms ease;
107
+ $transition-normal: 250ms ease;
108
+ $transition-slow: 400ms ease;