@grandbazar/ui-baza 1.0.2 → 1.0.4
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 +50 -17
- package/dist/index.cjs +409 -4
- package/dist/index.d.ts +134 -2
- package/dist/index.js +400 -6
- package/dist/style.css +663 -17
- package/package.json +25 -14
package/README.md
CHANGED
|
@@ -5,21 +5,21 @@ A lightweight and modular UI kit for building modern, accessible web interfaces.
|
|
|
5
5
|
## 📦 Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install ui-baza
|
|
8
|
+
npm install @grandbazar/ui-baza
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
yarn add ui-baza
|
|
12
|
+
yarn add @grandbazar/ui-baza
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
pnpm add ui-baza
|
|
16
|
+
pnpm add @grandbazar/ui-baza
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## 🔧 Usage
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
|
-
import { Button } from 'ui-baza';
|
|
22
|
+
import { Button } from '@grandbazar/ui-baza';
|
|
23
23
|
|
|
24
24
|
function App() {
|
|
25
25
|
return (
|
|
@@ -35,9 +35,9 @@ 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
|
-
@import 'ui-baza/css';
|
|
40
|
+
@import '@grandbazar/ui-baza/css';
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
### Customizing Design Tokens
|
|
@@ -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,10 +124,38 @@ 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.
|
|
128
|
+
- **Checkbox** - Custom checkbox with state support, custom labels, and full styling.
|
|
129
|
+
- **RadioButton** - Radio button component for single selection from multiple options.
|
|
130
|
+
- **Switch** - Toggle switch component for binary on/off states with smooth animations.
|
|
131
|
+
- **Pagination** - Navigation component for multi-page content with customizable appearance and behavior.
|
|
123
132
|
|
|
124
133
|
More components coming soon! 🎉
|
|
125
134
|
|
|
135
|
+
## 🎨 Icons
|
|
136
|
+
|
|
137
|
+
Basic set of SVG icons for common UI needs:
|
|
138
|
+
|
|
139
|
+
- **IconCheck** - Checkmark icon for confirmations and completed states
|
|
140
|
+
- **IconChevron** - Arrow/chevron icon for navigation and dropdowns
|
|
141
|
+
- **IconMinus** - Minus icon for decrements and removal actions
|
|
142
|
+
- **IconPlus** - Plus icon for increments and add actions
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
import { IconCheck, IconChevron } from '@grandbazar/ui-baza';
|
|
146
|
+
|
|
147
|
+
function Example() {
|
|
148
|
+
return (
|
|
149
|
+
<div>
|
|
150
|
+
<IconCheck style={{ color: 'green', width: 16, height: 16 }} />
|
|
151
|
+
<IconChevron style={{ color: 'blue', width: 20, height: 20 }} />
|
|
152
|
+
</div>
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
All icons use `currentColor` for easy theming and styling.
|
|
158
|
+
|
|
126
159
|
## 🔗 Links
|
|
127
160
|
|
|
128
161
|
- [Homepage](https://grandbazar.io/ui-baza)
|
package/dist/index.cjs
CHANGED
|
@@ -3,18 +3,423 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
const react = require('react');
|
|
7
|
+
|
|
8
|
+
function calculateCheckState(checked, indeterminate) {
|
|
9
|
+
if (indeterminate) {
|
|
10
|
+
return "indeterminate";
|
|
11
|
+
}
|
|
12
|
+
if (checked) {
|
|
13
|
+
return "checked";
|
|
14
|
+
}
|
|
15
|
+
return "unchecked";
|
|
16
|
+
}
|
|
6
17
|
|
|
7
18
|
function classNames(...classes) {
|
|
8
19
|
return classes.filter(Boolean).join(" ");
|
|
9
20
|
}
|
|
10
21
|
|
|
11
|
-
|
|
22
|
+
function createRange(start, length) {
|
|
23
|
+
return Array.from({ length }, (_, index) => start + index);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const badgeTabsItem = "_badgeTabsItem_1lept_2";
|
|
27
|
+
const primary$1 = "_primary_1lept_19";
|
|
28
|
+
const secondary$1 = "_secondary_1lept_38";
|
|
29
|
+
const styles$9 = {
|
|
30
|
+
badgeTabsItem: badgeTabsItem,
|
|
31
|
+
primary: primary$1,
|
|
32
|
+
secondary: secondary$1
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
function BadgeTabsItem({ className, children, isActive, mode = "primary", ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
"button",
|
|
38
|
+
{
|
|
39
|
+
type: "button",
|
|
40
|
+
role: "tab",
|
|
41
|
+
"aria-selected": Boolean(isActive),
|
|
42
|
+
className: classNames(styles$9.badgeTabsItem, styles$9[mode], className),
|
|
43
|
+
...props,
|
|
44
|
+
children
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
|
|
50
|
+
const styles$8 = {
|
|
51
|
+
badgeTabsRoot: badgeTabsRoot
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
function BadgeTabsRoot({ className, children, ...props }) {
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$8.badgeTabsRoot, className), ...props, children });
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function BadgeTabs(props) {
|
|
59
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BadgeTabsRoot, { ...props });
|
|
60
|
+
}
|
|
61
|
+
BadgeTabs.Item = BadgeTabsItem;
|
|
62
|
+
|
|
63
|
+
const button = "_button_a42bo_2";
|
|
64
|
+
const accent = "_accent_a42bo_10";
|
|
65
|
+
const primary = "_primary_a42bo_11";
|
|
66
|
+
const secondary = "_secondary_a42bo_29";
|
|
67
|
+
const tertiary = "_tertiary_a42bo_47";
|
|
68
|
+
const neutral = "_neutral_a42bo_66";
|
|
69
|
+
const lg = "_lg_a42bo_122";
|
|
70
|
+
const md$1 = "_md_a42bo_130";
|
|
71
|
+
const sm$1 = "_sm_a42bo_138";
|
|
72
|
+
const styles$7 = {
|
|
73
|
+
button: button,
|
|
74
|
+
accent: accent,
|
|
75
|
+
primary: primary,
|
|
76
|
+
secondary: secondary,
|
|
77
|
+
tertiary: tertiary,
|
|
78
|
+
neutral: neutral,
|
|
79
|
+
lg: lg,
|
|
80
|
+
md: md$1,
|
|
81
|
+
sm: sm$1
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
function Button({
|
|
85
|
+
children,
|
|
86
|
+
className,
|
|
87
|
+
appearance = "accent",
|
|
88
|
+
size = "lg",
|
|
89
|
+
mode = "primary",
|
|
90
|
+
as = "button",
|
|
91
|
+
...props
|
|
92
|
+
}) {
|
|
93
|
+
const commonClassNames = classNames(styles$7.button, styles$7[appearance], styles$7[size], styles$7[mode], className);
|
|
94
|
+
return as === "button" ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: commonClassNames, ...props, children });
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function IconCheck(props) {
|
|
98
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
99
|
+
"path",
|
|
100
|
+
{
|
|
101
|
+
fillRule: "evenodd",
|
|
102
|
+
clipRule: "evenodd",
|
|
103
|
+
d: "M19.7071 7.29289C20.0976 7.68342 20.0976 8.31658 19.7071 8.70711L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929C4.68342 10.9024 5.31658 10.9024 5.70711 11.2929L10 15.5858L18.2929 7.29289C18.6834 6.90237 19.3166 6.90237 19.7071 7.29289Z",
|
|
104
|
+
fill: "currentColor"
|
|
105
|
+
}
|
|
106
|
+
) });
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function IconChevron(props) {
|
|
110
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
"path",
|
|
112
|
+
{
|
|
113
|
+
fillRule: "evenodd",
|
|
114
|
+
clipRule: "evenodd",
|
|
115
|
+
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",
|
|
116
|
+
fill: "currentColor"
|
|
117
|
+
}
|
|
118
|
+
) });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function IconGear(props) {
|
|
122
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
+
"path",
|
|
124
|
+
{
|
|
125
|
+
fillRule: "evenodd",
|
|
126
|
+
clipRule: "evenodd",
|
|
127
|
+
d: "M8.60694 3.77565C8.77772 2.751 9.66425 2 10.703 2H13.297C14.3358 2 15.2223 2.751 15.3931 3.77565L15.6066 5.0567C15.611 5.08334 15.6398 5.15525 15.7486 5.21546C15.8338 5.26261 15.918 5.31132 16.0011 5.36153C16.1074 5.42568 16.184 5.41471 16.2093 5.40522L17.4262 4.94933C18.3989 4.58491 19.4926 4.97716 20.012 5.87677L21.309 8.12321C21.8284 9.02282 21.6212 10.1661 20.8192 10.8263L19.8149 11.6531C19.7939 11.6704 19.7464 11.7311 19.7487 11.854C19.7496 11.9026 19.75 11.9512 19.75 12C19.75 12.0487 19.7496 12.0974 19.7487 12.146C19.7464 12.2689 19.7939 12.3296 19.8149 12.3469L20.8192 13.1737C21.6212 13.8339 21.8284 14.9772 21.309 15.8768L20.012 18.1232C19.4926 19.0228 18.3989 19.4151 17.4262 19.0506L16.2093 18.5948C16.184 18.5853 16.1074 18.5743 16.0011 18.6385C15.918 18.6887 15.8338 18.7374 15.7486 18.7845C15.6398 18.8447 15.611 18.9167 15.6066 18.9433L15.3931 20.2243C15.2223 21.249 14.3358 22 13.297 22H10.703C9.66425 22 8.77772 21.249 8.60694 20.2243L8.39344 18.9433C8.389 18.9167 8.36022 18.8447 8.25145 18.7845C8.16627 18.7374 8.08208 18.6887 7.99891 18.6385C7.89267 18.5743 7.81605 18.5853 7.79072 18.5948L6.57385 19.0507C5.60109 19.4151 4.50744 19.0228 3.98805 18.1232L2.69106 15.8768C2.17167 14.9772 2.3788 13.8339 3.18078 13.1737L4.18513 12.3469C4.20616 12.3296 4.25364 12.2689 4.25136 12.146C4.25047 12.0974 4.25001 12.0488 4.25001 12C4.25001 11.9512 4.25047 11.9026 4.25136 11.854C4.25364 11.7311 4.20616 11.6704 4.18513 11.6531L3.18078 10.8263C2.3788 10.1661 2.17167 9.02284 2.69106 8.12323L3.98805 5.87679C4.50744 4.97718 5.60109 4.58492 6.57385 4.94935L7.7907 5.40523C7.81603 5.41472 7.89266 5.42569 7.99889 5.36154C8.08207 5.31132 8.16626 5.26261 8.25145 5.21546C8.36021 5.15525 8.389 5.08334 8.39344 5.0567L8.60694 3.77565ZM10.703 4C10.6419 4 10.5898 4.04418 10.5797 4.10445L10.3662 5.3855C10.246 6.10695 9.77482 6.65817 9.22005 6.96526C9.15688 7.00023 9.09443 7.03636 9.03272 7.07362C8.48889 7.40201 7.77485 7.53503 7.08906 7.27811L5.8722 6.82223C5.81498 6.8008 5.75065 6.82387 5.7201 6.87679L4.42311 9.12323C4.39256 9.17615 4.40475 9.2434 4.45192 9.28223L5.45627 10.109C6.02026 10.5733 6.26277 11.2564 6.25102 11.8911C6.25035 11.9273 6.25001 11.9636 6.25001 12C6.25001 12.0364 6.25035 12.0727 6.25102 12.109C6.26278 12.7436 6.02026 13.4267 5.45627 13.891L4.45192 14.7178C4.40475 14.7566 4.39256 14.8239 4.42312 14.8768L5.7201 17.1232C5.75065 17.1761 5.81498 17.1992 5.8722 17.1778L7.08907 16.7219C7.77487 16.465 8.48891 16.598 9.03274 16.9264C9.09443 16.9636 9.15688 16.9998 9.22005 17.0347C9.77482 17.3418 10.246 17.8931 10.3662 18.6145L10.5797 19.8955C10.5898 19.9558 10.6419 20 10.703 20H13.297C13.3581 20 13.4102 19.9558 13.4203 19.8955L13.6338 18.6145C13.754 17.8931 14.2252 17.3418 14.78 17.0347C14.8432 16.9998 14.9056 16.9636 14.9673 16.9264C15.5111 16.598 16.2252 16.465 16.911 16.7219L18.1278 17.1778C18.185 17.1992 18.2494 17.1761 18.2799 17.1232L19.5769 14.8768C19.6075 14.8239 19.5953 14.7566 19.5481 14.7178L18.5438 13.891C17.9798 13.4267 17.7373 12.7436 17.749 12.1089C17.7497 12.0727 17.75 12.0364 17.75 12C17.75 11.9636 17.7497 11.9273 17.749 11.891C17.7373 11.2564 17.9798 10.5733 18.5438 10.109L19.5481 9.28222C19.5953 9.24338 19.6075 9.17613 19.5769 9.12321L18.2799 6.87677C18.2494 6.82386 18.185 6.80078 18.1278 6.82222L16.911 7.2781C16.2252 7.53502 15.5111 7.402 14.9673 7.07361C14.9056 7.03635 14.8431 7.00023 14.78 6.96526C14.2252 6.65817 13.754 6.10695 13.6338 5.3855L13.4203 4.10445C13.4102 4.04418 13.3581 4 13.297 4H10.703ZM11.9998 9.99992C10.8952 9.99992 9.99978 10.8954 9.99978 11.9999C9.99978 13.1045 10.8952 13.9999 11.9998 13.9999C13.1044 13.9999 13.9998 13.1045 13.9998 11.9999C13.9998 10.8954 13.1044 9.99992 11.9998 9.99992ZM7.99978 11.9999C7.99978 9.79078 9.79064 7.99992 11.9998 7.99992C14.2089 7.99992 15.9998 9.79078 15.9998 11.9999C15.9998 14.2091 14.2089 15.9999 11.9998 15.9999C9.79064 15.9999 7.99978 14.2091 7.99978 11.9999Z",
|
|
128
|
+
fill: "currentColor"
|
|
129
|
+
}
|
|
130
|
+
) });
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
function IconMinus(props) {
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
"path",
|
|
136
|
+
{
|
|
137
|
+
d: "M19 11L19.1025 11.0049C19.6067 11.0562 20 11.4823 20 12C20 12.5177 19.6067 12.9438 19.1025 12.9951L19 13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H19Z",
|
|
138
|
+
fill: "currentColor"
|
|
139
|
+
}
|
|
140
|
+
) });
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function IconPlus(props) {
|
|
144
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
145
|
+
"path",
|
|
146
|
+
{
|
|
147
|
+
fillRule: "evenodd",
|
|
148
|
+
clipRule: "evenodd",
|
|
149
|
+
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",
|
|
150
|
+
fill: "currentColor"
|
|
151
|
+
}
|
|
152
|
+
) });
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
const checkboxWrapper = "_checkboxWrapper_k1shg_2";
|
|
156
|
+
const icon$1 = "_icon_k1shg_23";
|
|
157
|
+
const checkbox = "_checkbox_k1shg_2";
|
|
158
|
+
const styles$6 = {
|
|
159
|
+
checkboxWrapper: checkboxWrapper,
|
|
160
|
+
icon: icon$1,
|
|
161
|
+
checkbox: checkbox
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
function Checkbox({ className, label, indeterminate, ...props }) {
|
|
165
|
+
const dataState = calculateCheckState(props.checked, indeterminate);
|
|
166
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
167
|
+
"label",
|
|
168
|
+
{
|
|
169
|
+
"data-disabled": `${Boolean(props.disabled)}`,
|
|
170
|
+
"data-state": dataState,
|
|
171
|
+
className: classNames(styles$6.checkboxWrapper, className),
|
|
172
|
+
children: [
|
|
173
|
+
dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$6.icon }),
|
|
174
|
+
dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$6.icon }),
|
|
175
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$6.checkbox, ...props }),
|
|
176
|
+
label
|
|
177
|
+
]
|
|
178
|
+
}
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
const ELLIPSIS = "...";
|
|
183
|
+
const ELLIPSIS_SYMBOL = Symbol(ELLIPSIS);
|
|
184
|
+
const DEFAULT_MAX_VISIBLE_PAGES_WITH_ELLIPSIS = 11;
|
|
185
|
+
const MIN_VISIBLE_PAGES_WITH_ELLIPSIS = 5;
|
|
186
|
+
const ELLIPSIS_PAGES = 4;
|
|
187
|
+
const SIDE_OFFSET = 3;
|
|
188
|
+
const BOUNDARY_PAGES = 2;
|
|
189
|
+
|
|
190
|
+
const paginationItem = "_paginationItem_1ll6p_2";
|
|
191
|
+
const md = "_md_1ll6p_46";
|
|
192
|
+
const sm = "_sm_1ll6p_60";
|
|
193
|
+
const styles$5 = {
|
|
194
|
+
paginationItem: paginationItem,
|
|
195
|
+
md: md,
|
|
196
|
+
sm: sm
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
function PaginationItem({ className, children, size = "md", isCurrent, ...props }) {
|
|
200
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
201
|
+
"button",
|
|
202
|
+
{
|
|
203
|
+
type: "button",
|
|
204
|
+
...isCurrent && { "aria-current": "page" },
|
|
205
|
+
className: classNames(styles$5.paginationItem, styles$5[size], className),
|
|
206
|
+
...props,
|
|
207
|
+
children
|
|
208
|
+
}
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
|
|
213
|
+
const maxVisiblePages = Math.max(maxVisiblePagesWithEllipsis, MIN_VISIBLE_PAGES_WITH_ELLIPSIS);
|
|
214
|
+
if (totalPages <= maxVisiblePages) {
|
|
215
|
+
return createRange(1, totalPages);
|
|
216
|
+
}
|
|
217
|
+
const sidePages = Math.floor((maxVisiblePages - ELLIPSIS_PAGES) / 2);
|
|
218
|
+
const startThreshold = sidePages + SIDE_OFFSET;
|
|
219
|
+
const endThreshold = totalPages - sidePages - BOUNDARY_PAGES;
|
|
220
|
+
const needsStartEllipsis = currentPage > startThreshold;
|
|
221
|
+
const needsEndEllipsis = currentPage < endThreshold;
|
|
222
|
+
if (needsStartEllipsis && needsEndEllipsis) {
|
|
223
|
+
const centerPages = maxVisiblePages - ELLIPSIS_PAGES;
|
|
224
|
+
const centerStart = Math.max(1, currentPage - Math.floor(centerPages / 2));
|
|
225
|
+
return [1, ELLIPSIS_SYMBOL, ...createRange(centerStart, centerPages), ELLIPSIS_SYMBOL, totalPages];
|
|
226
|
+
}
|
|
227
|
+
if (needsStartEllipsis) {
|
|
228
|
+
const endPages = maxVisiblePages - BOUNDARY_PAGES;
|
|
229
|
+
const endStart = totalPages - endPages + 1;
|
|
230
|
+
return [1, ELLIPSIS_SYMBOL, ...createRange(endStart, endPages)];
|
|
231
|
+
}
|
|
232
|
+
if (needsEndEllipsis) {
|
|
233
|
+
const startPages = maxVisiblePages - BOUNDARY_PAGES;
|
|
234
|
+
return [...createRange(1, startPages), ELLIPSIS_SYMBOL, totalPages];
|
|
235
|
+
}
|
|
236
|
+
return createRange(1, totalPages);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
const paginationRoot = "_paginationRoot_c5fwx_2";
|
|
240
|
+
const paginationList = "_paginationList_c5fwx_7";
|
|
241
|
+
const arrowLeft = "_arrowLeft_c5fwx_13";
|
|
242
|
+
const styles$4 = {
|
|
243
|
+
paginationRoot: paginationRoot,
|
|
244
|
+
paginationList: paginationList,
|
|
245
|
+
arrowLeft: arrowLeft
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
function PaginationRoot({
|
|
249
|
+
totalPages,
|
|
250
|
+
currentPage,
|
|
251
|
+
size,
|
|
252
|
+
maxVisiblePages = DEFAULT_MAX_VISIBLE_PAGES_WITH_ELLIPSIS,
|
|
253
|
+
showArrows = true,
|
|
254
|
+
className,
|
|
255
|
+
onPageChange,
|
|
256
|
+
renderItem: PaginationItem$1 = PaginationItem,
|
|
257
|
+
renderIconChevron: IconChevron$1 = IconChevron,
|
|
258
|
+
renderEllipsis: Ellipsis = () => ELLIPSIS,
|
|
259
|
+
...props
|
|
260
|
+
}) {
|
|
261
|
+
const isFirstPage = currentPage === 1;
|
|
262
|
+
const isLastPage = currentPage === totalPages;
|
|
263
|
+
const visiblePages = getVisiblePages(totalPages, maxVisiblePages, currentPage);
|
|
264
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
265
|
+
"nav",
|
|
266
|
+
{
|
|
267
|
+
"aria-label": "pagination navigation",
|
|
268
|
+
role: "navigation",
|
|
269
|
+
className: classNames(styles$4.paginationRoot, className),
|
|
270
|
+
...props,
|
|
271
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$4.paginationList, children: [
|
|
272
|
+
showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
273
|
+
PaginationItem$1,
|
|
274
|
+
{
|
|
275
|
+
"aria-label": "Go to previous page",
|
|
276
|
+
onClick: () => onPageChange(currentPage - 1),
|
|
277
|
+
disabled: isFirstPage,
|
|
278
|
+
size,
|
|
279
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$4.arrowLeft })
|
|
280
|
+
}
|
|
281
|
+
) }),
|
|
282
|
+
visiblePages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: page === ELLIPSIS_SYMBOL ? /* @__PURE__ */ jsxRuntime.jsx(PaginationItem$1, { "aria-label": "More pages", disabled: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
283
|
+
PaginationItem$1,
|
|
284
|
+
{
|
|
285
|
+
"aria-label": `Go to page ${page}`,
|
|
286
|
+
isCurrent: page === currentPage,
|
|
287
|
+
onClick: () => onPageChange(page),
|
|
288
|
+
size,
|
|
289
|
+
children: page
|
|
290
|
+
}
|
|
291
|
+
) }, page === ELLIPSIS_SYMBOL ? `ellipsis-${index}` : page)),
|
|
292
|
+
showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
293
|
+
PaginationItem$1,
|
|
294
|
+
{
|
|
295
|
+
"aria-label": "Go to next page",
|
|
296
|
+
onClick: () => onPageChange(currentPage + 1),
|
|
297
|
+
disabled: isLastPage,
|
|
298
|
+
size,
|
|
299
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, {})
|
|
300
|
+
}
|
|
301
|
+
) })
|
|
302
|
+
] })
|
|
303
|
+
}
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
function Pagination(props) {
|
|
308
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PaginationRoot, { ...props });
|
|
309
|
+
}
|
|
310
|
+
Pagination.Item = PaginationItem;
|
|
311
|
+
|
|
312
|
+
const radioWrapper = "_radioWrapper_13xie_2";
|
|
313
|
+
const radio = "_radio_13xie_2";
|
|
314
|
+
const styles$3 = {
|
|
315
|
+
radioWrapper: radioWrapper,
|
|
316
|
+
radio: radio
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
function RadioButton({ className, label, ...props }) {
|
|
320
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$3.radioWrapper, className), children: [
|
|
321
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$3.radio, ...props }),
|
|
322
|
+
label
|
|
323
|
+
] });
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
const switchWrapper = "_switchWrapper_1yukb_2";
|
|
327
|
+
const icon = "_icon_1yukb_25";
|
|
328
|
+
const styles$2 = {
|
|
329
|
+
switchWrapper: switchWrapper,
|
|
330
|
+
icon: icon,
|
|
331
|
+
"switch": "_switch_1yukb_2"
|
|
332
|
+
};
|
|
333
|
+
|
|
334
|
+
function Switch({ className, label, indeterminate, ...props }) {
|
|
335
|
+
const dataState = calculateCheckState(props.checked, indeterminate);
|
|
336
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
337
|
+
"label",
|
|
338
|
+
{
|
|
339
|
+
"data-disabled": `${Boolean(props.disabled)}`,
|
|
340
|
+
"data-state": dataState,
|
|
341
|
+
className: classNames(styles$2.switchWrapper, className),
|
|
342
|
+
children: [
|
|
343
|
+
dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$2.icon }),
|
|
344
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", role: "switch", className: styles$2.switch, ...props }),
|
|
345
|
+
label
|
|
346
|
+
]
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
const tabsItem = "_tabsItem_beca6_2";
|
|
352
|
+
const styles$1 = {
|
|
353
|
+
tabsItem: tabsItem
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
function TabsItem({ className, children, isActive, ...props }) {
|
|
357
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
358
|
+
"button",
|
|
359
|
+
{
|
|
360
|
+
type: "button",
|
|
361
|
+
role: "tab",
|
|
362
|
+
"aria-selected": Boolean(isActive),
|
|
363
|
+
className: classNames(styles$1.tabsItem, className),
|
|
364
|
+
...props,
|
|
365
|
+
children
|
|
366
|
+
}
|
|
367
|
+
);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
function useActiveTab(activeIndex) {
|
|
371
|
+
const rootRef = react.useRef(null);
|
|
372
|
+
const [indicatorStyle, setIndicatorStyle] = react.useState();
|
|
373
|
+
react.useEffect(() => {
|
|
374
|
+
if (!rootRef.current) {
|
|
375
|
+
return;
|
|
376
|
+
}
|
|
377
|
+
const buttons = rootRef.current.querySelectorAll('button[role="tab"]');
|
|
378
|
+
const activeButton = buttons[activeIndex];
|
|
379
|
+
if (!activeButton) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
const rootRect = rootRef.current.getBoundingClientRect();
|
|
383
|
+
const buttonRect = activeButton.getBoundingClientRect();
|
|
384
|
+
const left = buttonRect.left - rootRect.left;
|
|
385
|
+
const width = buttonRect.width;
|
|
386
|
+
setIndicatorStyle({
|
|
387
|
+
transform: `translateX(${left}px)`,
|
|
388
|
+
width
|
|
389
|
+
});
|
|
390
|
+
}, [activeIndex]);
|
|
391
|
+
return { indicatorStyle, rootRef };
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
const tabsRoot = "_tabsRoot_1os90_8";
|
|
395
|
+
const indicator = "_indicator_1os90_29";
|
|
12
396
|
const styles = {
|
|
13
|
-
|
|
397
|
+
tabsRoot: tabsRoot,
|
|
398
|
+
indicator: indicator
|
|
14
399
|
};
|
|
15
400
|
|
|
16
|
-
function
|
|
17
|
-
|
|
401
|
+
function TabsRoot({ className, children, activeTabIndex = 0, ...props }) {
|
|
402
|
+
const { indicatorStyle, rootRef } = useActiveTab(activeTabIndex);
|
|
403
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, role: "tablist", className: classNames(styles.tabsRoot, className), ...props, children: [
|
|
404
|
+
children(activeTabIndex),
|
|
405
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.indicator, style: indicatorStyle })
|
|
406
|
+
] });
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
function Tabs(props) {
|
|
410
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TabsRoot, { ...props });
|
|
18
411
|
}
|
|
412
|
+
Tabs.Item = TabsItem;
|
|
19
413
|
|
|
414
|
+
exports.BadgeTabs = BadgeTabs;
|
|
20
415
|
exports.Button = Button;
|
|
416
|
+
exports.Checkbox = Checkbox;
|
|
417
|
+
exports.IconCheck = IconCheck;
|
|
418
|
+
exports.IconChevron = IconChevron;
|
|
419
|
+
exports.IconGear = IconGear;
|
|
420
|
+
exports.IconMinus = IconMinus;
|
|
421
|
+
exports.IconPlus = IconPlus;
|
|
422
|
+
exports.Pagination = Pagination;
|
|
423
|
+
exports.RadioButton = RadioButton;
|
|
424
|
+
exports.Switch = Switch;
|
|
425
|
+
exports.Tabs = Tabs;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,139 @@
|
|
|
1
1
|
import { JSX } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
declare const BADGE_TABS_ITEM_MODES: readonly ["primary", "secondary"];
|
|
4
4
|
|
|
5
|
-
declare
|
|
5
|
+
export declare function BadgeTabs(props: TTabsProps): JSX.Element;
|
|
6
|
+
|
|
7
|
+
export declare namespace BadgeTabs {
|
|
8
|
+
var Item: typeof BadgeTabsItem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare function BadgeTabsItem({ className, children, isActive, mode, ...props }: TBadgeTabsItemProps): JSX.Element;
|
|
12
|
+
|
|
13
|
+
declare function BadgeTabsRoot({ className, children, ...props }: TBadgeTabsRootProps): JSX.Element;
|
|
14
|
+
|
|
15
|
+
export declare function Button(props: TButtonAsButtonProps): React.JSX.Element;
|
|
16
|
+
|
|
17
|
+
export declare function Button(props: TButtonAsAnchorProps): React.JSX.Element;
|
|
18
|
+
|
|
19
|
+
declare const BUTTON_APPEARANCES: readonly ["accent", "neutral"];
|
|
20
|
+
|
|
21
|
+
declare const BUTTON_MODES: readonly ["primary", "secondary", "tertiary"];
|
|
22
|
+
|
|
23
|
+
declare const BUTTON_SIZES: readonly ["lg", "md", "sm"];
|
|
24
|
+
|
|
25
|
+
export declare function Checkbox({ className, label, indeterminate, ...props }: TCheckboxProps): JSX.Element;
|
|
26
|
+
|
|
27
|
+
export declare function IconCheck(props: TSvgIconProps): JSX.Element;
|
|
28
|
+
|
|
29
|
+
export declare function IconChevron(props: TSvgIconProps): JSX.Element;
|
|
30
|
+
|
|
31
|
+
export declare function IconGear(props: TSvgIconProps): JSX.Element;
|
|
32
|
+
|
|
33
|
+
export declare function IconMinus(props: TSvgIconProps): JSX.Element;
|
|
34
|
+
|
|
35
|
+
export declare function IconPlus(props: TSvgIconProps): JSX.Element;
|
|
36
|
+
|
|
37
|
+
export declare function Pagination(props: React.ComponentProps<typeof PaginationRoot>): JSX.Element;
|
|
38
|
+
|
|
39
|
+
export declare namespace Pagination {
|
|
40
|
+
var Item: typeof PaginationItem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const PAGINATION_SIZES: readonly ["sm", "md"];
|
|
44
|
+
|
|
45
|
+
declare function PaginationItem({ className, children, size, isCurrent, ...props }: TPaginationItemProps): JSX.Element;
|
|
46
|
+
|
|
47
|
+
declare function PaginationRoot({ totalPages, currentPage, size, maxVisiblePages, showArrows, className, onPageChange, renderItem: PaginationItem, renderIconChevron: IconChevron, renderEllipsis: Ellipsis, ...props }: TPaginationRootProps): JSX.Element;
|
|
48
|
+
|
|
49
|
+
export declare function RadioButton({ className, label, ...props }: TRadioButtonProps): JSX.Element;
|
|
50
|
+
|
|
51
|
+
export declare function Switch({ className, label, indeterminate, ...props }: TSwitchProps): JSX.Element;
|
|
52
|
+
|
|
53
|
+
export declare function Tabs(props: TTabsProps_2): JSX.Element;
|
|
54
|
+
|
|
55
|
+
export declare namespace Tabs {
|
|
56
|
+
var Item: typeof TabsItem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
declare function TabsItem({ className, children, isActive, ...props }: TTabsItemProps): JSX.Element;
|
|
60
|
+
|
|
61
|
+
declare function TabsRoot({ className, children, activeTabIndex, ...props }: TTabsRootProps): JSX.Element;
|
|
62
|
+
|
|
63
|
+
declare type TArrayElement<T extends readonly unknown[]> = T[number];
|
|
64
|
+
|
|
65
|
+
declare type TBadgeTabsItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
66
|
+
isActive?: boolean;
|
|
67
|
+
mode?: TArrayElement<typeof BADGE_TABS_ITEM_MODES>;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
declare type TBadgeTabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
71
|
+
children: React.ReactNode;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
declare type TButtonAsAnchorProps = TButtonCommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
75
|
+
as: 'a';
|
|
76
|
+
ref?: React.Ref<HTMLAnchorElement> | null;
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
declare type TButtonAsButtonProps = TButtonCommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
80
|
+
as?: 'button';
|
|
81
|
+
ref?: React.Ref<HTMLButtonElement> | null;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
declare type TButtonCommonProps = {
|
|
85
|
+
appearance?: TArrayElement<typeof BUTTON_APPEARANCES>;
|
|
86
|
+
size?: TArrayElement<typeof BUTTON_SIZES>;
|
|
87
|
+
mode?: TArrayElement<typeof BUTTON_MODES>;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
declare type TCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
91
|
+
label?: React.ReactNode;
|
|
92
|
+
indeterminate?: boolean;
|
|
93
|
+
ref?: React.RefObject<HTMLInputElement | null>;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
97
|
+
size?: TArrayElement<typeof PAGINATION_SIZES>;
|
|
98
|
+
isCurrent?: boolean;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
declare type TPaginationRootProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
102
|
+
totalPages: number;
|
|
103
|
+
currentPage: number;
|
|
104
|
+
size?: TArrayElement<typeof PAGINATION_SIZES>;
|
|
105
|
+
maxVisiblePages?: number;
|
|
106
|
+
showArrows?: boolean;
|
|
107
|
+
onPageChange: (page: number) => void;
|
|
108
|
+
renderItem?: (props: React.ComponentProps<typeof PaginationItem>) => React.ReactNode;
|
|
109
|
+
renderIconChevron?: (props: TSvgIconProps) => React.ReactNode;
|
|
110
|
+
renderEllipsis?: () => React.ReactNode;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
declare type TRadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
114
|
+
label?: React.ReactNode;
|
|
115
|
+
ref?: React.RefObject<HTMLInputElement | null>;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
declare type TSvgIconProps = React.SVGProps<SVGSVGElement>;
|
|
119
|
+
|
|
120
|
+
declare type TSwitchProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
121
|
+
label?: React.ReactNode;
|
|
122
|
+
indeterminate?: boolean;
|
|
123
|
+
ref?: React.RefObject<HTMLInputElement | null>;
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
declare type TTabsItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
127
|
+
isActive?: boolean;
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
declare type TTabsProps = React.ComponentProps<typeof BadgeTabsRoot>;
|
|
131
|
+
|
|
132
|
+
declare type TTabsProps_2 = React.ComponentProps<typeof TabsRoot>;
|
|
133
|
+
|
|
134
|
+
declare type TTabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
135
|
+
children: (activeIndex: number) => React.ReactNode;
|
|
136
|
+
activeTabIndex?: number;
|
|
137
|
+
};
|
|
6
138
|
|
|
7
139
|
export { }
|