@kvdbil/components 17.3.3 → 17.4.0
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,19 +1,19 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../shared/media-queries.js");var s,n=(s=r)&&s.__esModule?s:{default:s};const t="center",a=(e,r)=>"gap"!==r&&"row-gap"!==r||"number"!=typeof e?e:`${e}rem`,o=n.default.div((({$direction:e,$justify:s,$align:n,$gap:t,$rowGap:o,$wrap:$,$basis:l,$grow:p,$shrink:u,$inlineChildren:c})=>r.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
|
|
4
|
-
${e&&["column","column-reverse"].includes(String(e))&&r.css`
|
|
4
|
+
${e&&["column","column-reverse"].includes(String(e))&&!c&&r.css`
|
|
5
5
|
& > * {
|
|
6
6
|
width: 100%;
|
|
7
7
|
}
|
|
8
8
|
`}
|
|
9
9
|
|
|
10
|
-
${[[e,"flex-direction"],[
|
|
11
|
-
${
|
|
12
|
-
`;if("object"==typeof e){const
|
|
13
|
-
${
|
|
14
|
-
`),Object.entries(o).forEach((([e,
|
|
15
|
-
${
|
|
16
|
-
${
|
|
10
|
+
${[[e,"flex-direction"],[s,"justify-content"],[n,"align-items"],[t,"gap"],[o,"row-gap"],[o,"row-gap"],[$,"flex-wrap"],[l,"flex-basis"],[p,"flex-grow"],[u,"flex-shrink"]].map((([e,s])=>{if("string"==typeof e||"number"==typeof e)return r.css`
|
|
11
|
+
${s}: ${a(e,s)};
|
|
12
|
+
`;if("object"==typeof e){const n=[],{initial:t,...o}=e;return t&&n.push(r.css`
|
|
13
|
+
${s}: ${a(t,s)};
|
|
14
|
+
`),Object.entries(o).forEach((([e,t])=>{n.push(r.css`
|
|
15
|
+
${i.mq(e)} {
|
|
16
|
+
${s}: ${a(t,s)};
|
|
17
17
|
}
|
|
18
|
-
`)})),
|
|
19
|
-
`));exports.default=({direction:r,justify:
|
|
18
|
+
`)})),n}return""}))}
|
|
19
|
+
`));exports.default=({direction:r,justify:i,align:s,gap:n,rowGap:a,wrap:$,basis:l,grow:p,shrink:u,inlineChildren:c=!1,...f})=>e.jsx(o,{$direction:r??"row",$justify:i??t,$align:s??t,$gap:n??"1rem",$rowGap:a,$wrap:$,$basis:l,$grow:p,$shrink:u,$inlineChildren:c,...f});
|
|
@@ -50,4 +50,4 @@
|
|
|
50
50
|
line-height: 1;
|
|
51
51
|
`,p=s.default(o.default)`
|
|
52
52
|
font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
|
|
53
|
-
`;exports.Stepper=({children:i,orientation:r="vertical",variant:o="solid",color:l="primary",colorShade:s="mainAlt",size:h=2,activeStep:m,ariaLabels:u={},...z})=>{const x=i.length,g="horizontal"===r,{id:f}=t.useNameAndId("stepper");return e.jsx(a,{isHorizontal:g,...z,role:"list","aria-
|
|
53
|
+
`;exports.Stepper=({children:i,orientation:r="vertical",variant:o="solid",color:l="primary",colorShade:s="mainAlt",size:h=2,activeStep:m,ariaLabels:u={},...z})=>{const x=i.length,g="horizontal"===r,{id:f}=t.useNameAndId("stepper");return e.jsx(a,{isHorizontal:g,...z,role:"list","aria-label":u?.list??"Step progress",children:i.map(((i,r)=>{const t=m&&r<m,a=t||"solid"===o;return e.jsxs(n,{$color:l,$colorShade:s,$size:h,stepsNumber:x,isHorizontal:g,role:"listitem","aria-disabled":t?"true":void 0,"aria-current":m===r?"step":void 0,"aria-label":(void 0===m?`${u?.step??"Step %s"}`:`${u?.stepUpcoming??"Upcoming step, step %s"}`).replaceAll("%s",String(r+1)),children:[e.jsx(c,{children:e.jsx(d,{$color:l,$colorShade:s,isFilled:a,size:h,role:"img",children:t?e.jsx(p,{size:h,"aria-hidden":"true"}):e.jsx($,{as:"span",size:h,"aria-hidden":"true",children:r+1})})}),i]},`${f}-${r}`)}))})};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import{jsx as x}from"react/jsx-runtime";import b,{css as
|
|
1
|
+
import{jsx as x}from"react/jsx-runtime";import b,{css as o}from"styled-components";import{mq as j}from"../../shared/media-queries.js";const k="row",v="1rem",m="center",u=(r,e)=>(e==="gap"||e==="row-gap")&&typeof r=="number"?`${r}rem`:r,C=({$direction:r,$justify:e,$align:a,$gap:t,$rowGap:s,$wrap:$,$basis:p,$grow:l,$shrink:f,$inlineChildren:g})=>o`
|
|
2
2
|
display: flex;
|
|
3
3
|
|
|
4
|
-
${r&&["column","column-reverse"].includes(String(r))&&
|
|
4
|
+
${r&&["column","column-reverse"].includes(String(r))&&!g&&o`
|
|
5
5
|
& > * {
|
|
6
6
|
width: 100%;
|
|
7
7
|
}
|
|
8
8
|
`}
|
|
9
9
|
|
|
10
|
-
${[[r,"flex-direction"],[
|
|
11
|
-
${
|
|
12
|
-
`;if(typeof i=="object"){const
|
|
13
|
-
${
|
|
14
|
-
`),Object.entries(
|
|
15
|
-
${h
|
|
16
|
-
${
|
|
10
|
+
${[[r,"flex-direction"],[e,"justify-content"],[a,"align-items"],[t,"gap"],[s,"row-gap"],[s,"row-gap"],[$,"flex-wrap"],[p,"flex-basis"],[l,"flex-grow"],[f,"flex-shrink"]].map(([i,n])=>{if(typeof i=="string"||typeof i=="number")return o`
|
|
11
|
+
${n}: ${u(i,n)};
|
|
12
|
+
`;if(typeof i=="object"){const w=[],{initial:c,...d}=i;return c&&w.push(o`
|
|
13
|
+
${n}: ${u(c,n)};
|
|
14
|
+
`),Object.entries(d).forEach(([h,y])=>{w.push(o`
|
|
15
|
+
${j(h)} {
|
|
16
|
+
${n}: ${u(y,n)};
|
|
17
17
|
}
|
|
18
|
-
`)}),
|
|
19
|
-
`,G=b.div(
|
|
18
|
+
`)}),w}else return""})}
|
|
19
|
+
`,G=b.div(C),q=({direction:r,justify:e,align:a,gap:t,rowGap:s,wrap:$,basis:p,grow:l,shrink:f,inlineChildren:g=!1,...i})=>x(G,{$direction:r??k,$justify:e??m,$align:a??m,$gap:t??v,$rowGap:s,$wrap:$,$basis:p,$grow:l,$shrink:f,$inlineChildren:g,...i});export{q as default};
|
|
@@ -60,4 +60,4 @@ import{jsx as a,jsxs as x}from"react/jsx-runtime";import t from"styled-component
|
|
|
60
60
|
line-height: 1;
|
|
61
61
|
`,j=t(H)`
|
|
62
62
|
font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
|
|
63
|
-
`,A=({children:e,orientation:i="vertical",variant:o="solid",color:c="primary",colorShade:p="mainAlt",size:n=2,activeStep:l,ariaLabels:s={},...m})=>{const h=e.length,d=i==="horizontal",{id:z}=b("stepper");return a(S,{isHorizontal:d,...m,role:"list","aria-
|
|
63
|
+
`,A=({children:e,orientation:i="vertical",variant:o="solid",color:c="primary",colorShade:p="mainAlt",size:n=2,activeStep:l,ariaLabels:s={},...m})=>{const h=e.length,d=i==="horizontal",{id:z}=b("stepper");return a(S,{isHorizontal:d,...m,role:"list","aria-label":s?.list??"Step progress",children:e.map((u,r)=>{const $=l&&r<l,g=$||o==="solid";return x(v,{$color:c,$colorShade:p,$size:n,stepsNumber:h,isHorizontal:d,role:"listitem","aria-disabled":$?"true":void 0,"aria-current":l===r?"step":void 0,"aria-label":(l===void 0?`${s?.step??"Step %s"}`:(l===r&&`${s?.stepCurrent??"Current step, step %s"}`,$&&`${s?.stepDone??"Completed step, step %s"}`,`${s?.stepUpcoming??"Upcoming step, step %s"}`)).replaceAll("%s",String(r+1)),children:[a(w,{children:a(y,{$color:c,$colorShade:p,isFilled:g,size:n,role:"img",children:$?a(j,{size:n,"aria-hidden":"true"}):a(k,{as:"span",size:n,"aria-hidden":"true",children:r+1})})}),u]},`${z}-${r}`)})})};export{A as Stepper};
|
package/package.json
CHANGED
package/package.json.tmp
CHANGED
|
@@ -21,7 +21,8 @@ export interface FlexProps {
|
|
|
21
21
|
basis?: CSSPropertyWithResponsive<'flexBasis'>;
|
|
22
22
|
grow?: CSSPropertyWithResponsive<'flexGrow'>;
|
|
23
23
|
shrink?: CSSPropertyWithResponsive<'flexShrink'>;
|
|
24
|
+
inlineChildren?: boolean;
|
|
24
25
|
}
|
|
25
26
|
export type Props = FlexProps & HTMLAttributes<HTMLDivElement>;
|
|
26
|
-
declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, inlineChildren, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
export default Flex;
|