modular-ui-kit-vue 1.0.4 → 1.0.6
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 +193 -24
- package/dist/modular-ui-kit-vue.css +1 -1
- package/package.json +22 -1
package/README.md
CHANGED
|
@@ -1,32 +1,21 @@
|
|
|
1
1
|
# modular-ui-kit-vue
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/modular-ui-kit-vue)
|
|
4
|
+
[](https://www.npmjs.com/package/modular-ui-kit-vue)
|
|
5
5
|
[](https://github.com/MShawon/github-clone-count-badge)
|
|
6
6
|
|
|
7
7
|
`modular-ui-kit-vue` is a lightweight library of independent frontend components designed for rapid development and clean code. No heavy backend logic: just pure, flexible, and responsive UI elements ready to be dropped into any web application.
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
npm install modular-ui-kit-vue
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```sh
|
|
16
|
-
yarn add modular-ui-kit-vue
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```sh
|
|
20
|
-
pnpm add modular-ui-kit-vue
|
|
21
|
-
```
|
|
9
|
+
[Demo Project (main branch)](https://github.com/eugenia-vitinschii/modular-ui-kit-vue/tree/main) •
|
|
10
|
+
[Wiki & Documentation](https://github.com/eugenia-vitinschii/modular-ui-kit-vue/wiki)
|
|
22
11
|
|
|
23
12
|
### Quick start
|
|
24
13
|
|
|
25
14
|
```vue
|
|
26
15
|
<template>
|
|
27
|
-
<base-text as="h1" :type="'heading'" :variant="'primary'">
|
|
28
|
-
<base-text as="
|
|
29
|
-
<base-text
|
|
16
|
+
<base-text as="h1" :type="'heading'" :variant="'primary'">Modular UI Kit</base-text>
|
|
17
|
+
<base-text as="h2" :type="'subheading'" :variant="'warning'">Craft flexible & lightweight Vue 3 interface<base-text>
|
|
18
|
+
<base-text :variant="'muted'">Explore reusable components, custom design tokens, and flexible typography out of the box.</base-text>
|
|
30
19
|
</template>
|
|
31
20
|
<script setup lang="ts">
|
|
32
21
|
import { BaseText } from 'modular-ui-kit-vue'
|
|
@@ -34,13 +23,158 @@ import 'modular-ui-kit-vue/dist/modular-ui-kit-vue.css'
|
|
|
34
23
|
</script>
|
|
35
24
|
```
|
|
36
25
|
|
|
37
|
-
###
|
|
26
|
+
### Available Components
|
|
38
27
|
|
|
39
|
-
|
|
28
|
+
Buttons
|
|
40
29
|
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
|
|
30
|
+
- BaseButton: Standard action button
|
|
31
|
+
- BaseIconButton: svg action button
|
|
32
|
+
|
|
33
|
+
Form Elements
|
|
34
|
+
|
|
35
|
+
- BaseCheckbox: Checkbox input component
|
|
36
|
+
- BaseInput: Standard text input field
|
|
37
|
+
- BaseRadio: Radio button option
|
|
38
|
+
- BaseSelect: Dropdown select menu
|
|
39
|
+
- BaseTextarea : Multi-line text input field
|
|
40
|
+
|
|
41
|
+
Feedback & States
|
|
42
|
+
|
|
43
|
+
- BaseToast / BaseToastContainer: Toast notification components
|
|
44
|
+
- useToast: Composition API helper for managing toasts
|
|
45
|
+
- BaseSkeleton: Skeleton loader for async data
|
|
46
|
+
- EmptyState: Placeholder display for empty data views
|
|
47
|
+
|
|
48
|
+
- ErrorState: Placeholder display for error screens
|
|
49
|
+
|
|
50
|
+
Navigation
|
|
51
|
+
|
|
52
|
+
- BaseBreadcrumbs: Breadcrumb navigation path
|
|
53
|
+
- BasePagination: Page navigation control
|
|
54
|
+
|
|
55
|
+
Overlays
|
|
56
|
+
|
|
57
|
+
- BaseModal: Modal dialog window with color variants
|
|
58
|
+
|
|
59
|
+
Typography
|
|
60
|
+
|
|
61
|
+
- BaseText: Standardized typography component
|
|
62
|
+
|
|
63
|
+
### Design Tokens
|
|
64
|
+
|
|
65
|
+
modular-ui-kit-vue is built using native CSS variables. You can easily override default colors, typography, borders, and spacing to match your brand design.
|
|
66
|
+
|
|
67
|
+
open or create app.sass, copy and use:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
/* DESIGN TOKENS (CSS Variables for Customization) */
|
|
71
|
+
:root
|
|
72
|
+
/* === Colors: Text === */
|
|
73
|
+
--ui-text: #eceef2
|
|
74
|
+
--ui-text-muted: #8a93a6
|
|
75
|
+
|
|
76
|
+
/* === Colors: Backgrounds === */
|
|
77
|
+
--ui-bg: #0b0d11
|
|
78
|
+
--ui-bg-soft: #12151c
|
|
79
|
+
--ui-bg-card: #171b24
|
|
80
|
+
--ui-bg-code: #1e2330
|
|
81
|
+
|
|
82
|
+
/* === Colors: Accents & Statuses === */
|
|
83
|
+
--ui-primary: #6366f1
|
|
84
|
+
--ui-primary-hover: #4f46e5
|
|
85
|
+
--ui-danger: #ff4a6b
|
|
86
|
+
--ui-success: #10b981
|
|
87
|
+
--ui-warning: #f59e0b
|
|
88
|
+
|
|
89
|
+
/* === Typography === */
|
|
90
|
+
--ui-font-heading: 26px
|
|
91
|
+
--ui-font-subheading: 19px
|
|
92
|
+
--ui-font-body: 16px
|
|
93
|
+
|
|
94
|
+
--ui-font-heading-md: 24px
|
|
95
|
+
--ui-font-subheading-md: 18px
|
|
96
|
+
--ui-font-body-md: 15px
|
|
97
|
+
|
|
98
|
+
--ui-font-heading-sm: 20px
|
|
99
|
+
--ui-font-subheading-sm: 16px
|
|
100
|
+
--ui-font-body-sm: 14px
|
|
101
|
+
|
|
102
|
+
/* === Borders === */
|
|
103
|
+
--ui-border-color: rgba(236, 238, 242, 0.08)
|
|
104
|
+
--ui-border-width: 1px
|
|
105
|
+
--ui-border-style: solid
|
|
106
|
+
--ui-border-radius: 0px
|
|
107
|
+
|
|
108
|
+
/* === Space Tokens: Elements (inputs, buttons, icons) === */
|
|
109
|
+
--ui-space-content-sm: 6px
|
|
110
|
+
--ui-space-content-md: 10px
|
|
111
|
+
--ui-space-content-lg: 14px
|
|
112
|
+
|
|
113
|
+
/* === Space Tokens: Containers (forms, cards, sections) === */
|
|
114
|
+
--ui-space-container-sm: 16px
|
|
115
|
+
--ui-space-container-md: 24px
|
|
116
|
+
--ui-space-container-lg: 32px
|
|
117
|
+
|
|
118
|
+
/* === Design Utilities === */
|
|
119
|
+
--ui-transition: all 0.3s ease-out
|
|
120
|
+
--ui-opacity: 0.4
|
|
121
|
+
|
|
122
|
+
/* SASS VARIABLES ALIASES */
|
|
123
|
+
|
|
124
|
+
/* === Colors === */
|
|
125
|
+
$text: var(--ui-text)
|
|
126
|
+
$text-muted: var(--ui-text-muted)
|
|
127
|
+
|
|
128
|
+
$bg: var(--ui-bg)
|
|
129
|
+
$bg-soft: var(--ui-bg-soft)
|
|
130
|
+
$bg-card: var(--ui-bg-card)
|
|
131
|
+
$bg-code: var(--ui-bg-code)
|
|
132
|
+
|
|
133
|
+
$primary: var(--ui-primary)
|
|
134
|
+
$primary-hover: var(--ui-primary-hover)
|
|
135
|
+
$danger: var(--ui-danger)
|
|
136
|
+
$success: var(--ui-success)
|
|
137
|
+
$warning: var(--ui-warning)
|
|
138
|
+
|
|
139
|
+
/* === Typography === */
|
|
140
|
+
$heading: var(--ui-font-heading)
|
|
141
|
+
$subheading: var(--ui-font-subheading)
|
|
142
|
+
$body-text: var(--ui-font-body)
|
|
143
|
+
|
|
144
|
+
$heading-md: var(--ui-font-heading-md)
|
|
145
|
+
$subheading-md: var(--ui-font-subheading-md)
|
|
146
|
+
$body-text-md: var(--ui-font-body-md)
|
|
147
|
+
|
|
148
|
+
$heading-sm: var(--ui-font-heading-sm)
|
|
149
|
+
$subheading-sm: var(--ui-font-subheading-sm)
|
|
150
|
+
$body-text-sm: var(--ui-font-body-sm)
|
|
151
|
+
|
|
152
|
+
/* === Borders === */
|
|
153
|
+
$border-color: var(--ui-border-color)
|
|
154
|
+
$border-width: var(--ui-border-width)
|
|
155
|
+
$border-style: var(--ui-border-style)
|
|
156
|
+
$border-radius: var(--ui-border-radius)
|
|
157
|
+
|
|
158
|
+
/* === Space Tokens === */
|
|
159
|
+
$space-content-sm: var(--ui-space-content-sm)
|
|
160
|
+
$space-content-md: var(--ui-space-content-md)
|
|
161
|
+
$space-content-lg: var(--ui-space-content-lg)
|
|
162
|
+
|
|
163
|
+
$space-container-sm: var(--ui-space-container-sm)
|
|
164
|
+
$space-container-md: var(--ui-space-container-md)
|
|
165
|
+
$space-container-lg: var(--ui-space-container-lg)
|
|
166
|
+
|
|
167
|
+
/* === Design === */
|
|
168
|
+
$transition: var(--ui-transition)
|
|
169
|
+
$opacity: var(--ui-opacity)
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
import styles inside main.ts
|
|
173
|
+
|
|
174
|
+
```
|
|
175
|
+
import 'modular-ui-kit-vue/dist/modular-ui-kit-vue.css'
|
|
176
|
+
import '@/assets/sass/app.sass'
|
|
177
|
+
```
|
|
44
178
|
|
|
45
179
|
### Documentation
|
|
46
180
|
|
|
@@ -73,7 +207,8 @@ export type UIButtonType = "button" | "submit" | "reset"
|
|
|
73
207
|
- loading?: boolean
|
|
74
208
|
- disabled?: boolean
|
|
75
209
|
|
|
76
|
-
|
|
210
|
+
Deafult params
|
|
211
|
+
|
|
77
212
|
- variant: "primary",
|
|
78
213
|
- type: "button",
|
|
79
214
|
- size: "lg",
|
|
@@ -86,3 +221,37 @@ Usage
|
|
|
86
221
|
<base-button :variant="'secondary'" @click="handleRegister">register</base-button>
|
|
87
222
|
<base-button :type="'submit'" :loading="auth.isLoading" :disabled="auth.isLoading">login</base-button>
|
|
88
223
|
```
|
|
224
|
+
|
|
225
|
+
### Types
|
|
226
|
+
|
|
227
|
+
```ts
|
|
228
|
+
/* UI VARIANTS */
|
|
229
|
+
export type UIVariant = 'primary' | 'danger' | 'warning' | 'success' | 'secondary'
|
|
230
|
+
export type UISize = 'sm' | 'md' | 'lg'
|
|
231
|
+
|
|
232
|
+
/* TEXT */
|
|
233
|
+
export type UITextType = 'heading' | 'subheading' | 'body-text'
|
|
234
|
+
export type UITextAlign = 'left' | 'center' | 'right'
|
|
235
|
+
export type UITextVariant = UIVariant | 'muted'
|
|
236
|
+
|
|
237
|
+
/* BUTTONS */
|
|
238
|
+
export type UIButtonVariant = UIVariant | 'ghost'
|
|
239
|
+
export type UIButtonType = 'button' | 'submit' | 'reset'
|
|
240
|
+
|
|
241
|
+
/* EMPTY STATE VARIANT */
|
|
242
|
+
export type UIEmptyStateVariant = 'secondary' | 'primary'
|
|
243
|
+
|
|
244
|
+
/* INPUT TYPE */
|
|
245
|
+
export type UIInputType = 'text' | 'email' | 'password' | 'search' | 'date' | 'tel' | 'number'
|
|
246
|
+
|
|
247
|
+
/* SKELTON TYPE */
|
|
248
|
+
export type UISkeletonType = 'text' | 'circle' | 'rect'
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### Accessibility (a11y)
|
|
252
|
+
|
|
253
|
+
All components are built with basic accessibility in mind:
|
|
254
|
+
|
|
255
|
+
- Native keyboard navigation support (Focus states, `Enter` / `Space` key handlers).
|
|
256
|
+
- Proper ARIA attributes (`aria-expanded`, `aria-hidden`) out of the box.
|
|
257
|
+
- High-contrast focus rings for better visibility.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root,html{--ui-text:#eceef2;--ui-text-muted:#8a93a6;--ui-bg:#0b0d11;--ui-bg-soft:#12151c;--ui-bg-card:#171b24;--ui-bg-code:#1e2330;--ui-primary:#6366f1;--ui-primary-hover:#4f46e5;--ui-danger:#ff4a6b;--ui-success:#10b981;--ui-warning:#f59e0b;--ui-font-heading:26px;--ui-font-subheading:19px;--ui-font-body:16px;--ui-font-heading-md:24px;--ui-font-subheading-md:18px;--ui-font-body-md:15px;--ui-font-heading-sm:20px;--ui-font-subheading-sm:16px;--ui-font-body-sm:14px;--ui-border-color:#eceef214;--ui-border-width:1px;--ui-border-style:solid;--ui-border-radius:0px;--ui-space-content-sm:6px;--ui-space-content-md:10px;--ui-space-content-lg:14px;--ui-space-container-sm:16px;--ui-space-container-md:24px;--ui-space-container-lg:32px;--ui-transition:all .3s ease-out;--ui-opacity:.4}*,:before,:after{box-sizing:border-box}:focus,:active,a:focus,a:active{outline:none}nav,footer,aside{display:block}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:#232222;height:100%;margin:0;padding:0;font-family:Inter,sans-serif;font-size:100%;line-height:1.5}input,textarea,button,select{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer;background:0 0;border:none}button::-moz-focus-inner{border:0;padding:0}a,a:visited{cursor:pointer;text-decoration:none}button,a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:400}ul{padding-inline-start:0}ul li{margin:0;list-style:none}img{max-width:100%;display:block}.heading{font-size:26px;font-weight:600;line-height:34px}.subheading{font-size:19px;font-weight:500;line-height:28px}.body-text{font-size:16px;font-weight:400;line-height:24px}@media (width<=1024px){.heading{font-size:24px;line-height:30px}.subheading{font-size:18px;line-height:24px}.body-text{font-size:15px;line-height:22px}}@media (width<=767px){.heading{font-size:20px;line-height:26px}.subheading{font-size:16px;line-height:22px}.body-text{font-size:14px;line-height:20px}}a{text-underline-offset:4px;transition:all .3s ease-out;display:block}a:hover{opacity:.8}a:active{opacity:.6;filter:brightness(.9)}.shimmer{position:relative;overflow:hidden}.shimmer:before{content:"";background:linear-gradient(90deg,#0000 0%,#8a93a6 50%,#0000 100%);width:150px;height:100%;animation:2.6s infinite loading;position:absolute;top:0;left:-150px}@keyframes loading{0%{left:-150px}to{left:100%}}.fade-enter-active,.fade-leave-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to{opacity:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:500;line-height:1.2;transition:all .3s ease-out;display:inline-flex}.btn--sm{--spinner-size:14px;height:38px;padding:3px 14px;font-size:14px}.btn--md{--spinner-size:18px;height:44px;padding:3px 16px;font-size:15px}.btn--lg{--spinner-size:22px;height:50px;padding:3px 18px;font-size:16px}.btn--primary{color:#eceef2;--spinner-color:#6366f1;background:#171b24;border:1px solid #6366f1;border-radius:10px}.btn--primary:hover:not(:disabled):not(.is-loading){background:#6366f1}.btn--primary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--primary:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--primary.is-loading{cursor:wait}.btn--secondary{color:#eceef2;--spinner-color:#8a93a6;background:#171b24;border:1px solid #8a93a6;border-radius:10px}.btn--secondary:hover:not(:disabled):not(.is-loading){background:#8a93a6}.btn--secondary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--secondary:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--secondary.is-loading{cursor:wait}.btn--success{color:#eceef2;--spinner-color:#10b981;background:#171b24;border:1px solid #10b981;border-radius:10px}.btn--success:hover:not(:disabled):not(.is-loading){background:#10b981}.btn--success:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--success:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--success.is-loading{cursor:wait}.btn--warning{color:#eceef2;--spinner-color:#f59e0b;background:#171b24;border:1px solid #f59e0b;border-radius:10px}.btn--warning:hover:not(:disabled):not(.is-loading){background:#f59e0b}.btn--warning:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--warning:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--warning.is-loading{cursor:wait}.btn--danger{color:#eceef2;--spinner-color:#ff4a6b;background:#171b24;border:1px solid #ff4a6b;border-radius:10px}.btn--danger:hover:not(:disabled):not(.is-loading){background:#ff4a6b}.btn--danger:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--danger:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--danger.is-loading{cursor:wait}.btn--ghost{color:#8a93a6;--spinner-color:#0b0d11;background:#171b24;border:1px solid #0b0d11;border-radius:10px}.btn--ghost:hover:not(:disabled):not(.is-loading){filter:brightness(1.1)}.btn--ghost:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--ghost:disabled{cursor:not-allowed;opacity:.4;transform:none}.btn--ghost.is-loading{cursor:wait}.btn-spinner{width:var(--spinner-size,18px);height:var(--spinner-size,18px);border:2px solid var(--spinner-color,currentColor);border-right-color:#0000;border-radius:50%;flex-shrink:0;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-icon{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:all .3s ease-out;display:inline-flex}.btn-icon svg{transition:all .3s ease-out}.btn-icon--sm{width:32px;min-width:32px;height:32px;min-height:32px}.btn-icon--sm svg{width:18px;height:18px}.btn-icon--sm{--spinner-size:14px}.btn-icon--md{width:40px;min-width:40px;height:40px;min-height:40px}.btn-icon--md svg{width:22px;height:22px}.btn-icon--md{--spinner-size:18px}.btn-icon--lg{width:48px;min-width:48px;height:48px;min-height:48px}.btn-icon--lg svg{width:26px;height:26px}.btn-icon--lg{--spinner-size:22px}.btn-icon--primary{color:#6366f1;background:0 0}.btn-icon--primary svg{fill:currentColor}.btn-icon--primary:hover:not(:disabled):not(.is-loading){color:#4f46e5}.btn-icon--primary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--primary.is-loading{cursor:wait}.btn-icon--secondary{color:#eceef2;background:0 0}.btn-icon--secondary svg{fill:currentColor}.btn-icon--secondary:hover:not(:disabled):not(.is-loading){color:#4f46e5}.btn-icon--secondary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--secondary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--secondary.is-loading{cursor:wait}.btn-icon--success{color:#10b981;background:0 0}.btn-icon--success svg{fill:currentColor}.btn-icon--success:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--success:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--success:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--success.is-loading{cursor:wait}.btn-icon--warning{color:#f59e0b;background:0 0}.btn-icon--warning svg{fill:currentColor}.btn-icon--warning:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--warning:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--warning:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--warning.is-loading{cursor:wait}.btn-icon--danger{color:#ff4a6b;background:0 0}.btn-icon--danger svg{fill:currentColor}.btn-icon--danger:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--danger:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--danger:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--danger.is-loading{cursor:wait}.btn-icon--ghost{color:#8a93a6;background:0 0}.btn-icon--ghost svg{fill:currentColor}.btn-icon--ghost:hover:not(:disabled):not(.is-loading){color:#eceef2}.btn-icon--ghost:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--ghost:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-icon--ghost.is-loading{cursor:wait}.form-error{color:#ff4a6b;font-size:13px}.form-hint,.form-label{color:#8a93a6;font-size:13px}.form-label--top{margin:0 0 10px}.form-label--side{margin:10px}.form__item{background:#171b24;width:100%;margin:14px 0;padding:14px;transition:all .3s ease-out}@media (width<=1024px){.form__item{margin:10px 0;padding:10px}}@media (width<=768px){.form__item{margin:6px 0;padding:6px}}.form__actions{background:#171b24;width:100%;margin:14px 0;padding:14px;transition:all .3s ease-out}@media (width<=1024px){.form__actions{margin:10px 0;padding:10px}}@media (width<=768px){.form__actions{margin:6px 0;padding:6px}}.form__actions{flex-direction:row;justify-content:start;align-items:center;gap:10px;display:flex}.base-input{flex-direction:column;display:flex}.base-input__control{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-input__control:focus,.base-input__control:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-input__control:disabled{opacity:.4;cursor:not-allowed}.base-input__control.is-error{border-color:#ff4a6b}.base-input__control.is-error:focus,.base-input__control.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(98%)sepia(1%)saturate(678%)hue-rotate(181deg)brightness(98%)contrast(94%)}.base-select{flex-direction:column;display:flex}.base-select__wrapper{position:relative}.base-select__field{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-select__field:focus,.base-select__field:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-select__field:disabled{opacity:.4;cursor:not-allowed}.base-select__field.is-error{border-color:#ff4a6b}.base-select__field.is-error:focus,.base-select__field.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-select__field{appearance:none;cursor:pointer;border-radius:0;width:100%}.base-select__icon{pointer-events:none;color:#8a93a6;font-size:14px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.base-textarea{flex-direction:column;display:flex}.base-textarea__field{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-textarea__field:focus,.base-textarea__field:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-textarea__field:disabled{opacity:.4;cursor:not-allowed}.base-textarea__field.is-error{border-color:#ff4a6b}.base-textarea__field.is-error:focus,.base-textarea__field.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-textarea__field{resize:vertical;min-height:120px}.base-textarea__field::placeholder{color:#8a93a6}.base-checkbox{position:relative}.base-checkbox__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-checkbox__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex}.base-checkbox__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-checkbox__field:focus-visible+.base-checkbox__box{border-color:#4f46e5}.base-checkbox__field:checked+.base-checkbox__box{border-color:#6366f1}.base-checkbox__field:checked+.base-checkbox__box .base-checkbox__check{transform:scale(1)}.base-checkbox__field:disabled+.base-checkbox__box{opacity:.4;cursor:not-allowed}.base-checkbox__box{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-checkbox__box:focus,.base-checkbox__box:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-checkbox__box:disabled{opacity:.4;cursor:not-allowed}.base-checkbox__box.is-error{border-color:#ff4a6b}.base-checkbox__box.is-error:focus,.base-checkbox__box.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-checkbox__box{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:4px;display:flex}.base-checkbox__check{color:#eceef2;border-radius:50%;transition:all .3s ease-out;transform:scale(0)}.base-radio{position:relative}.base-radio__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-radio__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex;position:relative}.base-radio__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-radio__field:checked+.base-radio__box{border-color:#6366f1}.base-radio__field:checked+.base-radio__box .base-radio__circle{background:#eceef2;transform:scale(1)}.base-radio__field:disabled+.base-radio__box{opacity:.4;cursor:not-allowed}.base-radio__box{color:#eceef2;background:#12151c;border:1px solid #0b0d11;border-radius:0;margin-top:5px;padding:10px;transition:all .3s ease-out}.base-radio__box:focus,.base-radio__box:focus-visible{border-color:#4f46e5;outline:none;box-shadow:0 0 0 4px #6366f126}.base-radio__box:disabled{opacity:.4;cursor:not-allowed}.base-radio__box.is-error{border-color:#ff4a6b}.base-radio__box.is-error:focus,.base-radio__box.is-error:focus-visible{box-shadow:0 0 0 4px #ff4a6b26;border-color:#ff4a6b!important}.base-radio__box{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:5px;display:flex}.base-radio__circle{background:0 0;border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:all .3s ease-out;display:block;transform:scale(0)}.base-breadcrumbs{white-space:nowrap;max-width:100%;overflow:auto scroll}.base-breadcrumbs__list{align-items:center;list-style:none;display:flex}.base-breadcrumbs__item{align-items:center;display:flex}.base-breadcrumbs__item a,.base-breadcrumbs__item span{margin-top:0;padding-top:0}.base-breadcrumbs__item a:hover{color:#4f46e5}.base-breadcrumbs__item-separator{margin:0 8px}.base-pagination{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.base-pagination p{padding-top:0;transition:all .3s ease-out;cursor:pointer!important}.base-pagination p:hover{color:#4f46e5}.base-pagination .btn-icon.is-active p{font-weight:700;color:#6366f1!important}.base-pagination__desktop{align-items:center;gap:5px;display:flex}@media (width<=640px){.base-pagination__desktop{display:none}}.base-pagination__mobile{display:none}@media (width<=640px){.base-pagination__mobile{align-items:center;display:flex}}.empty-state{border:1px solid #0b0d11;border-radius:0;padding:10px}.empty-state__text p,.empty-state__text h3{text-align:center}.empty-state__actions{justify-content:center;display:flex}.empty-state--secondary{border-color:#eceef2}.empty-state--primary{border-color:#6366f1}.empty-state--primary p,.empty-state--primary h3,.empty-state--primary a{color:#6366f1}.error-state{border:1px dotted #ff4a6b;border-radius:0;padding:10px}.error-state__action{justify-content:center;display:flex}.base-skeleton{opacity:.4;background:#0b0d11;border-radius:0}.base-skeleton__circle{border-radius:50%;width:50px;height:50px}.base-skeleton__text{width:100%;height:20px}.base-skeleton__rect{width:100%;height:100px}.base-toast-container{z-index:99999;pointer-events:none;position:fixed;top:20px;right:20px}.base-toast{pointer-events:auto;background:#0b0d11;border:1px solid #0b0d11;border-radius:0;width:300px;margin-top:5px;padding:10px;animation:.25s fadeIn;position:relative;overflow:hidden}.base-toast__wrapper{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.base-toast__wrapper p{margin:0;padding:0}.base-toast__progress{pointer-events:none;background:#ffffffb3;height:4px;transition:width .1s linear;position:absolute;bottom:0;left:0}.base-toast--primary{border-color:#6366f1}.base-toast--secondary{border-color:#eceef2}.base-toast--success{border-color:#10b981}.base-toast--warning{border-color:#f59e0b}.base-toast--danger{border-color:#ff4a6b}.toast-enter-active,.toast-leave-active{transition:all .25s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(30px)}.base-modal-backdrop{z-index:10000;pointer-events:auto;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.base-modal{background:#171b24;border:1px solid #0b0d11;border-radius:0;width:100%;max-width:450px;padding:24px}.base-modal__header{margin-bottom:16px}.base-modal__content{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.base-modal__footer{justify-content:flex-end;gap:12px;display:flex}@media (width<=500px){.base-modal{max-width:100%}}.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .25s}.modal-fade-enter-active .base-modal,.modal-fade-leave-active .base-modal{transition:transform .25s}.modal-fade-enter-from,.modal-fade-leave-to{opacity:0}.modal-fade-enter-from .base-modal,.modal-fade-leave-to .base-modal{transform:translateY(-20px)}.base-modal--primary{border-color:#6366f1}.base-modal--secondary{border-color:#eceef2}.base-modal--success{border-color:#10b981}.base-modal--warning{border-color:#f59e0b}.base-modal--danger{border-color:#ff4a6b}.txt--primary{color:#6366f1}.txt--danger{color:#ff4a6b}.txt--warning{color:#f59e0b}.txt--success{color:#10b981}.txt--secondary{color:#eceef2}.txt--muted{color:#8a93a6}.txt--left{text-align:left}.txt--center{text-align:center}.txt--right{text-align:right}
|
|
1
|
+
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--ui-text:#eceef2;--ui-text-muted:#8a93a6;--ui-bg:#0b0d11;--ui-bg-soft:#12151c;--ui-bg-card:#171b24;--ui-bg-code:#1e2330;--ui-primary:#6366f1;--ui-primary-hover:#4f46e5;--ui-danger:#ff4a6b;--ui-success:#10b981;--ui-warning:#f59e0b;--ui-font-heading:26px;--ui-font-subheading:19px;--ui-font-body:16px;--ui-font-heading-md:24px;--ui-font-subheading-md:18px;--ui-font-body-md:15px;--ui-font-heading-sm:20px;--ui-font-subheading-sm:16px;--ui-font-body-sm:14px;--ui-border-color:#eceef214;--ui-border-width:1px;--ui-border-style:solid;--ui-border-radius:0px;--ui-space-content-sm:6px;--ui-space-content-md:10px;--ui-space-content-lg:14px;--ui-space-container-sm:16px;--ui-space-container-md:24px;--ui-space-container-lg:32px;--ui-transition:all .3s ease-out;--ui-opacity:.4}*,:before,:after{box-sizing:border-box}:focus,:active,a:focus,a:active{outline:none}nav,footer,aside{display:block}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:#232222;height:100%;margin:0;padding:0;font-family:Inter,sans-serif;font-size:100%;line-height:1.5}input,textarea,button,select{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer;background:0 0;border:none}button::-moz-focus-inner{border:0;padding:0}a,a:visited{cursor:pointer;text-decoration:none}button,a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:400}ul{padding-inline-start:0}ul li{margin:0;list-style:none}img{max-width:100%;display:block}.heading{font-size:var(--ui-font-heading);font-weight:600;line-height:34px}.subheading{font-size:var(--ui-font-subheading);font-weight:500;line-height:28px}.body-text{font-size:var(--ui-font-body);font-weight:400;line-height:24px}@media (width<=1024px){.heading{font-size:var(--ui-font-heading-md);line-height:30px}.subheading{font-size:var(--ui-font-subheading-md);line-height:24px}.body-text{font-size:var(--ui-font-body-md);line-height:22px}}@media (width<=767px){.heading{font-size:var(--ui-font-heading-sm);line-height:26px}.subheading{font-size:var(--ui-font-subheading-sm);line-height:22px}.body-text{font-size:var(--ui-font-body-sm);line-height:20px}}a{transition:var(--ui-transition);text-underline-offset:4px;display:block}a:hover{opacity:.8}a:active{opacity:.6;filter:brightness(.9)}.shimmer{position:relative;overflow:hidden}.shimmer:before{content:"";background:linear-gradient(to right, transparent 0%, var(--ui-text-muted) 50%, transparent 100%);width:150px;height:100%;animation:2.6s infinite loading;position:absolute;top:0;left:-150px}@keyframes loading{0%{left:-150px}to{left:100%}}.fade-enter-active,.fade-leave-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to{opacity:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;transition:var(--ui-transition);border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:500;line-height:1.2;display:inline-flex}.btn--sm{--spinner-size:14px;height:38px;padding:3px 14px;font-size:14px}.btn--md{--spinner-size:18px;height:44px;padding:3px 16px;font-size:15px}.btn--lg{--spinner-size:22px;height:50px;padding:3px 18px;font-size:16px}.btn--primary{border:var(--ui-border-width) var(--ui-border-style) var(--ui-primary);background:var(--ui-bg-card);color:var(--ui-text);--spinner-color:var(--ui-primary);border-radius:10px}.btn--primary:hover:not(:disabled):not(.is-loading){background:var(--ui-primary)}.btn--primary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--primary:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--primary.is-loading{cursor:wait}.btn--secondary{border:var(--ui-border-width) var(--ui-border-style) var(--ui-text-muted);background:var(--ui-bg-card);color:var(--ui-text);--spinner-color:var(--ui-text-muted);border-radius:10px}.btn--secondary:hover:not(:disabled):not(.is-loading){background:var(--ui-text-muted)}.btn--secondary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--secondary:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--secondary.is-loading{cursor:wait}.btn--success{border:var(--ui-border-width) var(--ui-border-style) var(--ui-success);background:var(--ui-bg-card);color:var(--ui-text);--spinner-color:var(--ui-success);border-radius:10px}.btn--success:hover:not(:disabled):not(.is-loading){background:var(--ui-success)}.btn--success:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--success:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--success.is-loading{cursor:wait}.btn--warning{border:var(--ui-border-width) var(--ui-border-style) var(--ui-warning);background:var(--ui-bg-card);color:var(--ui-text);--spinner-color:var(--ui-warning);border-radius:10px}.btn--warning:hover:not(:disabled):not(.is-loading){background:var(--ui-warning)}.btn--warning:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--warning:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--warning.is-loading{cursor:wait}.btn--danger{border:var(--ui-border-width) var(--ui-border-style) var(--ui-danger);background:var(--ui-bg-card);color:var(--ui-text);--spinner-color:var(--ui-danger);border-radius:10px}.btn--danger:hover:not(:disabled):not(.is-loading){background:var(--ui-danger)}.btn--danger:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--danger:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--danger.is-loading{cursor:wait}.btn--ghost{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);background:var(--ui-bg-card);color:var(--ui-text-muted);--spinner-color:var(--ui-bg);border-radius:10px}.btn--ghost:hover:not(:disabled):not(.is-loading){filter:brightness(1.1)}.btn--ghost:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.btn--ghost:disabled{cursor:not-allowed;opacity:var(--ui-opacity);transform:none}.btn--ghost.is-loading{cursor:wait}.btn-spinner{width:var(--spinner-size,18px);height:var(--spinner-size,18px);border:2px solid var(--spinner-color,currentColor);border-right-color:#0000;border-radius:50%;flex-shrink:0;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-icon{cursor:pointer;transition:var(--ui-transition);background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.btn-icon svg{transition:var(--ui-transition)}.btn-icon--sm{width:32px;min-width:32px;height:32px;min-height:32px}.btn-icon--sm svg{width:18px;height:18px}.btn-icon--sm{--spinner-size:14px}.btn-icon--md{width:40px;min-width:40px;height:40px;min-height:40px}.btn-icon--md svg{width:22px;height:22px}.btn-icon--md{--spinner-size:18px}.btn-icon--lg{width:48px;min-width:48px;height:48px;min-height:48px}.btn-icon--lg svg{width:26px;height:26px}.btn-icon--lg{--spinner-size:22px}.btn-icon--primary{color:var(--ui-primary);background:0 0}.btn-icon--primary svg{fill:currentColor}.btn-icon--primary:hover:not(:disabled):not(.is-loading){color:var(--ui-primary-hover)}.btn-icon--primary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--primary:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--primary.is-loading{cursor:wait}.btn-icon--secondary{color:var(--ui-text);background:0 0}.btn-icon--secondary svg{fill:currentColor}.btn-icon--secondary:hover:not(:disabled):not(.is-loading){color:var(--ui-primary-hover)}.btn-icon--secondary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--secondary:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--secondary.is-loading{cursor:wait}.btn-icon--success{color:var(--ui-success);background:0 0}.btn-icon--success svg{fill:currentColor}.btn-icon--success:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--success:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--success:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--success.is-loading{cursor:wait}.btn-icon--warning{color:var(--ui-warning);background:0 0}.btn-icon--warning svg{fill:currentColor}.btn-icon--warning:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--warning:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--warning:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--warning.is-loading{cursor:wait}.btn-icon--danger{color:var(--ui-danger);background:0 0}.btn-icon--danger svg{fill:currentColor}.btn-icon--danger:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.btn-icon--danger:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--danger:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--danger.is-loading{cursor:wait}.btn-icon--ghost{color:var(--ui-text-muted);background:0 0}.btn-icon--ghost svg{fill:currentColor}.btn-icon--ghost:hover:not(:disabled):not(.is-loading){color:var(--ui-text)}.btn-icon--ghost:active:not(:disabled):not(.is-loading){transform:scale(.92)}.btn-icon--ghost:disabled{opacity:var(--ui-opacity);cursor:not-allowed;transform:none}.btn-icon--ghost.is-loading{cursor:wait}.form-error{color:var(--ui-danger);font-size:13px}.form-hint,.form-label{color:var(--ui-text-muted);font-size:13px}.form-label--top{margin:0 0 10px}.form-label--side{margin:10px}.form__item{background:var(--ui-bg-card);width:100%;transition:var(--ui-transition);padding:var(--ui-space-content-lg);margin:var(--ui-space-content-lg) 0px}@media (width<=1024px){.form__item{padding:var(--ui-space-content-md);margin:var(--ui-space-content-md) 0px}}@media (width<=768px){.form__item{padding:var(--ui-space-content-sm);margin:var(--ui-space-content-sm) 0px}}.form__actions{background:var(--ui-bg-card);width:100%;transition:var(--ui-transition);padding:var(--ui-space-content-lg);margin:var(--ui-space-content-lg) 0px}@media (width<=1024px){.form__actions{padding:var(--ui-space-content-md);margin:var(--ui-space-content-md) 0px}}@media (width<=768px){.form__actions{padding:var(--ui-space-content-sm);margin:var(--ui-space-content-sm) 0px}}.form__actions{flex-direction:row;justify-content:start;align-items:center;gap:10px;display:flex}.base-input{flex-direction:column;display:flex}.base-input__control{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-soft);padding:var(--ui-space-content-md);transition:var(--ui-transition);color:var(--ui-text);margin-top:5px}.base-input__control:focus,.base-input__control:focus-visible{border-color:var(--ui-primary-hover);box-shadow:0 0 0 4px rgba(var(--ui-primary), .15);outline:none}.base-input__control:disabled{opacity:var(--ui-opacity);cursor:not-allowed}.base-input__control.is-error{border-color:var(--ui-danger)}.base-input__control.is-error:focus,.base-input__control.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--ui-danger), .15);border-color:var(--ui-danger)!important}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(98%)sepia(1%)saturate(678%)hue-rotate(181deg)brightness(98%)contrast(94%)}.base-select{flex-direction:column;display:flex}.base-select__wrapper{position:relative}.base-select__field{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-soft);padding:var(--ui-space-content-md);transition:var(--ui-transition);color:var(--ui-text);margin-top:5px}.base-select__field:focus,.base-select__field:focus-visible{border-color:var(--ui-primary-hover);box-shadow:0 0 0 4px rgba(var(--ui-primary), .15);outline:none}.base-select__field:disabled{opacity:var(--ui-opacity);cursor:not-allowed}.base-select__field.is-error{border-color:var(--ui-danger)}.base-select__field.is-error:focus,.base-select__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--ui-danger), .15);border-color:var(--ui-danger)!important}.base-select__field{appearance:none;cursor:pointer;border-radius:0;width:100%}.base-select__icon{pointer-events:none;color:var(--ui-text-muted);font-size:14px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.base-textarea{flex-direction:column;display:flex}.base-textarea__field{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-soft);padding:var(--ui-space-content-md);transition:var(--ui-transition);color:var(--ui-text);margin-top:5px}.base-textarea__field:focus,.base-textarea__field:focus-visible{border-color:var(--ui-primary-hover);box-shadow:0 0 0 4px rgba(var(--ui-primary), .15);outline:none}.base-textarea__field:disabled{opacity:var(--ui-opacity);cursor:not-allowed}.base-textarea__field.is-error{border-color:var(--ui-danger)}.base-textarea__field.is-error:focus,.base-textarea__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--ui-danger), .15);border-color:var(--ui-danger)!important}.base-textarea__field{resize:vertical;min-height:120px}.base-textarea__field::placeholder{color:var(--ui-text-muted)}.base-checkbox{position:relative}.base-checkbox__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-checkbox__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex}.base-checkbox__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-checkbox__field:focus-visible+.base-checkbox__box{border-color:var(--ui-primary-hover)}.base-checkbox__field:checked+.base-checkbox__box{border-color:var(--ui-primary)}.base-checkbox__field:checked+.base-checkbox__box .base-checkbox__check{transform:scale(1)}.base-checkbox__field:disabled+.base-checkbox__box{opacity:var(--ui-opacity);cursor:not-allowed}.base-checkbox__box{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-soft);padding:var(--ui-space-content-md);transition:var(--ui-transition);color:var(--ui-text);margin-top:5px}.base-checkbox__box:focus,.base-checkbox__box:focus-visible{border-color:var(--ui-primary-hover);box-shadow:0 0 0 4px rgba(var(--ui-primary), .15);outline:none}.base-checkbox__box:disabled{opacity:var(--ui-opacity);cursor:not-allowed}.base-checkbox__box.is-error{border-color:var(--ui-danger)}.base-checkbox__box.is-error:focus,.base-checkbox__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--ui-danger), .15);border-color:var(--ui-danger)!important}.base-checkbox__box{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:4px;display:flex}.base-checkbox__check{color:var(--ui-text);transition:var(--ui-transition);border-radius:50%;transform:scale(0)}.base-radio{position:relative}.base-radio__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.base-radio__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex;position:relative}.base-radio__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.base-radio__field:checked+.base-radio__box{border-color:var(--ui-primary)}.base-radio__field:checked+.base-radio__box .base-radio__circle{background:var(--ui-text);transform:scale(1)}.base-radio__field:disabled+.base-radio__box{opacity:var(--ui-opacity);cursor:not-allowed}.base-radio__box{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-soft);padding:var(--ui-space-content-md);transition:var(--ui-transition);color:var(--ui-text);margin-top:5px}.base-radio__box:focus,.base-radio__box:focus-visible{border-color:var(--ui-primary-hover);box-shadow:0 0 0 4px rgba(var(--ui-primary), .15);outline:none}.base-radio__box:disabled{opacity:var(--ui-opacity);cursor:not-allowed}.base-radio__box.is-error{border-color:var(--ui-danger)}.base-radio__box.is-error:focus,.base-radio__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--ui-danger), .15);border-color:var(--ui-danger)!important}.base-radio__box{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:5px;display:flex}.base-radio__circle{transition:var(--ui-transition);background:0 0;border-radius:50%;flex-shrink:0;width:10px;height:10px;display:block;transform:scale(0)}.base-breadcrumbs{white-space:nowrap;max-width:100%;overflow:auto scroll}.base-breadcrumbs__list{align-items:center;list-style:none;display:flex}.base-breadcrumbs__item{align-items:center;display:flex}.base-breadcrumbs__item a,.base-breadcrumbs__item span{margin-top:0;padding-top:0}.base-breadcrumbs__item a:hover{color:var(--ui-primary-hover)}.base-breadcrumbs__item-separator{margin:0 8px}.base-pagination{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.base-pagination p{transition:var(--ui-transition);padding-top:0;cursor:pointer!important}.base-pagination p:hover{color:var(--ui-primary-hover)}.base-pagination .btn-icon.is-active p{font-weight:700;color:var(--ui-primary)!important}.base-pagination__desktop{align-items:center;gap:5px;display:flex}@media (width<=640px){.base-pagination__desktop{display:none}}.base-pagination__mobile{display:none}@media (width<=640px){.base-pagination__mobile{align-items:center;display:flex}}.empty-state{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);padding:10px}.empty-state__text p,.empty-state__text h3{text-align:center}.empty-state__actions{justify-content:center;display:flex}.empty-state--secondary{border-color:var(--ui-text)}.empty-state--primary{border-color:var(--ui-primary)}.empty-state--primary p,.empty-state--primary h3,.empty-state--primary a{color:var(--ui-primary)}.error-state{border:var(--ui-border-width) dotted var(--ui-danger);border-radius:var(--ui-border-radius);padding:10px}.error-state__action{justify-content:center;display:flex}.base-skeleton{background:var(--ui-bg);opacity:var(--ui-opacity);border-radius:var(--ui-border-radius)}.base-skeleton__circle{border-radius:50%;width:50px;height:50px}.base-skeleton__text{width:100%;height:20px}.base-skeleton__rect{width:100%;height:100px}.base-toast-container{z-index:99999;pointer-events:none;position:fixed;top:20px;right:20px}.base-toast{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg);pointer-events:auto;width:300px;margin-top:5px;padding:10px;animation:.25s fadeIn;position:relative;overflow:hidden}.base-toast__wrapper{flex-direction:row;justify-content:space-between;align-items:center;display:flex}.base-toast__wrapper p{margin:0;padding:0}.base-toast__progress{pointer-events:none;background:#ffffffb3;height:4px;transition:width .1s linear;position:absolute;bottom:0;left:0}.base-toast--primary{border-color:var(--ui-primary)}.base-toast--secondary{border-color:var(--ui-text)}.base-toast--success{border-color:var(--ui-success)}.base-toast--warning{border-color:var(--ui-warning)}.base-toast--danger{border-color:var(--ui-danger)}.toast-enter-active,.toast-leave-active{transition:all .25s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(30px)}.base-modal-backdrop{z-index:10000;pointer-events:auto;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.base-modal{border:var(--ui-border-width) var(--ui-border-style) var(--ui-bg);border-radius:var(--ui-border-radius);background:var(--ui-bg-card);width:100%;max-width:450px;padding:24px}.base-modal__header{margin-bottom:16px}.base-modal__content{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.base-modal__footer{justify-content:flex-end;gap:12px;display:flex}@media (width<=500px){.base-modal{max-width:100%}}.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .25s}.modal-fade-enter-active .base-modal,.modal-fade-leave-active .base-modal{transition:transform .25s}.modal-fade-enter-from,.modal-fade-leave-to{opacity:0}.modal-fade-enter-from .base-modal,.modal-fade-leave-to .base-modal{transform:translateY(-20px)}.base-modal--primary{border-color:var(--ui-primary)}.base-modal--secondary{border-color:var(--ui-text)}.base-modal--success{border-color:var(--ui-success)}.base-modal--warning{border-color:var(--ui-warning)}.base-modal--danger{border-color:var(--ui-danger)}.txt--primary{color:var(--ui-primary)}.txt--danger{color:var(--ui-danger)}.txt--warning{color:var(--ui-warning)}.txt--success{color:var(--ui-success)}.txt--secondary{color:var(--ui-text)}.txt--muted{color:var(--ui-text-muted)}.txt--left{text-align:left}.txt--center{text-align:center}.txt--right{text-align:right}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modular-ui-kit-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"vue",
|
|
6
|
+
"vue3",
|
|
7
|
+
"vue-components",
|
|
8
|
+
"ui-kit",
|
|
9
|
+
"component-library",
|
|
10
|
+
"typescript",
|
|
11
|
+
"pinia",
|
|
12
|
+
"sass",
|
|
13
|
+
"design-system",
|
|
14
|
+
"frontend",
|
|
15
|
+
"responsive-ui"
|
|
16
|
+
],
|
|
17
|
+
"homepage": "https://github.com/eugenia-vitinschii/modular-ui-kit-vue/tree/build/npm-package#readme",
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "git+https://github.com/eugenia-vitinschii/modular-ui-kit-vue.git"
|
|
21
|
+
},
|
|
22
|
+
"bugs": {
|
|
23
|
+
"url": "https://github.com/eugenia-vitinschii/modular-ui-kit-vue/issues"
|
|
24
|
+
},
|
|
4
25
|
"author": "vitinschii.eugenia@gmail.com",
|
|
5
26
|
"description": "A modular, lightweight UI kit built with Vue 3, Pinia, and TypeScript.",
|
|
6
27
|
"type": "module",
|