@phpsoftbox/react-softbox 1.16.0 → 2.0.0
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 +10 -0
- package/dist/components/Alert/Alert.js +8 -0
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/Alert/Alert.module.css +65 -33
- package/dist/components/Badge/Badge.d.ts +4 -1
- package/dist/components/Badge/Badge.js +25 -3
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.module.css +89 -32
- package/dist/components/Button/Button.d.ts +11 -2
- package/dist/components/Button/Button.js +20 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.d.ts +3 -1
- package/dist/components/Card/Card.js +9 -3
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css +8 -2
- package/dist/components/CollapseButton/CollapseButton.module.css +1 -1
- package/dist/components/Drawer/Drawer.module.css +1 -0
- package/dist/components/FileUploader/FileUploader.module.css +6 -6
- package/dist/components/Image/Image.module.css +2 -2
- package/dist/components/Input/Checkbox/Checkbox.module.css +2 -2
- package/dist/components/Input/ErrorTooltip/ErrorTooltip.module.css +1 -1
- package/dist/components/Input/FloatLabel/FloatLabel.module.css +2 -2
- package/dist/components/Input/FormField/FormField.module.css +2 -2
- package/dist/components/Input/Hint/Hint.module.css +1 -1
- package/dist/components/Input/Input.d.ts +12 -2
- package/dist/components/Input/Input.js +4 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.module.css +1 -1
- package/dist/components/Input/InputGroup.d.ts +14 -3
- package/dist/components/Input/InputGroup.js +27 -4
- package/dist/components/Input/InputGroup.js.map +1 -1
- package/dist/components/Input/InputGroup.module.css +83 -7
- package/dist/components/Input/Radio/Radio.js +1 -1
- package/dist/components/Input/Radio/Radio.js.map +1 -1
- package/dist/components/Input/Radio/Radio.module.css +2 -2
- package/dist/components/Input/Select/Select.d.ts +2 -1
- package/dist/components/Input/Select/Select.js +2 -2
- package/dist/components/Input/Select/Select.js.map +1 -1
- package/dist/components/Input/Select/Select.module.css +22 -9
- package/dist/components/Input/Switch/Switch.module.css +2 -2
- package/dist/components/Input/Textarea/Textarea.module.css +1 -1
- package/dist/components/MarkdownEditor/MarkdownEditor.module.css +51 -17
- package/dist/components/Menu/Menu.module.css +3 -3
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Notifier/Notifier.js +4 -0
- package/dist/components/Notifier/Notifier.js.map +1 -1
- package/dist/components/Notifier/Notifier.module.css +38 -16
- package/dist/components/Pagination/Pagination.module.css +1 -1
- package/dist/components/Progress/Progress.js +4 -0
- package/dist/components/Progress/Progress.js.map +1 -1
- package/dist/components/Progress/Progress.module.css +24 -8
- package/dist/components/Table/Table.js +4 -0
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Table/Table.module.css +24 -8
- package/dist/components/Tooltip/Tooltip.module.css +1 -1
- package/dist/components/Typography/Heading.js +4 -0
- package/dist/components/Typography/Heading.js.map +1 -1
- package/dist/components/Typography/Text.js +4 -0
- package/dist/components/Typography/Text.js.map +1 -1
- package/dist/components/Typography/Typography.module.css +22 -6
- package/dist/components/Wizard/Wizard.d.ts +2 -0
- package/dist/components/Wizard/Wizard.js +24 -2
- package/dist/components/Wizard/Wizard.js.map +1 -1
- package/dist/components/Wizard/Wizard.module.css +54 -40
- package/dist/foundations/buttons.css +268 -54
- package/dist/foundations/layout.css +2 -2
- package/dist/foundations/tabs.css +3 -3
- package/dist/foundations/tokens.css +304 -74
- package/dist/foundations/utilities.css +738 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/docs/card.md +2 -1
- package/docs/feedback.md +8 -1
- package/docs/forms.md +28 -2
- package/docs/layout.md +42 -2
- package/docs/theme.md +46 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,6 +106,12 @@ yarn build
|
|
|
106
106
|
<Button variant="info" appearance="outline">Info</Button>
|
|
107
107
|
<Button variant="danger" appearance="ghost">Danger</Button>
|
|
108
108
|
<Button variant="primary" size="sm">Small</Button>
|
|
109
|
+
|
|
110
|
+
<Button.Group aria-label="Режим просмотра">
|
|
111
|
+
<Button appearance="outline">День</Button>
|
|
112
|
+
<Button appearance="outline">Неделя</Button>
|
|
113
|
+
<Button appearance="outline">Месяц</Button>
|
|
114
|
+
</Button.Group>
|
|
109
115
|
```
|
|
110
116
|
|
|
111
117
|
### Input / FloatLabel
|
|
@@ -263,10 +269,14 @@ const collapsible = [
|
|
|
263
269
|
```tsx
|
|
264
270
|
<Badge>Default</Badge>
|
|
265
271
|
<Badge variant="primary">Primary</Badge>
|
|
272
|
+
<Badge variant="secondary">Secondary</Badge>
|
|
266
273
|
<Badge variant="info">Info</Badge>
|
|
267
274
|
<Badge variant="success">Success</Badge>
|
|
268
275
|
<Badge variant="warning">Warning</Badge>
|
|
269
276
|
<Badge variant="danger">Danger</Badge>
|
|
277
|
+
<Badge variant="warning" className="rounded-circle size-6 p-0 f-2">3</Badge>
|
|
278
|
+
<Badge variant="info" className="border border-info text-uppercase f-2">helper styled</Badge>
|
|
279
|
+
<Badge variant="danger" dot aria-label="Ошибка" className="p-2" />
|
|
270
280
|
```
|
|
271
281
|
|
|
272
282
|
### Typography
|
|
@@ -3,10 +3,14 @@ import styles from './Alert.module.css';
|
|
|
3
3
|
const classMap = {
|
|
4
4
|
default: styles.default,
|
|
5
5
|
primary: styles.primary,
|
|
6
|
+
secondary: styles.secondary,
|
|
6
7
|
info: styles.info,
|
|
7
8
|
success: styles.success,
|
|
8
9
|
warning: styles.warning,
|
|
9
10
|
danger: styles.danger,
|
|
11
|
+
dark: styles.dark,
|
|
12
|
+
light: styles.light,
|
|
13
|
+
neutral: styles.neutral,
|
|
10
14
|
};
|
|
11
15
|
const iconPlacementClassMap = {
|
|
12
16
|
top: styles.iconTop,
|
|
@@ -16,10 +20,14 @@ const iconPlacementClassMap = {
|
|
|
16
20
|
const defaultIcons = {
|
|
17
21
|
default: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
18
22
|
primary: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
23
|
+
secondary: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
19
24
|
info: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
20
25
|
success: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m6.8 10 2.1 2.2 4.3-4.4", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
21
26
|
warning: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("path", { d: "M10 3.4 17 16.2a1 1 0 0 1-.88 1.4H3.88A1 1 0 0 1 3 16.2L10 3.4Z", strokeLinejoin: "round" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "14.4", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
22
27
|
danger: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m7.5 7.5 5 5m0-5-5 5", strokeLinecap: "round" })] })),
|
|
28
|
+
dark: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
29
|
+
light: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
30
|
+
neutral: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
|
|
23
31
|
};
|
|
24
32
|
export default function Alert({ variant = 'info', title, icon, iconPlacement = 'top', iconBgFilled = false, actions, onClose, className, children, ...props }) {
|
|
25
33
|
const classes = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAgBxC,MAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
gap: var(--spacing-4);
|
|
4
4
|
align-items: flex-start;
|
|
5
5
|
padding: var(--spacing-4);
|
|
6
|
-
border-radius: var(--radius-
|
|
6
|
+
border-radius: var(--alert-border-radius, var(--radius-default));
|
|
7
7
|
border: 1px solid transparent;
|
|
8
8
|
background: var(--surface-panel-soft);
|
|
9
9
|
color: var(--color-text);
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
margin-top: 0;
|
|
35
35
|
background: var(--alert-icon-bg, transparent);
|
|
36
36
|
border-right: 1px solid var(--alert-icon-bg-border, transparent);
|
|
37
|
-
border-top-left-radius: var(--radius-
|
|
38
|
-
border-bottom-left-radius: var(--radius-
|
|
37
|
+
border-top-left-radius: var(--alert-border-radius, var(--radius-default));
|
|
38
|
+
border-bottom-left-radius: var(--alert-border-radius, var(--radius-default));
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.alertIconBgFilled .iconTop,
|
|
@@ -123,49 +123,81 @@
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.default {
|
|
126
|
-
border-color:
|
|
127
|
-
box-shadow: 0 0 0 1px
|
|
128
|
-
--alert-icon-color:
|
|
129
|
-
--alert-icon-bg:
|
|
130
|
-
--alert-icon-bg-border:
|
|
126
|
+
border-color: var(--variant-default-border);
|
|
127
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-default-bg) 20%, transparent);
|
|
128
|
+
--alert-icon-color: var(--variant-default-accent);
|
|
129
|
+
--alert-icon-bg: var(--variant-default-soft);
|
|
130
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-default-border) 55%, transparent);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.primary {
|
|
134
|
-
border-color:
|
|
135
|
-
box-shadow: 0 0 0 1px
|
|
136
|
-
--alert-icon-color:
|
|
137
|
-
--alert-icon-bg:
|
|
138
|
-
--alert-icon-bg-border:
|
|
134
|
+
border-color: var(--variant-primary-border);
|
|
135
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-primary-bg) 20%, transparent);
|
|
136
|
+
--alert-icon-color: var(--variant-primary-bg);
|
|
137
|
+
--alert-icon-bg: var(--variant-primary-soft);
|
|
138
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-primary-border) 55%, transparent);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.secondary {
|
|
142
|
+
border-color: var(--variant-secondary-border);
|
|
143
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-secondary-bg) 20%, transparent);
|
|
144
|
+
--alert-icon-color: var(--variant-secondary-bg);
|
|
145
|
+
--alert-icon-bg: var(--variant-secondary-soft);
|
|
146
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-secondary-border) 55%, transparent);
|
|
139
147
|
}
|
|
140
148
|
|
|
141
149
|
.info {
|
|
142
|
-
border-color:
|
|
143
|
-
box-shadow: 0 0 0 1px
|
|
144
|
-
--alert-icon-color:
|
|
145
|
-
--alert-icon-bg:
|
|
146
|
-
--alert-icon-bg-border:
|
|
150
|
+
border-color: var(--variant-info-border);
|
|
151
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-info-bg) 20%, transparent);
|
|
152
|
+
--alert-icon-color: var(--variant-info-bg);
|
|
153
|
+
--alert-icon-bg: var(--variant-info-soft);
|
|
154
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-info-border) 55%, transparent);
|
|
147
155
|
}
|
|
148
156
|
|
|
149
157
|
.success {
|
|
150
|
-
border-color:
|
|
151
|
-
box-shadow: 0 0 0 1px
|
|
152
|
-
--alert-icon-color:
|
|
153
|
-
--alert-icon-bg:
|
|
154
|
-
--alert-icon-bg-border:
|
|
158
|
+
border-color: var(--variant-success-border);
|
|
159
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-success-bg) 20%, transparent);
|
|
160
|
+
--alert-icon-color: var(--variant-success-bg);
|
|
161
|
+
--alert-icon-bg: var(--variant-success-soft);
|
|
162
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-success-border) 55%, transparent);
|
|
155
163
|
}
|
|
156
164
|
|
|
157
165
|
.warning {
|
|
158
|
-
border-color:
|
|
159
|
-
box-shadow: 0 0 0 1px
|
|
160
|
-
--alert-icon-color:
|
|
161
|
-
--alert-icon-bg:
|
|
162
|
-
--alert-icon-bg-border:
|
|
166
|
+
border-color: var(--variant-warning-border);
|
|
167
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-warning-bg) 20%, transparent);
|
|
168
|
+
--alert-icon-color: var(--variant-warning-bg);
|
|
169
|
+
--alert-icon-bg: var(--variant-warning-soft);
|
|
170
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-warning-border) 55%, transparent);
|
|
163
171
|
}
|
|
164
172
|
|
|
165
173
|
.danger {
|
|
166
|
-
border-color:
|
|
167
|
-
box-shadow: 0 0 0 1px
|
|
168
|
-
--alert-icon-color:
|
|
169
|
-
--alert-icon-bg:
|
|
170
|
-
--alert-icon-bg-border:
|
|
174
|
+
border-color: var(--variant-danger-border);
|
|
175
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-danger-bg) 20%, transparent);
|
|
176
|
+
--alert-icon-color: var(--variant-danger-bg);
|
|
177
|
+
--alert-icon-bg: var(--variant-danger-soft);
|
|
178
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-danger-border) 55%, transparent);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.dark {
|
|
182
|
+
border-color: var(--variant-dark-border);
|
|
183
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-dark-bg) 20%, transparent);
|
|
184
|
+
--alert-icon-color: var(--variant-dark-text);
|
|
185
|
+
--alert-icon-bg: color-mix(in srgb, var(--variant-dark-bg) 75%, transparent);
|
|
186
|
+
--alert-icon-bg-border: var(--variant-dark-border);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.light {
|
|
190
|
+
border-color: var(--variant-light-border);
|
|
191
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-light-bg) 30%, transparent);
|
|
192
|
+
--alert-icon-color: var(--variant-light-text);
|
|
193
|
+
--alert-icon-bg: color-mix(in srgb, var(--variant-light-bg) 80%, transparent);
|
|
194
|
+
--alert-icon-bg-border: var(--variant-light-border);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.neutral {
|
|
198
|
+
border-color: var(--variant-neutral-border);
|
|
199
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-neutral-bg) 20%, transparent);
|
|
200
|
+
--alert-icon-color: var(--variant-neutral-bg);
|
|
201
|
+
--alert-icon-bg: var(--variant-neutral-soft);
|
|
202
|
+
--alert-icon-bg-border: color-mix(in srgb, var(--variant-neutral-border) 55%, transparent);
|
|
171
203
|
}
|
|
@@ -2,9 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import type { UiVariant } from '../../types';
|
|
3
3
|
type BadgeVariant = UiVariant;
|
|
4
4
|
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
type BadgeShape = 'rounded' | 'pill' | 'circle';
|
|
5
6
|
type Props = React.HTMLAttributes<HTMLSpanElement> & {
|
|
6
7
|
variant?: BadgeVariant;
|
|
7
8
|
size?: BadgeSize;
|
|
9
|
+
shape?: BadgeShape;
|
|
10
|
+
dot?: boolean;
|
|
8
11
|
};
|
|
9
|
-
export default function Badge({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default function Badge({ variant, size, shape, dot, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
export {};
|
|
@@ -3,18 +3,40 @@ import styles from './Badge.module.css';
|
|
|
3
3
|
const classMap = {
|
|
4
4
|
default: styles.default,
|
|
5
5
|
primary: styles.primary,
|
|
6
|
+
secondary: styles.secondary,
|
|
6
7
|
info: styles.info,
|
|
7
8
|
success: styles.success,
|
|
8
9
|
warning: styles.warning,
|
|
9
10
|
danger: styles.danger,
|
|
11
|
+
dark: styles.dark,
|
|
12
|
+
light: styles.light,
|
|
13
|
+
neutral: styles.neutral,
|
|
10
14
|
};
|
|
11
15
|
const sizeMap = {
|
|
12
16
|
sm: styles.sizeSm,
|
|
13
17
|
md: styles.sizeMd,
|
|
14
18
|
lg: styles.sizeLg,
|
|
15
19
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
const shapeMap = {
|
|
21
|
+
rounded: styles.shapeRounded,
|
|
22
|
+
pill: styles.shapePill,
|
|
23
|
+
circle: styles.shapeCircle,
|
|
24
|
+
};
|
|
25
|
+
const isEmptyChildren = (children) => (children === null
|
|
26
|
+
|| children === undefined
|
|
27
|
+
|| children === ''
|
|
28
|
+
|| (Array.isArray(children) && children.length === 0));
|
|
29
|
+
export default function Badge({ variant = 'default', size = 'md', shape = 'rounded', dot = false, className, children, ...props }) {
|
|
30
|
+
const isDot = dot || isEmptyChildren(children);
|
|
31
|
+
const resolvedShape = isDot ? 'circle' : shape;
|
|
32
|
+
const classes = [
|
|
33
|
+
styles.badge,
|
|
34
|
+
classMap[variant],
|
|
35
|
+
sizeMap[size],
|
|
36
|
+
shapeMap[resolvedShape],
|
|
37
|
+
isDot ? styles.dot : null,
|
|
38
|
+
className,
|
|
39
|
+
].filter(Boolean).join(' ');
|
|
40
|
+
return _jsx("span", { className: classes, ...props, children: isDot ? null : children });
|
|
19
41
|
}
|
|
20
42
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAcxC,MAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;CACxB,CAAC;AAEF,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;CAClB,CAAC;AAEF,MAAM,QAAQ,GAA+B;IAC3C,OAAO,EAAE,MAAM,CAAC,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC,SAAS;IACtB,MAAM,EAAE,MAAM,CAAC,WAAW;CAC3B,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,QAAyB,EAAE,EAAE,CAAC,CACrD,QAAQ,KAAK,IAAI;OACd,QAAQ,KAAK,SAAS;OACtB,QAAQ,KAAK,EAAE;OACf,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,KAAK,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACF;IACN,MAAM,KAAK,GAAG,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,KAAK;QACZ,QAAQ,CAAC,OAAO,CAAC;QACjB,OAAO,CAAC,IAAI,CAAC;QACb,QAAQ,CAAC,aAAa,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;QACzB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,eAAM,SAAS,EAAE,OAAO,KAAM,KAAK,YAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,GAAQ,CAAC;AAC/E,CAAC"}
|
|
@@ -1,65 +1,122 @@
|
|
|
1
1
|
.badge {
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
4
5
|
gap: 6px;
|
|
5
|
-
padding:
|
|
6
|
-
border-radius:
|
|
7
|
-
font-size: 12px;
|
|
6
|
+
padding: var(--badge-padding-y, 0.25rem) var(--badge-padding-x, 0.5rem);
|
|
7
|
+
border-radius: var(--badge-border-radius, var(--radius-default));
|
|
8
8
|
line-height: 1;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
border: 0 solid var(--ui-border-color, var(--badge-border, transparent));
|
|
10
|
+
background: var(--badge-bg, var(--variant-default-bg));
|
|
11
|
+
color: var(--badge-color, var(--variant-default-text));
|
|
12
|
+
--ui-border-color: var(--badge-border, var(--variant-default-border));
|
|
13
|
+
min-width: 0;
|
|
14
|
+
box-sizing: border-box;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
.sizeSm {
|
|
15
|
-
padding:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
--badge-padding-y: 0.125rem;
|
|
19
|
+
--badge-padding-x: 0.375rem;
|
|
20
|
+
--badge-circle-size: 1.125rem;
|
|
21
|
+
--badge-dot-padding: 0.25rem;
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
.sizeMd {
|
|
21
|
-
padding:
|
|
22
|
-
|
|
25
|
+
--badge-padding-y: 0.25rem;
|
|
26
|
+
--badge-padding-x: 0.5rem;
|
|
27
|
+
--badge-circle-size: 1.375rem;
|
|
28
|
+
--badge-dot-padding: 0.3125rem;
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
.sizeLg {
|
|
26
|
-
padding:
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
--badge-padding-y: 0.375rem;
|
|
33
|
+
--badge-padding-x: 0.75rem;
|
|
34
|
+
--badge-circle-size: 1.625rem;
|
|
35
|
+
--badge-dot-padding: 0.375rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.shapeRounded {
|
|
39
|
+
border-radius: var(--badge-border-radius, var(--radius-default));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.shapePill {
|
|
43
|
+
border-radius: var(--badge-pill-border-radius, var(--radius-pill));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.shapeCircle {
|
|
47
|
+
width: var(--badge-circle-size, 1.375rem);
|
|
48
|
+
min-width: var(--badge-circle-size, 1.375rem);
|
|
49
|
+
height: var(--badge-circle-size, 1.375rem);
|
|
50
|
+
padding: 0;
|
|
51
|
+
border-radius: var(--badge-circle-border-radius, var(--radius-circle));
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dot {
|
|
56
|
+
width: 0;
|
|
57
|
+
min-width: 0;
|
|
58
|
+
height: 0;
|
|
59
|
+
padding: var(--badge-dot-padding, 0.3125rem);
|
|
60
|
+
border-radius: var(--badge-circle-border-radius, var(--radius-circle));
|
|
61
|
+
flex: 0 0 auto;
|
|
29
62
|
}
|
|
30
63
|
|
|
31
64
|
.default {
|
|
32
|
-
|
|
33
|
-
color: var(--
|
|
34
|
-
border
|
|
65
|
+
--badge-bg: var(--variant-default-bg);
|
|
66
|
+
--badge-color: var(--variant-default-text);
|
|
67
|
+
--badge-border: var(--variant-default-border);
|
|
35
68
|
}
|
|
36
69
|
|
|
37
70
|
.primary {
|
|
38
|
-
|
|
39
|
-
color: var(--
|
|
40
|
-
border
|
|
71
|
+
--badge-bg: var(--variant-primary-bg);
|
|
72
|
+
--badge-color: var(--variant-primary-text);
|
|
73
|
+
--badge-border: var(--variant-primary-border);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.secondary {
|
|
77
|
+
--badge-bg: var(--variant-secondary-bg);
|
|
78
|
+
--badge-color: var(--variant-secondary-text);
|
|
79
|
+
--badge-border: var(--variant-secondary-border);
|
|
41
80
|
}
|
|
42
81
|
|
|
43
82
|
.info {
|
|
44
|
-
|
|
45
|
-
color: var(--
|
|
46
|
-
border
|
|
83
|
+
--badge-bg: var(--variant-info-bg);
|
|
84
|
+
--badge-color: var(--variant-info-text);
|
|
85
|
+
--badge-border: var(--variant-info-border);
|
|
47
86
|
}
|
|
48
87
|
|
|
49
88
|
.success {
|
|
50
|
-
|
|
51
|
-
color: var(--
|
|
52
|
-
border
|
|
89
|
+
--badge-bg: var(--variant-success-bg);
|
|
90
|
+
--badge-color: var(--variant-success-text);
|
|
91
|
+
--badge-border: var(--variant-success-border);
|
|
53
92
|
}
|
|
54
93
|
|
|
55
94
|
.warning {
|
|
56
|
-
|
|
57
|
-
color: var(--
|
|
58
|
-
border
|
|
95
|
+
--badge-bg: var(--variant-warning-bg);
|
|
96
|
+
--badge-color: var(--variant-warning-text);
|
|
97
|
+
--badge-border: var(--variant-warning-border);
|
|
59
98
|
}
|
|
60
99
|
|
|
61
100
|
.danger {
|
|
62
|
-
|
|
63
|
-
color: var(--
|
|
64
|
-
border
|
|
101
|
+
--badge-bg: var(--variant-danger-bg);
|
|
102
|
+
--badge-color: var(--variant-danger-text);
|
|
103
|
+
--badge-border: var(--variant-danger-border);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.dark {
|
|
107
|
+
--badge-bg: var(--variant-dark-bg);
|
|
108
|
+
--badge-color: var(--variant-dark-text);
|
|
109
|
+
--badge-border: var(--variant-dark-border);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.light {
|
|
113
|
+
--badge-bg: var(--variant-light-bg);
|
|
114
|
+
--badge-color: var(--variant-light-text);
|
|
115
|
+
--badge-border: var(--variant-light-border);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.neutral {
|
|
119
|
+
--badge-bg: var(--variant-neutral-bg);
|
|
120
|
+
--badge-color: var(--variant-neutral-text);
|
|
121
|
+
--badge-border: var(--variant-neutral-border);
|
|
65
122
|
}
|
|
@@ -3,10 +3,19 @@ import type { UiVariant } from '../../types';
|
|
|
3
3
|
type ButtonVariant = UiVariant;
|
|
4
4
|
type ButtonAppearance = 'solid' | 'outline' | 'ghost';
|
|
5
5
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
6
7
|
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
7
8
|
variant?: ButtonVariant | 'ghost' | 'outline';
|
|
8
9
|
appearance?: ButtonAppearance;
|
|
9
10
|
size?: ButtonSize;
|
|
10
11
|
};
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
13
|
+
orientation?: ButtonGroupOrientation;
|
|
14
|
+
stretch?: boolean;
|
|
15
|
+
};
|
|
16
|
+
declare function ButtonBase({ variant, appearance, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function ButtonGroup({ orientation, stretch, className, role, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare const Button: typeof ButtonBase & {
|
|
19
|
+
Group: typeof ButtonGroup;
|
|
20
|
+
};
|
|
21
|
+
export default Button;
|
|
@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
const variantClass = {
|
|
3
3
|
default: 'btn-default',
|
|
4
4
|
primary: 'btn-primary',
|
|
5
|
+
secondary: 'btn-secondary',
|
|
5
6
|
info: 'btn-info',
|
|
6
7
|
success: 'btn-success',
|
|
7
8
|
warning: 'btn-warning',
|
|
8
9
|
danger: 'btn-danger',
|
|
10
|
+
dark: 'btn-dark',
|
|
11
|
+
light: 'btn-light',
|
|
12
|
+
neutral: 'btn-neutral',
|
|
9
13
|
};
|
|
10
14
|
const appearanceClass = {
|
|
11
15
|
solid: 'btn-solid',
|
|
@@ -26,11 +30,26 @@ const normalizeVariant = (variant, appearance) => {
|
|
|
26
30
|
appearance: appearance ?? 'solid',
|
|
27
31
|
};
|
|
28
32
|
};
|
|
29
|
-
|
|
33
|
+
function ButtonBase({ variant, appearance, size = 'md', className, ...props }) {
|
|
30
34
|
const resolved = normalizeVariant(variant, appearance);
|
|
31
35
|
const classes = ['btn', variantClass[resolved.variant], appearanceClass[resolved.appearance], sizeClass[size], className]
|
|
32
36
|
.filter(Boolean)
|
|
33
37
|
.join(' ');
|
|
34
38
|
return _jsx("button", { className: classes, ...props });
|
|
35
39
|
}
|
|
40
|
+
function ButtonGroup({ orientation = 'horizontal', stretch = false, className, role = 'group', ...props }) {
|
|
41
|
+
const classes = [
|
|
42
|
+
'btn-group',
|
|
43
|
+
orientation === 'vertical' ? 'btn-group-vertical' : 'btn-group-horizontal',
|
|
44
|
+
stretch ? 'btn-group-stretch' : null,
|
|
45
|
+
className,
|
|
46
|
+
]
|
|
47
|
+
.filter(Boolean)
|
|
48
|
+
.join(' ');
|
|
49
|
+
return _jsx("div", { className: classes, role: role, ...props });
|
|
50
|
+
}
|
|
51
|
+
const Button = Object.assign(ButtonBase, {
|
|
52
|
+
Group: ButtonGroup,
|
|
53
|
+
});
|
|
54
|
+
export default Button;
|
|
36
55
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAmBA,MAAM,YAAY,GAAkC;IAClD,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,eAAe,GAAqC;IACxD,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,SAAS,GAA+B;IAC5C,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,OAA6C,EAAE,UAA6B,EAAE,EAAE;IACxG,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,SAA0B,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACtE,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,UAAU,EAAE,UAAU,IAAI,OAAO;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAClF,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;SACtH,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,iBAAQ,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACnD,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,WAAW,GAAG,YAAY,EAC1B,OAAO,GAAG,KAAK,EACf,SAAS,EACT,IAAI,GAAG,OAAO,EACd,GAAG,KAAK,EACS;IACjB,MAAM,OAAO,GAAG;QACd,WAAW;QACX,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB;QAC1E,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI;QACpC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AAC5D,CAAC;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IACvC,KAAK,EAAE,WAAW;CACnB,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -21,7 +21,9 @@ type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
21
21
|
align?: 'left' | 'right' | 'between';
|
|
22
22
|
buttonHideLabelOn?: 'never' | 'md';
|
|
23
23
|
};
|
|
24
|
-
type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement
|
|
24
|
+
type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
25
|
+
attached?: boolean;
|
|
26
|
+
};
|
|
25
27
|
type CardToolbarButtonBaseProps = Omit<React.ComponentProps<typeof Button>, 'children'> & {
|
|
26
28
|
icon?: React.ReactNode;
|
|
27
29
|
label?: React.ReactNode;
|
|
@@ -150,9 +150,15 @@ function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
|
|
|
150
150
|
.join(' ');
|
|
151
151
|
return (_jsxs(Button, { size: "sm", appearance: "outline", className: classes, ...props, children: [hasIcon ? _jsx("span", { className: styles.toolbarButtonIcon, children: icon }) : null, hasBoth ? _jsx("span", { className: styles.toolbarButtonSeparator, "aria-hidden": "true" }) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, children: label })) : null] }));
|
|
152
152
|
}
|
|
153
|
-
function CardToolbarGroup({ className, ...props }) {
|
|
154
|
-
const classes = [
|
|
155
|
-
|
|
153
|
+
function CardToolbarGroup({ attached = false, className, role, ...props }) {
|
|
154
|
+
const classes = [
|
|
155
|
+
styles.toolbarGroup,
|
|
156
|
+
attached ? styles.toolbarGroupAttached : null,
|
|
157
|
+
attached ? 'btn-group btn-group-horizontal' : null,
|
|
158
|
+
className,
|
|
159
|
+
].filter(Boolean).join(' ');
|
|
160
|
+
const resolvedRole = role ?? (attached ? 'group' : undefined);
|
|
161
|
+
return _jsx("div", { className: classes, role: resolvedRole, ...props });
|
|
156
162
|
}
|
|
157
163
|
const CardToolbar = Object.assign(CardToolbarBase, {
|
|
158
164
|
Group: CardToolbarGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.card {
|
|
2
2
|
background: var(--surface-card);
|
|
3
3
|
border: 1px solid var(--color-line);
|
|
4
|
-
border-radius: var(--radius-
|
|
4
|
+
border-radius: var(--card-border-radius, var(--radius-default));
|
|
5
5
|
padding: var(--spacing-7);
|
|
6
6
|
box-shadow: var(--shadow-soft);
|
|
7
7
|
display: flex;
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
column-gap: var(--spacing-2);
|
|
25
25
|
row-gap: 0;
|
|
26
26
|
padding: var(--spacing-2) var(--spacing-3);
|
|
27
|
-
border-radius: var(--radius-
|
|
27
|
+
border-radius: var(--card-toolbar-border-radius, var(--card-border-radius, var(--radius-default)));
|
|
28
28
|
border: 1px solid var(--color-line);
|
|
29
29
|
background: var(--surface-panel-soft);
|
|
30
30
|
overflow: hidden;
|
|
@@ -102,6 +102,12 @@
|
|
|
102
102
|
min-width: 0;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
+
.toolbarGroupAttached {
|
|
106
|
+
flex-wrap: nowrap;
|
|
107
|
+
gap: 0;
|
|
108
|
+
padding-inline: var(--spacing-1);
|
|
109
|
+
}
|
|
110
|
+
|
|
105
111
|
.toolbarButton {
|
|
106
112
|
min-height: 32px;
|
|
107
113
|
min-width: 0;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
background: var(--surface-control);
|
|
7
7
|
color: var(--color-text);
|
|
8
8
|
padding: var(--spacing-3) calc(var(--spacing-4) + var(--spacing-1) / 2);
|
|
9
|
-
border-radius: var(--radius-
|
|
9
|
+
border-radius: var(--collapse-button-border-radius, var(--radius-default));
|
|
10
10
|
cursor: pointer;
|
|
11
11
|
}
|
|
12
12
|
|