@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 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` - Start Storybook development server
102
- - `npm run build:lib` - Build the library
103
- - `npm run build:storybook` - Build Storybook for production
104
- - `npm run lint` - Run ESLint
105
- - `npm run format` - Format code with Prettier
106
- - `npm run prepare` - Setup Husky git hooks
107
- - `npm run version:patch` - Build and bump patch version
108
- - `npm run version:minor` - Build and bump minor version
109
- - `npm run version:major` - Build and bump major version
110
- - `npm run publish` - Build and publish to npm
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 = "_button_e0z64_1";
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({ children, className, ...props }) {
17
- return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classNames(styles.button, className), ...props, children });
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 type TButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
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 = "_button_e0z64_1";
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({ children, className, ...props }) {
13
- return /* @__PURE__ */ jsx("button", { className: classNames(styles.button, className), ...props, children });
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
- export { Button };
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
- --color-neutral-alpha-60: color-mix(in srgb, var(--color-neutral) 6%, transparent);
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
- ._button_e0z64_1 {
211
- display: inline-flex;
212
- align-items: center;
213
- padding: 16px;
214
- border-radius: var(--radius-xl);
215
- background-color: var(--color-accent);
216
- color: var(--color-white);
217
-
218
- &:hover {
219
- background-color: var(--color-accent-900);
220
- }
221
- &:active {
222
- background-color: var(--color-accent-800);
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
- &:disabled {
226
- background-color: var(--color-neutral-alpha-60);
227
- color: var(--color-neutral-340);
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.2",
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 run build:lib && npm version patch",
53
- "version:minor": "npm run build:lib && npm version minor",
54
- "version:major": "npm run build:lib && npm version major",
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.34.0",
66
- "@storybook/addon-docs": "^9.1.4",
67
- "@storybook/react-vite": "^9.1.4",
68
- "@types/node": "^24.3.0",
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
- "eslint": "^9.34.0",
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.4",
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.4",
92
+ "storybook": "^9.1.5",
85
93
  "typescript": "^5.9.2",
86
- "typescript-eslint": "^8.42.0",
87
- "vite": "^7.1.4",
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
  }