@de-kit/st-ui 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -5
- package/dist/components/button/button.cjs +12 -64
- package/dist/components/button/button.cjs.map +1 -1
- package/dist/components/button/button.d.cts +0 -3
- package/dist/components/button/button.d.ts +0 -3
- package/dist/components/button/button.js +12 -64
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button/button.scss +24 -32
- package/dist/components/button/index.d.cts +2 -2
- package/dist/components/button/index.d.ts +2 -2
- package/dist/icons/index.cjs +3 -3
- package/dist/icons/index.js +3 -3
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,19 +52,28 @@ import { IconClose, LogoVisa } from '@de-kit/st-ui/icons';
|
|
|
52
52
|
<Button size="sm">Маленькая</Button>
|
|
53
53
|
<Button size="lg">Крупная</Button>
|
|
54
54
|
<Button fullWidth>Дальше</Button>
|
|
55
|
-
<Button
|
|
56
|
-
<
|
|
57
|
-
|
|
55
|
+
<Button>
|
|
56
|
+
<IconArrowLeft width={20} height={20} />
|
|
57
|
+
Назад
|
|
58
|
+
</Button>
|
|
59
|
+
<Button>
|
|
60
|
+
Дальше
|
|
61
|
+
<IconArrowRight width={20} height={20} />
|
|
62
|
+
</Button>
|
|
63
|
+
<Button>
|
|
64
|
+
<IconSpinner className="button__icon--spin" width={20} height={20} />
|
|
65
|
+
Сохранение
|
|
66
|
+
</Button>
|
|
58
67
|
```
|
|
59
68
|
|
|
69
|
+
Иконка — обычный `children`, слева или справа, какой набор нужен. Класс `button__icon--spin` крутит спиннер.
|
|
70
|
+
|
|
60
71
|
| Prop | По умолчанию | |
|
|
61
72
|
| ----------- | ------------ | -------------------------------------------------- |
|
|
62
73
|
| `variant` | `default` | `default` заливка, `outline` обводка, `link` текст |
|
|
63
74
|
| `size` | `md` | `sm` компактная, `md` обычная, `lg` крупная |
|
|
64
75
|
| `fullWidth` | `false` | ширина 100%, не зависит от `size` |
|
|
65
76
|
| `href` | — | рендер `<a>`, не `<Link>` |
|
|
66
|
-
| `icon` | — | `back` стрелка слева, `forward` справа |
|
|
67
|
-
| `loading` | `false` | спиннер на месте стрелки, клик не проходит |
|
|
68
77
|
|
|
69
78
|
`variant="link"` — это вид кнопки (`font-weight: 400`), не тип элемента. Ссылка — отдельный проп `href`.
|
|
70
79
|
|
|
@@ -1,44 +1,15 @@
|
|
|
1
|
-
const require_icon_arrow_left = require("../../icons/icon-arrow-left.cjs");
|
|
2
|
-
const require_icon_arrow_right = require("../../icons/icon-arrow-right.cjs");
|
|
3
|
-
const require_icon_spinner = require("../../icons/icon-spinner.cjs");
|
|
4
1
|
const require_cn = require("../../lib/cn.cjs");
|
|
5
2
|
let react = require("react");
|
|
6
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
3
|
require("./button.scss");
|
|
4
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
5
|
// src/components/button/button.tsx
|
|
9
6
|
const styleKeys = [
|
|
10
7
|
"variant",
|
|
11
8
|
"size",
|
|
12
9
|
"fullWidth",
|
|
13
|
-
"icon",
|
|
14
|
-
"loading",
|
|
15
10
|
"className"
|
|
16
11
|
];
|
|
17
|
-
const
|
|
18
|
-
sm: 16,
|
|
19
|
-
md: 20,
|
|
20
|
-
lg: 24
|
|
21
|
-
};
|
|
22
|
-
const getClassName = ({ variant = "default", size = "md", fullWidth = false, loading = false, className, disabled }) => require_cn.cn("button", className, `button--${variant}`, `button--${size}`, require_cn.when(fullWidth, "button--full-width"), require_cn.when(disabled, "button--disabled"), require_cn.when(loading, "button--loading"));
|
|
23
|
-
const renderGlyph = (icon, loading, size) => {
|
|
24
|
-
const px = iconSize[size];
|
|
25
|
-
if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_spinner.IconSpinner, {
|
|
26
|
-
className: "button__icon button__icon--spin",
|
|
27
|
-
width: px,
|
|
28
|
-
height: px
|
|
29
|
-
});
|
|
30
|
-
if (icon === "back") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_arrow_left.IconArrowLeft, {
|
|
31
|
-
className: "button__icon",
|
|
32
|
-
width: px,
|
|
33
|
-
height: px
|
|
34
|
-
});
|
|
35
|
-
if (icon === "forward") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_arrow_right.IconArrowRight, {
|
|
36
|
-
className: "button__icon",
|
|
37
|
-
width: px,
|
|
38
|
-
height: px
|
|
39
|
-
});
|
|
40
|
-
return null;
|
|
41
|
-
};
|
|
12
|
+
const getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => require_cn.cn("button", className, require_cn.when(variant !== "default", `button--${variant}`), require_cn.when(size !== "md", `button--${size}`), require_cn.when(fullWidth, "button--full-width"), require_cn.when(disabled, "button--disabled"));
|
|
42
13
|
const omitStyleProps = (props) => {
|
|
43
14
|
const next = {};
|
|
44
15
|
const skipped = new Set(styleKeys);
|
|
@@ -46,40 +17,18 @@ const omitStyleProps = (props) => {
|
|
|
46
17
|
return next;
|
|
47
18
|
};
|
|
48
19
|
const Button = (0, react.forwardRef)(function Button(props, ref) {
|
|
49
|
-
const size = props.size ?? "md";
|
|
50
|
-
const { icon, loading } = props;
|
|
51
20
|
const className = getClassName(props);
|
|
52
21
|
const { children, href, ...domProps } = omitStyleProps(props);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
if (typeof href === "string") {
|
|
61
|
-
const { onClick, ...anchorProps } = domProps;
|
|
62
|
-
const handleClick = (event) => {
|
|
63
|
-
if (loading) {
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
onClick?.(event);
|
|
68
|
-
};
|
|
69
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
70
|
-
ref,
|
|
71
|
-
href,
|
|
72
|
-
className,
|
|
73
|
-
...anchorProps,
|
|
74
|
-
"aria-busy": loading || void 0,
|
|
75
|
-
"aria-disabled": loading || void 0,
|
|
76
|
-
onClick: handleClick,
|
|
77
|
-
children: content
|
|
78
|
-
});
|
|
79
|
-
}
|
|
22
|
+
if (typeof href === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
23
|
+
ref,
|
|
24
|
+
href,
|
|
25
|
+
className,
|
|
26
|
+
...domProps,
|
|
27
|
+
children
|
|
28
|
+
});
|
|
80
29
|
const { type = "button", disabled, onClick, ...buttonProps } = domProps;
|
|
81
30
|
const handleClick = (event) => {
|
|
82
|
-
if (disabled
|
|
31
|
+
if (disabled) return;
|
|
83
32
|
onClick?.(event);
|
|
84
33
|
};
|
|
85
34
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
@@ -87,10 +36,9 @@ const Button = (0, react.forwardRef)(function Button(props, ref) {
|
|
|
87
36
|
className,
|
|
88
37
|
type,
|
|
89
38
|
disabled,
|
|
90
|
-
...buttonProps,
|
|
91
|
-
"aria-busy": loading || void 0,
|
|
92
39
|
onClick: handleClick,
|
|
93
|
-
|
|
40
|
+
...buttonProps,
|
|
41
|
+
children
|
|
94
42
|
});
|
|
95
43
|
});
|
|
96
44
|
exports.Button = Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","names":["cn","when","
|
|
1
|
+
{"version":3,"file":"button.cjs","names":["cn","when","forwardRef"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n forwardRef,\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n className?: string;\n children?: ReactNode;\n}\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n href?: undefined;\n}\n\nexport interface ButtonLinkProps\n extends\n Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n ButtonStyleProps {\n href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n variant = 'default',\n size = 'md',\n fullWidth = false,\n className,\n disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n cn(\n 'button',\n className,\n when(variant !== 'default', `button--${variant}`),\n when(size !== 'md', `button--${size}`),\n when(fullWidth, 'button--full-width'),\n when(disabled, 'button--disabled'),\n );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n const next: Record<string, unknown> = {};\n const skipped = new Set<string>(styleKeys);\n\n for (const [key, value] of Object.entries(props)) {\n if (!skipped.has(key)) next[key] = value;\n }\n\n return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n ButtonComponentProps\n>(function Button(props, ref) {\n const className = getClassName(props);\n const { children, href, ...domProps } = omitStyleProps(props);\n\n if (typeof href === 'string') {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={className}\n {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {children}\n </a>\n );\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n ...buttonProps\n } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n if (disabled) return;\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n className={className}\n type={type}\n disabled={disabled}\n onClick={handleClick}\n {...buttonProps}\n >\n {children}\n </button>\n );\n});\n"],"mappings":";;;;;AAqCA,MAAM,YAAY;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEAA,WAAAA,GACE,UACA,WACAC,WAAAA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChDA,WAAAA,KAAK,SAAS,MAAM,WAAW,MAAM,GACrCA,WAAAA,KAAK,WAAW,oBAAoB,GACpCA,WAAAA,KAAK,UAAU,kBAAkB,CACnC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,UAAA,GAASC,MAAAA,WAAAA,CAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
|
|
2
2
|
export type ButtonVariant = 'default' | 'outline' | 'link';
|
|
3
3
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
export type ButtonIcon = 'back' | 'forward';
|
|
5
4
|
interface ButtonStyleProps {
|
|
6
5
|
variant?: ButtonVariant;
|
|
7
6
|
size?: ButtonSize;
|
|
8
7
|
fullWidth?: boolean;
|
|
9
|
-
icon?: ButtonIcon;
|
|
10
|
-
loading?: boolean;
|
|
11
8
|
className?: string;
|
|
12
9
|
children?: ReactNode;
|
|
13
10
|
}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
|
|
2
2
|
export type ButtonVariant = 'default' | 'outline' | 'link';
|
|
3
3
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
export type ButtonIcon = 'back' | 'forward';
|
|
5
4
|
interface ButtonStyleProps {
|
|
6
5
|
variant?: ButtonVariant;
|
|
7
6
|
size?: ButtonSize;
|
|
8
7
|
fullWidth?: boolean;
|
|
9
|
-
icon?: ButtonIcon;
|
|
10
|
-
loading?: boolean;
|
|
11
8
|
className?: string;
|
|
12
9
|
children?: ReactNode;
|
|
13
10
|
}
|
|
@@ -1,44 +1,15 @@
|
|
|
1
|
-
import { IconArrowLeft } from "../../icons/icon-arrow-left.js";
|
|
2
|
-
import { IconArrowRight } from "../../icons/icon-arrow-right.js";
|
|
3
|
-
import { IconSpinner } from "../../icons/icon-spinner.js";
|
|
4
1
|
import { cn, when } from "../../lib/cn.js";
|
|
5
2
|
import { forwardRef } from "react";
|
|
6
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
3
|
import "./button.scss";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
5
|
// src/components/button/button.tsx
|
|
9
6
|
const styleKeys = [
|
|
10
7
|
"variant",
|
|
11
8
|
"size",
|
|
12
9
|
"fullWidth",
|
|
13
|
-
"icon",
|
|
14
|
-
"loading",
|
|
15
10
|
"className"
|
|
16
11
|
];
|
|
17
|
-
const
|
|
18
|
-
sm: 16,
|
|
19
|
-
md: 20,
|
|
20
|
-
lg: 24
|
|
21
|
-
};
|
|
22
|
-
const getClassName = ({ variant = "default", size = "md", fullWidth = false, loading = false, className, disabled }) => cn("button", className, `button--${variant}`, `button--${size}`, when(fullWidth, "button--full-width"), when(disabled, "button--disabled"), when(loading, "button--loading"));
|
|
23
|
-
const renderGlyph = (icon, loading, size) => {
|
|
24
|
-
const px = iconSize[size];
|
|
25
|
-
if (loading) return /* @__PURE__ */ jsx(IconSpinner, {
|
|
26
|
-
className: "button__icon button__icon--spin",
|
|
27
|
-
width: px,
|
|
28
|
-
height: px
|
|
29
|
-
});
|
|
30
|
-
if (icon === "back") return /* @__PURE__ */ jsx(IconArrowLeft, {
|
|
31
|
-
className: "button__icon",
|
|
32
|
-
width: px,
|
|
33
|
-
height: px
|
|
34
|
-
});
|
|
35
|
-
if (icon === "forward") return /* @__PURE__ */ jsx(IconArrowRight, {
|
|
36
|
-
className: "button__icon",
|
|
37
|
-
width: px,
|
|
38
|
-
height: px
|
|
39
|
-
});
|
|
40
|
-
return null;
|
|
41
|
-
};
|
|
12
|
+
const getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => cn("button", className, when(variant !== "default", `button--${variant}`), when(size !== "md", `button--${size}`), when(fullWidth, "button--full-width"), when(disabled, "button--disabled"));
|
|
42
13
|
const omitStyleProps = (props) => {
|
|
43
14
|
const next = {};
|
|
44
15
|
const skipped = new Set(styleKeys);
|
|
@@ -46,40 +17,18 @@ const omitStyleProps = (props) => {
|
|
|
46
17
|
return next;
|
|
47
18
|
};
|
|
48
19
|
const Button = forwardRef(function Button(props, ref) {
|
|
49
|
-
const size = props.size ?? "md";
|
|
50
|
-
const { icon, loading } = props;
|
|
51
20
|
const className = getClassName(props);
|
|
52
21
|
const { children, href, ...domProps } = omitStyleProps(props);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
if (typeof href === "string") {
|
|
61
|
-
const { onClick, ...anchorProps } = domProps;
|
|
62
|
-
const handleClick = (event) => {
|
|
63
|
-
if (loading) {
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
onClick?.(event);
|
|
68
|
-
};
|
|
69
|
-
return /* @__PURE__ */ jsx("a", {
|
|
70
|
-
ref,
|
|
71
|
-
href,
|
|
72
|
-
className,
|
|
73
|
-
...anchorProps,
|
|
74
|
-
"aria-busy": loading || void 0,
|
|
75
|
-
"aria-disabled": loading || void 0,
|
|
76
|
-
onClick: handleClick,
|
|
77
|
-
children: content
|
|
78
|
-
});
|
|
79
|
-
}
|
|
22
|
+
if (typeof href === "string") return /* @__PURE__ */ jsx("a", {
|
|
23
|
+
ref,
|
|
24
|
+
href,
|
|
25
|
+
className,
|
|
26
|
+
...domProps,
|
|
27
|
+
children
|
|
28
|
+
});
|
|
80
29
|
const { type = "button", disabled, onClick, ...buttonProps } = domProps;
|
|
81
30
|
const handleClick = (event) => {
|
|
82
|
-
if (disabled
|
|
31
|
+
if (disabled) return;
|
|
83
32
|
onClick?.(event);
|
|
84
33
|
};
|
|
85
34
|
return /* @__PURE__ */ jsx("button", {
|
|
@@ -87,10 +36,9 @@ const Button = forwardRef(function Button(props, ref) {
|
|
|
87
36
|
className,
|
|
88
37
|
type,
|
|
89
38
|
disabled,
|
|
90
|
-
...buttonProps,
|
|
91
|
-
"aria-busy": loading || void 0,
|
|
92
39
|
onClick: handleClick,
|
|
93
|
-
|
|
40
|
+
...buttonProps,
|
|
41
|
+
children
|
|
94
42
|
});
|
|
95
43
|
});
|
|
96
44
|
export { Button };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n forwardRef,\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n} from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n forwardRef,\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n className?: string;\n children?: ReactNode;\n}\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n href?: undefined;\n}\n\nexport interface ButtonLinkProps\n extends\n Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n ButtonStyleProps {\n href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n variant = 'default',\n size = 'md',\n fullWidth = false,\n className,\n disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n cn(\n 'button',\n className,\n when(variant !== 'default', `button--${variant}`),\n when(size !== 'md', `button--${size}`),\n when(fullWidth, 'button--full-width'),\n when(disabled, 'button--disabled'),\n );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n const next: Record<string, unknown> = {};\n const skipped = new Set<string>(styleKeys);\n\n for (const [key, value] of Object.entries(props)) {\n if (!skipped.has(key)) next[key] = value;\n }\n\n return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n ButtonComponentProps\n>(function Button(props, ref) {\n const className = getClassName(props);\n const { children, href, ...domProps } = omitStyleProps(props);\n\n if (typeof href === 'string') {\n return (\n <a\n ref={ref as Ref<HTMLAnchorElement>}\n href={href}\n className={className}\n {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {children}\n </a>\n );\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n ...buttonProps\n } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n if (disabled) return;\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n className={className}\n type={type}\n disabled={disabled}\n onClick={handleClick}\n {...buttonProps}\n >\n {children}\n </button>\n );\n});\n"],"mappings":";;;;;AAqCA,MAAM,YAAY;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEA,GACE,UACA,WACA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChD,KAAK,SAAS,MAAM,WAAW,MAAM,GACrC,KAAK,WAAW,oBAAoB,GACpC,KAAK,UAAU,kBAAkB,CACnC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,SAAS,WAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,oBAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
width: fit-content;
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
|
-
padding: 10px
|
|
6
|
+
padding: 10px 20px;
|
|
7
7
|
border-radius: 30px;
|
|
8
8
|
font-size: 14px;
|
|
9
9
|
line-height: 20px;
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
&:active {
|
|
23
23
|
background-color: var(--color-neutral-200);
|
|
24
24
|
color: var(--color-neutral-500);
|
|
25
|
-
fill:
|
|
25
|
+
fill: currentColor;
|
|
26
26
|
border-color: var(--color-neutral-200);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&:disabled {
|
|
30
30
|
background-color: var(--color-neutral-200);
|
|
31
31
|
color: var(--color-neutral-500);
|
|
32
|
-
fill:
|
|
32
|
+
fill: currentColor;
|
|
33
33
|
border-color: var(--color-neutral-200);
|
|
34
34
|
cursor: default;
|
|
35
35
|
pointer-events: none;
|
|
@@ -39,46 +39,25 @@
|
|
|
39
39
|
&--outline {
|
|
40
40
|
background-color: transparent;
|
|
41
41
|
color: var(--color-black);
|
|
42
|
-
fill:
|
|
42
|
+
fill: currentColor;
|
|
43
43
|
border: 2px solid var(--color-black);
|
|
44
44
|
|
|
45
45
|
&:disabled {
|
|
46
46
|
background-color: transparent;
|
|
47
|
-
border: 2px solid var(--color-black);
|
|
48
47
|
}
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
&--sm {
|
|
52
|
-
padding: 6px 12px;
|
|
53
|
-
font-size: 12px;
|
|
54
|
-
line-height: 16px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&--lg {
|
|
58
|
-
padding: 14px 24px;
|
|
59
|
-
font-size: 16px;
|
|
60
|
-
line-height: 24px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&--full-width {
|
|
64
|
-
width: 100%;
|
|
65
|
-
justify-content: center;
|
|
66
|
-
}
|
|
67
|
-
|
|
49
|
+
|
|
68
50
|
&--link {
|
|
69
51
|
border: none;
|
|
70
52
|
background-color: transparent;
|
|
71
53
|
color: var(--color-black);
|
|
72
|
-
fill:
|
|
54
|
+
fill: currentColor;
|
|
73
55
|
border-radius: 0;
|
|
74
56
|
padding: 0;
|
|
75
|
-
font-weight: 400;
|
|
76
57
|
|
|
77
58
|
&:active,
|
|
78
59
|
&:disabled {
|
|
79
60
|
background-color: transparent;
|
|
80
|
-
color: rgba(0, 0, 0, 0.5);
|
|
81
|
-
fill: rgba(0, 0, 0, 0.5);
|
|
82
61
|
}
|
|
83
62
|
}
|
|
84
63
|
|
|
@@ -92,13 +71,26 @@
|
|
|
92
71
|
user-select: none;
|
|
93
72
|
}
|
|
94
73
|
|
|
95
|
-
&--
|
|
96
|
-
|
|
74
|
+
&--sm {
|
|
75
|
+
padding: 6px 12px;
|
|
76
|
+
font-size: 12px;
|
|
77
|
+
line-height: 16px;
|
|
97
78
|
}
|
|
98
|
-
}
|
|
99
79
|
|
|
100
|
-
|
|
101
|
-
|
|
80
|
+
&--lg {
|
|
81
|
+
padding: 14px 24px;
|
|
82
|
+
font-size: 16px;
|
|
83
|
+
line-height: 24px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&--full-width {
|
|
87
|
+
width: 100%;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
svg {
|
|
92
|
+
flex-shrink: 0;
|
|
93
|
+
}
|
|
102
94
|
}
|
|
103
95
|
|
|
104
96
|
.button__icon--spin {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Button, ButtonComponentProps,
|
|
2
|
-
export { Button, type ButtonComponentProps, type
|
|
1
|
+
import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./button.cjs";
|
|
2
|
+
export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Button, ButtonComponentProps,
|
|
2
|
-
export { Button, type ButtonComponentProps, type
|
|
1
|
+
import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./button.js";
|
|
2
|
+
export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant };
|
package/dist/icons/index.cjs
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_icon_arrow_left = require("./icon-arrow-left.cjs");
|
|
3
|
-
const require_icon_arrow_right = require("./icon-arrow-right.cjs");
|
|
4
|
-
const require_icon_spinner = require("./icon-spinner.cjs");
|
|
5
2
|
const require_control_mark_checkbox = require("./control-mark-checkbox.cjs");
|
|
6
3
|
const require_control_mark_radiobutton = require("./control-mark-radiobutton.cjs");
|
|
7
4
|
const require_icon_adult = require("./icon-adult.cjs");
|
|
8
5
|
const require_icon_arrow_down = require("./icon-arrow-down.cjs");
|
|
6
|
+
const require_icon_arrow_left = require("./icon-arrow-left.cjs");
|
|
7
|
+
const require_icon_arrow_right = require("./icon-arrow-right.cjs");
|
|
9
8
|
const require_icon_arrow_up = require("./icon-arrow-up.cjs");
|
|
10
9
|
const require_icon_audio = require("./icon-audio.cjs");
|
|
11
10
|
const require_icon_barchart = require("./icon-barchart.cjs");
|
|
@@ -79,6 +78,7 @@ const require_icon_search = require("./icon-search.cjs");
|
|
|
79
78
|
const require_icon_shield = require("./icon-shield.cjs");
|
|
80
79
|
const require_icon_sms_code = require("./icon-sms-code.cjs");
|
|
81
80
|
const require_icon_sort = require("./icon-sort.cjs");
|
|
81
|
+
const require_icon_spinner = require("./icon-spinner.cjs");
|
|
82
82
|
const require_icon_star = require("./icon-star.cjs");
|
|
83
83
|
const require_icon_switch_off = require("./icon-switch-off.cjs");
|
|
84
84
|
const require_icon_switch_on = require("./icon-switch-on.cjs");
|
package/dist/icons/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { IconArrowLeft } from "./icon-arrow-left.js";
|
|
2
|
-
import { IconArrowRight } from "./icon-arrow-right.js";
|
|
3
|
-
import { IconSpinner } from "./icon-spinner.js";
|
|
4
1
|
import { ControlMarkCheckbox } from "./control-mark-checkbox.js";
|
|
5
2
|
import { ControlMarkRadiobutton } from "./control-mark-radiobutton.js";
|
|
6
3
|
import { IconAdult } from "./icon-adult.js";
|
|
7
4
|
import { IconArrowDown } from "./icon-arrow-down.js";
|
|
5
|
+
import { IconArrowLeft } from "./icon-arrow-left.js";
|
|
6
|
+
import { IconArrowRight } from "./icon-arrow-right.js";
|
|
8
7
|
import { IconArrowUp } from "./icon-arrow-up.js";
|
|
9
8
|
import { IconAudio } from "./icon-audio.js";
|
|
10
9
|
import { IconBarchart } from "./icon-barchart.js";
|
|
@@ -78,6 +77,7 @@ import { IconSearch } from "./icon-search.js";
|
|
|
78
77
|
import { IconShield } from "./icon-shield.js";
|
|
79
78
|
import { IconSmsCode } from "./icon-sms-code.js";
|
|
80
79
|
import { IconSort } from "./icon-sort.js";
|
|
80
|
+
import { IconSpinner } from "./icon-spinner.js";
|
|
81
81
|
import { IconStar } from "./icon-star.js";
|
|
82
82
|
import { IconSwitchOff } from "./icon-switch-off.js";
|
|
83
83
|
import { IconSwitchOn } from "./icon-switch-on.js";
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button, ButtonComponentProps,
|
|
1
|
+
import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./components/button/button.cjs";
|
|
2
2
|
import "./components/button/index.cjs";
|
|
3
3
|
import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.cjs";
|
|
4
4
|
import "./components/checkbox/index.cjs";
|
|
@@ -10,4 +10,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
|
|
|
10
10
|
import "./components/spinner/index.cjs";
|
|
11
11
|
import { TextArea, TextAreaProps } from "./components/textarea/textarea.cjs";
|
|
12
12
|
import "./components/textarea/index.cjs";
|
|
13
|
-
export { Button, type ButtonComponentProps, type
|
|
13
|
+
export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button, ButtonComponentProps,
|
|
1
|
+
import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./components/button/button.js";
|
|
2
2
|
import "./components/button/index.js";
|
|
3
3
|
import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.js";
|
|
4
4
|
import "./components/checkbox/index.js";
|
|
@@ -10,4 +10,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
|
|
|
10
10
|
import "./components/spinner/index.js";
|
|
11
11
|
import { TextArea, TextAreaProps } from "./components/textarea/textarea.js";
|
|
12
12
|
import "./components/textarea/index.js";
|
|
13
|
-
export { Button, type ButtonComponentProps, type
|
|
13
|
+
export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
|