@kvdbil/components 14.3.7 → 14.3.16
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 +1 -1
- package/cjs/components/Button/index.js +4 -1
- package/cjs/components/Chip/index.js +4 -1
- package/cjs/components/Modal/index.js +3 -1
- package/cjs/components/RadioButton/index.js +1 -1
- package/cjs/components/Select/index.js +5 -5
- package/cjs/components/SpinnerThin/index.js +3 -1
- package/cjs/components/Tabs/Tab.js +3 -1
- package/esm/components/Button/index.js +4 -1
- package/esm/components/Button/styles.js +1 -1
- package/esm/components/Chip/index.js +4 -1
- package/esm/components/DayPicker/index.js +2 -2
- package/esm/components/Icon/index.js +3 -3
- package/esm/components/Modal/index.js +3 -1
- package/esm/components/RadioButton/index.js +2 -2
- package/esm/components/Select/index.js +3 -3
- package/esm/components/SpinnerThin/index.js +3 -1
- package/esm/components/Tabs/Tab.js +3 -1
- package/package.json +40 -37
- package/package.json.tmp +124 -0
- package/types/components/Accordion/index.d.ts +2 -6
- package/types/components/DayPicker/DayPickerNavBar.d.ts +1 -1
- package/types/components/Icon/index.d.ts +5 -1
- package/types/components/ListItem/Bacon.d.ts +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,10 @@
|
|
|
19
19
|
${"large"===e&&a.largeSizeStyles()}
|
|
20
20
|
`}
|
|
21
21
|
background-color: transparent;
|
|
22
|
-
transition:
|
|
22
|
+
transition:
|
|
23
|
+
color 0.3s ease,
|
|
24
|
+
background-color 0.3s ease,
|
|
25
|
+
border 0.3s ease,
|
|
23
26
|
filter 0.3s;
|
|
24
27
|
${({variant:e="solid",color:r="primary",colorShade:s="main",disabled:l,theme:t})=>i.css`
|
|
25
28
|
${l?a.disabledColorStyles(t,e):a.colorStyles[e](t,r,s)}
|
|
@@ -15,7 +15,10 @@
|
|
|
15
15
|
border-color: ${i.getBorderColor};
|
|
16
16
|
border-radius: 1.293rem;
|
|
17
17
|
padding: ${({size:e,isDeletable:r})=>r?"0 0.5rem 0 1rem":n[e]};
|
|
18
|
-
transition:
|
|
18
|
+
transition:
|
|
19
|
+
color 0.3s ease,
|
|
20
|
+
background-color 0.3s ease,
|
|
21
|
+
border 0.3s ease;
|
|
19
22
|
|
|
20
23
|
${e=>!e.isDisabled&&e.isClickable&&` &:hover {\n border-color: ${i.getHoverBorderColor(e)};\n background-color: ${i.getHoverBackgroundColor(e)};\n color: ${i.getHoverColor(e)};\n } &:active {\n background-color: ${i.getActiveBackgroundColor(e)};\n border-color: ${i.getActiveBorderColor(e)};\n color: ${i.getActiveColor(e)};\n }`}
|
|
21
24
|
`,s=l.default.span`
|
|
@@ -36,7 +36,9 @@
|
|
|
36
36
|
padding: 1rem;
|
|
37
37
|
background-color: white;
|
|
38
38
|
border-radius: 3px;
|
|
39
|
-
box-shadow:
|
|
39
|
+
box-shadow:
|
|
40
|
+
0px 24px 38px rgba(0, 0, 0, 0.1),
|
|
41
|
+
0px 9px 46px rgba(0, 0, 0, 0.09),
|
|
40
42
|
0px 11px 15px rgba(0, 0, 0, 0.15);
|
|
41
43
|
|
|
42
44
|
overflow-y: hidden;
|
|
@@ -95,4 +95,4 @@
|
|
|
95
95
|
user-select: none;
|
|
96
96
|
color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
|
|
97
97
|
margin-left: 0.5rem;
|
|
98
|
-
`,f=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:l=!1,isDisabled:a=!1,color:t="secondary",onChange:d,label:c,...n})=>e.jsxs(u,{children:[e.jsxs(o.default,{onClick:d,isActive:l,isDisabled:a,color:t,children:[e.jsx(b,{"data-validate":"checked",checked:l,type:"radio",name:r,id:r,
|
|
98
|
+
`,f=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:l=!1,isDisabled:a=!1,color:t="secondary",onChange:d,label:c,...n})=>e.jsxs(u,{children:[e.jsxs(o.default,{onClick:d,isActive:l,isDisabled:a,color:t,children:[e.jsx(b,{"data-validate":"checked",checked:l,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":l,...n}),e.jsx(h,{size:s,color:t,isChecked:l,isDisabled:a,children:e.jsx(p,{className:"circle circle--outer",children:e.jsx(x,{className:"circle circle--inner"})})})]}),c&&e.jsx(g,{as:"label",htmlFor:r,isDisabled:a,children:c})]});exports.RadioButton=f,exports.default=f;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),i=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),i=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),c=d(t);const u=c.default.div`
|
|
2
2
|
font-family: ${({theme:e})=>e.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
|
-
`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${a.default.colors.error.dark}`},g=
|
|
4
|
+
`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${a.default.colors.error.dark}`},g=c.default.div`
|
|
5
5
|
position: absolute;
|
|
6
6
|
z-index: 1;
|
|
7
7
|
top: 0.5rem;
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
${e=>e.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
|
|
14
14
|
|
|
15
15
|
${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
|
|
16
|
-
`,h=
|
|
16
|
+
`,h=c.default.span`
|
|
17
17
|
${l.CaptionStyle}
|
|
18
18
|
display: block;
|
|
19
19
|
margin-top: 0.25rem;
|
|
20
20
|
color: ${({hasError:e})=>e?a.default.colors.error.dark:a.default.colors.text.disabled};
|
|
21
|
-
`,x=
|
|
21
|
+
`,x=c.default((r=>e.jsxs("svg",{...r,children:[e.jsx("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:e.jsx("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),e.jsx("use",{xlinkHref:"#icon-arrow"})]})))`
|
|
22
22
|
width: 0.75rem;
|
|
23
23
|
height: 0.75rem;
|
|
24
24
|
margin: 0;
|
|
@@ -36,4 +36,4 @@
|
|
|
36
36
|
transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
37
|
|
|
38
38
|
transform-origin: 50% 60%;
|
|
39
|
-
`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:a.default});function y({className:o,color:t="primary",forwardRef:i,hasError:l=!1,height:d,helperText:
|
|
39
|
+
`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:a.default});function y({className:o,color:t="primary",forwardRef:i,hasError:l=!1,height:d,helperText:c,isDisabled:x=!1,onBlur:y=(()=>null),onFocus:$=(()=>null),onInputChange:k=(()=>null),placeholder:F="",name:S,...j}){const[v,D]=r.useState(!1),[w,L]=r.useState(""),I=({isSelected:e,isFocused:r,isDisabled:o})=>e?a.default.colors[t].main:o?a.default.colors.background.light:r?a.default.colors.background.gray:a.default.colors.background.light,T=((e,r)=>r?a.default.colors.error.main:e?a.default.colors.text.dark:a.default.colors.gray.light1)(v,l),C=!j.label;return e.jsxs(u,{className:o,children:[!C&&j.label&&e.jsx(s.Label,{htmlFor:S,height:d,isFocused:v,hasValue:!(!j.value&&!w),disabled:x,theme:a.default,hasError:l,children:j.label}),j.prefix&&e.jsx(g,{isDisabled:x,isFocused:v,children:j.prefix}),e.jsx(n.default,{...j,id:"react-select",inputId:S,name:S,ref:i,isDisabled:x,onInputChange:(e,r)=>{k(e,r),L(e)},placeholder:F,onFocus:e=>{D(!0),$(e)},onBlur:e=>{D(!1),y(e)},styles:{control:e=>({...e,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:a.default.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(x),...f(l),...p(!!j.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const r={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return C?{...r,color:a.default.colors.text.dark,fontWeight:600}:{...r,display:v?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${T}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:r,isFocused:o,isDisabled:t})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:t?"not-allowed":"pointer","&:hover":{background:I({isSelected:r,isFocused:!0,isDisabled:t})},background:I({isSelected:r,isFocused:o}),...p(!!j.prefix)}),valueContainer:e=>({...e,position:"static",padding:d?d-1+"rem 0 ":0,height:d?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...j.components??{}}}),c&&e.jsx(h,{hasError:l,children:c})]})}exports.Select=y,exports.default=y;
|
|
@@ -6,7 +6,9 @@
|
|
|
6
6
|
${({size:e})=>e&&`\n width: ${e}rem;\n height: ${e}rem;\n margin-left: -${e/2}rem;\n `}
|
|
7
7
|
|
|
8
8
|
border-width: 1px;
|
|
9
|
-
transition:
|
|
9
|
+
transition:
|
|
10
|
+
all 0.02s ease-in-out !important,
|
|
11
|
+
width transition 0s !important;
|
|
10
12
|
|
|
11
13
|
${({isLoading:e,theme:i})=>!e&&`\n animation: none;\n border: 1px solid ${i.colors.gray.dark3};\n `}
|
|
12
14
|
`,l=o.default.div`
|
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
margin-bottom: -3px;
|
|
6
6
|
padding: 0.875rem 1.375rem;
|
|
7
7
|
border-bottom: ${({theme:e,isActive:r,activeColor:t})=>r?`3px solid ${e.colors[t].main}`:"3px solid transparent"};
|
|
8
|
-
transition:
|
|
8
|
+
transition:
|
|
9
|
+
color 0.3s ease,
|
|
10
|
+
border 0.3s ease;
|
|
9
11
|
|
|
10
12
|
:focus-visible {
|
|
11
13
|
${({theme:e,isActive:r,activeColor:t})=>!r&&`background-color: ${o.hexToRGB(e.colors[t].main,.1)};\n `}
|
|
@@ -19,7 +19,10 @@ import{jsx as s,jsxs as I,Fragment as W}from"react/jsx-runtime";import g,{forwar
|
|
|
19
19
|
${e==="large"&&R()}
|
|
20
20
|
`}
|
|
21
21
|
background-color: transparent;
|
|
22
|
-
transition:
|
|
22
|
+
transition:
|
|
23
|
+
color 0.3s ease,
|
|
24
|
+
background-color 0.3s ease,
|
|
25
|
+
border 0.3s ease,
|
|
23
26
|
filter 0.3s;
|
|
24
27
|
${({variant:e="solid",color:i="primary",colorShade:l="main",disabled:n,theme:a})=>u`
|
|
25
28
|
${n?V(a,e):C[e](a,i,l)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ButtonLargeTextStyle as c,ButtonRegularTextStyle as e,ButtonSmallTextStyle as a}from"../../typography/ButtonText/index.js";import"react/jsx-runtime";import"styled-components";const n={smaller:a,small:e,regular:e,large:c},d=()=>`
|
|
2
2
|
padding: 0.25rem 0.75rem;
|
|
3
3
|
min-height: 2.5rem;
|
|
4
4
|
`,g=()=>`
|
|
@@ -15,7 +15,10 @@ import{jsx as i,jsxs as v}from"react/jsx-runtime";import t from"styled-component
|
|
|
15
15
|
border-color: ${k};
|
|
16
16
|
border-radius: 1.293rem;
|
|
17
17
|
padding: ${({size:e,isDeletable:l})=>l?"0 0.5rem 0 1rem":A[e]};
|
|
18
|
-
transition:
|
|
18
|
+
transition:
|
|
19
|
+
color 0.3s ease,
|
|
20
|
+
background-color 0.3s ease,
|
|
21
|
+
border 0.3s ease;
|
|
19
22
|
|
|
20
23
|
${e=>!e.isDisabled&&e.isClickable&&` &:hover {
|
|
21
24
|
border-color: ${B(e)};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import a from"react-day-picker";import c from"styled-components";import r from"../../theme.js";import n from"./DayPickerNavBar.js";import{
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import a from"react-day-picker";import c from"styled-components";import r from"../../theme.js";import n from"./DayPickerNavBar.js";import{FIRST_DAY_OF_THE_WEEK as p,WEEKDAYS_SHORT as s,WEEKDAYS_LONG as f,MONTHS as y}from"./localeUtils.js";import d from"./style.js";import"../Icons/Arrow.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const E=c.div`
|
|
2
2
|
${d}
|
|
3
3
|
|
|
4
4
|
font-family: ${({theme:o})=>o.typography.fontAlternativeFamily};
|
|
5
|
-
`,S=o=>({selected:{color:r.colors.text.light,background:r.colors[o].main},today:{color:r.colors[o].main}}),e=({locale:o="sv",color:m="primary",...i})=>t(E,{color:m,children:t(a,{...i,locale:o,months:
|
|
5
|
+
`,S=o=>({selected:{color:r.colors.text.light,background:r.colors[o].main},today:{color:r.colors[o].main}}),e=({locale:o="sv",color:m="primary",...i})=>t(E,{color:m,children:t(a,{...i,locale:o,months:y[o],weekdaysLong:f[o],weekdaysShort:s[o],firstDayOfWeek:p[o],navbarElement:l=>t(n,{...l,locale:o}),captionElement:t("div",{}),modifiersStyles:S(m)})});export{e as DayPicker,e as default};
|
|
@@ -3,12 +3,12 @@ import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
|
|
|
3
3
|
max-width: 700px;
|
|
4
4
|
`,y=i(h)`
|
|
5
5
|
margin: 0.5rem;
|
|
6
|
-
|
|
6
|
+
`,O=i.ul`
|
|
7
7
|
display: flex;
|
|
8
8
|
list-style: none;
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
padding: 0;
|
|
11
|
-
|
|
11
|
+
`,$=i.li`
|
|
12
12
|
background: ${({background:r})=>r};
|
|
13
13
|
display: flex;
|
|
14
14
|
justify-content: center;
|
|
@@ -29,4 +29,4 @@ import{jsxs as s,Fragment as u,jsx as e}from"react/jsx-runtime";import{useState
|
|
|
29
29
|
`,v=i.span`
|
|
30
30
|
font-size: ${({size:r})=>r};
|
|
31
31
|
color: ${({color:r})=>r};
|
|
32
|
-
`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const c=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(c),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return s(u,{children:[s(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e(
|
|
32
|
+
`,z=({background:r=p.colors.background.light,color:l=p.colors.text.dark,icons:m,size:d="2rem"})=>{const[a,n]=x({isOpen:!1,message:"",type:"info",color:"neutral"}),g=async o=>{const c=`import { ${o} } from 'kvdbil-components';`;if(navigator.clipboard)try{await navigator.clipboard.writeText(c),n(t=>({...t,isOpen:!0,message:`copied import for ${o}`,type:"success",color:"success"}))}catch(t){n(f=>({...f,isOpen:!0,message:`Could not copy text: ${t}`,type:"error",color:"error"}))}};return s(u,{children:[s(w,{children:[e(y,{as:"h2",children:"Click to copy import declaration for icon"}),e(O,{children:m.map(([o,c],t)=>s($,{background:r,onClick:()=>{g(o)},children:[e(C,{children:o}),e(v,{size:d,color:l,children:e(c,{})})]},t))})]}),e(k,{message:a.message,isOpen:a.isOpen,type:a.type,color:a.color,onClose:()=>n(o=>({...o,isOpen:!1}))})]})};export{z as default};
|
|
@@ -36,7 +36,9 @@ import{jsx as t,jsxs as e,Fragment as x}from"react/jsx-runtime";import{useEffect
|
|
|
36
36
|
padding: 1rem;
|
|
37
37
|
background-color: white;
|
|
38
38
|
border-radius: 3px;
|
|
39
|
-
box-shadow:
|
|
39
|
+
box-shadow:
|
|
40
|
+
0px 24px 38px rgba(0, 0, 0, 0.1),
|
|
41
|
+
0px 9px 46px rgba(0, 0, 0, 0.09),
|
|
40
42
|
0px 11px 15px rgba(0, 0, 0, 0.15);
|
|
41
43
|
|
|
42
44
|
overflow-y: hidden;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as n,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import m from"../IconButton.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=l`
|
|
2
2
|
.circle {
|
|
3
3
|
&--outer {
|
|
4
4
|
height: 24px;
|
|
@@ -95,4 +95,4 @@ import{jsxs as b,jsx as o}from"react/jsx-runtime";import i,{css as l}from"styled
|
|
|
95
95
|
user-select: none;
|
|
96
96
|
color: ${({theme:e,isDisabled:a})=>a?e.colors.text.disabled:e.colors.text.dark};
|
|
97
97
|
margin-left: 0.5rem;
|
|
98
|
-
`,
|
|
98
|
+
`,b=({name:e=g("radio-button"),size:a="regular",checked:s=!1,isDisabled:c=!1,color:t="secondary",onChange:h,label:d,...p})=>n(z,{children:[n(m,{onClick:h,isActive:s,isDisabled:c,color:t,children:[o(v,{"data-validate":"checked",checked:s,type:"radio",name:e,id:e,disabled:c,"aria-label":e,"aria-checked":s,...p}),o(C,{size:a,color:t,isChecked:s,isDisabled:c,children:o(w,{className:"circle circle--outer",children:o(j,{className:"circle circle--inner"})})})]}),d&&o(B,{as:"label",htmlFor:e,isDisabled:c,children:d})]});export{b as RadioButton,b as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as k,jsx as
|
|
1
|
+
import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"react";import O from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as R}from"../../typography/BodyText/index.js";import{Label as H}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
|
|
2
2
|
font-family: ${({theme:o})=>o.typography.fontBaseFamily};
|
|
3
3
|
position: relative;
|
|
4
4
|
`,D=o=>o&&{paddingLeft:"2.5rem"},W=o=>o&&{border:`1px solid ${e.colors.gray.light1}`,color:e.colors.gray.dark1,fill:e.colors.gray.light1},j=o=>o&&{border:`2px solid ${e.colors.error.dark}`},A=m.div`
|
|
@@ -18,7 +18,7 @@ import{jsxs as k,jsx as a}from"react/jsx-runtime";import{useState as F}from"reac
|
|
|
18
18
|
display: block;
|
|
19
19
|
margin-top: 0.25rem;
|
|
20
20
|
color: ${({hasError:o})=>o?e.colors.error.dark:e.colors.text.disabled};
|
|
21
|
-
`,P=o=>k("svg",{...o,children:[
|
|
21
|
+
`,P=o=>k("svg",{...o,children:[l("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:l("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})}),l("use",{xlinkHref:"#icon-arrow"})]}),V=m(P)`
|
|
22
22
|
width: 0.75rem;
|
|
23
23
|
height: 0.75rem;
|
|
24
24
|
margin: 0;
|
|
@@ -36,4 +36,4 @@ import{jsxs as k,jsx as a}from"react/jsx-runtime";import{useState as F}from"reac
|
|
|
36
36
|
transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
|
|
37
37
|
|
|
38
38
|
transform-origin: 50% 60%;
|
|
39
|
-
`,G=(o,
|
|
39
|
+
`,G=(o,n)=>n?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:n=!1,isDisabled:p})=>l(V,{$isDisabled:p,$isFocused:n,$isMenuOpen:o,$theme:e});function w({className:o,color:n="primary",forwardRef:p,hasError:t=!1,height:s,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},b=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[n].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,t),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&l(H,{htmlFor:g,height:s,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:t,children:i.label}),i.prefix&&l(A,{isDisabled:d,isFocused:c,children:i.prefix}),l(O,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(t),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:y})},background:b({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&l(_,{hasError:t,children:u})]})}export{w as Select,w as default};
|
|
@@ -10,7 +10,9 @@ import{jsxs as d,jsx as r}from"react/jsx-runtime";import o from"styled-component
|
|
|
10
10
|
`}
|
|
11
11
|
|
|
12
12
|
border-width: 1px;
|
|
13
|
-
transition:
|
|
13
|
+
transition:
|
|
14
|
+
all 0.02s ease-in-out !important,
|
|
15
|
+
width transition 0s !important;
|
|
14
16
|
|
|
15
17
|
${({isLoading:i,theme:t})=>!i&&`
|
|
16
18
|
animation: none;
|
|
@@ -5,7 +5,9 @@ import{jsx as s}from"react/jsx-runtime";import n from"styled-components";import{
|
|
|
5
5
|
margin-bottom: -3px;
|
|
6
6
|
padding: 0.875rem 1.375rem;
|
|
7
7
|
border-bottom: ${({theme:e,isActive:o,activeColor:r})=>o?`3px solid ${e.colors[r].main}`:"3px solid transparent"};
|
|
8
|
-
transition:
|
|
8
|
+
transition:
|
|
9
|
+
color 0.3s ease,
|
|
10
|
+
border 0.3s ease;
|
|
9
11
|
|
|
10
12
|
:focus-visible {
|
|
11
13
|
${({theme:e,isActive:o,activeColor:r})=>!o&&`background-color: ${f(e.colors[r].main,.1)};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kvdbil/components",
|
|
3
|
-
"version": "14.3.
|
|
3
|
+
"version": "14.3.16",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,15 +16,18 @@
|
|
|
16
16
|
"dev": "yarn storybook dev -p 6006 watch-css",
|
|
17
17
|
"test": "jest --silent",
|
|
18
18
|
"test:watch": "cross-env DEBUG_PRINT_LIMIT=14000 jest --verbose --watchAll",
|
|
19
|
+
"test:ci": "NODE_ENV=ci yarn test --bail=true",
|
|
19
20
|
"type-check": "tsc",
|
|
20
21
|
"generateIcons": "svgr --icon 1em --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
|
|
21
|
-
"build": "yarn run generateIcons &&
|
|
22
|
+
"build": "yarn run generateIcons && rollup -c && yarn create-declaration",
|
|
22
23
|
"build:rollup": "rollup -c && cp package.json dist/",
|
|
23
24
|
"build:storybook": "storybook build",
|
|
24
|
-
"lint": "eslint --fix
|
|
25
|
+
"lint": "eslint --fix",
|
|
25
26
|
"analyze": "rollup -c rollup.config.analyze.js",
|
|
26
27
|
"create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
|
|
27
|
-
"
|
|
28
|
+
"prepare": "husky",
|
|
29
|
+
"validate-code": "yarn type-check && yarn lint && yarn test && echo '✅ Code is valid!'",
|
|
30
|
+
"publish-package": "./npm-publish.sh"
|
|
28
31
|
},
|
|
29
32
|
"peerDependencies": {
|
|
30
33
|
"react": ">= 17.0.0",
|
|
@@ -42,62 +45,62 @@
|
|
|
42
45
|
"not op_mini all"
|
|
43
46
|
],
|
|
44
47
|
"resolutions": {
|
|
45
|
-
"
|
|
48
|
+
"**/cross-spawn": "^7.0.5"
|
|
46
49
|
},
|
|
47
50
|
"devDependencies": {
|
|
48
51
|
"@babel/core": "^7.11.6",
|
|
52
|
+
"@babel/preset-env": "^7.25.4",
|
|
53
|
+
"@babel/preset-react": "^7.24.7",
|
|
54
|
+
"@babel/preset-typescript": "^7.24.7",
|
|
49
55
|
"@commitlint/cli": "^19.4.0",
|
|
50
56
|
"@commitlint/config-conventional": "^19.2.2",
|
|
57
|
+
"@emotion/is-prop-valid": "^1.3.1",
|
|
51
58
|
"@rollup/plugin-terser": "^0.4.4",
|
|
52
|
-
"@storybook/addon-essentials": "^
|
|
53
|
-
"@storybook/addon-
|
|
54
|
-
"@storybook/addon-
|
|
55
|
-
"@storybook/react": "^
|
|
56
|
-
"@storybook/react-webpack5": "^
|
|
59
|
+
"@storybook/addon-essentials": "^8.3.3",
|
|
60
|
+
"@storybook/addon-themes": "^8.3.3",
|
|
61
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
62
|
+
"@storybook/react": "^8.3.3",
|
|
63
|
+
"@storybook/react-webpack5": "^8.3.3",
|
|
57
64
|
"@svgr/cli": "^8.0.0",
|
|
58
65
|
"@team-griffin/install-self-peers": "^1.1.1",
|
|
59
66
|
"@testing-library/dom": "^10.4.0",
|
|
60
|
-
"@testing-library/jest-dom": "^6.
|
|
61
|
-
"@testing-library/react": "
|
|
67
|
+
"@testing-library/jest-dom": "^6.5.0",
|
|
68
|
+
"@testing-library/react": "^16.0.1",
|
|
62
69
|
"@testing-library/react-hooks": "^8.0.1",
|
|
63
|
-
"@testing-library/user-event": "^14.
|
|
70
|
+
"@testing-library/user-event": "^14.5.2",
|
|
64
71
|
"@types/classnames": "^2.2.11",
|
|
65
72
|
"@types/jest": "^29.5.12",
|
|
66
73
|
"@types/node": "^22.4.1",
|
|
67
|
-
"@types/react": "^
|
|
68
|
-
"@types/react-collapse": "^5.0.
|
|
69
|
-
"@types/react-dom": "^
|
|
70
|
-
"@types/react-transition-group": "^4.4.
|
|
74
|
+
"@types/react": "^18.3.8",
|
|
75
|
+
"@types/react-collapse": "^5.0.4",
|
|
76
|
+
"@types/react-dom": "^18.3.0",
|
|
77
|
+
"@types/react-transition-group": "^4.4.11",
|
|
71
78
|
"@types/uuid": "^10.0.0",
|
|
72
|
-
"@typescript-eslint/eslint-plugin": "^7.0
|
|
73
|
-
"@typescript-eslint/parser": "^7.0
|
|
79
|
+
"@typescript-eslint/eslint-plugin": "^8.7.0",
|
|
80
|
+
"@typescript-eslint/parser": "^8.7.0",
|
|
74
81
|
"babel-plugin-dynamic-import-node": "^2.3.3",
|
|
75
82
|
"babel-plugin-styled-components": "^2.1.4",
|
|
76
83
|
"cross-env": "^7.0.3",
|
|
77
|
-
"esbuild": "^0.
|
|
78
|
-
"eslint": "^
|
|
79
|
-
"eslint-config-prettier": "^
|
|
80
|
-
"eslint-
|
|
81
|
-
"eslint-plugin-
|
|
82
|
-
"eslint-plugin-
|
|
83
|
-
"
|
|
84
|
-
"eslint-plugin-mdx": "^1.15.0",
|
|
85
|
-
"eslint-plugin-prettier": "^4.0.0",
|
|
86
|
-
"eslint-plugin-react": "^7.25.1",
|
|
87
|
-
"eslint-plugin-react-hooks": "^4.2.0",
|
|
84
|
+
"esbuild": "^0.24.0",
|
|
85
|
+
"eslint": "^9.11.1",
|
|
86
|
+
"eslint-config-prettier": "^9.1.0",
|
|
87
|
+
"eslint-plugin-mdx": "^3.1.5",
|
|
88
|
+
"eslint-plugin-react": "^7.36.1",
|
|
89
|
+
"eslint-plugin-react-hooks": "^5.0.0",
|
|
90
|
+
"globals": "^15.9.0",
|
|
88
91
|
"husky": "^9.1.5",
|
|
89
92
|
"jest": "^29.7.0",
|
|
90
93
|
"jest-environment-jsdom": "^29.7.0",
|
|
91
|
-
"jest-styled-components": "^7.0
|
|
94
|
+
"jest-styled-components": "^7.2.0",
|
|
92
95
|
"jest-watch-typeahead": "^2.2.2",
|
|
93
|
-
"prettier": "^
|
|
94
|
-
"react": "^
|
|
96
|
+
"prettier": "^3.3.3",
|
|
97
|
+
"react": "^18.3.1",
|
|
95
98
|
"react-collapse": "^5.0.1",
|
|
96
99
|
"react-day-picker": "^7.4.8",
|
|
97
100
|
"react-docgen-typescript": "^2.2.2",
|
|
98
|
-
"react-dom": "^
|
|
101
|
+
"react-dom": "^18.3.1",
|
|
99
102
|
"react-is": "^18.3.1",
|
|
100
|
-
"react-select": "5.8.0",
|
|
103
|
+
"react-select": "^5.8.0",
|
|
101
104
|
"react-select-event": "5.5.1",
|
|
102
105
|
"react-transition-group": "^4.0.0",
|
|
103
106
|
"rollup": "^4.21.2",
|
|
@@ -105,11 +108,11 @@
|
|
|
105
108
|
"rollup-plugin-multi-input": "^1.5.0",
|
|
106
109
|
"rollup-plugin-visualizer": "^5.5.2",
|
|
107
110
|
"standard-version": "^9.3.1",
|
|
108
|
-
"storybook": "^
|
|
111
|
+
"storybook": "^8.3.2",
|
|
109
112
|
"styled-components": "^6.1.13",
|
|
110
113
|
"ts-jest": "^29.2.4",
|
|
111
114
|
"tslib": "^2.6.3",
|
|
112
|
-
"typescript": "
|
|
115
|
+
"typescript": "5.5.4"
|
|
113
116
|
},
|
|
114
117
|
"description": "KVDBil components library",
|
|
115
118
|
"repository": {
|
package/package.json.tmp
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kvdbil/components",
|
|
3
|
+
"version": "14.3.16",
|
|
4
|
+
"sideEffects": false,
|
|
5
|
+
"main": "cjs/index.js",
|
|
6
|
+
"module": "esm/index.js",
|
|
7
|
+
"types": "types/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./esm/index.js",
|
|
11
|
+
"require": "./cjs/index.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"scripts": {
|
|
15
|
+
"start": "yarn dev",
|
|
16
|
+
"dev": "yarn storybook dev -p 6006 watch-css",
|
|
17
|
+
"test": "jest --silent",
|
|
18
|
+
"test:watch": "cross-env DEBUG_PRINT_LIMIT=14000 jest --verbose --watchAll",
|
|
19
|
+
"test:ci": "NODE_ENV=ci yarn test --bail=true",
|
|
20
|
+
"type-check": "tsc",
|
|
21
|
+
"generateIcons": "svgr --icon 1em --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
|
|
22
|
+
"build": "yarn run generateIcons && rollup -c && yarn create-declaration",
|
|
23
|
+
"build:rollup": "rollup -c && cp package.json dist/",
|
|
24
|
+
"build:storybook": "storybook build",
|
|
25
|
+
"lint": "eslint --fix",
|
|
26
|
+
"analyze": "rollup -c rollup.config.analyze.js",
|
|
27
|
+
"create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
|
|
28
|
+
"validate-code": "yarn type-check && yarn lint && yarn test && echo '✅ Code is valid!'",
|
|
29
|
+
"publish-package": "./npm-publish.sh"
|
|
30
|
+
},
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"react": ">= 17.0.0",
|
|
33
|
+
"react-collapse": ">= 5.0.1",
|
|
34
|
+
"react-day-picker": ">= 7.4.8",
|
|
35
|
+
"react-dom": ">= 17.0.0",
|
|
36
|
+
"react-select": ">= 5.8.0",
|
|
37
|
+
"react-transition-group": ">= 4.0.0",
|
|
38
|
+
"styled-components": ">= 5.1.17"
|
|
39
|
+
},
|
|
40
|
+
"browserslist": [
|
|
41
|
+
">0.2%",
|
|
42
|
+
"not dead",
|
|
43
|
+
"not ie <= 11",
|
|
44
|
+
"not op_mini all"
|
|
45
|
+
],
|
|
46
|
+
"resolutions": {
|
|
47
|
+
"**/cross-spawn": "^7.0.5"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@babel/core": "^7.11.6",
|
|
51
|
+
"@babel/preset-env": "^7.25.4",
|
|
52
|
+
"@babel/preset-react": "^7.24.7",
|
|
53
|
+
"@babel/preset-typescript": "^7.24.7",
|
|
54
|
+
"@commitlint/cli": "^19.4.0",
|
|
55
|
+
"@commitlint/config-conventional": "^19.2.2",
|
|
56
|
+
"@emotion/is-prop-valid": "^1.3.1",
|
|
57
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
58
|
+
"@storybook/addon-essentials": "^8.3.3",
|
|
59
|
+
"@storybook/addon-themes": "^8.3.3",
|
|
60
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
61
|
+
"@storybook/react": "^8.3.3",
|
|
62
|
+
"@storybook/react-webpack5": "^8.3.3",
|
|
63
|
+
"@svgr/cli": "^8.0.0",
|
|
64
|
+
"@team-griffin/install-self-peers": "^1.1.1",
|
|
65
|
+
"@testing-library/dom": "^10.4.0",
|
|
66
|
+
"@testing-library/jest-dom": "^6.5.0",
|
|
67
|
+
"@testing-library/react": "^16.0.1",
|
|
68
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
69
|
+
"@testing-library/user-event": "^14.5.2",
|
|
70
|
+
"@types/classnames": "^2.2.11",
|
|
71
|
+
"@types/jest": "^29.5.12",
|
|
72
|
+
"@types/node": "^22.4.1",
|
|
73
|
+
"@types/react": "^18.3.8",
|
|
74
|
+
"@types/react-collapse": "^5.0.4",
|
|
75
|
+
"@types/react-dom": "^18.3.0",
|
|
76
|
+
"@types/react-transition-group": "^4.4.11",
|
|
77
|
+
"@types/uuid": "^10.0.0",
|
|
78
|
+
"@typescript-eslint/eslint-plugin": "^8.7.0",
|
|
79
|
+
"@typescript-eslint/parser": "^8.7.0",
|
|
80
|
+
"babel-plugin-dynamic-import-node": "^2.3.3",
|
|
81
|
+
"babel-plugin-styled-components": "^2.1.4",
|
|
82
|
+
"cross-env": "^7.0.3",
|
|
83
|
+
"esbuild": "^0.24.0",
|
|
84
|
+
"eslint": "^9.11.1",
|
|
85
|
+
"eslint-config-prettier": "^9.1.0",
|
|
86
|
+
"eslint-plugin-mdx": "^3.1.5",
|
|
87
|
+
"eslint-plugin-react": "^7.36.1",
|
|
88
|
+
"eslint-plugin-react-hooks": "^5.0.0",
|
|
89
|
+
"globals": "^15.9.0",
|
|
90
|
+
"husky": "^9.1.5",
|
|
91
|
+
"jest": "^29.7.0",
|
|
92
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
93
|
+
"jest-styled-components": "^7.2.0",
|
|
94
|
+
"jest-watch-typeahead": "^2.2.2",
|
|
95
|
+
"prettier": "^3.3.3",
|
|
96
|
+
"react": "^18.3.1",
|
|
97
|
+
"react-collapse": "^5.0.1",
|
|
98
|
+
"react-day-picker": "^7.4.8",
|
|
99
|
+
"react-docgen-typescript": "^2.2.2",
|
|
100
|
+
"react-dom": "^18.3.1",
|
|
101
|
+
"react-is": "^18.3.1",
|
|
102
|
+
"react-select": "^5.8.0",
|
|
103
|
+
"react-select-event": "5.5.1",
|
|
104
|
+
"react-transition-group": "^4.0.0",
|
|
105
|
+
"rollup": "^4.21.2",
|
|
106
|
+
"rollup-plugin-esbuild": "^6.1.1",
|
|
107
|
+
"rollup-plugin-multi-input": "^1.5.0",
|
|
108
|
+
"rollup-plugin-visualizer": "^5.5.2",
|
|
109
|
+
"standard-version": "^9.3.1",
|
|
110
|
+
"storybook": "^8.3.2",
|
|
111
|
+
"styled-components": "^6.1.13",
|
|
112
|
+
"ts-jest": "^29.2.4",
|
|
113
|
+
"tslib": "^2.6.3",
|
|
114
|
+
"typescript": "5.5.4"
|
|
115
|
+
},
|
|
116
|
+
"description": "KVDBil components library",
|
|
117
|
+
"repository": {
|
|
118
|
+
"type": "git",
|
|
119
|
+
"url": "git+ssh://git@bitbucket.org/kvarndammen/kvdbil-components.git"
|
|
120
|
+
},
|
|
121
|
+
"author": "",
|
|
122
|
+
"license": "ISC",
|
|
123
|
+
"homepage": "https://bitbucket.org/kvarndammen/kvdbil-components#readme"
|
|
124
|
+
}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
|
|
3
|
-
isOpen: boolean;
|
|
4
|
-
}>> & string;
|
|
5
|
-
interface Item {
|
|
1
|
+
interface IItem {
|
|
6
2
|
title: string;
|
|
7
3
|
text: string;
|
|
8
4
|
}
|
|
9
5
|
export interface AccordionProps {
|
|
10
|
-
items:
|
|
6
|
+
items: IItem[];
|
|
11
7
|
}
|
|
12
8
|
export declare const Accordion: ({ items, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
9
|
export default Accordion;
|