@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/Wrappers.js +30 -0
- package/.storybook/Wrappers.js.map +1 -0
- package/Button/Button.d.ts +64 -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 +45 -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 +28 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +51 -38
- package/Input/Input.js.map +1 -1
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- 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,49 @@
|
|
|
1
1
|
import { ButtonIconProps } from './ButtonIcon.types';
|
|
2
2
|
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Icon-only version of the Button component.
|
|
5
|
+
*
|
|
6
|
+
* `ButtonIcon` is used for compact actions represented by an icon instead of text.
|
|
7
|
+
* Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* > Basic usage:
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <ButtonIcon>
|
|
13
|
+
* <PlusIcon />
|
|
14
|
+
* </ButtonIcon>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* > With variant & color:
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <ButtonIcon variant="outline" color="primary">
|
|
21
|
+
* <Search />
|
|
22
|
+
* </ButtonIcon>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* > With tooltip message:
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <ButtonIcon message="Edit item">
|
|
29
|
+
* <PencilLine />
|
|
30
|
+
* </ButtonIcon>
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* > Loading state:
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <ButtonIcon loading>
|
|
37
|
+
* <Trash2 />
|
|
38
|
+
* </ButtonIcon>
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @remarks
|
|
42
|
+
* - Designed for icon-only usage. If you need text, use `Button`.
|
|
43
|
+
* - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
|
|
44
|
+
*
|
|
45
|
+
* @see {@link Button} for regular text buttons
|
|
46
|
+
*/
|
|
3
47
|
export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;
|
|
48
|
+
export default ButtonIcon;
|
|
4
49
|
//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,eAAO,MAAM,UAAU,2FAsDtB,CAAA;AAED,eAAe,UAAU,CAAC"}
|