@kvdbil/components 16.0.0 → 16.0.1
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.
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),s=require("../../theme.js"),t=require("../Spinner/index.js"),
|
|
2
|
-
${
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),r=require("styled-components"),s=require("../../theme.js"),t=require("../Spinner/index.js"),o=require("../../typography/ButtonText/index.js"),l=require("./styles.js");function a(e){return e&&e.__esModule?e:{default:e}}require("../../utils/utils.js");var n=a(i),d=a(r);const u=d.default.button`
|
|
2
|
+
${o.BasicButtonFontStyle}
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
outline: none;
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
user-select: none;
|
|
7
7
|
position: relative;
|
|
8
8
|
border: none;
|
|
9
|
-
border-radius: 0.5rem;
|
|
9
|
+
${({$noRadius:e})=>!e&&"border-radius: 0.5rem;"}
|
|
10
10
|
min-width: ${({minWidth:e})=>e||"auto"};
|
|
11
11
|
width: ${({fullWidth:e})=>e&&"100%"};
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: ${({sufixIcon:e,prefixIcon:i,isLoading:r})=>r||!e&&!i?"center":"space-between"};
|
|
15
15
|
|
|
16
|
-
${({$size:e
|
|
16
|
+
${({$size:e})=>l.fontSizes[e]||o.ButtonRegularTextStyle}
|
|
17
17
|
${({$size:e})=>r.css`
|
|
18
|
-
${"small"===e&&
|
|
19
|
-
${"regular"===e&&
|
|
20
|
-
${"large"===e&&
|
|
18
|
+
${"small"===e&&l.smallSizeStyles()}
|
|
19
|
+
${"regular"===e&&l.regularSizeStyles()}
|
|
20
|
+
${"large"===e&&l.largeSizeStyles()}
|
|
21
21
|
`}
|
|
22
22
|
background-color: transparent;
|
|
23
23
|
transition:
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
background-color 0.3s ease,
|
|
26
26
|
border 0.3s ease,
|
|
27
27
|
filter 0.3s;
|
|
28
|
-
${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:t,theme:
|
|
29
|
-
${t?
|
|
28
|
+
${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:t,theme:o})=>r.css`
|
|
29
|
+
${t?l.disabledColorStyles(o,e):l.colorStyles[e]({theme:o,$color:i,$colorShade:s,$variant:e})}
|
|
30
30
|
`}
|
|
31
31
|
&:focus-visible {
|
|
32
32
|
box-shadow: 0px 0px 0px 1px
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
margin-left: ${({type:e,size:i})=>"sufix"===e?f[i]:0};
|
|
39
39
|
font-size: ${({size:e})=>c[e]};
|
|
40
40
|
opacity: ${({isLoading:e})=>e?0:1};
|
|
41
|
-
`,
|
|
41
|
+
`,g=d.default(t.default)`
|
|
42
42
|
position: absolute;
|
|
43
|
-
`,
|
|
43
|
+
`,m=d.default.span`
|
|
44
44
|
opacity: ${({isLoading:e})=>e?0:1};
|
|
45
|
-
`,x={small:1,regular:1.25,large:1.5}
|
|
45
|
+
`,x={small:1,regular:1.25,large:1.5},$=i.forwardRef((({size:i="regular",color:r,colorShade:t="mainAlt",variant:o="solid",fullWidth:l=!1,isDisabled:a=!1,isLoading:d=!1,children:c,sufixIcon:f,prefixIcon:$,minWidth:y,as:h="button",noRadius:b=!1,...z},S)=>{return e.jsx(u,{...z,as:h,minWidth:y,$color:r,$colorShade:t,disabled:a||d,fullWidth:l,theme:s.default,$variant:o,$size:i,isLoading:d,ref:S,prefixIcon:$,sufixIcon:f,$noRadius:b,children:e.jsxs(e.Fragment,{children:[$&&e.jsx(p,{size:i,type:"prefix",isLoading:d,children:$}),(j=c,v=d,"string"==typeof j||"number"==typeof j?e.jsx(m,{isLoading:v,children:j}):n.default.isValidElement(j)?n.default.cloneElement(j,{style:{...j.props.style,opacity:v?0:1}}):j),f&&e.jsx(p,{size:i,type:"sufix",isLoading:d,children:f}),d&&e.jsx(g,{customColor:s.default.colors.grayscaleToned.light1,size:x[i]})]})});var j,v}));$.displayName="Button",exports.Button=$,exports.default=$;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as l,jsxs as
|
|
1
|
+
import{jsx as l,jsxs as W,Fragment as w}from"react/jsx-runtime";import p,{forwardRef as B}from"react";import t,{css as g}from"styled-components";import $ from"../../theme.js";import R from"../Spinner/index.js";import{BasicButtonFontStyle as j,ButtonRegularTextStyle as k}from"../../typography/ButtonText/index.js";import{fontSizes as T,smallSizeStyles as A,regularSizeStyles as C,largeSizeStyles as E,disabledColorStyles as F,colorStyles as V}from"./styles.js";import"../../utils/utils.js";const c=0,D=t.button`
|
|
2
2
|
${j}
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
outline: none;
|
|
@@ -6,15 +6,15 @@ import{jsx as l,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
|
|
|
6
6
|
user-select: none;
|
|
7
7
|
position: relative;
|
|
8
8
|
border: none;
|
|
9
|
-
border-radius: 0.5rem;
|
|
9
|
+
${({$noRadius:e})=>!e&&"border-radius: 0.5rem;"}
|
|
10
10
|
min-width: ${({minWidth:e})=>e||"auto"};
|
|
11
11
|
width: ${({fullWidth:e})=>e&&"100%"};
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: ${({sufixIcon:e,prefixIcon:i,isLoading:s})=>!s&&(e||i)?"space-between":"center"};
|
|
15
15
|
|
|
16
|
-
${({$size:e
|
|
17
|
-
${({$size:e})=>
|
|
16
|
+
${({$size:e})=>T[e]||k}
|
|
17
|
+
${({$size:e})=>g`
|
|
18
18
|
${e==="small"&&A()}
|
|
19
19
|
${e==="regular"&&C()}
|
|
20
20
|
${e==="large"&&E()}
|
|
@@ -25,21 +25,21 @@ import{jsx as l,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
|
|
|
25
25
|
background-color 0.3s ease,
|
|
26
26
|
border 0.3s ease,
|
|
27
27
|
filter 0.3s;
|
|
28
|
-
${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:n,theme:a})=>
|
|
29
|
-
${n?F(a,e):
|
|
28
|
+
${({$variant:e="solid",$color:i,$colorShade:s="main",disabled:n,theme:a})=>g`
|
|
29
|
+
${n?F(a,e):V[e]({theme:a,$color:i,$colorShade:s,$variant:e})}
|
|
30
30
|
`}
|
|
31
31
|
&:focus-visible {
|
|
32
32
|
box-shadow: 0px 0px 0px 1px
|
|
33
33
|
${({theme:e})=>e.colors.grayscaleToned.light5};
|
|
34
34
|
}
|
|
35
|
-
`,
|
|
35
|
+
`,M={small:"1rem",regular:"1.25rem",large:"1.5rem"},h={small:"0.5rem",regular:"1rem",large:"1rem"},y=t.span`
|
|
36
36
|
display: flex;
|
|
37
37
|
margin-right: ${({type:e,size:i})=>e==="prefix"?h[i]:0};
|
|
38
38
|
margin-left: ${({type:e,size:i})=>e==="sufix"?h[i]:0};
|
|
39
|
-
font-size: ${({size:e})=>
|
|
39
|
+
font-size: ${({size:e})=>M[e]};
|
|
40
40
|
opacity: ${({isLoading:e})=>e?c:1};
|
|
41
|
-
`,
|
|
41
|
+
`,N=t(R)`
|
|
42
42
|
position: absolute;
|
|
43
|
-
`,
|
|
43
|
+
`,O=t.span`
|
|
44
44
|
opacity: ${({isLoading:e})=>e?c:1};
|
|
45
|
-
`,q={small:1,regular:1.25,large:1.5},f=
|
|
45
|
+
`,q={small:1,regular:1.25,large:1.5},f=B(({size:e="regular",color:i,colorShade:s="mainAlt",variant:n="solid",fullWidth:a=!1,isDisabled:x=!1,isLoading:r=!1,children:b,sufixIcon:d,prefixIcon:m,minWidth:z,as:S="button",noRadius:L=!1,...v},I)=>l(D,{...v,as:S,minWidth:z,$color:i,$colorShade:s,disabled:x||r,fullWidth:a,theme:$,$variant:n,$size:e,isLoading:r,ref:I,prefixIcon:m,sufixIcon:d,$noRadius:L,children:W(w,{children:[m&&l(y,{size:e,type:"prefix",isLoading:r,children:m}),((o,u)=>typeof o=="string"||typeof o=="number"?l(O,{isLoading:u,children:o}):p.isValidElement(o)?p.cloneElement(o,{style:{...o.props.style,opacity:u?c:1}}):o)(b,r),d&&l(y,{size:e,type:"sufix",isLoading:r,children:d}),r&&l(N,{customColor:$.colors.grayscaleToned.light1,size:q[e]})]})}));f.displayName="Button";export{f as Button,f as default};
|
package/package.json
CHANGED
package/package.json.tmp
CHANGED
|
@@ -15,6 +15,7 @@ interface Props {
|
|
|
15
15
|
minWidth?: string;
|
|
16
16
|
as?: keyof JSX.IntrinsicElements;
|
|
17
17
|
ref?: React.ForwardedRef<HTMLElement>;
|
|
18
|
+
noRadius?: boolean;
|
|
18
19
|
}
|
|
19
20
|
export type ButtonProps = ComponentPropsWithRef<'button'> & Props;
|
|
20
21
|
export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
|