@kvdbil/components 17.3.2 → 17.4.0

package/cjs/components/Flex/index.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),s=require("../../shared/media-queries.js");var i,t=(i=r)&&i.__esModule?i:{default:i};const a="center",n=(e,r)=>"gap"!==r&&"row-gap"!==r||"number"!=typeof e?e:`${e}rem`,o=t.default.div((({$direction:e,$justify:i,$align:t,$gap:a,$rowGap:o,$wrap:$,$basis:p,$grow:u,$shrink:c})=>r.css`
+"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`
   display: flex;
 
-  ${e&&["column","column-reverse"].includes(String(e))&&r.css`
+  ${e&&["column","column-reverse"].includes(String(e))&&!c&&r.css`
     & > * {
       width: 100%;
     }
   `}
 
-  ${[[e,"flex-direction"],[i,"justify-content"],[t,"align-items"],[a,"gap"],[o,"row-gap"],[o,"row-gap"],[$,"flex-wrap"],[p,"flex-basis"],[u,"flex-grow"],[c,"flex-shrink"]].map((([e,i])=>{if("string"==typeof e||"number"==typeof e)return r.css`
-        ${i}: ${n(e,i)};
-      `;if("object"==typeof e){const t=[],{initial:a,...o}=e;return a&&t.push(r.css`
-          ${i}: ${n(a,i)};
-        `),Object.entries(o).forEach((([e,a])=>{t.push(r.css`
-          ${s.mq(e)} {
-            ${i}: ${n(a,i)};
+  ${[[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`
+        ${s}: ${a(e,s)};
+      `;if("object"==typeof e){const n=[],{initial:t,...o}=e;return t&&n.push(r.css`
+          ${s}: ${a(t,s)};
+        `),Object.entries(o).forEach((([e,t])=>{n.push(r.css`
+          ${i.mq(e)} {
+            ${s}: ${a(t,s)};
           }
-        `)})),t}return""}))}
-`));exports.default=({direction:r,justify:s,align:i,gap:t,rowGap:n,wrap:$,basis:p,grow:u,shrink:c,...l})=>e.jsx(o,{$direction:r??"row",$justify:s??a,$align:i??a,$gap:t??"1rem",$rowGap:n,$wrap:$,$basis:p,$grow:u,$shrink:c,...l});
+        `)})),n}return""}))}
+`));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});

package/cjs/components/Stepper/index.js

@@ -50,4 +50,4 @@
   line-height: 1;
 `,p=s.default(o.default)`
   font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
-`;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}`)}))})};
+`;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}`)}))})};

package/esm/components/Flex/index.js

@@ -1,19 +1,19 @@
-import{jsx as x}from"react/jsx-runtime";import b,{css as a}from"styled-components";import{mq as h}from"../../shared/media-queries.js";const j="row",k="1rem",c="center",w=(r,o)=>(o==="gap"||o==="row-gap")&&typeof r=="number"?`${r}rem`:r,v=({$direction:r,$justify:o,$align:n,$gap:t,$rowGap:s,$wrap:$,$basis:p,$grow:f,$shrink:g})=>a`
+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`
   display: flex;
 
-  ${r&&["column","column-reverse"].includes(String(r))&&a`
+  ${r&&["column","column-reverse"].includes(String(r))&&!g&&o`
     & > * {
       width: 100%;
     }
   `}
 
-  ${[[r,"flex-direction"],[o,"justify-content"],[n,"align-items"],[t,"gap"],[s,"row-gap"],[s,"row-gap"],[$,"flex-wrap"],[p,"flex-basis"],[f,"flex-grow"],[g,"flex-shrink"]].map(([i,e])=>{if(typeof i=="string"||typeof i=="number")return a`
-        ${e}: ${w(i,e)};
-      `;if(typeof i=="object"){const l=[],{initial:u,...m}=i;return u&&l.push(a`
-          ${e}: ${w(u,e)};
-        `),Object.entries(m).forEach(([d,y])=>{l.push(a`
-          ${h(d)} {
-            ${e}: ${w(y,e)};
+  ${[[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`
+        ${n}: ${u(i,n)};
+      `;if(typeof i=="object"){const w=[],{initial:c,...d}=i;return c&&w.push(o`
+          ${n}: ${u(c,n)};
+        `),Object.entries(d).forEach(([h,y])=>{w.push(o`
+          ${j(h)} {
+            ${n}: ${u(y,n)};
           }
-        `)}),l}else return""})}
-`,G=b.div(v),q=({direction:r,justify:o,align:n,gap:t,rowGap:s,wrap:$,basis:p,grow:f,shrink:g,...i})=>x(G,{$direction:r??j,$justify:o??c,$align:n??c,$gap:t??k,$rowGap:s,$wrap:$,$basis:p,$grow:f,$shrink:g,...i});export{q as default};
+        `)}),w}else return""})}
+`,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};

package/esm/components/Stepper/index.js

@@ -60,4 +60,4 @@ import{jsx as a,jsxs as x}from"react/jsx-runtime";import t from"styled-component
   line-height: 1;
 `,j=t(H)`
   font-size: ${({size:e})=>`calc(${e/2}rem + 6px)`};
-`,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};
+`,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

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.3.2",
+  "version": "17.4.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -23,7 +23,6 @@
     "build:rollup": "rollup -c && cp package.json dist/",
     "build:storybook": "storybook build",
     "lint": "eslint --fix",
-    "analyze": "rollup -c rollup.config.analyze.mjs",
     "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
     "prepare": "husky",
     "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'",
@@ -110,7 +109,6 @@
     "rollup": "^4.21.2",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-multi-input": "^1.5.0",
-    "rollup-plugin-visualizer": "6.0.3",
     "standard-version": "^9.3.1",
     "storybook": "^8.3.2",
     "styled-components": "^6.1.13",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.3.2",
+  "version": "17.4.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -23,7 +23,6 @@
     "build:rollup": "rollup -c && cp package.json dist/",
     "build:storybook": "storybook build",
     "lint": "eslint --fix",
-    "analyze": "rollup -c rollup.config.analyze.mjs",
     "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
     "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'",
     "publish-package": "./npm-publish.sh"
@@ -109,7 +108,6 @@
     "rollup": "^4.21.2",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-multi-input": "^1.5.0",
-    "rollup-plugin-visualizer": "6.0.3",
     "standard-version": "^9.3.1",
     "storybook": "^8.3.2",
     "styled-components": "^6.1.13",

package/types/components/Flex/index.d.ts

@@ -21,7 +21,8 @@ export interface FlexProps {
     basis?: CSSPropertyWithResponsive<'flexBasis'>;
     grow?: CSSPropertyWithResponsive<'flexGrow'>;
     shrink?: CSSPropertyWithResponsive<'flexShrink'>;
+    inlineChildren?: boolean;
 }
 export type Props = FlexProps & HTMLAttributes<HTMLDivElement>;
-declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, inlineChildren, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Flex;