@sikka/hawa 0.0.263 → 0.0.265
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/dist/styles.css +23 -6
- package/es/elements/HawaButton.d.ts +1 -0
- package/es/elements/HawaCodeBlock.d.ts +1 -0
- package/es/index.es.js +3 -3
- package/lib/elements/HawaButton.d.ts +1 -0
- package/lib/elements/HawaCodeBlock.d.ts +1 -0
- package/lib/index.js +3 -3
- package/package.json +2 -1
- package/src/elements/HawaButton.tsx +83 -48
- package/src/elements/HawaCodeBlock.tsx +70 -20
- package/src/styles.css +23 -6
- package/es/stories/ElementsStories/Buttons.stories.d.ts +0 -24
- package/lib/stories/ElementsStories/Buttons.stories.d.ts +0 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikka/hawa",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.265",
|
|
4
4
|
"description": "SaaS Oriented UI Kit",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.es.js",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"kit",
|
|
12
12
|
"saas",
|
|
13
13
|
"kit",
|
|
14
|
+
"tailwind",
|
|
14
15
|
"hawa"
|
|
15
16
|
],
|
|
16
17
|
"repository": {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import React, { FC, ButtonHTMLAttributes } from "react"
|
|
1
|
+
import React, { FC, ButtonHTMLAttributes, useState } from "react"
|
|
2
2
|
import clsx from "clsx"
|
|
3
3
|
import { HawaSpinner } from "./HawaSpinner"
|
|
4
4
|
import { HawaTooltip } from "./HawaTooltip"
|
|
5
5
|
|
|
6
6
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
7
|
variant?: "contained" | "outlined"
|
|
8
|
+
feedback?: string
|
|
8
9
|
tooltipDirection?: "rtl" | "ltr"
|
|
9
10
|
color?: "default" | "primary" | "secondary"
|
|
10
11
|
width?: "full" | "normal" | "half"
|
|
@@ -32,6 +33,47 @@ const disabledVariantSyles = {
|
|
|
32
33
|
contained: "text-gray-300 bg-gray-100",
|
|
33
34
|
outlined: "text-gray-300 border-gray-300",
|
|
34
35
|
}
|
|
36
|
+
const baseStyles =
|
|
37
|
+
"cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
|
|
38
|
+
const sizeStyles = {
|
|
39
|
+
xs: "px-1 py-1",
|
|
40
|
+
small: "text-xs px-2.5 py-1.5",
|
|
41
|
+
medium: "text-sm leading-4 px-3 py-2",
|
|
42
|
+
large: "text-sm px-4 py-2",
|
|
43
|
+
noPadding: "p-0",
|
|
44
|
+
full: "h-full max-h-full p-2",
|
|
45
|
+
}
|
|
46
|
+
const widthStyles = {
|
|
47
|
+
full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
|
|
48
|
+
half: "w-full text-center flex items-center justify-center h-full",
|
|
49
|
+
normal:
|
|
50
|
+
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
|
|
51
|
+
}
|
|
52
|
+
const containerWidthStyles = {
|
|
53
|
+
full: "w-full flex justify-center text-center inline-flex items-center",
|
|
54
|
+
half: "w-1/2",
|
|
55
|
+
normal: "w-fit",
|
|
56
|
+
}
|
|
57
|
+
const variantStyles = {
|
|
58
|
+
contained: "border-transparent",
|
|
59
|
+
outlined: "bg-transparent border",
|
|
60
|
+
}
|
|
61
|
+
const colorStyles = {
|
|
62
|
+
contained: {
|
|
63
|
+
default:
|
|
64
|
+
"text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
|
|
65
|
+
primary:
|
|
66
|
+
"text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
|
|
67
|
+
secondary:
|
|
68
|
+
"text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
|
|
69
|
+
},
|
|
70
|
+
outlined: {
|
|
71
|
+
default: "text-gray-600 border-gray-600 hover:bg-gray-200",
|
|
72
|
+
primary: "text-black hover:bg-gray-50",
|
|
73
|
+
secondary:
|
|
74
|
+
"text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
|
|
75
|
+
},
|
|
76
|
+
}
|
|
35
77
|
|
|
36
78
|
export const HawaButton: FC<ButtonProps> = ({
|
|
37
79
|
className,
|
|
@@ -48,51 +90,29 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
48
90
|
margins = "2",
|
|
49
91
|
children,
|
|
50
92
|
badge,
|
|
93
|
+
feedback,
|
|
51
94
|
...props
|
|
52
95
|
}) => {
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const sizeStyles = {
|
|
57
|
-
xs: "px-1 py-1",
|
|
58
|
-
small: "text-xs px-2.5 py-1.5",
|
|
59
|
-
medium: "text-sm leading-4 px-3 py-2",
|
|
60
|
-
large: "text-sm px-4 py-2",
|
|
61
|
-
noPadding: "p-0",
|
|
62
|
-
full: "h-full max-h-full p-2",
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const widthStyles = {
|
|
66
|
-
full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
|
|
67
|
-
half: "w-full text-center flex items-center justify-center h-full",
|
|
68
|
-
normal:
|
|
69
|
-
"w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
|
|
70
|
-
}
|
|
71
|
-
const containerWidthStyles = {
|
|
72
|
-
full: "w-full flex justify-center text-center inline-flex items-center",
|
|
73
|
-
half: "w-1/2",
|
|
74
|
-
normal: "w-fit",
|
|
75
|
-
}
|
|
76
|
-
const variantStyles = {
|
|
77
|
-
contained: "border-transparent",
|
|
78
|
-
outlined: "bg-transparent border",
|
|
79
|
-
}
|
|
96
|
+
const [isClicked, setIsClicked] = useState(false)
|
|
97
|
+
const [buttonText, setButtonText] = useState(children)
|
|
80
98
|
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
99
|
+
const handleClick = () => {
|
|
100
|
+
if (feedback) {
|
|
101
|
+
if (!isClicked) {
|
|
102
|
+
props.onClick
|
|
103
|
+
setButtonText(feedback)
|
|
104
|
+
setIsClicked(true)
|
|
105
|
+
console.log("hawa button clicked")
|
|
106
|
+
// Reset the button text after 2 seconds (adjust the time as needed).
|
|
107
|
+
setTimeout(() => {
|
|
108
|
+
setButtonText(children)
|
|
109
|
+
setIsClicked(false)
|
|
110
|
+
}, 2000)
|
|
111
|
+
}
|
|
112
|
+
} else {
|
|
113
|
+
props.onClick(null)
|
|
114
|
+
console.log("hawa button clicked")
|
|
115
|
+
}
|
|
96
116
|
}
|
|
97
117
|
|
|
98
118
|
return (
|
|
@@ -133,6 +153,7 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
133
153
|
}
|
|
134
154
|
disabled={disabled}
|
|
135
155
|
onClick={props.onClick}
|
|
156
|
+
// onClick={handleClick}
|
|
136
157
|
>
|
|
137
158
|
{!isLoading ? children : <HawaSpinner size="button" />}
|
|
138
159
|
</button>
|
|
@@ -152,6 +173,7 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
152
173
|
)
|
|
153
174
|
: clsx(
|
|
154
175
|
className,
|
|
176
|
+
"overflow-x-clip",
|
|
155
177
|
baseStyles,
|
|
156
178
|
variantStyles[variant],
|
|
157
179
|
sizeStyles[size],
|
|
@@ -160,13 +182,26 @@ export const HawaButton: FC<ButtonProps> = ({
|
|
|
160
182
|
)
|
|
161
183
|
}
|
|
162
184
|
disabled={disabled}
|
|
163
|
-
onClick={props.onClick}
|
|
185
|
+
// onClick={props.onClick}
|
|
186
|
+
onClick={handleClick}
|
|
164
187
|
>
|
|
165
188
|
{!isLoading ? (
|
|
166
|
-
<div
|
|
167
|
-
{
|
|
168
|
-
|
|
169
|
-
|
|
189
|
+
<div
|
|
190
|
+
className={clsx(
|
|
191
|
+
" flex flex-col-reverse items-start justify-center gap-4 s transition-all",
|
|
192
|
+
isClicked && feedback
|
|
193
|
+
? " -translate-y-8 pb-1 pt-1"
|
|
194
|
+
: "translate-y-0"
|
|
195
|
+
)}
|
|
196
|
+
>
|
|
197
|
+
{isClicked && feedback ? (
|
|
198
|
+
<div className="w-full text-center">{buttonText}</div>
|
|
199
|
+
) : null}
|
|
200
|
+
<div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
|
|
201
|
+
{props.startIcon && props.startIcon}
|
|
202
|
+
{children}
|
|
203
|
+
{props.endIcon && props.endIcon}
|
|
204
|
+
</div>
|
|
170
205
|
</div>
|
|
171
206
|
) : (
|
|
172
207
|
<HawaSpinner size="button" />
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React, { FC, useState } from "react"
|
|
2
2
|
import clsx from "clsx"
|
|
3
|
+
import { HawaButton } from "./HawaButton"
|
|
3
4
|
|
|
4
5
|
type CodeBlockTypes = {
|
|
5
6
|
color?: "dark" | "light"
|
|
6
7
|
language?: string
|
|
7
8
|
width?: "full" | "md" | "sm"
|
|
8
9
|
tabs?: TabsTypes[]
|
|
10
|
+
fileName?: string
|
|
9
11
|
code?: string
|
|
10
12
|
}
|
|
11
13
|
type TabsTypes = {
|
|
@@ -17,20 +19,34 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
17
19
|
tabs,
|
|
18
20
|
language,
|
|
19
21
|
code,
|
|
22
|
+
fileName,
|
|
20
23
|
width = "full",
|
|
21
24
|
}) => {
|
|
22
25
|
const [selectedTab, setSelectedTab] = useState(0)
|
|
26
|
+
const [showTooltip, setShowTooltip] = useState(0)
|
|
27
|
+
const [copyClicked, setCopyClicked] = useState(false)
|
|
23
28
|
let widthStyles = {
|
|
24
29
|
full: "w-full",
|
|
25
30
|
md: "w-full max-w-md",
|
|
26
31
|
sm: "w-full max-w-sm",
|
|
27
32
|
xs: "w-full max-w-xs",
|
|
28
33
|
}
|
|
34
|
+
|
|
35
|
+
const handleCopyClick = () => {
|
|
36
|
+
if (!copyClicked) {
|
|
37
|
+
setCopyClicked(true)
|
|
38
|
+
console.log("copy button clicked")
|
|
39
|
+
// Reset the button text after 2 seconds (adjust the time as needed).
|
|
40
|
+
setTimeout(() => {
|
|
41
|
+
setCopyClicked(false)
|
|
42
|
+
}, 2000)
|
|
43
|
+
}
|
|
44
|
+
}
|
|
29
45
|
return (
|
|
30
46
|
<div
|
|
31
47
|
className={clsx(
|
|
32
48
|
widthStyles[width],
|
|
33
|
-
"w-full flex-col items-center
|
|
49
|
+
"w-full flex-col items-center rounded bg-gray-800 text-left text-sm text-white sm:text-base"
|
|
34
50
|
)}
|
|
35
51
|
>
|
|
36
52
|
{" "}
|
|
@@ -56,35 +72,69 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
|
|
|
56
72
|
))}
|
|
57
73
|
</div>
|
|
58
74
|
)}
|
|
75
|
+
{fileName && (
|
|
76
|
+
<div className="flex flex-row gap-2 rounded-t bg-gray-700 p-2 pb-0">
|
|
77
|
+
<div
|
|
78
|
+
// className={clsx(
|
|
79
|
+
// selectedTab === i
|
|
80
|
+
// ? "border-buttonPrimary-400 border-b-2"
|
|
81
|
+
// : "bg-transparent"
|
|
82
|
+
// )}
|
|
83
|
+
>
|
|
84
|
+
<div
|
|
85
|
+
className={clsx(
|
|
86
|
+
"mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem] "
|
|
87
|
+
)}
|
|
88
|
+
>
|
|
89
|
+
{fileName}
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
)}
|
|
59
94
|
<pre>
|
|
60
95
|
<code
|
|
61
96
|
className={clsx(
|
|
62
|
-
"flex flex-row items-
|
|
97
|
+
"flex w-full flex-row items-start justify-between rounded bg-gray-800 p-2 text-left text-sm text-white sm:text-base"
|
|
63
98
|
// `language-${language}`,
|
|
64
|
-
tabs ? "" : "pl-4"
|
|
65
99
|
)}
|
|
66
100
|
>
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
101
|
+
<div className="flex min-h-[37.75px] w-full flex-col justify-center p-4 ">
|
|
102
|
+
{tabs ? tabs[selectedTab].code : code}
|
|
103
|
+
</div>
|
|
104
|
+
<div className="flex flex-row items-center gap-2 p-2">
|
|
105
|
+
<div
|
|
106
|
+
className={clsx(
|
|
107
|
+
"transition-all",
|
|
108
|
+
copyClicked ? "opacity-100" : "opacity-0"
|
|
109
|
+
)}
|
|
110
|
+
>
|
|
111
|
+
Copied!
|
|
112
|
+
</div>
|
|
113
|
+
<HawaButton
|
|
114
|
+
variant="outlined"
|
|
115
|
+
onClick={() => {
|
|
116
|
+
handleCopyClick()
|
|
71
117
|
navigator.clipboard.writeText(
|
|
72
118
|
tabs ? tabs[selectedTab].code : code
|
|
73
119
|
)
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
fill="none"
|
|
77
|
-
stroke-width="2"
|
|
78
|
-
viewBox="0 0 24 24"
|
|
79
|
-
stroke-linecap="round"
|
|
80
|
-
stroke-linejoin="round"
|
|
81
|
-
height="1em"
|
|
82
|
-
width="1em"
|
|
83
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
120
|
+
}}
|
|
121
|
+
margins="none"
|
|
84
122
|
>
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
123
|
+
<svg
|
|
124
|
+
stroke="currentColor"
|
|
125
|
+
fill="none"
|
|
126
|
+
stroke-width="2"
|
|
127
|
+
viewBox="0 0 24 24"
|
|
128
|
+
stroke-linecap="round"
|
|
129
|
+
stroke-linejoin="round"
|
|
130
|
+
height="1em"
|
|
131
|
+
width="1em"
|
|
132
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
133
|
+
>
|
|
134
|
+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
135
|
+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
136
|
+
</svg>
|
|
137
|
+
</HawaButton>
|
|
88
138
|
</div>
|
|
89
139
|
</code>
|
|
90
140
|
</pre>
|
package/src/styles.css
CHANGED
|
@@ -973,6 +973,9 @@ video {
|
|
|
973
973
|
.max-h-full {
|
|
974
974
|
max-height: 100%;
|
|
975
975
|
}
|
|
976
|
+
.min-h-\[37\.75px\] {
|
|
977
|
+
min-height: 37.75px;
|
|
978
|
+
}
|
|
976
979
|
.w-0 {
|
|
977
980
|
width: 0px;
|
|
978
981
|
}
|
|
@@ -1145,6 +1148,14 @@ video {
|
|
|
1145
1148
|
--tw-translate-y: -50%;
|
|
1146
1149
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1147
1150
|
}
|
|
1151
|
+
.-translate-y-8 {
|
|
1152
|
+
--tw-translate-y: -2rem;
|
|
1153
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1154
|
+
}
|
|
1155
|
+
.translate-y-0 {
|
|
1156
|
+
--tw-translate-y: 0px;
|
|
1157
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1158
|
+
}
|
|
1148
1159
|
.translate-y-1\/2 {
|
|
1149
1160
|
--tw-translate-y: 50%;
|
|
1150
1161
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1168,6 +1179,9 @@ video {
|
|
|
1168
1179
|
.transform {
|
|
1169
1180
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1170
1181
|
}
|
|
1182
|
+
.transform-gpu {
|
|
1183
|
+
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1184
|
+
}
|
|
1171
1185
|
@keyframes spin {
|
|
1172
1186
|
|
|
1173
1187
|
to {
|
|
@@ -1214,6 +1228,9 @@ video {
|
|
|
1214
1228
|
.flex-col {
|
|
1215
1229
|
flex-direction: column;
|
|
1216
1230
|
}
|
|
1231
|
+
.flex-col-reverse {
|
|
1232
|
+
flex-direction: column-reverse;
|
|
1233
|
+
}
|
|
1217
1234
|
.flex-wrap {
|
|
1218
1235
|
flex-wrap: wrap;
|
|
1219
1236
|
}
|
|
@@ -1830,6 +1847,9 @@ video {
|
|
|
1830
1847
|
.pb-0 {
|
|
1831
1848
|
padding-bottom: 0px;
|
|
1832
1849
|
}
|
|
1850
|
+
.pb-1 {
|
|
1851
|
+
padding-bottom: 0.25rem;
|
|
1852
|
+
}
|
|
1833
1853
|
.pb-2 {
|
|
1834
1854
|
padding-bottom: 0.5rem;
|
|
1835
1855
|
}
|
|
@@ -1845,9 +1865,6 @@ video {
|
|
|
1845
1865
|
.pl-3 {
|
|
1846
1866
|
padding-left: 0.75rem;
|
|
1847
1867
|
}
|
|
1848
|
-
.pl-4 {
|
|
1849
|
-
padding-left: 1rem;
|
|
1850
|
-
}
|
|
1851
1868
|
.pl-6 {
|
|
1852
1869
|
padding-left: 1.5rem;
|
|
1853
1870
|
}
|
|
@@ -1857,12 +1874,12 @@ video {
|
|
|
1857
1874
|
.pr-3 {
|
|
1858
1875
|
padding-right: 0.75rem;
|
|
1859
1876
|
}
|
|
1860
|
-
.pr-4 {
|
|
1861
|
-
padding-right: 1rem;
|
|
1862
|
-
}
|
|
1863
1877
|
.pt-0 {
|
|
1864
1878
|
padding-top: 0px;
|
|
1865
1879
|
}
|
|
1880
|
+
.pt-1 {
|
|
1881
|
+
padding-top: 0.25rem;
|
|
1882
|
+
}
|
|
1866
1883
|
.pt-2 {
|
|
1867
1884
|
padding-top: 0.5rem;
|
|
1868
1885
|
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react";
|
|
3
|
-
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const ButtonVariationsStory: {
|
|
6
|
-
(): React.JSX.Element;
|
|
7
|
-
storyName: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const ButtonLoadingStory: {
|
|
10
|
-
(): React.JSX.Element;
|
|
11
|
-
storyName: string;
|
|
12
|
-
};
|
|
13
|
-
export declare const ButtonWidthStory: {
|
|
14
|
-
(): React.JSX.Element;
|
|
15
|
-
storyName: string;
|
|
16
|
-
};
|
|
17
|
-
export declare const ButtonSizesStory: {
|
|
18
|
-
(): React.JSX.Element;
|
|
19
|
-
storyName: string;
|
|
20
|
-
};
|
|
21
|
-
export declare const ButtonIconsStory: {
|
|
22
|
-
(): React.JSX.Element;
|
|
23
|
-
storyName: string;
|
|
24
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Meta } from "@storybook/react";
|
|
3
|
-
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const ButtonVariationsStory: {
|
|
6
|
-
(): React.JSX.Element;
|
|
7
|
-
storyName: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const ButtonLoadingStory: {
|
|
10
|
-
(): React.JSX.Element;
|
|
11
|
-
storyName: string;
|
|
12
|
-
};
|
|
13
|
-
export declare const ButtonWidthStory: {
|
|
14
|
-
(): React.JSX.Element;
|
|
15
|
-
storyName: string;
|
|
16
|
-
};
|
|
17
|
-
export declare const ButtonSizesStory: {
|
|
18
|
-
(): React.JSX.Element;
|
|
19
|
-
storyName: string;
|
|
20
|
-
};
|
|
21
|
-
export declare const ButtonIconsStory: {
|
|
22
|
-
(): React.JSX.Element;
|
|
23
|
-
storyName: string;
|
|
24
|
-
};
|