@tayelemma/button 1.0.4 → 1.0.6
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/index.css +93 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +118 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +95 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +40 -36
package/dist/index.css
CHANGED
|
@@ -1,2 +1,94 @@
|
|
|
1
|
-
|
|
1
|
+
/* src/Button.scss */
|
|
2
|
+
.button__BORDERLESS,
|
|
3
|
+
.button__ICON,
|
|
4
|
+
.button__BORDERED,
|
|
5
|
+
.button__PRIMARY {
|
|
6
|
+
position: relative;
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
text-align: center;
|
|
11
|
+
white-space: nowrap;
|
|
12
|
+
vertical-align: middle;
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
gap: 40px;
|
|
16
|
+
border: 0;
|
|
17
|
+
padding: 0px 16px;
|
|
18
|
+
height: 32px;
|
|
19
|
+
max-width: fit-content;
|
|
20
|
+
text-transform: uppercase;
|
|
21
|
+
user-select: none;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
transition:
|
|
24
|
+
background 200ms,
|
|
25
|
+
transform 100ms,
|
|
26
|
+
--webkit-transform 100ms;
|
|
27
|
+
color: var(--button-borderless__color--text, #3d4042);
|
|
28
|
+
background: transparent;
|
|
29
|
+
}
|
|
30
|
+
.button__BORDERLESS:hover,
|
|
31
|
+
.button__ICON:hover,
|
|
32
|
+
.button__BORDERED:hover,
|
|
33
|
+
.button__PRIMARY:hover {
|
|
34
|
+
background: var(--button-borderless__color--alt-background, rgba(138, 153, 168, 0.2));
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
|
37
|
+
.button__BORDERLESS:focus,
|
|
38
|
+
.button__ICON:focus,
|
|
39
|
+
.button__BORDERED:focus,
|
|
40
|
+
.button__PRIMARY:focus {
|
|
41
|
+
box-shadow: 0 0 0 2px var(--button-borderless__color--background, #37a085);
|
|
42
|
+
outline: 0;
|
|
43
|
+
}
|
|
44
|
+
.button__BORDERLESS:active,
|
|
45
|
+
.button__ICON:active,
|
|
46
|
+
.button__BORDERED:active,
|
|
47
|
+
.button__PRIMARY:active {
|
|
48
|
+
background: var(--button-borderless__color--alt-background, rgba(138, 153, 168, 0.2));
|
|
49
|
+
color: var(--button-borderless__color--text, #3d4042);
|
|
50
|
+
transform: scale(0.98);
|
|
51
|
+
}
|
|
52
|
+
.button__BORDERLESS:disabled,
|
|
53
|
+
.button__ICON:disabled,
|
|
54
|
+
.button__BORDERED:disabled,
|
|
55
|
+
.button__PRIMARY:disabled {
|
|
56
|
+
opacity: 40%;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
}
|
|
59
|
+
.button__BORDERLESS--invert {
|
|
60
|
+
color: var(--button-borderless__color--textAlt, #fff);
|
|
61
|
+
fill: var(--button-borderless__color--textAlt, #fff);
|
|
62
|
+
}
|
|
63
|
+
.button__BORDERLESS--invert:active {
|
|
64
|
+
color: var(--button-borderless__color--textAlt, #fff);
|
|
65
|
+
}
|
|
66
|
+
.button__PRIMARY {
|
|
67
|
+
background: #37a085;
|
|
68
|
+
color: #fff;
|
|
69
|
+
box-shadow: 0 0 0 1px var(--button-primary__color--background, #27a085);
|
|
70
|
+
}
|
|
71
|
+
.button__PRIMARY:hover {
|
|
72
|
+
background: var(--button-primary__color--accent, #12745b);
|
|
73
|
+
}
|
|
74
|
+
.button__PRIMARY:active {
|
|
75
|
+
background: var(--button-primary__color--accent, #12745b);
|
|
76
|
+
color: #fff;
|
|
77
|
+
}
|
|
78
|
+
.button__BORDERED {
|
|
79
|
+
color: #4f4f4f;
|
|
80
|
+
box-shadow: 0 0 0 1px var(--button--bordered-color, #3d4042);
|
|
81
|
+
}
|
|
82
|
+
.button__BORDERED--invert {
|
|
83
|
+
color: #fff;
|
|
84
|
+
box-shadow: 0 0 0 1px var(--button--bordered-color--textAlt, #fff);
|
|
85
|
+
fill: var(--button--bordered-color--textAlt, #fff);
|
|
86
|
+
--icon-color: #fff;
|
|
87
|
+
}
|
|
88
|
+
.button__BORDERED--invert:active {
|
|
89
|
+
color: var(--button--bordered-color--textAlt, #fff);
|
|
90
|
+
}
|
|
91
|
+
.button__ICON {
|
|
92
|
+
padding: 0px 8px;
|
|
93
|
+
}
|
|
2
94
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.scss"],"sourcesContent":[".button__BORDERLESS {\r\n position: relative;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n\r\n //sizing\r\n font-size: 12px;\r\n font-weight: 500;\r\n gap: 40px;\r\n border: 0;\r\n padding: 0px 16px;\r\n height: 32px;\r\n max-width: fit-content;\r\n\r\n //styling\r\n text-transform: uppercase;\r\n user-select: none;\r\n text-decoration: none;\r\n transition: background 200ms, transform 100ms, --webkit-transform 100ms;\r\n color: var(--button-borderless__color--text, #3d4042);\r\n background: transparent;\r\n\r\n &:hover {\r\n background: var(--button-borderless__color--alt-background,\r\n
|
|
1
|
+
{"version":3,"sources":["../src/Button.scss"],"sourcesContent":[".button__BORDERLESS {\r\n position: relative;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n\r\n //sizing\r\n font-size: 12px;\r\n font-weight: 500;\r\n gap: 40px;\r\n border: 0;\r\n padding: 0px 16px;\r\n height: 32px;\r\n max-width: fit-content;\r\n\r\n //styling\r\n text-transform: uppercase;\r\n user-select: none;\r\n text-decoration: none;\r\n transition: background 200ms, transform 100ms, --webkit-transform 100ms;\r\n color: var(--button-borderless__color--text, #3d4042);\r\n background: transparent;\r\n\r\n &:hover {\r\n background: var(\r\n --button-borderless__color--alt-background,\r\n rgba(138, 153, 168, 0.2)\r\n );\r\n cursor: pointer;\r\n }\r\n\r\n &:focus {\r\n box-shadow: 0 0 0 2px var(--button-borderless__color--background, #37a085);\r\n outline: 0;\r\n }\r\n\r\n &:active {\r\n background: var(\r\n --button-borderless__color--alt-background,\r\n rgba(138, 153, 168, 0.2)\r\n );\r\n color: var(--button-borderless__color--text, #3d4042);\r\n transform: scale(0.98);\r\n }\r\n\r\n &:disabled {\r\n opacity: 40%;\r\n pointer-events: none;\r\n }\r\n\r\n &--invert {\r\n color: var(--button-borderless__color--textAlt, #fff);\r\n fill: var(--button-borderless__color--textAlt, #fff);\r\n\r\n &:active {\r\n color: var(--button-borderless__color--textAlt, #fff);\r\n }\r\n }\r\n}\r\n\r\n.button__PRIMARY {\r\n @extend .button__BORDERLESS;\r\n\r\n background: #37a085;\r\n color: #fff;\r\n box-shadow: 0 0 0 1px var(--button-primary__color--background, #27a085);\r\n\r\n &:hover {\r\n background: var(--button-primary__color--accent, #12745b);\r\n }\r\n\r\n &:active {\r\n background: var(--button-primary__color--accent, #12745b);\r\n color: #fff;\r\n }\r\n}\r\n\r\n.button__BORDERED {\r\n @extend .button__BORDERLESS;\r\n\r\n color: #4f4f4f;\r\n box-shadow: 0 0 0 1px var(--button--bordered-color, #3d4042);\r\n\r\n &--invert {\r\n color: #fff;\r\n box-shadow: 0 0 0 1px var(--button--bordered-color--textAlt, #fff);\r\n fill: var(--button--bordered-color--textAlt, #fff);\r\n --icon-color: #fff;\r\n\r\n &:active {\r\n color: var(--button--bordered-color--textAlt, #fff);\r\n }\r\n }\r\n}\r\n\r\n.button__ICON {\r\n @extend .button__BORDERLESS;\r\n padding: 0px 8px;\r\n}\r\n"],"mappings":";AAAA;;;;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;;;;AACA;AACA;;AAEA;;;;AACE;AAIA;;AAGF;;;;AACE;AACA;;AAGF;;;;AACE;AAIA;AACA;;AAGF;;;;AACE;AACA;;AAGF;AACE;AACA;;AAEA;AACE;;AAKN;AAGE;AACA;AACA;;AAEA;AACE;;AAGF;AACE;AACA;;AAIJ;AAGE;AACA;;AAEA;AACE;AACA;AACA;AACA;;AAEA;AACE;;AAKN;AAEE;;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ComponentPropsWithRef } from 'react';
|
|
2
2
|
|
|
3
|
-
type ButtonVariant =
|
|
4
|
-
interface ButtonProps extends ComponentPropsWithRef<
|
|
3
|
+
type ButtonVariant = "PRIMARY" | "BORDERED" | "BORDERLESS" | "ICON";
|
|
4
|
+
interface ButtonProps extends ComponentPropsWithRef<"button"> {
|
|
5
5
|
buttonVariant?: ButtonVariant;
|
|
6
6
|
children?: React.ReactNode | React.ReactNode[];
|
|
7
7
|
className?: string;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,119 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
34
|
+
var __export = (target, all) => {
|
|
35
|
+
for (var name in all)
|
|
36
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
37
|
+
};
|
|
38
|
+
var __copyProps = (to, from, except, desc) => {
|
|
39
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
40
|
+
for (let key of __getOwnPropNames(from))
|
|
41
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
42
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
43
|
+
}
|
|
44
|
+
return to;
|
|
45
|
+
};
|
|
46
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
47
|
+
|
|
48
|
+
// src/index.ts
|
|
49
|
+
var src_exports = {};
|
|
50
|
+
__export(src_exports, {
|
|
51
|
+
Button: () => Button
|
|
52
|
+
});
|
|
53
|
+
module.exports = __toCommonJS(src_exports);
|
|
54
|
+
|
|
55
|
+
// src/Button.tsx
|
|
56
|
+
var import_react = require("react");
|
|
57
|
+
|
|
58
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
59
|
+
function r(e) {
|
|
60
|
+
var t, f, n = "";
|
|
61
|
+
if ("string" == typeof e || "number" == typeof e)
|
|
62
|
+
n += e;
|
|
63
|
+
else if ("object" == typeof e)
|
|
64
|
+
if (Array.isArray(e)) {
|
|
65
|
+
var o = e.length;
|
|
66
|
+
for (t = 0; t < o; t++)
|
|
67
|
+
e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
68
|
+
} else
|
|
69
|
+
for (f in e)
|
|
70
|
+
e[f] && (n && (n += " "), n += f);
|
|
71
|
+
return n;
|
|
72
|
+
}
|
|
73
|
+
function clsx() {
|
|
74
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
|
|
75
|
+
(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
76
|
+
return n;
|
|
77
|
+
}
|
|
78
|
+
var clsx_default = clsx;
|
|
79
|
+
|
|
80
|
+
// src/Button.tsx
|
|
81
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
82
|
+
var Button = (0, import_react.forwardRef)(
|
|
83
|
+
(props, ref) => {
|
|
84
|
+
const _a = props, {
|
|
85
|
+
className,
|
|
86
|
+
buttonVariant = "PRIMARY",
|
|
87
|
+
invertedColor,
|
|
88
|
+
disabled,
|
|
89
|
+
children
|
|
90
|
+
} = _a, rest = __objRest(_a, [
|
|
91
|
+
"className",
|
|
92
|
+
"buttonVariant",
|
|
93
|
+
"invertedColor",
|
|
94
|
+
"disabled",
|
|
95
|
+
"children"
|
|
96
|
+
]);
|
|
97
|
+
const finalClassName = clsx_default(
|
|
98
|
+
`button__${buttonVariant}`,
|
|
99
|
+
invertedColor && `button__${buttonVariant}--invert`,
|
|
100
|
+
className
|
|
101
|
+
);
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
103
|
+
"button",
|
|
104
|
+
__spreadProps(__spreadValues({
|
|
105
|
+
ref,
|
|
106
|
+
className: finalClassName,
|
|
107
|
+
disabled
|
|
108
|
+
}, rest), {
|
|
109
|
+
children
|
|
110
|
+
})
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
Button.displayName = "Button";
|
|
115
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
116
|
+
0 && (module.exports = {
|
|
117
|
+
Button
|
|
118
|
+
});
|
|
2
119
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["import \"./Button.scss\";\r\n\r\nexport { Button, ButtonVariant } from \"./Button\";\r\nexport type { ButtonProps, ButtonLinkProps } from \"./Button\";\r\n","import React, { ComponentPropsWithRef, forwardRef } from \"react\";\r\nimport clsx from \"clsx\";\r\nimport \"./Button.scss\";\r\n\r\nexport type ButtonVariant = \"PRIMARY\" | \"BORDERED\" | \"BORDERLESS\" | \"ICON\";\r\n\r\nexport interface ButtonProps extends ComponentPropsWithRef<\"button\"> {\r\n buttonVariant?: ButtonVariant;\r\n children?: React.ReactNode | React.ReactNode[];\r\n className?: string;\r\n invertedColor?: boolean;\r\n}\r\n\r\nexport interface ButtonLinkProps {\r\n children?: React.ReactNode;\r\n onClick?: () => void;\r\n disabled?: boolean;\r\n to: string;\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n (props, ref) => {\r\n const {\r\n className,\r\n buttonVariant = \"PRIMARY\",\r\n invertedColor,\r\n disabled,\r\n children,\r\n ...rest\r\n } = props;\r\n\r\n const finalClassName = clsx(\r\n `button__${buttonVariant}`,\r\n invertedColor && `button__${buttonVariant}--invert`,\r\n className,\r\n );\r\n return (\r\n <button\r\n ref={ref}\r\n className={finalClassName}\r\n disabled={disabled}\r\n {...rest}>\r\n {children}\r\n </button>\r\n );\r\n },\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;;;ACAzD,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO;AAAE,SAAG;AAAA,WAAU,YAAU,OAAO;AAAE,QAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,UAAI,IAAE,EAAE;AAAO,WAAI,IAAE,GAAE,IAAE,GAAE;AAAI,UAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,IAAE;AAAM,WAAI,KAAK;AAAE,UAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE;AAAI,KAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAC,IAAO,eAAQ;;;ADqCzX;AAjBC,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO,QAAQ;AACd,UAOI,YANF;AAAA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IA3BN,IA6BQ,IADC,iBACD,IADC;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,UAAM,iBAAiB;AAAA,MACrB,WAAW;AAAA,MACX,iBAAiB,WAAW;AAAA,MAC5B;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,SACI,OAJL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,96 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// src/Button.tsx
|
|
34
|
+
import { forwardRef } from "react";
|
|
35
|
+
|
|
36
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
37
|
+
function r(e) {
|
|
38
|
+
var t, f, n = "";
|
|
39
|
+
if ("string" == typeof e || "number" == typeof e)
|
|
40
|
+
n += e;
|
|
41
|
+
else if ("object" == typeof e)
|
|
42
|
+
if (Array.isArray(e)) {
|
|
43
|
+
var o = e.length;
|
|
44
|
+
for (t = 0; t < o; t++)
|
|
45
|
+
e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
46
|
+
} else
|
|
47
|
+
for (f in e)
|
|
48
|
+
e[f] && (n && (n += " "), n += f);
|
|
49
|
+
return n;
|
|
50
|
+
}
|
|
51
|
+
function clsx() {
|
|
52
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
|
|
53
|
+
(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
54
|
+
return n;
|
|
55
|
+
}
|
|
56
|
+
var clsx_default = clsx;
|
|
57
|
+
|
|
58
|
+
// src/Button.tsx
|
|
59
|
+
import { jsx } from "react/jsx-runtime";
|
|
60
|
+
var Button = forwardRef(
|
|
61
|
+
(props, ref) => {
|
|
62
|
+
const _a = props, {
|
|
63
|
+
className,
|
|
64
|
+
buttonVariant = "PRIMARY",
|
|
65
|
+
invertedColor,
|
|
66
|
+
disabled,
|
|
67
|
+
children
|
|
68
|
+
} = _a, rest = __objRest(_a, [
|
|
69
|
+
"className",
|
|
70
|
+
"buttonVariant",
|
|
71
|
+
"invertedColor",
|
|
72
|
+
"disabled",
|
|
73
|
+
"children"
|
|
74
|
+
]);
|
|
75
|
+
const finalClassName = clsx_default(
|
|
76
|
+
`button__${buttonVariant}`,
|
|
77
|
+
invertedColor && `button__${buttonVariant}--invert`,
|
|
78
|
+
className
|
|
79
|
+
);
|
|
80
|
+
return /* @__PURE__ */ jsx(
|
|
81
|
+
"button",
|
|
82
|
+
__spreadProps(__spreadValues({
|
|
83
|
+
ref,
|
|
84
|
+
className: finalClassName,
|
|
85
|
+
disabled
|
|
86
|
+
}, rest), {
|
|
87
|
+
children
|
|
88
|
+
})
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
Button.displayName = "Button";
|
|
93
|
+
export {
|
|
94
|
+
Button
|
|
95
|
+
};
|
|
2
96
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx","../../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["import React, { ComponentPropsWithRef, forwardRef } from
|
|
1
|
+
{"version":3,"sources":["../src/Button.tsx","../../../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["import React, { ComponentPropsWithRef, forwardRef } from \"react\";\r\nimport clsx from \"clsx\";\r\nimport \"./Button.scss\";\r\n\r\nexport type ButtonVariant = \"PRIMARY\" | \"BORDERED\" | \"BORDERLESS\" | \"ICON\";\r\n\r\nexport interface ButtonProps extends ComponentPropsWithRef<\"button\"> {\r\n buttonVariant?: ButtonVariant;\r\n children?: React.ReactNode | React.ReactNode[];\r\n className?: string;\r\n invertedColor?: boolean;\r\n}\r\n\r\nexport interface ButtonLinkProps {\r\n children?: React.ReactNode;\r\n onClick?: () => void;\r\n disabled?: boolean;\r\n to: string;\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n (props, ref) => {\r\n const {\r\n className,\r\n buttonVariant = \"PRIMARY\",\r\n invertedColor,\r\n disabled,\r\n children,\r\n ...rest\r\n } = props;\r\n\r\n const finalClassName = clsx(\r\n `button__${buttonVariant}`,\r\n invertedColor && `button__${buttonVariant}--invert`,\r\n className,\r\n );\r\n return (\r\n <button\r\n ref={ref}\r\n className={finalClassName}\r\n disabled={disabled}\r\n {...rest}>\r\n {children}\r\n </button>\r\n );\r\n },\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAuC,kBAAkB;;;ACAzD,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO;AAAE,SAAG;AAAA,WAAU,YAAU,OAAO;AAAE,QAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,UAAI,IAAE,EAAE;AAAO,WAAI,IAAE,GAAE,IAAE,GAAE;AAAI,UAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,IAAE;AAAM,WAAI,KAAK;AAAE,UAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE;AAAI,KAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAC,IAAO,eAAQ;;;ADqCzX;AAjBC,IAAM,SAAS;AAAA,EACpB,CAAC,OAAO,QAAQ;AACd,UAOI,YANF;AAAA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IA3BN,IA6BQ,IADC,iBACD,IADC;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,UAAM,iBAAiB;AAAA,MACrB,WAAW;AAAA,MACX,iBAAiB,WAAW;AAAA,MAC5B;AAAA,IACF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,SACI,OAJL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,38 +1,42 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
2
|
+
"name": "@tayelemma/button",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "Reusable React Button component library",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"style": "./dist/index.css",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.mjs",
|
|
13
|
+
"require": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/index.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsup",
|
|
22
|
+
"dev": "tsup --watch --onSuccess \"yalc push --sig --changed\""
|
|
23
|
+
},
|
|
24
|
+
"author": "",
|
|
25
|
+
"license": "ISC",
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@types/react": "^18.0.15",
|
|
28
|
+
"esbuild": "^0.17.19",
|
|
29
|
+
"esbuild-sass-plugin": "^2.10.0",
|
|
30
|
+
"sass": "^1.54.0",
|
|
31
|
+
"tsup": "^6.7.0",
|
|
32
|
+
"typescript": "^5.0.0"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@floating-ui/react": "^0.24.1",
|
|
36
|
+
"@react-spring/web": "^9.7.2"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": ">=16.8.0",
|
|
40
|
+
"react-dom": ">=16.8.0"
|
|
41
|
+
}
|
|
38
42
|
}
|