@grandbazar/ui-baza 1.0.2 → 1.0.3
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 +17 -12
- package/dist/index.cjs +55 -4
- package/dist/index.d.ts +25 -2
- package/dist/index.js +54 -5
- package/dist/style.css +186 -20
- package/package.json +23 -14
package/README.md
CHANGED
|
@@ -35,7 +35,7 @@ function App() {
|
|
|
35
35
|
**Important:** UI Baza uses CSS cascade layers for proper style isolation. Import the styles with the lowest priority to allow your local variables to override library defaults:
|
|
36
36
|
|
|
37
37
|
```css
|
|
38
|
-
@layer ui_baza_reset, ui_baza_tokens, base, theme, components, utilities;
|
|
38
|
+
@layer ui_baza_reset, ui_baza_tokens, base, theme, ui_baza_components, components, utilities;
|
|
39
39
|
|
|
40
40
|
@import 'ui-baza/css';
|
|
41
41
|
```
|
|
@@ -98,16 +98,21 @@ npm run dev
|
|
|
98
98
|
|
|
99
99
|
### Available Scripts
|
|
100
100
|
|
|
101
|
-
- `npm run dev` -
|
|
102
|
-
- `npm run
|
|
103
|
-
- `npm run
|
|
104
|
-
- `npm run
|
|
105
|
-
- `npm run
|
|
106
|
-
- `npm run
|
|
107
|
-
- `npm run
|
|
108
|
-
- `npm run
|
|
109
|
-
- `npm run
|
|
110
|
-
- `npm run
|
|
101
|
+
- `npm run dev` - Starts the local Storybook server, use this to develop and preview your components.
|
|
102
|
+
- `npm run start` - Start Storybook server from built static files.
|
|
103
|
+
- `npm run test` - Runs all your tests with vitest.
|
|
104
|
+
- `npm run test:watch` - Runs tests in watch mode.
|
|
105
|
+
- `npm run build:lib` - Builds your component library with Vite.
|
|
106
|
+
- `npm run build:storybook` - Builds your Storybook as a static web application.
|
|
107
|
+
- `npm run lint` - Run ESLint.
|
|
108
|
+
- `npm run format` - Format code with Prettier.
|
|
109
|
+
- `npm run prepare` - Setup Husky git hooks.
|
|
110
|
+
- `npm run version:patch` - Bump patch version.
|
|
111
|
+
- `npm run version:minor` - Bump minor version.
|
|
112
|
+
- `npm run version:major` - Bump major version.
|
|
113
|
+
- `npm run prepare:publish` - Build the library for publishing.
|
|
114
|
+
- `npm run publish:public` - Publish to npm with public access.
|
|
115
|
+
- `npm run release` - Complete release workflow: build, commit, push, and publish.
|
|
111
116
|
|
|
112
117
|
### Building
|
|
113
118
|
|
|
@@ -119,7 +124,7 @@ npm run build:lib
|
|
|
119
124
|
|
|
120
125
|
Currently available components:
|
|
121
126
|
|
|
122
|
-
- **Button** - Flexible button component with various styles and states
|
|
127
|
+
- **Button** - Flexible button component with various styles and states.
|
|
123
128
|
|
|
124
129
|
More components coming soon! 🎉
|
|
125
130
|
|
package/dist/index.cjs
CHANGED
|
@@ -8,13 +8,64 @@ function classNames(...classes) {
|
|
|
8
8
|
return classes.filter(Boolean).join(" ");
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
const button = "
|
|
11
|
+
const button = "_button_i0j1o_2";
|
|
12
|
+
const accent = "_accent_i0j1o_10";
|
|
13
|
+
const primary = "_primary_i0j1o_11";
|
|
14
|
+
const secondary = "_secondary_i0j1o_29";
|
|
15
|
+
const tertiary = "_tertiary_i0j1o_47";
|
|
16
|
+
const neutral = "_neutral_i0j1o_66";
|
|
17
|
+
const lg = "_lg_i0j1o_122";
|
|
18
|
+
const md = "_md_i0j1o_130";
|
|
19
|
+
const sm = "_sm_i0j1o_138";
|
|
12
20
|
const styles = {
|
|
13
|
-
button: button
|
|
21
|
+
button: button,
|
|
22
|
+
accent: accent,
|
|
23
|
+
primary: primary,
|
|
24
|
+
secondary: secondary,
|
|
25
|
+
tertiary: tertiary,
|
|
26
|
+
neutral: neutral,
|
|
27
|
+
lg: lg,
|
|
28
|
+
md: md,
|
|
29
|
+
sm: sm
|
|
14
30
|
};
|
|
15
31
|
|
|
16
|
-
function Button({
|
|
17
|
-
|
|
32
|
+
function Button({
|
|
33
|
+
children,
|
|
34
|
+
className,
|
|
35
|
+
appearance = "accent",
|
|
36
|
+
size = "lg",
|
|
37
|
+
mode = "primary",
|
|
38
|
+
as = "button",
|
|
39
|
+
...props
|
|
40
|
+
}) {
|
|
41
|
+
const commonClassNames = classNames(styles.button, styles[appearance], styles[size], styles[mode], className);
|
|
42
|
+
return as === "button" ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: commonClassNames, ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: commonClassNames, ...props, children });
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function IconChevron(props) {
|
|
46
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
+
"path",
|
|
48
|
+
{
|
|
49
|
+
fillRule: "evenodd",
|
|
50
|
+
clipRule: "evenodd",
|
|
51
|
+
d: "M9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289Z",
|
|
52
|
+
fill: "currentColor"
|
|
53
|
+
}
|
|
54
|
+
) });
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function IconPlus(props) {
|
|
58
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
+
"path",
|
|
60
|
+
{
|
|
61
|
+
fillRule: "evenodd",
|
|
62
|
+
clipRule: "evenodd",
|
|
63
|
+
d: "M12 3C12.5523 3 13 3.44772 13 4V11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H13V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H11V4C11 3.44772 11.4477 3 12 3Z",
|
|
64
|
+
fill: "currentColor"
|
|
65
|
+
}
|
|
66
|
+
) });
|
|
18
67
|
}
|
|
19
68
|
|
|
20
69
|
exports.Button = Button;
|
|
70
|
+
exports.IconChevron = IconChevron;
|
|
71
|
+
exports.IconPlus = IconPlus;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,30 @@
|
|
|
1
1
|
import { JSX } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
export declare function Button({ children, className, ...props }: TButtonProps): JSX.Element;
|
|
3
|
+
export declare function Button({ children, className, appearance, size, mode, as, ...props }: TButtonProps): JSX.Element;
|
|
4
4
|
|
|
5
|
-
declare
|
|
5
|
+
declare const BUTTON_APPEARANCES: readonly ["accent", "neutral"];
|
|
6
|
+
|
|
7
|
+
declare const BUTTON_MODES: readonly ["primary", "secondary", "tertiary"];
|
|
8
|
+
|
|
9
|
+
declare const BUTTON_SIZES: readonly ["lg", "md", "sm"];
|
|
10
|
+
|
|
11
|
+
export declare function IconChevron(props: TSvgIconProps): JSX.Element;
|
|
12
|
+
|
|
13
|
+
export declare function IconPlus(props: TSvgIconProps): JSX.Element;
|
|
14
|
+
|
|
15
|
+
declare type TArrayElement<T extends readonly unknown[]> = T[number];
|
|
16
|
+
|
|
17
|
+
declare type TButtonBaseProps<T, K, R> = T & {
|
|
18
|
+
as?: K;
|
|
19
|
+
ref?: R;
|
|
20
|
+
} & {
|
|
21
|
+
appearance?: TArrayElement<typeof BUTTON_APPEARANCES>;
|
|
22
|
+
size?: TArrayElement<typeof BUTTON_SIZES>;
|
|
23
|
+
mode?: TArrayElement<typeof BUTTON_MODES>;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare type TButtonProps = TButtonBaseProps<React.ButtonHTMLAttributes<HTMLButtonElement>, 'button', React.Ref<HTMLButtonElement>> | TButtonBaseProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'a', React.Ref<HTMLAnchorElement>>;
|
|
27
|
+
|
|
28
|
+
declare type TSvgIconProps = React.SVGProps<SVGSVGElement>;
|
|
6
29
|
|
|
7
30
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -4,13 +4,62 @@ function classNames(...classes) {
|
|
|
4
4
|
return classes.filter(Boolean).join(" ");
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
const button = "
|
|
7
|
+
const button = "_button_i0j1o_2";
|
|
8
|
+
const accent = "_accent_i0j1o_10";
|
|
9
|
+
const primary = "_primary_i0j1o_11";
|
|
10
|
+
const secondary = "_secondary_i0j1o_29";
|
|
11
|
+
const tertiary = "_tertiary_i0j1o_47";
|
|
12
|
+
const neutral = "_neutral_i0j1o_66";
|
|
13
|
+
const lg = "_lg_i0j1o_122";
|
|
14
|
+
const md = "_md_i0j1o_130";
|
|
15
|
+
const sm = "_sm_i0j1o_138";
|
|
8
16
|
const styles = {
|
|
9
|
-
button: button
|
|
17
|
+
button: button,
|
|
18
|
+
accent: accent,
|
|
19
|
+
primary: primary,
|
|
20
|
+
secondary: secondary,
|
|
21
|
+
tertiary: tertiary,
|
|
22
|
+
neutral: neutral,
|
|
23
|
+
lg: lg,
|
|
24
|
+
md: md,
|
|
25
|
+
sm: sm
|
|
10
26
|
};
|
|
11
27
|
|
|
12
|
-
function Button({
|
|
13
|
-
|
|
28
|
+
function Button({
|
|
29
|
+
children,
|
|
30
|
+
className,
|
|
31
|
+
appearance = "accent",
|
|
32
|
+
size = "lg",
|
|
33
|
+
mode = "primary",
|
|
34
|
+
as = "button",
|
|
35
|
+
...props
|
|
36
|
+
}) {
|
|
37
|
+
const commonClassNames = classNames(styles.button, styles[appearance], styles[size], styles[mode], className);
|
|
38
|
+
return as === "button" ? /* @__PURE__ */ jsx("button", { className: commonClassNames, ...props, children }) : /* @__PURE__ */ jsx("a", { className: commonClassNames, ...props, children });
|
|
14
39
|
}
|
|
15
40
|
|
|
16
|
-
|
|
41
|
+
function IconChevron(props) {
|
|
42
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
|
|
43
|
+
"path",
|
|
44
|
+
{
|
|
45
|
+
fillRule: "evenodd",
|
|
46
|
+
clipRule: "evenodd",
|
|
47
|
+
d: "M9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289Z",
|
|
48
|
+
fill: "currentColor"
|
|
49
|
+
}
|
|
50
|
+
) });
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function IconPlus(props) {
|
|
54
|
+
return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
|
|
55
|
+
"path",
|
|
56
|
+
{
|
|
57
|
+
fillRule: "evenodd",
|
|
58
|
+
clipRule: "evenodd",
|
|
59
|
+
d: "M12 3C12.5523 3 13 3.44772 13 4V11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H13V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H11V4C11 3.44772 11.4477 3 12 3Z",
|
|
60
|
+
fill: "currentColor"
|
|
61
|
+
}
|
|
62
|
+
) });
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export { Button, IconChevron, IconPlus };
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer ui_baza_reset, ui_baza_tokens;
|
|
1
|
+
@layer ui_baza_reset, ui_baza_tokens, ui_baza_components;
|
|
2
2
|
|
|
3
3
|
@layer ui_baza_reset{
|
|
4
4
|
|
|
@@ -140,7 +140,6 @@ button {
|
|
|
140
140
|
background: none;
|
|
141
141
|
color: inherit;
|
|
142
142
|
font: inherit;
|
|
143
|
-
cursor: pointer;
|
|
144
143
|
}
|
|
145
144
|
|
|
146
145
|
input,
|
|
@@ -174,15 +173,26 @@ select {
|
|
|
174
173
|
@layer ui_baza_tokens {
|
|
175
174
|
:root {
|
|
176
175
|
--color-white: #ffffff;
|
|
176
|
+
--color-transparent: transparent;
|
|
177
177
|
|
|
178
178
|
--color-neutral: #111217;
|
|
179
|
+
--color-neutral-920: color-mix(in srgb, var(--color-neutral) 92.1%, var(--color-white) 7.9%);
|
|
180
|
+
--color-neutral-880: color-mix(in srgb, var(--color-neutral) 87.8%, var(--color-white) 12.2%);
|
|
179
181
|
--color-neutral-340: color-mix(in srgb, var(--color-neutral) 34%, var(--color-white) 66%);
|
|
180
|
-
|
|
182
|
+
|
|
183
|
+
--color-neutral-alpha-40: color-mix(in srgb, var(--color-neutral) 4%, var(--color-transparent));
|
|
184
|
+
--color-neutral-alpha-60: color-mix(in srgb, var(--color-neutral) 6%, var(--color-transparent));
|
|
185
|
+
--color-neutral-alpha-120: color-mix(in srgb, var(--color-neutral) 12%, var(--color-transparent));
|
|
186
|
+
--color-neutral-alpha-140: color-mix(in srgb, var(--color-neutral) 14%, var(--color-transparent));
|
|
181
187
|
|
|
182
188
|
--color-accent: #195eff;
|
|
183
189
|
--color-accent-900: color-mix(in srgb, var(--color-accent) 94.8%, var(--color-white) 5.2%);
|
|
184
190
|
--color-accent-800: color-mix(in srgb, var(--color-accent) 90%, var(--color-white) 10%);
|
|
185
191
|
|
|
192
|
+
--color-accent-alpha-100: color-mix(in srgb, var(--color-accent) 10%, var(--color-transparent));
|
|
193
|
+
--color-accent-alpha-150: color-mix(in srgb, var(--color-accent) 15%, var(--color-transparent));
|
|
194
|
+
--color-accent-alpha-200: color-mix(in srgb, var(--color-accent) 20%, var(--color-transparent));
|
|
195
|
+
|
|
186
196
|
--radius-xs: 4px;
|
|
187
197
|
--radius-sm: 6px;
|
|
188
198
|
--radius-md: 8px;
|
|
@@ -205,25 +215,181 @@ select {
|
|
|
205
215
|
--radius-image-xs: 10px;
|
|
206
216
|
--radius-image-2xs: 8px;
|
|
207
217
|
--radius-image-3xs: 6px;
|
|
218
|
+
|
|
219
|
+
--size-xs: 12px;
|
|
220
|
+
--size-sm: 14px;
|
|
221
|
+
--size-md: 16px;
|
|
222
|
+
--size-lg: 20px;
|
|
223
|
+
--size-xl: 24px;
|
|
224
|
+
--size-2xl: 32px;
|
|
225
|
+
|
|
226
|
+
--line-height-xs: 14px;
|
|
227
|
+
--line-height-sm: 16px;
|
|
228
|
+
--line-height-md: 20px;
|
|
229
|
+
--line-height-lg: 24px;
|
|
230
|
+
--line-height-xl: 32px;
|
|
231
|
+
--line-height-2xl: 36px;
|
|
232
|
+
|
|
233
|
+
--space-2xs: 2px;
|
|
234
|
+
--space-xs: 4px;
|
|
235
|
+
--space-sm: 6px;
|
|
236
|
+
--space-md: 8px;
|
|
237
|
+
--space-lg: 10px;
|
|
238
|
+
--space-xl: 12px;
|
|
239
|
+
--space-2xl: 16px;
|
|
240
|
+
--space-3xl: 20px;
|
|
241
|
+
--space-4xl: 24px;
|
|
242
|
+
--space-5xl: 28px;
|
|
243
|
+
--space-6xl: 32px;
|
|
244
|
+
--space-7xl: 40px;
|
|
245
|
+
|
|
246
|
+
--transition-timing-function-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
247
|
+
--transition-duration-default: 0.15s;
|
|
208
248
|
}
|
|
209
249
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
250
|
+
@layer ui_baza_components {
|
|
251
|
+
._button_i0j1o_2 {
|
|
252
|
+
display: inline-flex;
|
|
253
|
+
align-items: center;
|
|
254
|
+
justify-content: center;
|
|
255
|
+
gap: var(--space-2xl);
|
|
256
|
+
cursor: pointer;
|
|
257
|
+
transition: all var(--transition-duration-default) var(--transition-timing-function-ease-in-out);
|
|
258
|
+
|
|
259
|
+
&._accent_i0j1o_10 {
|
|
260
|
+
&._primary_i0j1o_11 {
|
|
261
|
+
background-color: var(--color-accent);
|
|
262
|
+
color: var(--color-white);
|
|
263
|
+
|
|
264
|
+
&:hover {
|
|
265
|
+
background-color: var(--color-accent-900);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&:active {
|
|
269
|
+
background-color: var(--color-accent-800);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&:disabled {
|
|
273
|
+
background-color: var(--color-neutral-alpha-60);
|
|
274
|
+
color: var(--color-neutral-340);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
&._secondary_i0j1o_29 {
|
|
279
|
+
background-color: var(--color-accent-alpha-100);
|
|
280
|
+
color: var(--color-accent);
|
|
281
|
+
|
|
282
|
+
&:hover {
|
|
283
|
+
background-color: var(--color-accent-alpha-150);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
&:active {
|
|
287
|
+
background-color: var(--color-accent-alpha-200);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
&:disabled {
|
|
291
|
+
background-color: var(--color-neutral-alpha-60);
|
|
292
|
+
color: var(--color-neutral-340);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
&._tertiary_i0j1o_47 {
|
|
297
|
+
background-color: var(--color-transparent);
|
|
298
|
+
color: var(--color-accent);
|
|
299
|
+
|
|
300
|
+
&:hover {
|
|
301
|
+
background-color: var(--color-accent-alpha-150);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
&:active {
|
|
305
|
+
background-color: var(--color-accent-alpha-200);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
&:disabled {
|
|
309
|
+
background-color: var(--color-transparent);
|
|
310
|
+
color: var(--color-neutral-340);
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
&._neutral_i0j1o_66 {
|
|
316
|
+
&._primary_i0j1o_11 {
|
|
317
|
+
background-color: var(--color-neutral);
|
|
318
|
+
color: var(--color-white);
|
|
319
|
+
|
|
320
|
+
&:hover {
|
|
321
|
+
background-color: var(--color-neutral-920);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
&:active {
|
|
325
|
+
background-color: var(--color-neutral-880);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
&:disabled {
|
|
329
|
+
background-color: var(--color-neutral-alpha-60);
|
|
330
|
+
color: var(--color-neutral-340);
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
&._secondary_i0j1o_29 {
|
|
335
|
+
background-color: var(--color-neutral-alpha-60);
|
|
336
|
+
color: var(--color-neutral);
|
|
337
|
+
|
|
338
|
+
&:hover {
|
|
339
|
+
background-color: var(--color-neutral-alpha-120);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
&:active {
|
|
343
|
+
background-color: var(--color-neutral-alpha-140);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
&:disabled {
|
|
347
|
+
background-color: var(--color-neutral-alpha-60);
|
|
348
|
+
color: var(--color-neutral-340);
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
&._tertiary_i0j1o_47 {
|
|
353
|
+
background-color: var(--color-transparent);
|
|
354
|
+
color: var(--color-neutral);
|
|
355
|
+
|
|
356
|
+
&:hover {
|
|
357
|
+
background-color: var(--color-neutral-alpha-40);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
&:active {
|
|
361
|
+
background-color: var(--color-neutral-alpha-60);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
&:disabled {
|
|
365
|
+
background-color: var(--color-transparent);
|
|
366
|
+
color: var(--color-neutral-340);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
&._lg_i0j1o_122 {
|
|
372
|
+
min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
|
|
373
|
+
padding: var(--space-2xl);
|
|
374
|
+
border-radius: var(--radius-xl);
|
|
375
|
+
font-size: var(--size-md);
|
|
376
|
+
line-height: var(--line-height-lg);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
&._md_i0j1o_130 {
|
|
380
|
+
min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
|
|
381
|
+
padding: var(--space-lg);
|
|
382
|
+
border-radius: var(--radius-lg);
|
|
383
|
+
font-size: var(--size-md);
|
|
384
|
+
line-height: var(--line-height-lg);
|
|
385
|
+
}
|
|
224
386
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
387
|
+
&._sm_i0j1o_138 {
|
|
388
|
+
min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
|
|
389
|
+
padding: var(--space-sm);
|
|
390
|
+
border-radius: var(--radius-md);
|
|
391
|
+
font-size: var(--size-sm);
|
|
392
|
+
line-height: var(--line-height-md);
|
|
393
|
+
}
|
|
228
394
|
}
|
|
229
395
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grandbazar/ui-baza",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -44,14 +44,17 @@
|
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"dev": "storybook dev -p 6006",
|
|
47
|
+
"start": "npx http-server storybook-static -p 6006",
|
|
48
|
+
"test": "vitest run",
|
|
49
|
+
"test:watch": "vitest",
|
|
47
50
|
"build:storybook": "storybook build",
|
|
48
51
|
"build:lib": "tsc && vite build",
|
|
49
52
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
50
53
|
"format": "prettier . --write --ignore-unknown",
|
|
51
54
|
"prepare": "husky",
|
|
52
|
-
"version:patch": "npm
|
|
53
|
-
"version:minor": "npm
|
|
54
|
-
"version:major": "npm
|
|
55
|
+
"version:patch": "npm version patch",
|
|
56
|
+
"version:minor": "npm version minor",
|
|
57
|
+
"version:major": "npm version major",
|
|
55
58
|
"prepare:publish": "npm run build:lib",
|
|
56
59
|
"publish:public": "npm publish --access public",
|
|
57
60
|
"release": "npm run prepare:publish && git add dist/ && git commit -m \"Build for release\" && git push && npm run publish:public"
|
|
@@ -62,29 +65,35 @@
|
|
|
62
65
|
},
|
|
63
66
|
"devDependencies": {
|
|
64
67
|
"@eslint/compat": "^1.3.2",
|
|
65
|
-
"@eslint/js": "^9.
|
|
66
|
-
"@storybook/addon-docs": "^9.1.
|
|
67
|
-
"@storybook/react-vite": "^9.1.
|
|
68
|
-
"@
|
|
68
|
+
"@eslint/js": "^9.35.0",
|
|
69
|
+
"@storybook/addon-docs": "^9.1.5",
|
|
70
|
+
"@storybook/react-vite": "^9.1.5",
|
|
71
|
+
"@testing-library/jest-dom": "^6.8.0",
|
|
72
|
+
"@testing-library/react": "^16.3.0",
|
|
73
|
+
"@testing-library/user-event": "^14.6.1",
|
|
74
|
+
"@types/node": "^24.3.1",
|
|
69
75
|
"@types/react": "^19",
|
|
70
76
|
"@types/react-dom": "^19",
|
|
71
77
|
"@vitejs/plugin-react": "^5.0.2",
|
|
72
|
-
"
|
|
78
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
79
|
+
"eslint": "^9.35.0",
|
|
73
80
|
"eslint-config-prettier": "^10.1.8",
|
|
74
81
|
"eslint-import-resolver-typescript": "^4.4.4",
|
|
75
82
|
"eslint-plugin-import": "^2.32.0",
|
|
76
83
|
"eslint-plugin-react": "^7.37.5",
|
|
77
84
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
78
85
|
"eslint-plugin-react-refresh": "^0.4.20",
|
|
79
|
-
"eslint-plugin-storybook": "^9.1.
|
|
86
|
+
"eslint-plugin-storybook": "^9.1.5",
|
|
80
87
|
"globals": "^16.3.0",
|
|
81
88
|
"husky": "^9.1.7",
|
|
89
|
+
"jsdom": "^26.1.0",
|
|
82
90
|
"prettier": "^3.6.2",
|
|
83
91
|
"prettier-plugin-css-order": "^2.1.2",
|
|
84
|
-
"storybook": "^9.1.
|
|
92
|
+
"storybook": "^9.1.5",
|
|
85
93
|
"typescript": "^5.9.2",
|
|
86
|
-
"typescript-eslint": "^8.
|
|
87
|
-
"vite": "^7.1.
|
|
88
|
-
"vite-plugin-dts": "^4.5.4"
|
|
94
|
+
"typescript-eslint": "^8.43.0",
|
|
95
|
+
"vite": "^7.1.5",
|
|
96
|
+
"vite-plugin-dts": "^4.5.4",
|
|
97
|
+
"vitest": "^3.2.4"
|
|
89
98
|
}
|
|
90
99
|
}
|