sate-lib 1.0.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 (28) hide show
  1. package/.husky/commit-msg +1 -0
  2. package/.husky/pre-commit +1 -0
  3. package/.storybook/main.ts +11 -0
  4. package/.storybook/preview.ts +17 -0
  5. package/README.md +26 -0
  6. package/commitlint.config.js +1 -0
  7. package/eslint.config.js +28 -0
  8. package/package.json +44 -0
  9. package/src/assets/fonts/bebas-neue-v14-latin-regular.woff2 +0 -0
  10. package/src/assets/icons/Bed.svg +3 -0
  11. package/src/assets/styles/animations.scss +37 -0
  12. package/src/assets/styles/base.scss +21 -0
  13. package/src/assets/styles/reset.scss +87 -0
  14. package/src/assets/styles/tokens.css +336 -0
  15. package/src/assets/styles/typography.scss +21 -0
  16. package/src/assets/styles/variables.scss +8 -0
  17. package/src/components/badge/badge.stories.tsx +27 -0
  18. package/src/components/badge/badge.styles.scss +7 -0
  19. package/src/components/badge/badge.tsx +15 -0
  20. package/src/components/test/test.stories.tsx +27 -0
  21. package/src/components/test/test.styles.scss +3 -0
  22. package/src/components/test/test.tsx +15 -0
  23. package/src/index.ts +4 -0
  24. package/src/vite-env.d.ts +1 -0
  25. package/tsconfig.app.json +27 -0
  26. package/tsconfig.json +7 -0
  27. package/tsconfig.node.json +25 -0
  28. package/vite.config.ts +7 -0
package/.husky/commit-msg ADDED
@@ -0,0 +1 @@
1
+ pnpm --no -- commitlint --edit $1
package/.husky/pre-commit ADDED
@@ -0,0 +1 @@
1
+ pnpm run lint
package/.storybook/main.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { StorybookConfig } from "@storybook/react-vite";
2
+
3
+ const config: StorybookConfig = {
4
+ stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5
+ addons: ["@storybook/addon-a11y", "storybook-design-token", "@storybook/addon-docs"],
6
+ framework: {
7
+ name: "@storybook/react-vite",
8
+ options: {},
9
+ },
10
+ };
11
+ export default config;
package/.storybook/preview.ts ADDED
@@ -0,0 +1,17 @@
1
+ import type { Preview } from "@storybook/react-vite";
2
+
3
+ import "../src/assets/styles/base.scss";
4
+ import "../src/assets/styles/tokens.css";
5
+
6
+ const preview: Preview = {
7
+ parameters: {
8
+ controls: {
9
+ matchers: {
10
+ color: /(background|color)$/i,
11
+ date: /Date$/i,
12
+ },
13
+ },
14
+ },
15
+ };
16
+
17
+ export default preview;
package/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # SATE - Lib
2
+
3
+ <!-- ![Light](./public/placeholder.jpg) -->
4
+
5
+ ## Tech Stack
6
+
7
+ - [Vite](https://vite.dev/guide/)
8
+ - [React](https://react.dev/)
9
+ - [Typescript](https://www.typescriptlang.org/)
10
+ - [Storybook](https://storybook.js.org/)
11
+ - [Sass](https://sass-lang.com/)
12
+
13
+ ## Installation
14
+
15
+ ```bash
16
+ pnpm install
17
+ pnpm dev
18
+ ```
19
+
20
+ ## Commit etiquette
21
+
22
+ - [Commit Etiquette](https://www.conventionalcommits.org/en/v1.0.0/)
23
+
24
+ ```bash
25
+ [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] : message
26
+ ```
package/commitlint.config.js ADDED
@@ -0,0 +1 @@
1
+ export default { extends: ["@commitlint/config-conventional"] };
package/eslint.config.js ADDED
@@ -0,0 +1,28 @@
1
+ import js from '@eslint/js'
2
+ import globals from 'globals'
3
+ import reactHooks from 'eslint-plugin-react-hooks'
4
+ import reactRefresh from 'eslint-plugin-react-refresh'
5
+ import tseslint from 'typescript-eslint'
6
+
7
+ export default tseslint.config(
8
+ { ignores: ['dist'] },
9
+ {
10
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
+ files: ['**/*.{ts,tsx}'],
12
+ languageOptions: {
13
+ ecmaVersion: 2020,
14
+ globals: globals.browser,
15
+ },
16
+ plugins: {
17
+ 'react-hooks': reactHooks,
18
+ 'react-refresh': reactRefresh,
19
+ },
20
+ rules: {
21
+ ...reactHooks.configs.recommended.rules,
22
+ 'react-refresh/only-export-components': [
23
+ 'warn',
24
+ { allowConstantExport: true },
25
+ ],
26
+ },
27
+ },
28
+ )
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "sate-lib",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "storybook dev -p 6006",
7
+ "lint": "eslint ./src",
8
+ "prepare": "husky",
9
+ "build": "storybook build"
10
+ },
11
+ "dependencies": {
12
+ "classnames": "^2.5.1",
13
+ "react": "^19.1.0",
14
+ "react-dom": "^19.1.0",
15
+ "sass": "^1.89.0"
16
+ },
17
+ "devDependencies": {
18
+ "@commitlint/cli": "19.8.0",
19
+ "@commitlint/config-conventional": "19.8.0",
20
+ "@eslint/js": "^9.25.0",
21
+ "@storybook/addon-a11y": "^9.0.11",
22
+ "@storybook/addon-docs": "^9.0.11",
23
+ "@storybook/builder-vite": "^9.0.11",
24
+ "@storybook/react-vite": "^9.0.11",
25
+ "@types/react": "^19.1.2",
26
+ "@types/react-dom": "^19.1.2",
27
+ "@vitejs/plugin-react": "^4.4.1",
28
+ "eslint": "^9.25.0",
29
+ "eslint-plugin-react-hooks": "^5.2.0",
30
+ "eslint-plugin-react-refresh": "^0.4.19",
31
+ "eslint-plugin-storybook": "^9.0.11",
32
+ "globals": "^16.0.0",
33
+ "husky": "^9.1.7",
34
+ "storybook": "^9.0.11",
35
+ "typescript": "~5.8.3",
36
+ "typescript-eslint": "^8.30.1",
37
+ "vite": "^6.3.5"
38
+ },
39
+ "eslintConfig": {
40
+ "extends": [
41
+ "plugin:storybook/recommended"
42
+ ]
43
+ }
44
+ }
package/src/assets/icons/Bed.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M20.25 6.75H3V4.5C3 4.30109 2.92098 4.11032 2.78033 3.96967C2.63968 3.82902 2.44891 3.75 2.25 3.75C2.05109 3.75 1.86032 3.82902 1.71967 3.96967C1.57902 4.11032 1.5 4.30109 1.5 4.5V19.5C1.5 19.6989 1.57902 19.8897 1.71967 20.0303C1.86032 20.171 2.05109 20.25 2.25 20.25C2.44891 20.25 2.63968 20.171 2.78033 20.0303C2.92098 19.8897 3 19.6989 3 19.5V16.5H22.5V19.5C22.5 19.6989 22.579 19.8897 22.7197 20.0303C22.8603 20.171 23.0511 20.25 23.25 20.25C23.4489 20.25 23.6397 20.171 23.7803 20.0303C23.921 19.8897 24 19.6989 24 19.5V10.5C24 9.50544 23.6049 8.55161 22.9016 7.84835C22.1984 7.14509 21.2446 6.75 20.25 6.75ZM3 8.25H9.75V15H3V8.25ZM11.25 15V8.25H20.25C20.8467 8.25 21.419 8.48705 21.841 8.90901C22.2629 9.33097 22.5 9.90326 22.5 10.5V15H11.25Z"/>
3
+ </svg>
package/src/assets/styles/animations.scss ADDED
@@ -0,0 +1,37 @@
1
+ @keyframes slideDownAndFade {
2
+ from {
3
+ opacity: 0;
4
+ transform: translateY(-2px);
5
+ }
6
+ to {
7
+ opacity: 1;
8
+ transform: translateY(0);
9
+ }
10
+ }
11
+
12
+ @keyframes rotation {
13
+ 0% {
14
+ transform: rotate(0deg);
15
+ }
16
+ 100% {
17
+ transform: rotate(360deg);
18
+ }
19
+ }
20
+
21
+ @keyframes modalEaseIn {
22
+ from {
23
+ opacity: 0;
24
+ }
25
+ to {
26
+ opacity: 1;
27
+ }
28
+ }
29
+
30
+ @keyframes modalFadeOut {
31
+ from {
32
+ opacity: 1;
33
+ }
34
+ to {
35
+ opacity: 0;
36
+ }
37
+ }
package/src/assets/styles/base.scss ADDED
@@ -0,0 +1,21 @@
1
+ @use "./reset.scss";
2
+ @use "./variables.scss";
3
+
4
+ // @font-face {
5
+ // font-family: "Inter";
6
+ // font-weight: 400;
7
+ // src: url("../../assets/fonts/inter-regular-400.woff2") format("woff2");
8
+ // }
9
+
10
+ // @font-face {
11
+ // font-family: "Inter";
12
+ // font-weight: 500;
13
+ // src: url("../../assets/fonts/inter-medium-500.woff2") format("woff2");
14
+ // }
15
+
16
+ @font-face {
17
+ font-family: "Bebas Neue";
18
+ font-weight: 400;
19
+ src: url("../../assets/fonts/bebas-neue-v14-latin-regular.woff2")
20
+ format("woff2");
21
+ }
package/src/assets/styles/reset.scss ADDED
@@ -0,0 +1,87 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ * {
8
+ margin: 0;
9
+ padding: 0;
10
+ outline: none;
11
+ }
12
+
13
+ ul,
14
+ ol {
15
+ list-style: none;
16
+ }
17
+
18
+ html:focus-within {
19
+ scroll-behavior: smooth;
20
+ }
21
+
22
+ a:not([class]) {
23
+ text-decoration-skip-ink: auto;
24
+ color: inherit;
25
+ }
26
+
27
+ img,
28
+ picture,
29
+ svg,
30
+ video,
31
+ canvas {
32
+ max-width: 100%;
33
+ height: auto;
34
+ vertical-align: middle;
35
+ background-repeat: no-repeat;
36
+ background-size: cover;
37
+ }
38
+
39
+ input,
40
+ button,
41
+ textarea,
42
+ select {
43
+ font: inherit;
44
+ color: inherit;
45
+ border: none;
46
+ background: none;
47
+ outline: none;
48
+ }
49
+
50
+ @media (prefers-reduced-motion: reduce) {
51
+ html:focus-within {
52
+ scroll-behavior: auto;
53
+ }
54
+ *,
55
+ *::before,
56
+ *::after {
57
+ animation-duration: 0.01ms !important;
58
+ animation-iteration-count: 1 !important;
59
+ transition-duration: 0.01ms !important;
60
+ scroll-behavior: auto !important;
61
+ transition: none;
62
+ }
63
+ }
64
+
65
+ body,
66
+ html {
67
+ height: 100%;
68
+ scroll-behavior: smooth;
69
+ }
70
+
71
+ body {
72
+ -webkit-font-smoothing: antialiased;
73
+ }
74
+
75
+ p,
76
+ h1,
77
+ h2,
78
+ h3,
79
+ h4,
80
+ h5,
81
+ h6 {
82
+ overflow-wrap: break-word;
83
+ }
84
+
85
+ button {
86
+ cursor: pointer;
87
+ }
package/src/assets/styles/tokens.css ADDED
@@ -0,0 +1,336 @@
1
+ :root {
2
+ /**
3
+ * @tokens Shadow
4
+ * @presenter Shadow
5
+ */
6
+ --box-shadow-1: 0px 1px 0px 0px rgba(17, 17, 26, 0.1);
7
+ --box-shadow-2: 0px 1px 0px rgba(17, 17, 26, 0.05),
8
+ 0px 0px 8px rgba(17, 17, 26, 0.1);
9
+ --box-shadow-3: 0px 0px 16px 0px rgba(17, 17, 26, 0.1);
10
+ --box-shadow-4: 0px 8px 32px 0px rgba(17, 17, 26, 0.05),
11
+ 0px 4px 16px 0px rgba(17, 17, 26, 0.05);
12
+ --box-shadow-5: 0px 8px 32px 0px rgba(17, 17, 26, 0.05),
13
+ 0px 4px 16px 0px rgba(17, 17, 26, 0.1);
14
+ --box-shadow-6: 0px 16px 48px 0px rgba(17, 17, 26, 0.1),
15
+ 0px 8px 24px 0px rgba(17, 17, 26, 0.1),
16
+ 0px 1px 0px 0px rgba(17, 17, 26, 0.1);
17
+ --box-shadow-7: 0px 16px 56px 0px rgba(17, 17, 26, 0.1),
18
+ 0px 8px 24px 0px rgba(17, 17, 26, 0.1),
19
+ 0px 4px 16px 0px rgba(17, 17, 26, 0.1);
20
+ --box-shadow-8: 0px 24px 80px 0px rgba(17, 17, 26, 0.1),
21
+ 0px 16px 56px 0px rgba(17, 17, 26, 0.1),
22
+ 0px 8px 24px 0px rgba(17, 17, 26, 0.1);
23
+ /**
24
+ * @tokens Opacity
25
+ * @presenter Opacity
26
+ */
27
+ --opacity-disabled: 0.38;
28
+ /**
29
+ * @tokens Color
30
+ * @presenter Color
31
+ */
32
+ --color-theme-core-bright: #317c6c;
33
+ --color-theme-core-dark: #b80f0f;
34
+ --color-system-content-primary: #0e0e0e;
35
+ --color-system-content-secondary: #474747;
36
+ --color-system-content-tertiary: #767676;
37
+ --color-theme-content-link: #317c6c;
38
+ --color-theme-content-link-hover: #236859;
39
+ --color-theme-content-link-active: #1d5347;
40
+ --color-theme-interactive-primary: #317c6c;
41
+ --color-theme-interactive-primary-hover: #236859;
42
+ --color-theme-interactive-primary-active: #1d5347;
43
+ --color-system-interactive-secondary: #c6c6c6;
44
+ --color-system-interactive-secondary-active: #939da0;
45
+ --color-system-interactive-secondary-hover: #aeb8bb;
46
+ --color-theme-interactive-accent: #317c6c;
47
+ --color-theme-interactive-accent-hover: #236859;
48
+ --color-theme-interactive-accent-active: #1d5347;
49
+ --color-theme-interactive-control: #ffffff;
50
+ --color-theme-interactive-control-hover: #ffffff;
51
+ --color-theme-interactive-control-active: #ffffff;
52
+ --color-theme-interactive-contrast: #002c5b;
53
+ --color-theme-interactive-contrast-hover: #081b36;
54
+ --color-theme-interactive-contrast-active: #0e0f0c;
55
+ --color-system-border-neutral: #efefef;
56
+ --color-system-border-overlay: rgba(14, 15, 12, 0.12);
57
+ --color-theme-background-screen: #f5f7f7;
58
+ --color-theme-background-screen-hover: rgba(55, 53, 53, 0.04);
59
+ --color-theme-background-screen-active: rgba(55, 53, 53, 0.08);
60
+ --color-theme-background-elevated: #ffffff;
61
+ --color-theme-background-neutral: rgba(55, 53, 53, 0.04);
62
+ --color-theme-background-neutral-hover: rgba(55, 53, 53, 0.08);
63
+ --color-theme-background-neutral-active: rgba(55, 53, 53, 0.12);
64
+ --color-theme-background-overlay: rgba(55, 53, 53, 0.08);
65
+ --color-system-sentiment-negative: #b4280c;
66
+ --color-system-sentiment-warning: #ffcc00;
67
+ --color-system-sentiment-positive: #006e37;
68
+ --color-system-color-contrast: #ffffff;
69
+ --color-system-color-light: #ffffff;
70
+ --color-system-color-dark: #121511;
71
+ --color-system-color-contrast-overlay: #ffffff;
72
+ --color-system-color-contrast-theme: #121511;
73
+ --color-system-background-negative: rgba(255, 191, 189, 0.12);
74
+ --color-theme-background-input: #ffffff;
75
+ --color-system-sentiment-negative-hover: #950000;
76
+ --color-system-sentiment-negative-active: #850000;
77
+ --color-system-black: #000000;
78
+ --color-system-white: #ffffff;
79
+ --color-theme-accent: #b80f0f;
80
+ --color-theme-accent-hover: #a90d0d;
81
+ --color-theme-accent-active: #8b0c0c;
82
+ --color-theme-background-demo: #ff4d00;
83
+ --color-theme-background-demo-hover: rgba(255, 77, 0, 0.06);
84
+ --color-theme-background-demo-active: rgba(255, 77, 0, 0.09);
85
+ --color-system-user-red-light: #fff4ee;
86
+ --color-system-user-red-mid: #ffa98f;
87
+ --color-system-user-red-dark: #d40000;
88
+ --color-system-user-orange-dark: #a53e00;
89
+ --color-system-user-orange-mid: #ffc950;
90
+ --color-system-user-orange-light: #fff6e8;
91
+ --color-system-user-yellow-dark: #7b5a00;
92
+ --color-system-user-yellow-mid: #ffdd3a;
93
+ --color-system-user-yellow-light: #fff8e6;
94
+ --color-system-user-green-dark: #007500;
95
+ --color-system-user-green-mid: #7bfe7b;
96
+ --color-system-user-green-light: #effded;
97
+ --color-system-user-mint-dark: #255d3a;
98
+ --color-system-user-mint-mid: #d1f4de;
99
+ --color-system-user-mint-light: #e9fff1;
100
+ --color-system-user-cyan-dark: #007cd5;
101
+ --color-system-user-cyan-mid: #77e2ff;
102
+ --color-system-user-cyan-light: #f3f9ff;
103
+ --color-system-user-blue-dark: #005bff;
104
+ --color-system-user-blue-mid: #a5dcff;
105
+ --color-system-user-blue-light: #f6f8ff;
106
+ --color-system-user-indigo-dark: #7530df;
107
+ --color-system-user-indigo-mid: #e2ceff;
108
+ --color-system-user-indigo-light: #fbf7ff;
109
+ --color-system-user-purple-dark: #354682;
110
+ --color-system-user-purple-mid: #d4deff;
111
+ --color-system-user-purple-light: #ecf0ff;
112
+ --color-system-user-brown-dark: #954c00;
113
+ --color-system-user-brown-mid: #ffd244;
114
+ --color-system-user-brown-light: #fff7e7;
115
+ --color-system-user-pink-dark: #65203a;
116
+ --color-system-user-pink-mid: #fad9da;
117
+ --color-system-user-pink-light: #fff0f0;
118
+ --color-system-user-grey-dark: #5e5e5e;
119
+ --color-system-user-grey-mid: #e2e2e2;
120
+ --color-system-user-grey-light: #f9f9f9;
121
+ --color-system-modal-overlay: rgba(0, 0, 0, 0.5);
122
+ /**
123
+ * @tokens Animation
124
+ * @presenter Animation
125
+ */
126
+
127
+ /**
128
+ * @tokens Border
129
+ * @presenter Border
130
+ */
131
+
132
+ /**
133
+ * @tokens BorderRadius
134
+ * @presenter BorderRadius
135
+ */
136
+ --radius-radii-10: 0.625rem;
137
+ --radius-radii-16: 1rem;
138
+ --radius-radii-24: 1.5rem;
139
+ --radius-radii-full: 62.5rem;
140
+ --radius-radii-32: 2rem;
141
+ --radius-radii-40: 2.5rem;
142
+ --radius-radii-64: 4rem;
143
+ --radius-radii-8: 0.5rem;
144
+ --radius-radii-4: 0.25rem;
145
+ --radius-radii-12: 0.75rem;
146
+ --radius-button: 0.25rem;
147
+ --radius-input: 0.25rem;
148
+ --radius-small-container: 0.5rem;
149
+ --radius-large-container: 1rem;
150
+ --radius-chip: 0.5rem;
151
+ --radius-medium-container: 0.75rem;
152
+ /**
153
+ * @tokens Easing
154
+ * @presenter Easing
155
+ */
156
+
157
+ /**
158
+ * @tokens FontFamily
159
+ * @presenter FontFamily
160
+ */
161
+ --typeface-theme: "Bebas Neue";
162
+ --typeface-system: Inter;
163
+ --typescale-display-large-font: "Bebas Neue";
164
+ --typescale-display-medium-font: "Bebas Neue";
165
+ --typescale-display-small-font: "Bebas Neue";
166
+ --typescale-title-screen-font: "Bebas Neue";
167
+ --typescale-title-section-font: Inter;
168
+ --typescale-title-subsection-font: Inter;
169
+ --typescale-title-body-font: Inter;
170
+ --typescale-title-group-font: Inter;
171
+ --typescale-body-large-font: Inter;
172
+ --typescale-body-large-emphasis-font: Inter;
173
+ --typescale-body-default-font: Inter;
174
+ --typescale-body-default-emphasis-font: Inter;
175
+ --typescale-body-small-font: Inter;
176
+ --typescale-body-small-emphasis-font: Inter;
177
+ --typescale-link-large-font: Inter;
178
+ --typescale-link-default-font: Inter;
179
+ --typescale-text-field-font: Inter;
180
+ /**
181
+ * @tokens FontSize
182
+ * @presenter FontSize
183
+ */
184
+ --typescale-display-large-font-size: 6rem;
185
+ --typescale-display-medium-font-size: 4rem;
186
+ --typescale-display-small-font-size: 2.5rem;
187
+ --typescale-title-screen-font-size: 2.5rem;
188
+ --typescale-title-section-font-size: 1.625rem;
189
+ --typescale-title-subsection-font-size: 1.375rem;
190
+ --typescale-title-body-font-size: 1.125rem;
191
+ --typescale-title-group-font-size: 0.875rem;
192
+ --typescale-body-large-font-size: 1rem;
193
+ --typescale-body-large-emphasis-font-size: 1rem;
194
+ --typescale-body-default-font-size: 0.875rem;
195
+ --typescale-body-default-emphasis-font-size: 0.875rem;
196
+ --typescale-body-small-font-size: 0.75rem;
197
+ --typescale-body-small-emphasis-font-size: 0.75rem;
198
+ --typescale-link-large-font-size: 1rem;
199
+ --typescale-link-default-font-size: 0.875rem;
200
+ --typescale-text-field-font-size: 1rem;
201
+ /**
202
+ * @tokens FontWeight
203
+ * @presenter FontWeight
204
+ */
205
+ --typeface-weight-regular: 400;
206
+ --typeface-weight-medium: 500;
207
+ --typeface-weight-semi-bold: 600;
208
+ --typeface-weight-bold: 700;
209
+ --typescale-display-large-weight: 400;
210
+ --typescale-display-medium-weight: 400;
211
+ --typescale-display-small-weight: 400;
212
+ --typescale-title-screen-weight: 400;
213
+ --typescale-title-section-weight: 600;
214
+ --typescale-title-subsection-weight: 600;
215
+ --typescale-title-body-weight: 600;
216
+ --typescale-title-group-weight: 500;
217
+ --typescale-body-large-weight: 400;
218
+ --typescale-body-large-emphasis-weight: 600;
219
+ --typescale-body-default-weight: 400;
220
+ --typescale-body-default-emphasis-weight: 600;
221
+ --typescale-body-small-weight: 400;
222
+ --typescale-body-small-emphasis-weight: 500;
223
+ --typescale-link-large-weight: 600;
224
+ --typescale-link-default-weight: 600;
225
+ --typescale-text-field-weight: 400;
226
+ /**
227
+ * @tokens LetterSpacing
228
+ * @presenter LetterSpacing
229
+ */
230
+ --typescale-display-large-letter-spacing: 0;
231
+ --typescale-display-medium-letter-spacing: 0;
232
+ --typescale-display-small-letter-spacing: 0;
233
+ --typescale-title-screen-letter-spacing: 0;
234
+ --typescale-title-section-letter-spacing: -0.02500000037252903rem;
235
+ --typescale-title-subsection-letter-spacing: -0.01875000074505806rem;
236
+ --typescale-title-body-letter-spacing: -0.012500000186264515rem;
237
+ --typescale-title-group-letter-spacing: -0.0062500000931322575rem;
238
+ --typescale-body-large-letter-spacing: -0.012500000186264515rem;
239
+ --typescale-body-large-emphasis-letter-spacing: -0.012500000186264515rem;
240
+ --typescale-body-default-letter-spacing: 0;
241
+ --typescale-body-default-emphasis-letter-spacing: 0;
242
+ --typescale-body-small-letter-spacing: -0.012500000186264515rem;
243
+ --typescale-body-small-emphasis-letter-spacing: -0.012500000186264515rem;
244
+ --typescale-link-large-letter-spacing: -0.012500000186264515rem;
245
+ --typescale-link-default-letter-spacing: 0;
246
+ --typescale-text-field-letter-spacing: -0.012500000186264515rem;
247
+ /**
248
+ * @tokens LineHeight
249
+ * @presenter LineHeight
250
+ */
251
+ --typescale-display-large-line-height: 5.125rem;
252
+ --typescale-display-medium-line-height: 3.375rem;
253
+ --typescale-display-small-line-height: 2.125rem;
254
+ --typescale-title-screen-line-height: 2.125rem;
255
+ --typescale-title-section-line-height: 2rem;
256
+ --typescale-title-subsection-line-height: 1.75rem;
257
+ --typescale-title-body-line-height: 1.5rem;
258
+ --typescale-title-group-line-height: 1.25rem;
259
+ --typescale-body-large-line-height: 1.5rem;
260
+ --typescale-body-large-emphasis-line-height: 1.5rem;
261
+ --typescale-body-default-line-height: 1.375rem;
262
+ --typescale-body-default-emphasis-line-height: 1.375rem;
263
+ --typescale-body-small-line-height: 1rem;
264
+ --typescale-body-small-emphasis-line-height: 1rem;
265
+ --typescale-link-large-line-height: 1.5rem;
266
+ --typescale-link-default-line-height: 1.375rem;
267
+ --typescale-text-field-line-height: 1.25rem;
268
+ /**
269
+ * @tokens Spacing
270
+ * @presenter Spacing
271
+ */
272
+ --spacing-size-4: 0.25rem;
273
+ --spacing-size-8: 0.5rem;
274
+ --spacing-size-12: 0.75rem;
275
+ --spacing-size-16: 1rem;
276
+ --spacing-size-24: 1.5rem;
277
+ --spacing-size-32: 2rem;
278
+ --spacing-size-40: 2.5rem;
279
+ --spacing-size-48: 3rem;
280
+ --spacing-size-56: 3.5rem;
281
+ --spacing-size-64: 4rem;
282
+ --spacing-size-72: 4.5rem;
283
+ --spacing-size-80: 5rem;
284
+ --spacing-size-88: 5.5rem;
285
+ --spacing-size-96: 6rem;
286
+ --spacing-size-104: 6.5rem;
287
+ --spacing-size-112: 7rem;
288
+ --spacing-size-120: 7.5rem;
289
+ --spacing-size-128: 8rem;
290
+ --spacing-size-146: 9.125rem;
291
+ --spacing-size-154: 9.625rem;
292
+ --spacing-size-0: 0;
293
+ --padding-x-small: 0.5rem;
294
+ --padding-small: 1rem;
295
+ --padding-medium: 1.5rem;
296
+ --padding-large: 2rem;
297
+ --size-x-small: 1.5rem;
298
+ --size-medium: 2.5rem;
299
+ --size-large: 3rem;
300
+ --size-x-large: 3.5rem;
301
+ --size-small: 2rem;
302
+ --size-2x-large: 4.5rem;
303
+ --size-2x-small: 1rem;
304
+ --spacing-column-gap-cards: 0.75rem;
305
+ --spacing-column-gap-chips: 0.5rem;
306
+ --spacing-column-margin-screen-mobile: 1.5rem;
307
+ --spacing-column-gap-default: 1rem;
308
+ --spacing-row-gap-text: 0.5rem;
309
+ --spacing-row-gap-image-bottom: 0.5rem;
310
+ --spacing-row-gap-display-text-bottom: 1rem;
311
+ --spacing-row-gap-text-to-component: 1rem;
312
+ --spacing-row-gap-content-to-button: 1.5rem;
313
+ --spacing-row-gap-sections: 2rem;
314
+ --spacing-row-gap-default: 1rem;
315
+ --spacing-row-gap-options: 0;
316
+ --spacing-row-gap-fields: 1rem;
317
+ --spacing-column-gap-fields: 0.5rem;
318
+ --spacing-column-gap-words: 0.25rem;
319
+ /**
320
+ * @tokens PARAGRAPH_SPACING
321
+ */
322
+ --typescale-title-screen-paragraph-spacing: 0.5rem;
323
+ --typescale-title-section-paragraph-spacing: 0.5rem;
324
+ --typescale-title-subsection-paragraph-spacing: 0.5rem;
325
+ --typescale-title-body-paragraph-spacing: 0.5rem;
326
+ --typescale-title-group-paragraph-spacing: 0.5rem;
327
+ --typescale-body-large-paragraph-spacing: 0.5rem;
328
+ --typescale-body-large-emphasis-paragraph-spacing: 0.5rem;
329
+ --typescale-body-default-paragraph-spacing: 0.5rem;
330
+ --typescale-body-default-emphasis-paragraph-spacing: 0.5rem;
331
+ --typescale-body-small-paragraph-spacing: 0.5rem;
332
+ --typescale-body-small-emphasis-paragraph-spacing: 0.5rem;
333
+ --typescale-link-large-paragraph-spacing: 0.5rem;
334
+ --typescale-link-default-paragraph-spacing: 0.5rem;
335
+ --typescale-text-field-paragraph-spacing: 0.5rem;
336
+ }
package/src/assets/styles/typography.scss ADDED
@@ -0,0 +1,21 @@
1
+ @mixin typescale-display-large {
2
+ font-family: var(--typescale-display-large-font, Inter);
3
+ font-size: var(--typescale-display-large-font-size, 6rem);
4
+ font-weight: var(--typescale-display-large-weight, 700);
5
+ line-height: var(
6
+ --typescale-display-large-line-height,
7
+ 5.125rem
8
+ ); /* 85.417% */
9
+ letter-spacing: var(--typescale-display-large-letter-spacing, 0rem);
10
+ }
11
+
12
+ @mixin typescale-display-medium {
13
+ font-family: var(--typescale-display-medium-font, Inter);
14
+ font-size: var(--typescale-display-medium-font-size, 4rem);
15
+ font-weight: var(--typescale-display-medium-weight, 700);
16
+ line-height: var(
17
+ --typescale-display-medium-line-height,
18
+ 3.375rem
19
+ ); /* 84.375% */
20
+ letter-spacing: var(--typescale-display-medium-letter-spacing, 0rem);
21
+ }
package/src/assets/styles/variables.scss ADDED
@@ -0,0 +1,8 @@
1
+ html {
2
+ --zindex-input: 1;
3
+ --zindex-input-hover: 2;
4
+ --zindex-input-focus: 3;
5
+ --zindex-input-active: 4;
6
+ --zindex-input-clear-button: 5;
7
+ --zindex-modal: 50;
8
+ }
package/src/components/badge/badge.stories.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import type { Meta, StoryObj } from "@storybook/react-vite";
2
+
3
+ import { expect, within } from "storybook/test";
4
+ import { Badge } from "./badge";
5
+
6
+ const meta: Meta<typeof Badge> = {
7
+ title: "Components/Badge",
8
+ component: Badge,
9
+ tags: ["autodocs"],
10
+ args: {
11
+ children: "Label",
12
+ },
13
+ };
14
+
15
+ export default meta;
16
+
17
+ type Story = StoryObj<typeof meta>;
18
+
19
+ export const Default: Story = {
20
+ play: ({ args, canvasElement }) => {
21
+ const canvas = within(canvasElement);
22
+
23
+ const text = canvas.getByText(args.children as string);
24
+
25
+ expect(text).toBeInTheDocument();
26
+ },
27
+ };
package/src/components/badge/badge.styles.scss ADDED
@@ -0,0 +1,7 @@
1
+ .c-badge {
2
+ padding: var(--spacing-size-4, 0.25rem) var(--spacing-size-8, 0.5rem);
3
+ color: var(--color-system-content-secondary, #474747);
4
+ border-radius: 0.25rem;
5
+ border: 1px solid var(--color-system-border-neutral, rgba(14, 15, 12, 0.04));
6
+ background: var(--color-theme-background-neutral, rgba(5, 48, 91, 0.04));
7
+ }
package/src/components/badge/badge.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import type { HTMLAttributes, ReactNode } from "react";
2
+ import classNames from "classnames";
3
+ import "./badge.styles.scss";
4
+
5
+ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
6
+ children: ReactNode;
7
+ }
8
+
9
+ export function Badge({ className, children, ...props }: BadgeProps) {
10
+ return (
11
+ <span className={classNames(className, "c-badge")} {...props}>
12
+ {children}
13
+ </span>
14
+ );
15
+ }
package/src/components/test/test.stories.tsx ADDED
@@ -0,0 +1,27 @@
1
+ import type { Meta, StoryObj } from "@storybook/react-vite";
2
+
3
+ import { expect, within } from "storybook/test";
4
+ import { Test } from "./test";
5
+
6
+ const meta: Meta<typeof Test> = {
7
+ title: "Components/Test",
8
+ component: Test,
9
+ tags: ["autodocs"],
10
+ args: {
11
+ children: "Label",
12
+ },
13
+ };
14
+
15
+ export default meta;
16
+
17
+ type Story = StoryObj<typeof meta>;
18
+
19
+ export const Default: Story = {
20
+ play: ({ args, canvasElement }) => {
21
+ const canvas = within(canvasElement);
22
+
23
+ const text = canvas.getByText(args.children as string);
24
+
25
+ expect(text).toBeInTheDocument();
26
+ },
27
+ };
package/src/components/test/test.styles.scss ADDED
@@ -0,0 +1,3 @@
1
+ .c-test {
2
+ border-radius: 0.25rem;
3
+ }
package/src/components/test/test.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import type { HTMLAttributes, ReactNode } from "react";
2
+ import classNames from "classnames";
3
+ import "./test.styles.scss";
4
+
5
+ export interface TestProps extends HTMLAttributes<HTMLSpanElement> {
6
+ children: ReactNode;
7
+ }
8
+
9
+ export function Test({ className, children, ...props }: TestProps) {
10
+ return (
11
+ <span className={classNames(className, "c-test")} {...props}>
12
+ {children}
13
+ </span>
14
+ );
15
+ }
package/src/index.ts ADDED
@@ -0,0 +1,4 @@
1
+ import "./assets/styles/base.scss";
2
+
3
+ export { Badge } from "./components/badge/badge";
4
+ export { Test } from "./components/test/test";
package/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/tsconfig.app.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
+ "target": "ES2020",
5
+ "useDefineForClassFields": true,
6
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
7
+ "module": "ESNext",
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "verbatimModuleSyntax": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+ "jsx": "react-jsx",
17
+
18
+ /* Linting */
19
+ "strict": true,
20
+ "noUnusedLocals": true,
21
+ "noUnusedParameters": true,
22
+ "erasableSyntaxOnly": true,
23
+ "noFallthroughCasesInSwitch": true,
24
+ "noUncheckedSideEffectImports": true
25
+ },
26
+ "include": ["src"]
27
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ { "path": "./tsconfig.app.json" },
5
+ { "path": "./tsconfig.node.json" }
6
+ ]
7
+ }
package/tsconfig.node.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4
+ "target": "ES2022",
5
+ "lib": ["ES2023"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+
9
+ /* Bundler mode */
10
+ "moduleResolution": "bundler",
11
+ "allowImportingTsExtensions": true,
12
+ "verbatimModuleSyntax": true,
13
+ "moduleDetection": "force",
14
+ "noEmit": true,
15
+
16
+ /* Linting */
17
+ "strict": true,
18
+ "noUnusedLocals": true,
19
+ "noUnusedParameters": true,
20
+ "erasableSyntaxOnly": true,
21
+ "noFallthroughCasesInSwitch": true,
22
+ "noUncheckedSideEffectImports": true
23
+ },
24
+ "include": ["vite.config.ts"]
25
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react'
3
+
4
+ // https://vite.dev/config/
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ })