@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.2
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/.storybook/Wrappers.js +30 -0
- package/.storybook/Wrappers.js.map +1 -0
- package/Button/Button.d.ts +58 -0
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +53 -56
- package/Button/Button.js.map +1 -1
- package/Button/Button.s.d.ts +83 -0
- package/Button/Button.s.d.ts.map +1 -0
- package/Button/Button.s.js +163 -0
- package/Button/Button.s.js.map +1 -0
- package/Button/Button.stories.js +218 -73
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.types.d.ts +29 -6
- package/Button/Button.types.d.ts.map +1 -1
- package/Button/buttonVariants.d.ts +4 -12
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +6 -7
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts +1 -0
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +20 -19
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +40 -35
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/ButtonIcon.types.d.ts +5 -8
- package/ButtonIcon/ButtonIcon.types.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +3 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +8 -0
- package/LoadedIcon/LoadedIcon.d.ts +1 -1
- package/LoadedIcon/LoadedIcon.d.ts.map +1 -1
- package/LoadedIcon/LoadedIcon.js +15 -13
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/package.json +4 -4
package/Button/Button.stories.js
CHANGED
|
@@ -1,31 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Button as
|
|
3
|
-
import { PlusIcon as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{
|
|
7
|
-
style: {
|
|
8
|
-
padding: "0px 20px",
|
|
9
|
-
display: "flex",
|
|
10
|
-
gap: "32px",
|
|
11
|
-
alignItems: "flex-start"
|
|
12
|
-
},
|
|
13
|
-
children: /* @__PURE__ */ a(
|
|
14
|
-
"div",
|
|
15
|
-
{
|
|
16
|
-
style: {
|
|
17
|
-
position: "relative",
|
|
18
|
-
border: "2px dashed rgba(139, 92, 246, 0.7)",
|
|
19
|
-
borderRadius: "24px",
|
|
20
|
-
padding: "24px 32px",
|
|
21
|
-
display: "flex",
|
|
22
|
-
gap: "32px"
|
|
23
|
-
},
|
|
24
|
-
children: e.children
|
|
25
|
-
}
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
), r = (e) => /* @__PURE__ */ a(
|
|
1
|
+
import { jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { Button as e } from "./Button.js";
|
|
3
|
+
import { FileDownIcon as m, Trash2Icon as p, PlusIcon as n } from "lucide-react";
|
|
4
|
+
import { DashedWrapper as a } from "../.storybook/Wrappers.js";
|
|
5
|
+
const r = (o) => /* @__PURE__ */ t(
|
|
29
6
|
"div",
|
|
30
7
|
{
|
|
31
8
|
style: {
|
|
@@ -34,35 +11,117 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
|
|
|
34
11
|
flexDirection: "column",
|
|
35
12
|
gap: "16px"
|
|
36
13
|
},
|
|
37
|
-
children: ["default", "hover", "focus", "active", "disabled"].map((l) => /* @__PURE__ */
|
|
38
|
-
|
|
14
|
+
children: ["default", "hover", "focus", "active", "disabled", "loading"].map((l) => /* @__PURE__ */ t(
|
|
15
|
+
e,
|
|
39
16
|
{
|
|
40
17
|
id: l,
|
|
41
|
-
...
|
|
42
|
-
disabled: l === "disabled" ||
|
|
43
|
-
|
|
18
|
+
...o,
|
|
19
|
+
disabled: l === "disabled" || o.disabled,
|
|
20
|
+
loading: l === "loading" || o.loading,
|
|
21
|
+
children: o.children
|
|
44
22
|
},
|
|
45
23
|
l
|
|
46
24
|
))
|
|
47
25
|
}
|
|
48
|
-
),
|
|
26
|
+
), u = ["none", "contained", "outlined", "ghost"], g = ["primary", "secondary", "error"], f = ["xs", "sm", "md", "lg"], h = "contained", y = "primary", v = "lg", s = {
|
|
27
|
+
undefined: void 0,
|
|
28
|
+
"<PlusIcon />": /* @__PURE__ */ t(n, {}),
|
|
29
|
+
"<Trash2Icon />": /* @__PURE__ */ t(p, {}),
|
|
30
|
+
"<FileDownIcon />": /* @__PURE__ */ t(m, {}),
|
|
31
|
+
PlusIcon: n,
|
|
32
|
+
Trash2Icon: p,
|
|
33
|
+
FileDownIcon: m
|
|
34
|
+
}, d = {
|
|
35
|
+
// title: 'Components/Button/Button',
|
|
36
|
+
// title: 'ui/Button',
|
|
49
37
|
title: "Button",
|
|
50
|
-
component:
|
|
51
|
-
render:
|
|
38
|
+
component: e,
|
|
39
|
+
// render: Template,
|
|
52
40
|
args: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
41
|
+
tooltip: void 0,
|
|
42
|
+
asChild: !1,
|
|
43
|
+
//
|
|
44
|
+
variant: h,
|
|
45
|
+
color: y,
|
|
46
|
+
size: v,
|
|
47
|
+
loading: !1,
|
|
56
48
|
disabled: !1,
|
|
57
|
-
|
|
49
|
+
startAdornment: void 0,
|
|
50
|
+
endAdornment: void 0,
|
|
51
|
+
slotProps: {},
|
|
52
|
+
tooltipProps: {}
|
|
58
53
|
},
|
|
59
54
|
argTypes: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
55
|
+
tooltip: {
|
|
56
|
+
name: "tooltip",
|
|
57
|
+
description: "Button tooltip from ButtonProps [deprecated, use title and message instead]",
|
|
58
|
+
control: !1
|
|
59
|
+
},
|
|
60
|
+
asChild: {
|
|
61
|
+
name: "tooltip",
|
|
62
|
+
description: "Button asChild from ButtonProps [boolean]",
|
|
63
|
+
control: !1
|
|
64
|
+
},
|
|
65
|
+
variant: {
|
|
66
|
+
name: "variant",
|
|
67
|
+
description: "Button variant from ButtonProps",
|
|
68
|
+
options: u,
|
|
69
|
+
control: { type: "inline-radio" }
|
|
70
|
+
},
|
|
71
|
+
color: {
|
|
72
|
+
name: "color",
|
|
73
|
+
description: "Button color from ButtonProps",
|
|
74
|
+
options: g,
|
|
75
|
+
control: { type: "inline-radio" }
|
|
76
|
+
},
|
|
77
|
+
size: {
|
|
78
|
+
name: "size",
|
|
79
|
+
description: "Button size from ButtonProps",
|
|
80
|
+
options: f,
|
|
81
|
+
control: { type: "inline-radio" }
|
|
82
|
+
},
|
|
83
|
+
title: {
|
|
84
|
+
name: "title",
|
|
85
|
+
description: "Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]",
|
|
86
|
+
control: { type: "text" }
|
|
87
|
+
},
|
|
88
|
+
message: {
|
|
89
|
+
name: "message",
|
|
90
|
+
description: "Button tooltip message from ButtonProps [ReactNode]",
|
|
91
|
+
control: { type: "object" }
|
|
92
|
+
},
|
|
93
|
+
startAdornment: {
|
|
94
|
+
name: "startAdornment",
|
|
95
|
+
description: "Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
|
|
96
|
+
options: Object.keys(s),
|
|
97
|
+
mapping: s,
|
|
98
|
+
control: { type: "inline-radio" }
|
|
99
|
+
},
|
|
100
|
+
endAdornment: {
|
|
101
|
+
name: "endAdornment",
|
|
102
|
+
description: "Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
|
|
103
|
+
options: Object.keys(s),
|
|
104
|
+
mapping: s,
|
|
105
|
+
control: { type: "inline-radio" }
|
|
106
|
+
},
|
|
107
|
+
slotProps: {
|
|
108
|
+
name: "slotProps",
|
|
109
|
+
description: "Button slotProps from ButtonProps [object]",
|
|
110
|
+
control: { type: "object" }
|
|
111
|
+
},
|
|
112
|
+
tooltipProps: {
|
|
113
|
+
name: "tooltipProps",
|
|
114
|
+
description: "Button tooltipProps from ButtonProps [object]",
|
|
115
|
+
control: { type: "object" }
|
|
116
|
+
}
|
|
64
117
|
},
|
|
118
|
+
tags: ["autodocs"],
|
|
65
119
|
parameters: {
|
|
120
|
+
docs: {
|
|
121
|
+
description: {
|
|
122
|
+
component: "Universal button component with variants, icons and tooltip support."
|
|
123
|
+
}
|
|
124
|
+
},
|
|
66
125
|
pseudo: {
|
|
67
126
|
hover: "#hover",
|
|
68
127
|
focus: "#focus",
|
|
@@ -70,16 +129,99 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
|
|
|
70
129
|
disabled: "#disabled"
|
|
71
130
|
}
|
|
72
131
|
}
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
startAdornment: /* @__PURE__ */ a(s, {}),
|
|
78
|
-
endAdornment: /* @__PURE__ */ a(s, {}),
|
|
132
|
+
}, c = {
|
|
133
|
+
...d.args,
|
|
134
|
+
startAdornment: /* @__PURE__ */ t(n, {}),
|
|
135
|
+
endAdornment: /* @__PURE__ */ t(n, {}),
|
|
79
136
|
children: "children"
|
|
80
|
-
},
|
|
137
|
+
}, D = {
|
|
138
|
+
args: {
|
|
139
|
+
...d.args,
|
|
140
|
+
children: "_children_"
|
|
141
|
+
}
|
|
142
|
+
}, x = {
|
|
143
|
+
render: (o) => /* @__PURE__ */ i(a, { children: [
|
|
144
|
+
/* @__PURE__ */ t(e, { ...o }),
|
|
145
|
+
/* @__PURE__ */ t(e, { ...o, startAdornment: /* @__PURE__ */ t(n, {}) }),
|
|
146
|
+
/* @__PURE__ */ t(e, { ...o, startAdornment: /* @__PURE__ */ t(n, {}), endAdornment: /* @__PURE__ */ t(n, {}) }),
|
|
147
|
+
/* @__PURE__ */ t(e, { ...o, endAdornment: /* @__PURE__ */ t(n, {}) })
|
|
148
|
+
] }),
|
|
149
|
+
args: {
|
|
150
|
+
...d.args,
|
|
151
|
+
disabled: !0,
|
|
152
|
+
children: "disabled"
|
|
153
|
+
}
|
|
154
|
+
}, S = {
|
|
155
|
+
render: (o) => /* @__PURE__ */ i(a, { children: [
|
|
156
|
+
/* @__PURE__ */ t(e, { ...o }),
|
|
157
|
+
/* @__PURE__ */ t(e, { ...o, startAdornment: /* @__PURE__ */ t(n, {}) }),
|
|
158
|
+
/* @__PURE__ */ t(e, { ...o, startAdornment: /* @__PURE__ */ t(n, {}), endAdornment: /* @__PURE__ */ t(n, {}) }),
|
|
159
|
+
/* @__PURE__ */ t(e, { ...o, endAdornment: /* @__PURE__ */ t(n, {}) })
|
|
160
|
+
] }),
|
|
161
|
+
args: {
|
|
162
|
+
children: "Loading…",
|
|
163
|
+
loading: !0
|
|
164
|
+
}
|
|
165
|
+
}, G = {
|
|
166
|
+
render: (o) => /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
167
|
+
/* @__PURE__ */ t(
|
|
168
|
+
e,
|
|
169
|
+
{
|
|
170
|
+
...o,
|
|
171
|
+
title: "delayDuration: 0",
|
|
172
|
+
tooltipProps: { delayDuration: 0 },
|
|
173
|
+
children: "delayDuration: 0"
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ t(
|
|
177
|
+
e,
|
|
178
|
+
{
|
|
179
|
+
...o,
|
|
180
|
+
title: "delayDuration: 300 [default]",
|
|
181
|
+
tooltipProps: { delayDuration: 300 },
|
|
182
|
+
children: "delayDuration: 300"
|
|
183
|
+
}
|
|
184
|
+
),
|
|
185
|
+
/* @__PURE__ */ t(
|
|
186
|
+
e,
|
|
187
|
+
{
|
|
188
|
+
...o,
|
|
189
|
+
title: "delayDuration: 700",
|
|
190
|
+
tooltipProps: { delayDuration: 700 },
|
|
191
|
+
children: "delayDuration: 700"
|
|
192
|
+
}
|
|
193
|
+
),
|
|
194
|
+
/* @__PURE__ */ t(e, { ...o, title: "title_string", children: "title" }),
|
|
195
|
+
/* @__PURE__ */ t(e, { ...o, message: "message_string", children: "message: string" }),
|
|
196
|
+
/* @__PURE__ */ t(
|
|
197
|
+
e,
|
|
198
|
+
{
|
|
199
|
+
...o,
|
|
200
|
+
message: /* @__PURE__ */ t("span", { children: "message_node_span" }),
|
|
201
|
+
children: "message: ReactNode"
|
|
202
|
+
}
|
|
203
|
+
),
|
|
204
|
+
/* @__PURE__ */ t(
|
|
205
|
+
e,
|
|
206
|
+
{
|
|
207
|
+
...o,
|
|
208
|
+
message: "message_string",
|
|
209
|
+
tooltipProps: {
|
|
210
|
+
showQuestionMark: !0
|
|
211
|
+
},
|
|
212
|
+
children: "showQuestionMark: true"
|
|
213
|
+
}
|
|
214
|
+
)
|
|
215
|
+
] }),
|
|
216
|
+
args: {
|
|
217
|
+
children: "tooltips",
|
|
218
|
+
tooltipProps: {
|
|
219
|
+
defaultOpen: !0
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}, V = {
|
|
81
223
|
args: {
|
|
82
|
-
...
|
|
224
|
+
...c,
|
|
83
225
|
color: "primary",
|
|
84
226
|
size: "lg",
|
|
85
227
|
children: "Створити"
|
|
@@ -88,14 +230,14 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
|
|
|
88
230
|
variant: { control: !1 },
|
|
89
231
|
color: { control: !1 }
|
|
90
232
|
},
|
|
91
|
-
render: (
|
|
92
|
-
/* @__PURE__ */
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */
|
|
233
|
+
render: (o) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
|
|
234
|
+
/* @__PURE__ */ t(r, { ...o, variant: "contained" }),
|
|
235
|
+
/* @__PURE__ */ t(r, { ...o, variant: "outlined" }),
|
|
236
|
+
/* @__PURE__ */ t(r, { ...o, variant: "ghost" })
|
|
95
237
|
] }) })
|
|
96
|
-
},
|
|
238
|
+
}, T = {
|
|
97
239
|
args: {
|
|
98
|
-
...
|
|
240
|
+
...c,
|
|
99
241
|
color: "secondary",
|
|
100
242
|
size: "lg",
|
|
101
243
|
children: "Створити"
|
|
@@ -104,14 +246,14 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
|
|
|
104
246
|
variant: { control: !1 },
|
|
105
247
|
color: { control: !1 }
|
|
106
248
|
},
|
|
107
|
-
render: (
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
-
/* @__PURE__ */
|
|
249
|
+
render: (o) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
|
|
250
|
+
/* @__PURE__ */ t(r, { ...o, variant: "contained" }),
|
|
251
|
+
/* @__PURE__ */ t(r, { ...o, variant: "outlined" }),
|
|
252
|
+
/* @__PURE__ */ t(r, { ...o, variant: "ghost" })
|
|
111
253
|
] }) })
|
|
112
|
-
},
|
|
254
|
+
}, _ = {
|
|
113
255
|
args: {
|
|
114
|
-
...
|
|
256
|
+
...c,
|
|
115
257
|
color: "error",
|
|
116
258
|
size: "lg",
|
|
117
259
|
children: "Створити"
|
|
@@ -120,17 +262,20 @@ const h = (e) => /* @__PURE__ */ a(t, { ...e }), i = (e) => /* @__PURE__ */ a(
|
|
|
120
262
|
variant: { control: !1 },
|
|
121
263
|
color: { control: !1 }
|
|
122
264
|
},
|
|
123
|
-
render: (
|
|
124
|
-
/* @__PURE__ */
|
|
125
|
-
/* @__PURE__ */
|
|
126
|
-
/* @__PURE__ */
|
|
265
|
+
render: (o) => /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ i(a, { children: [
|
|
266
|
+
/* @__PURE__ */ t(r, { ...o, variant: "contained" }),
|
|
267
|
+
/* @__PURE__ */ t(r, { ...o, variant: "outlined" }),
|
|
268
|
+
/* @__PURE__ */ t(r, { ...o, variant: "ghost" })
|
|
127
269
|
] }) })
|
|
128
270
|
};
|
|
129
271
|
export {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
272
|
+
D as Default,
|
|
273
|
+
x as Disabled,
|
|
274
|
+
_ as Error,
|
|
275
|
+
S as Loading,
|
|
276
|
+
V as Primary,
|
|
277
|
+
T as Secondary,
|
|
278
|
+
G as Tooltips,
|
|
279
|
+
d as default
|
|
135
280
|
};
|
|
136
281
|
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Button } from './Button';\nimport type { ButtonProps } from './Button.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonProps) => (\n <Button {...props}/>\n);\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n return (\n <div\n style={{\n padding: '0px 20px',\n display: 'flex',\n gap: '32px',\n alignItems: 'flex-start',\n }}\n >\n <div\n style={{\n position: 'relative',\n border: '2px dashed rgba(139, 92, 246, 0.7)',\n borderRadius: '24px',\n padding: '24px 32px',\n display: 'flex',\n gap: '32px',\n }}\n >\n {props.children}\n </div>\n </div>\n )\n}\n\nconst States = (props: ButtonProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n .map((state) => (\n <Button\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n >\n {props.children}\n </Button>\n ))}\n </div>\n);\n\nconst variants: ButtonProps['variant'][] = [ 'transparent', 'none', 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonProps['size'][] = [ 'sm', 'lg' ]\n\nconst meta = {\n title: 'Button',\n component: Button,\n render: Template,\n args: {\n variant: variants[0],\n color: colors[0],\n size: sizes[0],\n disabled: false,\n asChild: false,\n },\n argTypes: {\n asChild: { control: false },\n variant: { options: variants, control: { type: 'select' } },\n color: { options: colors, control: { type: 'select' } },\n size: { options: sizes, control: { type: 'select' } },\n },\n parameters: {\n pseudo: {\n hover: '#hover',\n focus: '#focus',\n active: '#active',\n disabled: '#disabled',\n },\n }\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n disabled: false,\n loading: false,\n asChild: false,\n startAdornment: <PlusIcon/>,\n endAdornment: <PlusIcon/>,\n children: 'children',\n}\n\nexport const Default: Story = { args };\n\nexport const Primary: Story = {\n args: {\n ...args,\n color: 'primary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Secondary: Story = {\n args: {\n ...args,\n color: 'secondary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Error: Story = {\n args: {\n ...args,\n color: 'error',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\n"],"names":["Template","props","jsx","Button","DashedWrapper","States","state","variants","colors","sizes","meta","args","PlusIcon","Default","Primary","Secondary","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Button } from './Button';\nimport { ButtonProps } from './Button.types';\nimport React from 'react';\nimport { PlusIcon, Trash2Icon, FileDownIcon } from 'lucide-react';\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\n\nconst States = (props: ButtonProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled', 'loading' ]\n .map((state) => (\n <Button\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n loading={state === 'loading' || props.loading}\n >\n {props.children}\n </Button>\n ))}\n </div>\n);\n\nconst variants: ButtonProps['variant'][] = [ 'none', 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n 'undefined': undefined,\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n PlusIcon: PlusIcon,\n Trash2Icon: Trash2Icon,\n FileDownIcon: FileDownIcon,\n};\n\nconst meta = {\n // title: 'Components/Button/Button',\n // title: 'ui/Button',\n title: 'Button',\n component: Button,\n // render: Template,\n args: {\n tooltip: undefined,\n asChild: false,\n //\n variant: variant_default,\n color: color_default,\n size: size_default,\n loading: false,\n disabled: false,\n startAdornment: undefined,\n endAdornment: undefined,\n slotProps: {},\n tooltipProps: {}\n },\n argTypes: {\n tooltip: {\n name: 'tooltip',\n description: 'Button tooltip from ButtonProps [deprecated, use title and message instead]',\n control: false,\n },\n asChild: {\n name: 'tooltip',\n description: 'Button asChild from ButtonProps [boolean]',\n control: false\n },\n variant: {\n name: 'variant',\n description: 'Button variant from ButtonProps',\n options: variants,\n control: { type: 'inline-radio', }\n },\n color: {\n name: 'color',\n description: 'Button color from ButtonProps',\n options: colors,\n control: { type: 'inline-radio' }\n },\n size: {\n name: 'size',\n description: 'Button size from ButtonProps',\n options: sizes,\n control: { type: 'inline-radio' }\n },\n title: {\n name: 'title',\n description: \"Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n control: { type: 'text' },\n },\n message: {\n name: 'message',\n description: 'Button tooltip message from ButtonProps [ReactNode]',\n control: { type: \"object\" },\n },\n startAdornment: {\n name: 'startAdornment',\n description: 'Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n endAdornment: {\n name: 'endAdornment',\n description: 'Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n slotProps: {\n name: 'slotProps',\n description: 'Button slotProps from ButtonProps [object]',\n control: { type: \"object\" },\n },\n tooltipProps: {\n name: 'tooltipProps',\n description: 'Button tooltipProps from ButtonProps [object]',\n control: { type: \"object\" },\n },\n },\n tags: [ 'autodocs' ],\n parameters: {\n docs: {\n description: {\n component: 'Universal button component with variants, icons and tooltip support.',\n },\n },\n pseudo: {\n hover: '#hover',\n focus: '#focus',\n active: '#active',\n disabled: '#disabled',\n },\n }\n} satisfies Meta<typeof Button>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n ...meta.args,\n startAdornment: <PlusIcon/>,\n endAdornment: <PlusIcon/>,\n children: 'children',\n}\n\nexport const Default: Story = {\n args: {\n ...meta.args,\n children: '_children_',\n }\n};\n\nexport const Disabled: Story = {\n render: (props) => (\n <DashedWrapper>\n <Button {...props} />\n <Button {...props} startAdornment={<PlusIcon/>}/>\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n <Button {...props} endAdornment={<PlusIcon/>}/>\n </DashedWrapper>\n ),\n args: {\n ...meta.args,\n disabled: true,\n children: 'disabled',\n }\n};\n\nexport const Loading: Story = {\n render: (props) => (\n <DashedWrapper>\n <Button {...props} />\n <Button {...props} startAdornment={<PlusIcon/>}/>\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n <Button {...props} endAdornment={<PlusIcon/>}/>\n </DashedWrapper>\n ),\n args: {\n children: 'Loading…',\n loading: true,\n },\n};\n\nexport const Tooltips: Story = {\n render: (props) => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <Button\n {...props}\n title='delayDuration: 0'\n tooltipProps={{ delayDuration: 0 }}\n >\n delayDuration: 0\n </Button>\n <Button\n {...props}\n title='delayDuration: 300 [default]'\n tooltipProps={{ delayDuration: 300 }}\n >\n delayDuration: 300\n </Button>\n <Button\n {...props}\n title='delayDuration: 700'\n tooltipProps={{ delayDuration: 700 }}\n >\n delayDuration: 700\n </Button>\n\n <Button {...props} title='title_string'>title</Button>\n <Button {...props} message='message_string'>message: string</Button>\n <Button\n {...props}\n message={<span>message_node_span</span>}\n >\n message: ReactNode\n </Button>\n <Button\n {...props}\n message='message_string'\n tooltipProps={{\n showQuestionMark: true\n }}\n >\n showQuestionMark: true\n </Button>\n </div>\n ),\n args: {\n children: 'tooltips',\n tooltipProps: {\n defaultOpen: true\n },\n },\n};\n\nexport const Primary: Story = {\n args: {\n ...args,\n color: 'primary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Secondary: Story = {\n args: {\n ...args,\n color: 'secondary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Error: Story = {\n args: {\n ...args,\n color: 'error',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n"],"names":["States","props","jsx","state","Button","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","meta","args","Default","Disabled","jsxs","DashedWrapper","Loading","Tooltips","Primary","Secondary","Error"],"mappings":"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"}
|
package/Button/Button.types.d.ts
CHANGED
|
@@ -1,13 +1,36 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { ButtonVariantProps } from './buttonVariants';
|
|
1
|
+
import { ButtonHTMLAttributes, ComponentType, ReactElement, SVGProps, ReactNode } from 'react';
|
|
3
2
|
import { TooltipProps } from '../Tooltip';
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { ButtonVarianceProps } from './buttonVariants';
|
|
4
|
+
type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
|
|
5
|
+
export interface ButtonDefaultProps extends Omit<ButtonAttributes, 'color' | 'title' | 'disabled'> {
|
|
6
6
|
asChild?: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface ButtonTooltipProps {
|
|
11
|
+
/**
|
|
12
|
+
* Tooltip text shown by the native `title` attribute.
|
|
13
|
+
* Use a string value only.
|
|
14
|
+
*/
|
|
15
|
+
title?: ButtonAttributes['title'];
|
|
16
|
+
/**
|
|
17
|
+
* Tooltip content rendered by the Tooltip component.
|
|
18
|
+
* Can be a React node (JSX, string, element).
|
|
19
|
+
*/
|
|
20
|
+
message?: TooltipProps['message'];
|
|
7
21
|
/**@deprecated: use message instead. */
|
|
8
22
|
tooltip?: ReactNode;
|
|
9
23
|
tooltipProps?: TooltipProps;
|
|
10
|
-
startAdornment?: ReactNode;
|
|
11
|
-
endAdornment?: ReactNode;
|
|
12
24
|
}
|
|
25
|
+
export type ButtonBaseProps<VariantProps extends object = object, SlotProps = unknown> = ButtonDefaultProps & ButtonTooltipProps & VariantProps & {
|
|
26
|
+
slotProps?: SlotProps;
|
|
27
|
+
};
|
|
28
|
+
export interface ButtonSlotProps {
|
|
29
|
+
}
|
|
30
|
+
export type ButtonAdornmentProps = ComponentType<SVGProps<SVGSVGElement>> | ReactElement<SVGProps<SVGSVGElement>>;
|
|
31
|
+
export interface ButtonProps extends ButtonBaseProps<ButtonVarianceProps, ButtonSlotProps> {
|
|
32
|
+
startAdornment?: ButtonAdornmentProps;
|
|
33
|
+
endAdornment?: ButtonAdornmentProps;
|
|
34
|
+
}
|
|
35
|
+
export {};
|
|
13
36
|
//# sourceMappingURL=Button.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEhE,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,MAAM,eAAe,CACzB,YAAY,SAAS,MAAM,GAAG,MAAM,EACpC,SAAS,GAAG,OAAO,IAEnB,kBAAkB,GAClB,kBAAkB,GAClB,YAAY,GAAG;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,eAAe;CAC/B;AAED,MAAM,MAAM,oBAAoB,GAC5B,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GACtC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1C,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,mBAAmB,EAAE,eAAe,CAAC;IAC7D,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const buttonVariants: (props?: ({
|
|
3
|
-
variant?: "
|
|
3
|
+
variant?: "none" | "default" | "destructive" | "outline" | "secondary" | "contained" | "outlined" | "ghost" | null | undefined;
|
|
4
4
|
color?: "secondary" | "primary" | "error" | null | undefined;
|
|
5
|
-
size?: "
|
|
5
|
+
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export type ButtonCVAProps = VariantProps<typeof buttonVariants>;
|
|
8
8
|
type ButtonCVANoVariantProps = Omit<VariantProps<typeof buttonVariants>, 'variant'>;
|
|
9
|
-
type ButtonCVANoSizeProps = Omit<VariantProps<typeof buttonVariants>, 'size'>;
|
|
10
9
|
type ButtonCVAVariants = ButtonCVAProps['variant'];
|
|
11
10
|
/** @deprecated use "variant=contained color=primary" instead */
|
|
12
11
|
type LegacyDefaultVariant = 'default';
|
|
@@ -18,16 +17,9 @@ type LegacyGhostVariant = 'ghost';
|
|
|
18
17
|
type LegacySecondaryVariant = 'secondary';
|
|
19
18
|
/** @deprecated use "variant=contained color=error" instead */
|
|
20
19
|
type LegacyDestructiveVariant = 'destructive';
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
type ModernVariant = Exclude<ButtonCVAVariants, 'default' | 'outline' | 'ghost' | 'link' | 'secondary' | 'destructive'> | LegacyDefaultVariant | LegacyOutlineVariant | LegacyGhostVariant | LegacySecondaryVariant | LegacyDestructiveVariant | LegacyLinkVariant;
|
|
24
|
-
type ButtonCVASizes = ButtonCVAProps['size'];
|
|
25
|
-
/** @deprecated use "<ButtonIcon/>" instead */
|
|
26
|
-
type LegacyIconSize = 'icon';
|
|
27
|
-
type ModernSize = Exclude<ButtonCVASizes, 'icon'> | LegacyIconSize;
|
|
28
|
-
export interface ButtonVariantProps extends ButtonCVANoVariantProps, ButtonCVANoSizeProps {
|
|
20
|
+
type ModernVariant = Exclude<ButtonCVAVariants, 'default' | 'outline' | 'ghost' | 'secondary' | 'destructive'> | LegacyDefaultVariant | LegacyOutlineVariant | LegacyGhostVariant | LegacySecondaryVariant | LegacyDestructiveVariant;
|
|
21
|
+
export interface ButtonVarianceProps extends ButtonCVANoVariantProps {
|
|
29
22
|
variant?: ModernVariant;
|
|
30
|
-
size?: ModernSize;
|
|
31
23
|
}
|
|
32
24
|
export {};
|
|
33
25
|
//# sourceMappingURL=buttonVariants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;
|
|
1
|
+
{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;8EAmJ1B,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE,KAAK,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,CAAC,CAAA;AAEnF,KAAK,iBAAiB,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAEnD,gEAAgE;AAChE,KAAK,oBAAoB,GAAG,SAAS,CAAC;AACtC,+DAA+D;AAC/D,KAAK,oBAAoB,GAAG,SAAS,CAAC;AACtC,2DAA2D;AAC3D,KAAK,kBAAkB,GAAG,OAAO,CAAC;AAClC,kEAAkE;AAClE,KAAK,sBAAsB,GAAG,WAAW,CAAC;AAC1C,8DAA8D;AAC9D,KAAK,wBAAwB,GAAG,aAAa,CAAC;AAE9C,KAAK,aAAa,GACd,OAAO,CAAC,iBAAiB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,aAAa,CAAC,GACzF,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,sBAAsB,GACtB,wBAAwB,CAAC;AAE7B,MAAM,WAAW,mBAAoB,SAAQ,uBAAuB;IAClE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}
|
package/Button/buttonVariants.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { cva as
|
|
1
|
+
import { cva as t } from "class-variance-authority";
|
|
2
2
|
import { cn as e } from "@oneplatformdev/utils";
|
|
3
|
-
const o =
|
|
3
|
+
const o = t(
|
|
4
4
|
[
|
|
5
5
|
"inline-flex items-center justify-center",
|
|
6
6
|
"whitespace-nowrap font-medium",
|
|
7
7
|
"cursor-pointer box-border",
|
|
8
8
|
"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
|
|
9
9
|
"disabled:pointer-events-none disabled:cursor-default",
|
|
10
|
-
"[&_svg]:pointer-events-none [&_svg]:
|
|
10
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
11
11
|
],
|
|
12
12
|
{
|
|
13
13
|
variants: {
|
|
@@ -16,9 +16,7 @@ const o = r(
|
|
|
16
16
|
outline: "deprecated.do_not_use",
|
|
17
17
|
secondary: "deprecated.do_not_use",
|
|
18
18
|
destructive: "deprecated.do_not_use",
|
|
19
|
-
link: "deprecated.do_not_use",
|
|
20
19
|
//
|
|
21
|
-
transparent: "bg-transparent hover:bg-transparent hover:text-accent-foreground",
|
|
22
20
|
none: "",
|
|
23
21
|
contained: "",
|
|
24
22
|
outlined: "",
|
|
@@ -30,8 +28,9 @@ const o = r(
|
|
|
30
28
|
error: ""
|
|
31
29
|
},
|
|
32
30
|
size: {
|
|
33
|
-
|
|
34
|
-
sm:
|
|
31
|
+
xs: "rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14",
|
|
32
|
+
sm: "rounded-md p-1 gap-1 text-sm min-h-6 min-w-20",
|
|
33
|
+
md: e(
|
|
35
34
|
"min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1",
|
|
36
35
|
"text-sm leading-[1.12] [&_svg]:size-6"
|
|
37
36
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n [\n \"inline-flex items-center justify-center\",\n 'whitespace-nowrap font-medium',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:
|
|
1
|
+
{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n [\n \"inline-flex items-center justify-center\",\n 'whitespace-nowrap font-medium',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n ],\n {\n variants: {\n variant: {\n default: \"deprecated.do_not_use\",\n outline: \"deprecated.do_not_use\",\n secondary: \"deprecated.do_not_use\",\n destructive: \"deprecated.do_not_use\",\n //\n none: \"\",\n contained: \"\",\n outlined: \"\",\n ghost: '',\n },\n color: {\n primary: '',\n secondary: '',\n error: '',\n },\n size: {\n xs: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\n sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\n md: cn(\n 'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\n 'text-sm leading-[1.12] [&_svg]:size-6',\n ),\n lg: cn(\n \"min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2\",\n 'text-base leading-normal [&_svg]:size-6',\n )\n }\n },\n compoundVariants: [\n // PRIMARY BUTTON VARIANTS\n {\n color: 'primary',\n variant: 'contained',\n className: cn(\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#7F4EEB]',\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n 'active:bg-[#6B3DD9]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:bg-[#9368FF0F]',\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n 'active:bg-[#9368FF0F]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // SECONDARY BUTTON VARIANTS\n {\n color: 'secondary',\n variant: 'contained',\n className: cn(\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'ghost',\n className: cn(\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n 'hover:bg-[#F9FAFB]',\n 'focus:bg-[#FCFCFC]',\n 'active:bg-[#F9FAFB]',\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ERROR BUTTON VARIANTS\n {\n color: 'error',\n variant: 'contained',\n className: cn(\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#DC2626]',\n 'focus:bg-[#DC2626]',\n 'active:bg-[#DC2626]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n ],\n defaultVariants: {\n variant: 'contained',\n color: 'primary',\n size: 'lg',\n },\n }\n)\n\nexport type ButtonCVAProps = VariantProps<typeof buttonVariants>;\n\ntype ButtonCVANoVariantProps = Omit<VariantProps<typeof buttonVariants>, 'variant'>\n\ntype ButtonCVAVariants = ButtonCVAProps['variant'];\n\n/** @deprecated use \"variant=contained color=primary\" instead */\ntype LegacyDefaultVariant = 'default';\n/** @deprecated use \"variant=outlined color=primary\" instead */\ntype LegacyOutlineVariant = 'outline';\n/** @deprecated use \"variant=text color=primary\" instead */\ntype LegacyGhostVariant = 'ghost';\n/** @deprecated use \"variant=contained color=secondary\" instead */\ntype LegacySecondaryVariant = 'secondary';\n/** @deprecated use \"variant=contained color=error\" instead */\ntype LegacyDestructiveVariant = 'destructive';\n\ntype ModernVariant =\n | Exclude<ButtonCVAVariants, 'default' | 'outline' | 'ghost' | 'secondary' | 'destructive'>\n | LegacyDefaultVariant\n | LegacyOutlineVariant\n | LegacyGhostVariant\n | LegacySecondaryVariant\n | LegacyDestructiveVariant;\n\nexport interface ButtonVarianceProps extends ButtonCVANoVariantProps {\n variant?: ModernVariant;\n}\n"],"names":["buttonVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA;AAAA,QAEb,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAIC;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,IAAIA;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ButtonIconProps } from './ButtonIcon.types';
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
export default ButtonIcon;
|
|
4
5
|
//# sourceMappingURL=ButtonIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD,eAAO,MAAM,UAAU,2FAsDtB,CAAA"}
|
|
1
|
+
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD,eAAO,MAAM,UAAU,2FAsDtB,CAAA;AAED,eAAe,UAAU,CAAC"}
|