cari-ui-kit 0.1.12 → 0.1.13

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 (19) hide show
  1. package/README.md +114 -60
  2. package/dist/cari-ui-kit.css +1 -1
  3. package/dist/components/button/Button.d.ts +6 -2
  4. package/dist/components/sidebar/content/SidebarContent.d.ts +6 -0
  5. package/dist/components/sidebar/footer/SidebarFooter.d.ts +5 -0
  6. package/dist/components/sidebar/header/SidebarHeader.d.ts +7 -0
  7. package/dist/components/sidebar/index.d.ts +4 -0
  8. package/dist/components/sidebar/menu/SidebarMenu.d.ts +5 -0
  9. package/dist/components/typography/Typography.d.ts +13 -0
  10. package/dist/components/typography/index.d.ts +1 -0
  11. package/dist/foundation/colors.d.ts +10 -0
  12. package/dist/foundation/sizes.d.ts +1 -0
  13. package/dist/foundation/typography-variant.d.ts +12 -0
  14. package/dist/foundation/weight.d.ts +7 -0
  15. package/dist/index.cjs +4 -4
  16. package/dist/index.d.ts +13 -9
  17. package/dist/index.js +1648 -1510
  18. package/package.json +2 -1
  19. package/dist/foundation/types.d.ts +0 -6
package/README.md CHANGED
@@ -1,73 +1,127 @@
1
- # React + TypeScript + Vite
1
+ # Cari UI Kit
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ A modern, customizable React UI component library built with **TypeScript**, **Vite**, and **Sass**. Designed to provide a consistent and robust design system for your applications.
4
4
 
5
- Currently, two official plugins are available:
5
+ ## � Installation
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7
+ Install the library using your preferred package manager:
9
8
 
10
- ## React Compiler
9
+ ```bash
10
+ npm install cari-ui-kit
11
+ # or
12
+ yarn add cari-ui-kit
13
+ # or
14
+ pnpm add cari-ui-kit
15
+ ```
16
+
17
+ ## � Usage
18
+
19
+ ### 1. Import Styles
20
+
21
+ Import the global CSS file at the root of your application (e.g., in `main.tsx` or `App.tsx`) to ensure proper styling:
22
+
23
+ ```tsx
24
+ import 'cari-ui-kit/styles.css';
25
+ ```
11
26
 
12
- The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
27
+ ### 2. Import and Use Components
13
28
 
14
- ## Expanding the ESLint configuration
29
+ You can import components directly from the package:
15
30
 
16
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
31
+ ```tsx
32
+ import { Button, Input, Typography, Select } from 'cari-ui-kit';
17
33
 
18
- ```js
19
- export default defineConfig([
20
- globalIgnores(['dist']),
21
- {
22
- files: ['**/*.{ts,tsx}'],
23
- extends: [
24
- // Other configs...
34
+ function App() {
35
+ return (
36
+ <div style={{ padding: '20px' }}>
37
+ <Typography variant="h1">Welcome to Cari UI</Typography>
38
+
39
+ <div style={{ margin: '20px 0' }}>
40
+ <Input
41
+ label="Email Address"
42
+ placeholder="Enter your email"
43
+ onChange={(e) => console.log(e.target.value)}
44
+ />
45
+ </div>
25
46
 
26
- // Remove tseslint.configs.recommended and replace with this
27
- tseslint.configs.recommendedTypeChecked,
28
- // Alternatively, use this for stricter rules
29
- tseslint.configs.strictTypeChecked,
30
- // Optionally, add this for stylistic rules
31
- tseslint.configs.stylisticTypeChecked,
47
+ <div style={{ margin: '20px 0' }}>
48
+ <Select
49
+ label="Choose a role"
50
+ options={[
51
+ { value: 'admin', label: 'Admin' },
52
+ { value: 'user', label: 'User' },
53
+ ]}
54
+ />
55
+ </div>
32
56
 
33
- // Other configs...
34
- ],
35
- languageOptions: {
36
- parserOptions: {
37
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
- tsconfigRootDir: import.meta.dirname,
39
- },
40
- // other options...
41
- },
42
- },
43
- ]);
57
+ <Button variant="primary" onClick={() => alert('Clicked!')}>
58
+ Submit
59
+ </Button>
60
+ </div>
61
+ );
62
+ }
44
63
  ```
45
64
 
46
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
-
48
- ```js
49
- // eslint.config.js
50
- import reactX from 'eslint-plugin-react-x';
51
- import reactDom from 'eslint-plugin-react-dom';
52
-
53
- export default defineConfig([
54
- globalIgnores(['dist']),
55
- {
56
- files: ['**/*.{ts,tsx}'],
57
- extends: [
58
- // Other configs...
59
- // Enable lint rules for React
60
- reactX.configs['recommended-typescript'],
61
- // Enable lint rules for React DOM
62
- reactDom.configs.recommended,
63
- ],
64
- languageOptions: {
65
- parserOptions: {
66
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
- tsconfigRootDir: import.meta.dirname,
68
- },
69
- // other options...
70
- },
71
- },
72
- ]);
65
+ ## 🧱 Available Components
66
+
67
+ The library includes a comprehensive set of typed React components:
68
+
69
+ | Component | Description |
70
+ | :--- | :--- |
71
+ | `Button` | Interactive buttons with multiple variants. |
72
+ | `Input` | Text input fields with label support. |
73
+ | `Select` | Dropdown selection component. |
74
+ | `Checkbox` | Boolean selection input. |
75
+ | `Typography` | Text components for consistent headings and body text. |
76
+ | `Icons` | A set of SVG icons (e.g., `IconHome`, `IconUser`). |
77
+ | `Loader` | Loading spinners and indicators. |
78
+ | `FormGroup` | Wrapper for grouping form elements. |
79
+ | `Label` | Standalone label component. |
80
+ | `TextArea` | Multi-line text input. |
81
+ | `Sidebar` | Navigation sidebar component. |
82
+
83
+ ## 🎨 Foundation & Tokens
84
+
85
+ You can also access the design tokens directly if you need to build custom components that match the system:
86
+
87
+ ```tsx
88
+ import { colors, weight } from 'cari-ui-kit';
89
+
90
+ const myStyle = {
91
+ color: colors.primary,
92
+ fontWeight: weight.bold
93
+ };
73
94
  ```
95
+
96
+ ---
97
+
98
+ ## 🛠 Local Development & Contributing
99
+
100
+ If you want to contribute to the library or run it locally:
101
+
102
+ 1. **Clone the repo:**
103
+ ```bash
104
+ git clone <repository-url>
105
+ cd ui-kit
106
+ ```
107
+
108
+ 2. **Install dependencies:**
109
+ ```bash
110
+ yarn install
111
+ ```
112
+
113
+ 3. **Start Storybook:**
114
+ This is the best way to develop and test components in isolation.
115
+ ```bash
116
+ yarn storybook
117
+ ```
118
+
119
+ 4. **Build the Library:**
120
+ To generate the `dist` folder:
121
+ ```bash
122
+ yarn build:lib
123
+ ```
124
+
125
+ ## 📄 License
126
+
127
+ [MIT](LICENSE)
package/dist/cari-ui-kit.css CHANGED
@@ -1 +1 @@
1
- ._loader_1jwof_1{display:block;position:relative;background:currentColor;color:#000;box-sizing:border-box;animation:_animLoaderLG_1jwof_1 .3s .3s linear infinite alternate}._loader_1jwof_1:after,._loader_1jwof_1:before{content:"";background:currentColor;position:absolute;top:50%;transform:translateY(-50%);box-sizing:border-box;animation:_animLoaderLG_1jwof_1 .3s .45s linear infinite alternate}._loader_1jwof_1:before{animation-delay:0s}._loader_1jwof_1._sm_1jwof_21{width:2px;height:10px;border-radius:1px;display:block;margin:1px auto;animation-name:_animLoaderSM_1jwof_1}._loader_1jwof_1._sm_1jwof_21:after,._loader_1jwof_1._sm_1jwof_21:before{content:"";width:2px;height:10px;border-radius:1px;left:5px;animation-name:_animLoaderSM_1jwof_1}._loader_1jwof_1._sm_1jwof_21:before{left:-5px}._loader_1jwof_1._md_1jwof_40{width:4px;height:20px;border-radius:2px;display:block;margin:2px auto;animation-name:_animLoaderMD_1jwof_1}._loader_1jwof_1._md_1jwof_40:after,._loader_1jwof_1._md_1jwof_40:before{content:"";width:4px;height:20px;border-radius:2px;left:10px;animation-name:_animLoaderMD_1jwof_1}._loader_1jwof_1._md_1jwof_40:before{left:-10px}._loader_1jwof_1._lg_1jwof_59{width:6px;height:30px;border-radius:3px;display:block;margin:2px auto;animation-name:_animLoaderLG_1jwof_1}._loader_1jwof_1._lg_1jwof_59:after,._loader_1jwof_1._lg_1jwof_59:before{content:"";width:6px;height:30px;border-radius:3px;left:12px;animation-name:_animLoaderLG_1jwof_1}._loader_1jwof_1._lg_1jwof_59:before{left:-12px}@keyframes _animLoaderSM_1jwof_1{0%{height:10px}to{height:2px}}@keyframes _animLoaderMD_1jwof_1{0%{height:20px}to{height:5px}}@keyframes _animLoaderLG_1jwof_1{0%{height:30px}to{height:8px}}._button_5ruh1_74{outline:none;box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;gap:4px;border-width:1px;border-style:solid;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:10px;transition:all .3s ease-in-out}._button_5ruh1_74._sm_5ruh1_91{padding:8px}._button_5ruh1_74._lg_5ruh1_94{padding:12px}._button_5ruh1_74._loading_5ruh1_97>span{margin-left:10px;margin-right:5px}._button_5ruh1_74 svg{width:18px;height:18px}._button_5ruh1_74:disabled{opacity:.65;cursor:not-allowed}._button_5ruh1_74._primary_5ruh1_109{border-color:var(--color-primary-500);background-color:var(--color-primary-500);color:var(--color-white)}._button_5ruh1_74._primary_5ruh1_109 svg{fill:var(--color-white)}._button_5ruh1_74._primary_5ruh1_109:not(:disabled):hover{border-color:var(--color-primary-600);background-color:var(--color-primary-600)}._button_5ruh1_74._primary_5ruh1_109._loading_5ruh1_97>span{color:var(--color-white)}._button_5ruh1_74._secondary_5ruh1_124{border-color:var(--color-primary-200);background-color:var(--color-primary-200);color:var(--color-primary-700)}._button_5ruh1_74._secondary_5ruh1_124 svg{fill:var(--color-primary-700)}._button_5ruh1_74._secondary_5ruh1_124:not(:disabled):hover{border-color:var(--color-primary-200);background-color:var(--color-primary-200);color:var(--color-primary-700)}._button_5ruh1_74._secondary_5ruh1_124:not(:disabled):hover svg{fill:var(--color-primary-700)}._button_5ruh1_74._secondary_5ruh1_124._loading_5ruh1_97>span{color:var(--color-primary-700)}._button_5ruh1_74._tertiary_5ruh1_143{border-color:var(--color-primary-500);background-color:var(--color-white);color:var(--color-primary-500)}._button_5ruh1_74._tertiary_5ruh1_143:not(:disabled):hover{border-color:var(--color-primary-600);background-color:var(--color-primary-100)}._button_5ruh1_74._tertiary_5ruh1_143._loading_5ruh1_97>span{color:var(--color-primary-500)}._button_5ruh1_74._fullWidth_5ruh1_155{width:100%}._label_tt91k_74{font-size:14px;font-weight:500;color:var(--color-black-900)}._wrap_gjpie_74{position:relative}._wrap_gjpie_74 input[type=checkbox]{position:absolute;left:0;z-index:2;vertical-align:middle;opacity:0;cursor:pointer;visibility:hidden}._wrap_gjpie_74 input[type=checkbox]:checked+label ._checkbox_gjpie_86{color:var(--color-white);background-color:var(--color-primary-500);border-color:var(--color-primary-500)}._wrap_gjpie_74 input[type=checkbox]:checked+label ._checkbox_gjpie_86 svg{display:block}._wrap_gjpie_74 input[type=checkbox]:disabled+label{pointer-events:none}._wrap_gjpie_74 input[type=checkbox]:disabled+label ._checkbox_gjpie_86{background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._wrap_gjpie_74 label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._wrap_gjpie_74 ._checkbox_gjpie_86{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:6px;border:2px solid var(--color-gray-400);width:20px;height:20px}._wrap_gjpie_74 ._checkbox_gjpie_86 svg{display:none}._wrap_gjpie_74._error_gjpie_121 ._checkbox_gjpie_86{background-color:var(--color-red-50);border-color:var(--color-red-100)}._formGroup_mdx2w_74{display:flex;flex-direction:column;gap:8px;width:100%}._wrap_1295r_74{position:relative}._wrap_1295r_74 ._input_1295r_77{outline:none;box-sizing:border-box;color:var(--color-black-700);font-size:14px;font-weight:400;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px;padding:8px 12px;width:100%}._wrap_1295r_74 ._input_1295r_77:focus-visible{border-color:var(--color-primary-500)}._wrap_1295r_74 ._input_1295r_77._error_1295r_92{background-color:var(--color-red-50);border-color:var(--color-red-100)}._wrap_1295r_74 ._input_1295r_77:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._wrap_1295r_74._suffixWrap_1295r_101 ._input_1295r_77{padding-right:40px}._wrap_1295r_74._prefixWrap_1295r_104 ._input_1295r_77{padding-left:40px}._wrap_1295r_74 ._suffix_1295r_101,._wrap_1295r_74 ._prefix_1295r_104{display:flex;align-items:center;position:absolute;top:50%;transform:translateY(-50%)}._wrap_1295r_74 ._suffix_1295r_101 svg,._wrap_1295r_74 ._prefix_1295r_104 svg{width:18px;height:18px}._wrap_1295r_74 ._suffix_1295r_101{right:12px}._wrap_1295r_74 ._prefix_1295r_104{left:12px}._wrap_1295r_74 ._loader_1295r_124{margin-right:12px}._root_1xabw_74._error_1xabw_74 .uiSelect__control{background-color:var(--color-red-50);border-color:var(--color-red-100)}._root_1xabw_74 .uiSelect__control{width:100%;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px;min-height:auto}._root_1xabw_74 .uiSelect__control:hover{border-color:var(--color-gray-100)}._root_1xabw_74 .uiSelect__control--is-disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._root_1xabw_74 .uiSelect__control--is-focused{box-shadow:none;border:1px solid var(--color-primary-500)}._root_1xabw_74 .uiSelect__control--is-focused:hover{border-color:var(--color-primary-500)}._root_1xabw_74 .uiSelect__value-container{padding:8px 12px}._root_1xabw_74 .uiSelect__input-container{padding:0;margin:0}._root_1xabw_74 .uiSelect__indicator{color:var(--color-gray-400);padding-right:12px}._root_1xabw_74 .uiSelect__clear-indicator{padding:0}._root_1xabw_74 .uiSelect__indicator-separator{display:none}._root_1xabw_74 .uiSelect__menu{border-radius:8px;border:1px solid var(--color-gray-100);box-shadow:0 4px 30px #2e2d741a}._root_1xabw_74 .uiSelect__multi-value{background-color:var(--color-primary-100);border:0;border-radius:4px;margin:0 2px}._root_1xabw_74 .uiSelect__multi-value .uiSelect__multi-value__label{font-weight:500;font-size:12px;color:var(--color-primary-500)}._root_1xabw_74 .uiSelect__multi-value .uiSelect__multi-value__remove{color:var(--color-primary-500);border-radius:0 4px 4px 0}._root_1xabw_74 ._menuOpen_1xabw_136,._root_1xabw_74 ._menuClose_1xabw_136{display:inline-flex;transform:transform .15s ease}._root_1xabw_74 ._menuOpen_1xabw_136{transform:rotate(180deg)}:root{--color-primary-50: #efeffd;--color-primary-100: #dedefa;--color-primary-200: #bebdf6;--color-primary-300: #9d9bf1;--color-primary-400: #7d7aed;--color-primary-500: #5c59e8;--color-primary-600: #4543ae;--color-primary-700: #2e2d74;--color-primary-800: #17163a;--color-primary-900: #090917;--color-green-50: #e7f4ee;--color-green-100: #cfe7dc;--color-green-200: #9ed0b9;--color-green-300: #6ebb95;--color-green-400: #3da172;--color-green-500: #0d894f;--color-green-600: #0a673b;--color-green-700: #074528;--color-green-800: #032214;--color-green-900: #010e08;--color-yellow-50: #fdf1e8;--color-yellow-100: #fae1cf;--color-yellow-200: #f4c3a0;--color-yellow-300: #efa670;--color-yellow-400: #e98841;--color-yellow-500: #e46a11;--color-yellow-600: #ab500d;--color-yellow-700: #723509;--color-yellow-800: #391b04;--color-yellow-900: #170b02;--color-red-50: #feedec;--color-red-100: #fcdad7;--color-red-200: #f9b4af;--color-red-300: #f68f88;--color-red-400: #f36960;--color-red-500: #f04438;--color-red-600: #b4332a;--color-red-700: #78221c;--color-red-800: #3c110e;--color-red-900: #180706;--color-blue-50: #e8f8fd;--color-blue-100: #d0f0fa;--color-blue-200: #a1e0f4;--color-blue-300: #71d1ef;--color-blue-400: #42c1e9;--color-blue-500: #13b2e4;--color-blue-600: #0e86ab;--color-blue-700: #0a5972;--color-blue-800: #052d39;--color-blue-900: #021217;--color-black-500: #667085;--color-black-600: #4d5464;--color-black-700: #333843;--color-black-800: #1a1c21;--color-black-900: #0a0b0d;--color-gray-25: #f9f9fc;--color-gray-50: #f0f1f3;--color-gray-100: #e0e2e7;--color-gray-200: #c2c6ce;--color-gray-300: #a3a9b6;--color-gray-400: #858d9d;--color-white: #ffffff}._textarea_q4vjo_74{outline:none;box-sizing:border-box;color:var(--color-black-700);font-size:14px;font-weight:400;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px;padding:8px 12px;resize:none;min-height:156px;width:100%}._textarea_q4vjo_74:focus-visible{border-color:var(--color-primary-500)}._textarea_q4vjo_74._error_q4vjo_91{background-color:var(--color-red-50);border-color:var(--color-red-100)}._textarea_q4vjo_74:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}
1
+ ._loader_eumj4_147{display:block;position:relative;background:currentColor;color:var(--color-black-800);box-sizing:border-box;animation:_animLoaderLG_eumj4_1 .3s .3s linear infinite alternate}._loader_eumj4_147:after,._loader_eumj4_147:before{content:"";background:currentColor;position:absolute;top:50%;transform:translateY(-50%);box-sizing:border-box;animation:_animLoaderLG_eumj4_1 .3s .45s linear infinite alternate}._loader_eumj4_147:before{animation-delay:0s}._loader_eumj4_147._sm_eumj4_167{width:2px;height:10px;border-radius:1px;display:block;margin:1px auto;animation-name:_animLoaderSM_eumj4_1}._loader_eumj4_147._sm_eumj4_167:after,._loader_eumj4_147._sm_eumj4_167:before{content:"";width:2px;height:10px;border-radius:1px;left:5px;animation-name:_animLoaderSM_eumj4_1}._loader_eumj4_147._sm_eumj4_167:before{left:-5px}._loader_eumj4_147._md_eumj4_186{width:4px;height:20px;border-radius:2px;display:block;margin:2px auto;animation-name:_animLoaderMD_eumj4_1}._loader_eumj4_147._md_eumj4_186:after,._loader_eumj4_147._md_eumj4_186:before{content:"";width:4px;height:20px;border-radius:2px;left:10px;animation-name:_animLoaderMD_eumj4_1}._loader_eumj4_147._md_eumj4_186:before{left:-10px}._loader_eumj4_147._lg_eumj4_205{width:6px;height:30px;border-radius:3px;display:block;margin:2px auto;animation-name:_animLoaderLG_eumj4_1}._loader_eumj4_147._lg_eumj4_205:after,._loader_eumj4_147._lg_eumj4_205:before{content:"";width:6px;height:30px;border-radius:3px;left:12px;animation-name:_animLoaderLG_eumj4_1}._loader_eumj4_147._lg_eumj4_205:before{left:-12px}@keyframes _animLoaderSM_eumj4_1{0%{height:10px}to{height:2px}}@keyframes _animLoaderMD_eumj4_1{0%{height:20px}to{height:5px}}@keyframes _animLoaderLG_eumj4_1{0%{height:30px}to{height:8px}}._button_sawiy_147{outline:none;box-sizing:border-box;appearance:none;display:flex;align-items:center;gap:4px;border-width:1px;border-style:solid;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:10px;transition:all .3s ease-in-out}._button_sawiy_147._xs_sawiy_163{padding:4px}._button_sawiy_147._sm_sawiy_166{padding:8px}._button_sawiy_147._lg_sawiy_169{padding:12px}._button_sawiy_147._textCenter_sawiy_172{justify-content:center}._button_sawiy_147._loading_sawiy_175>span{margin-left:10px;margin-right:5px}._button_sawiy_147 svg{width:18px;height:18px}._button_sawiy_147:disabled{opacity:.65;cursor:not-allowed}._button_sawiy_147._primary_sawiy_187{border-color:var(--color-primary-500);background-color:var(--color-primary-500);color:var(--color-white)}._button_sawiy_147._primary_sawiy_187 svg{fill:var(--color-white)}._button_sawiy_147._primary_sawiy_187:not(:disabled):hover{border-color:var(--color-primary-600);background-color:var(--color-primary-600)}._button_sawiy_147._primary_sawiy_187._loading_sawiy_175>span{color:var(--color-white)}._button_sawiy_147._secondary_sawiy_202{border-color:var(--color-primary-200);background-color:var(--color-primary-200);color:var(--color-primary-600)}._button_sawiy_147._secondary_sawiy_202 svg{fill:var(--color-primary-600)}._button_sawiy_147._secondary_sawiy_202:not(:disabled):hover{border-color:var(--color-primary-300);background-color:var(--color-primary-300);color:var(--color-primary-700)}._button_sawiy_147._secondary_sawiy_202:not(:disabled):hover svg{fill:var(--color-primary-700)}._button_sawiy_147._secondary_sawiy_202._loading_sawiy_175>span{color:var(--color-primary-700)}._button_sawiy_147._tertiary_sawiy_221{border-color:var(--color-primary-500);background-color:var(--color-white);color:var(--color-primary-500)}._button_sawiy_147._tertiary_sawiy_221:not(:disabled):hover{border-color:var(--color-primary-600);background-color:var(--color-primary-100)}._button_sawiy_147._tertiary_sawiy_221._loading_sawiy_175>span{color:var(--color-primary-500)}._button_sawiy_147._menu_sawiy_233{background-color:transparent;border-color:transparent;color:var(--color-gray-400);gap:12px;padding:12px 16px}._button_sawiy_147._menu_sawiy_233._circle_sawiy_240{padding:12px}._button_sawiy_147._menu_sawiy_233 svg{width:20px;height:20px;fill:var(--color-gray-400)}._button_sawiy_147._menu_sawiy_233:not(:disabled):hover,._button_sawiy_147._menu_sawiy_233._active_sawiy_248{background-color:var(--color-primary-200);color:var(--color-primary-700)}._button_sawiy_147._menu_sawiy_233:not(:disabled):hover svg,._button_sawiy_147._menu_sawiy_233._active_sawiy_248 svg{fill:var(--color-primary-700)}._button_sawiy_147._success_sawiy_255{border-color:var(--color-green-500);background-color:var(--color-green-500);color:var(--color-white)}._button_sawiy_147._success_sawiy_255 svg{fill:var(--color-white)}._button_sawiy_147._success_sawiy_255:not(:disabled):hover{border-color:var(--color-green-600);background-color:var(--color-green-600)}._button_sawiy_147._success_sawiy_255._loading_sawiy_175>span{color:var(--color-white)}._button_sawiy_147._warning_sawiy_270{border-color:var(--color-yellow-500);background-color:var(--color-yellow-500);color:var(--color-white)}._button_sawiy_147._warning_sawiy_270 svg{fill:var(--color-white)}._button_sawiy_147._warning_sawiy_270:not(:disabled):hover{border-color:var(--color-yellow-600);background-color:var(--color-yellow-600)}._button_sawiy_147._warning_sawiy_270._loading_sawiy_175>span{color:var(--color-white)}._button_sawiy_147._error_sawiy_285{border-color:var(--color-red-500);background-color:var(--color-red-500);color:var(--color-white)}._button_sawiy_147._error_sawiy_285 svg{fill:var(--color-white)}._button_sawiy_147._error_sawiy_285:not(:disabled):hover{border-color:var(--color-red-600);background-color:var(--color-red-600)}._button_sawiy_147._error_sawiy_285._loading_sawiy_175>span{color:var(--color-white)}._button_sawiy_147._fullWidth_sawiy_300{width:100%}._button_sawiy_147._circle_sawiy_240{border-radius:50%}._label_1vlnb_147{font-size:14px;font-weight:500;color:var(--color-black-900)}._wrap_1p8f7_147{position:relative}._wrap_1p8f7_147 input[type=checkbox]{position:absolute;left:0;z-index:2;vertical-align:middle;opacity:0;cursor:pointer;visibility:hidden}._wrap_1p8f7_147 input[type=checkbox]:checked+label ._checkbox_1p8f7_159{color:var(--color-white);background-color:var(--color-primary-500);border-color:var(--color-primary-500)}._wrap_1p8f7_147 input[type=checkbox]:checked+label ._checkbox_1p8f7_159 svg{display:block}._wrap_1p8f7_147 input[type=checkbox]:disabled+label{pointer-events:none}._wrap_1p8f7_147 input[type=checkbox]:disabled+label ._checkbox_1p8f7_159{background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._wrap_1p8f7_147 label{color:var(--color-black-500);font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._wrap_1p8f7_147 ._checkbox_1p8f7_159{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:6px;border:2px solid var(--color-gray-400);width:20px;height:20px}._wrap_1p8f7_147 ._checkbox_1p8f7_159 svg{display:none}._wrap_1p8f7_147._error_1p8f7_197 ._checkbox_1p8f7_159{background-color:var(--color-red-50);border-color:var(--color-red-100)}._formGroup_11kr7_147{display:flex;flex-direction:column;gap:8px;width:100%}._wrap_9o0n5_147{position:relative}._wrap_9o0n5_147 ._input_9o0n5_150{outline:none;box-sizing:border-box;color:var(--color-black-700);font-size:14px;font-weight:400;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px;padding:8px 12px;min-height:40px;width:100%}._wrap_9o0n5_147 ._input_9o0n5_150:focus-visible{border-color:var(--color-primary-500)}._wrap_9o0n5_147 ._input_9o0n5_150._error_9o0n5_166{background-color:var(--color-red-50);border-color:var(--color-red-100)}._wrap_9o0n5_147 ._input_9o0n5_150:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._wrap_9o0n5_147._suffixWrap_9o0n5_175 ._input_9o0n5_150{padding-right:40px}._wrap_9o0n5_147._prefixWrap_9o0n5_178 ._input_9o0n5_150{padding-left:40px}._wrap_9o0n5_147 ._suffix_9o0n5_175,._wrap_9o0n5_147 ._prefix_9o0n5_178{color:var(--color-black-500);display:flex;align-items:center;position:absolute;top:50%;transform:translateY(-50%)}._wrap_9o0n5_147 ._suffix_9o0n5_175 svg,._wrap_9o0n5_147 ._prefix_9o0n5_178 svg{width:18px;height:18px}._wrap_9o0n5_147 ._suffix_9o0n5_175{right:12px}._wrap_9o0n5_147 ._prefix_9o0n5_178{left:12px}._wrap_9o0n5_147 ._loader_9o0n5_199{margin-right:12px}._root_rj35i_147._error_rj35i_147 .uiSelect__control{background-color:var(--color-red-50);border-color:var(--color-red-100)}._root_rj35i_147 .uiSelect__control{width:100%;min-height:40px;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px}._root_rj35i_147 .uiSelect__control:hover{border-color:var(--color-gray-100)}._root_rj35i_147 .uiSelect__control--is-disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-100)}._root_rj35i_147 .uiSelect__control--is-focused{box-shadow:none;border:1px solid var(--color-primary-500)}._root_rj35i_147 .uiSelect__control--is-focused:hover{border-color:var(--color-primary-500)}._root_rj35i_147 .uiSelect__value-container{padding:8px 12px}._root_rj35i_147 .uiSelect__value-container--is-multi{padding:5.6px 12px}._root_rj35i_147 .uiSelect__input-container{padding:0;margin:0}._root_rj35i_147 .uiSelect__indicator{color:var(--color-gray-400);padding-right:12px}._root_rj35i_147 .uiSelect__clear-indicator{padding:0}._root_rj35i_147 .uiSelect__indicator-separator{display:none}._root_rj35i_147 .uiSelect__menu{border-radius:8px;border:1px solid var(--color-gray-100);box-shadow:0 4px 30px #2e2d741a}._root_rj35i_147 .uiSelect__multi-value{background-color:var(--color-primary-100);border:0;border-radius:4px;margin:0 2px;padding:2px}._root_rj35i_147 .uiSelect__multi-value .uiSelect__multi-value__label{font-weight:500;font-size:12px;color:var(--color-primary-500)}._root_rj35i_147 .uiSelect__multi-value .uiSelect__multi-value__remove{color:var(--color-primary-500);border-radius:0 4px 4px 0}._root_rj35i_147 ._menuOpen_rj35i_213,._root_rj35i_147 ._menuClose_rj35i_213{display:inline-flex;transform:transform .15s ease}._root_rj35i_147 ._menuOpen_rj35i_213{transform:rotate(180deg)}._content_12ooh_147{border-radius:16px;background-color:var(--color-white);box-shadow:0 16px 44px #00000012;box-sizing:border-box;display:flex;flex-direction:column;gap:24px;height:100vh;min-width:280px;transition:width,left,right,.3s}._content_12ooh_147._closed_12ooh_159{min-width:76px}._footer_1apk2_147{border-top:1px solid var(--color-gray-50);margin-top:auto;padding:24px}._header_1s278_147{position:relative;padding:26px 24px}._header_1s278_147 ._backButton_1s278_151{height:auto;position:absolute;top:50%;right:-14px;transform:translateY(-50%)}._menu_xtnml_147{display:flex;flex-direction:column;gap:4px;padding:0 24px;height:100%;overflow-y:scroll}._textarea_x08o1_147{outline:none;box-sizing:border-box;color:var(--color-black-700);font-size:14px;font-weight:400;background-color:var(--color-white);border:1px solid var(--color-gray-100);border-radius:8px;padding:8px 12px;resize:none;min-height:156px;width:100%}._textarea_x08o1_147:focus-visible{border-color:var(--color-primary-500)}._textarea_x08o1_147._error_x08o1_164{background-color:var(--color-red-50);border-color:var(--color-red-100)}._textarea_x08o1_147:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}:root{--color-primary-50: #efeffd;--color-primary-100: #dedefa;--color-primary-200: #bebdf6;--color-primary-300: #9d9bf1;--color-primary-400: #7d7aed;--color-primary-500: #5c59e8;--color-primary-600: #4543ae;--color-primary-700: #2e2d74;--color-primary-800: #17163a;--color-primary-900: #090917;--color-green-50: #e7f4ee;--color-green-100: #cfe7dc;--color-green-200: #9ed0b9;--color-green-300: #6ebb95;--color-green-400: #3da172;--color-green-500: #0d894f;--color-green-600: #0a673b;--color-green-700: #074528;--color-green-800: #032214;--color-green-900: #010e08;--color-yellow-50: #fdf1e8;--color-yellow-100: #fae1cf;--color-yellow-200: #f4c3a0;--color-yellow-300: #efa670;--color-yellow-400: #e98841;--color-yellow-500: #e46a11;--color-yellow-600: #ab500d;--color-yellow-700: #723509;--color-yellow-800: #391b04;--color-yellow-900: #170b02;--color-red-50: #feedec;--color-red-100: #fcdad7;--color-red-200: #f9b4af;--color-red-300: #f68f88;--color-red-400: #f36960;--color-red-500: #f04438;--color-red-600: #b4332a;--color-red-700: #78221c;--color-red-800: #3c110e;--color-red-900: #180706;--color-blue-50: #e8f8fd;--color-blue-100: #d0f0fa;--color-blue-200: #a1e0f4;--color-blue-300: #71d1ef;--color-blue-400: #42c1e9;--color-blue-500: #13b2e4;--color-blue-600: #0e86ab;--color-blue-700: #0a5972;--color-blue-800: #052d39;--color-blue-900: #021217;--color-black-500: #667085;--color-black-600: #4d5464;--color-black-700: #333843;--color-black-800: #1a1c21;--color-black-900: #0a0b0d;--color-gray-25: #f9f9fc;--color-gray-50: #f0f1f3;--color-gray-100: #e0e2e7;--color-gray-200: #c2c6ce;--color-gray-300: #a3a9b6;--color-gray-400: #858d9d;--color-white: #ffffff}[data-theme=dark]{--color-primary-50: #090917;--color-primary-100: #17163a;--color-primary-200: #2e2d74;--color-primary-300: #4543ae;--color-primary-400: #5c59e8;--color-primary-500: #7d7aed;--color-primary-600: #9d9bf1;--color-primary-700: #bebdf6;--color-primary-800: #dedefa;--color-primary-900: #efeffd;--color-green-50: #010e08;--color-green-100: #032214;--color-green-200: #074528;--color-green-300: #0a673b;--color-green-400: #0d894f;--color-green-500: #3da172;--color-green-600: #6ebb95;--color-green-700: #9ed0b9;--color-green-800: #cfe7dc;--color-green-900: #e7f4ee;--color-yellow-50: #170b02;--color-yellow-100: #391b04;--color-yellow-200: #723509;--color-yellow-300: #ab500d;--color-yellow-400: #e46a11;--color-yellow-500: #e98841;--color-yellow-600: #efa670;--color-yellow-700: #f4c3a0;--color-yellow-800: #fae1cf;--color-yellow-900: #fdf1e8;--color-red-50: #180706;--color-red-100: #3c110e;--color-red-200: #78221c;--color-red-300: #b4332a;--color-red-400: #f04438;--color-red-500: #f36960;--color-red-600: #f68f88;--color-red-700: #f9b4af;--color-red-800: #fcdad7;--color-red-900: #feedec;--color-blue-50: #021217;--color-blue-100: #052d39;--color-blue-200: #0a5972;--color-blue-300: #0e86ab;--color-blue-400: #13b2e4;--color-blue-500: #42c1e9;--color-blue-600: #71d1ef;--color-blue-700: #a1e0f4;--color-blue-800: #d0f0fa;--color-blue-900: #e8f8fd;--color-black-500: #667085;--color-black-600: #858d9d;--color-black-700: #a3a9b6;--color-black-800: #c2c6ce;--color-black-900: #e0e2e7;--color-gray-25: #0a0b0d;--color-gray-50: #1a1c21;--color-gray-100: #333843;--color-gray-200: #4d5464;--color-gray-300: #667085;--color-gray-400: #858d9d;--color-white: #1a1c21}._typography_bg9w8_147{margin:0;color:var(--color-black-900);line-height:1.2}._h1_bg9w8_153{font-size:68px}._h2_bg9w8_157{font-size:56px}._h3_bg9w8_161{font-size:46px}._h4_bg9w8_165{font-size:38px}._h5_bg9w8_169{font-size:32px}._h6_bg9w8_173{font-size:26px}._paragraph_bg9w8_177{font-size:18px;line-height:1.5}._small_bg9w8_182{font-size:16px;line-height:1.5}._caption_bg9w8_187{font-size:14px;line-height:1.5}._light_bg9w8_192{font-weight:300}._regular_bg9w8_196{font-weight:400}._medium_bg9w8_200{font-weight:500}._bold_bg9w8_204{font-weight:700}._primary_bg9w8_208{color:var(--color-primary-500)}._secondary_bg9w8_212{color:var(--color-primary-300)}._tertiary_bg9w8_216{color:var(--color-primary-200)}._success_bg9w8_220{color:var(--color-green-500)}._warning_bg9w8_224{color:var(--color-yellow-500)}._error_bg9w8_228{color:var(--color-red-500)}
package/dist/components/button/Button.d.ts CHANGED
@@ -1,15 +1,19 @@
1
+ import { COLORS } from '../../foundation/colors';
1
2
  import { SIZES } from '../../foundation/sizes';
2
- import { TYPES } from '../../foundation/types';
3
3
  export interface IButtonProps {
4
+ className?: string;
4
5
  label?: string;
5
6
  prefix?: React.ReactNode;
6
7
  suffix?: React.ReactNode;
7
- type?: TYPES;
8
+ color?: COLORS;
8
9
  disabled?: boolean;
9
10
  isLoading?: boolean;
10
11
  onClick?: () => void;
11
12
  ariaLabel?: string;
12
13
  size?: SIZES;
13
14
  isFullWidth?: boolean;
15
+ isActive?: boolean;
16
+ isCircle?: boolean;
17
+ isHiddenLabel?: boolean;
14
18
  }
15
19
  export declare const Button: (props: IButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/sidebar/content/SidebarContent.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ export interface ISidebarContentProps {
3
+ children: ReactNode;
4
+ isOpen?: boolean;
5
+ }
6
+ export declare const SidebarContent: (props: ISidebarContentProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/sidebar/footer/SidebarFooter.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ReactNode } from 'react';
2
+ export interface ISidebarFooterProps {
3
+ children: ReactNode;
4
+ }
5
+ export declare const SidebarFooter: (props: ISidebarFooterProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/sidebar/header/SidebarHeader.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ export interface ISidebarHeaderProps {
3
+ children: ReactNode;
4
+ isOpen?: boolean;
5
+ onClick?: () => void;
6
+ }
7
+ export declare const SidebarHeader: (props: ISidebarHeaderProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/sidebar/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { SidebarContent } from './content/SidebarContent';
2
+ export { SidebarFooter } from './footer/SidebarFooter';
3
+ export { SidebarHeader } from './header/SidebarHeader';
4
+ export { SidebarMenu } from './menu/SidebarMenu';
package/dist/components/sidebar/menu/SidebarMenu.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ReactNode } from 'react';
2
+ export interface ISidebarMenuProps {
3
+ children: ReactNode;
4
+ }
5
+ export declare const SidebarMenu: (props: ISidebarMenuProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/typography/Typography.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ElementType, HTMLAttributes, ReactNode } from 'react';
2
+ import { COLORS } from '../../foundation/colors';
3
+ import { TYPOGRAPHY_VARIANTS } from '../../foundation/typography-variant';
4
+ import { WEIGHTS } from '../../foundation/weight';
5
+ export interface ITypographyProps extends HTMLAttributes<HTMLElement> {
6
+ variant?: TYPOGRAPHY_VARIANTS;
7
+ weight?: WEIGHTS;
8
+ color?: COLORS;
9
+ component?: ElementType;
10
+ className?: string;
11
+ children: ReactNode;
12
+ }
13
+ export declare const Typography: ({ variant, weight, color, component, className, children, ...rest }: ITypographyProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/typography/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Typography } from './Typography';
package/dist/foundation/colors.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export declare const COLOR: {
2
+ readonly primary: "primary";
3
+ readonly secondary: "secondary";
4
+ readonly tertiary: "tertiary";
5
+ readonly menu: "menu";
6
+ readonly success: "success";
7
+ readonly warning: "warning";
8
+ readonly error: "error";
9
+ };
10
+ export type COLORS = (typeof COLOR)[keyof typeof COLOR];
package/dist/foundation/sizes.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const SIZE: {
2
+ readonly xs: "xs";
2
3
  readonly sm: "sm";
3
4
  readonly md: "md";
4
5
  readonly lg: "lg";
package/dist/foundation/typography-variant.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const TYPOGRAPHY_VARIANT: {
2
+ readonly h1: "h1";
3
+ readonly h2: "h2";
4
+ readonly h3: "h3";
5
+ readonly h4: "h4";
6
+ readonly h5: "h5";
7
+ readonly h6: "h6";
8
+ readonly paragraph: "paragraph";
9
+ readonly small: "small";
10
+ readonly caption: "caption";
11
+ };
12
+ export type TYPOGRAPHY_VARIANTS = (typeof TYPOGRAPHY_VARIANT)[keyof typeof TYPOGRAPHY_VARIANT];
package/dist/foundation/weight.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare const WEIGHT: {
2
+ readonly light: "light";
3
+ readonly regular: "regular";
4
+ readonly medium: "medium";
5
+ readonly bold: "bold";
6
+ };
7
+ export type WEIGHTS = (typeof WEIGHT)[keyof typeof WEIGHT];