@kvdbil/components 13.4.0 → 13.5.1

package/cjs/components/Flex/index.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var n=i(e);const a=(o,u)=>u!=="gap"&&u!=="row-gap"||typeof o!="number"?o:`${o}rem`,l=i(t).default.div(({$direction:o,$justify:u,$align:c,$gap:p,$rowGap:d})=>t.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var s=i(e);const a=(o,l)=>l!=="gap"&&l!=="row-gap"||typeof o!="number"?o:`${o}rem`,n=i(r).default.div(({$direction:o,$justify:l,$align:u,$gap:$,$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m})=>r.css`
   display: flex;
-  width: 100%;
-  height: 100%;
 
-  ${r.mq(null,"tablet")} {
-    flex-direction: column;
-  }
+  ${o&&["column","column-reverse"].includes(String(o))&&r.css`
+      & > * {
+        width: 100%;
+      }
+    `}
 
-  ${[[o,"flex-direction"],[u,"justify-content"],[c,"align-items"],[p,"gap"],[d,"row-gap"]].map(([s,f])=>typeof s=="string"||typeof s=="number"?t.css`
-        ${f}: ${a(s,f)};
-      `:typeof s=="object"?Object.entries(s).map(([$,g])=>t.css`
-          ${r.mq($)} {
-            ${f}: ${a(g,f)};
+  ${[[o,"flex-direction"],[l,"justify-content"],[u,"align-items"],[$,"gap"],[c,"row-gap"],[c,"row-gap"],[d,"flex-wrap"],[g,"flex-basis"],[w,"flex-grow"],[m,"flex-shrink"]].map(([p,f])=>typeof p=="string"||typeof p=="number"?r.css`
+        ${f}: ${a(p,f)};
+      `:typeof p=="object"?Object.entries(p).map(([y,b])=>r.css`
+          ${t.mq(y)} {
+            ${f}: ${a(b,f)};
           }
         `):"")}
-`);exports.default=({direction:o,justify:u,align:c,gap:p,rowGap:d,...s})=>n.default.createElement(l,{$direction:o!=null?o:"row",$justify:u!=null?u:"center",$align:c!=null?c:"center",$gap:p!=null?p:"1rem",$rowGap:d,...s});
+`);exports.default=({direction:o,justify:l,align:u,gap:$,rowGap:c,wrap:d,basis:g,grow:w,shrink:m,...p})=>s.default.createElement(n,{$direction:o!=null?o:"row",$justify:l!=null?l:"center",$align:u!=null?u:"center",$gap:$!=null?$:"1rem",$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m,...p});

package/esm/components/Flex/index.js

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

package/esm/components/Stack/index.js

@@ -1 +1 @@
-import a from"react";import u from"../Flex/index.js";import"styled-components";import"../../shared/media-queries.js";const n="flex-start",d=({...l})=>{var t,e,i;return a.createElement(u,{direction:(t=l==null?void 0:l.direction)!=null?t:"column",justify:(e=l==null?void 0:l.justify)!=null?e:n,align:(i=l==null?void 0:l.align)!=null?i:n,gap:l==null?void 0:l.spacing,...l})};export{d as default};
+import n from"react";import a from"../Flex/index.js";import"styled-components";import"../../shared/media-queries.js";const u=({...l})=>{var t,e,i;return n.createElement(a,{direction:(t=l==null?void 0:l.direction)!=null?t:"column",justify:(e=l==null?void 0:l.justify)!=null?e:"flex-start",align:(i=l==null?void 0:l.align)!=null?i:"flex-start",gap:l==null?void 0:l.spacing,...l})};export{u as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "13.4.0",
+  "version": "13.5.1",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

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

@@ -17,7 +17,11 @@ export interface FlexProps {
     align?: CSSPropertyWithResponsive<'alignItems'>;
     gap?: CSSPropertyWithResponsive<'gap'>;
     rowGap?: CSSPropertyWithResponsive<'rowGap'>;
+    wrap?: CSSPropertyWithResponsive<'flexWrap'>;
+    basis?: CSSPropertyWithResponsive<'flexBasis'>;
+    grow?: CSSPropertyWithResponsive<'flexGrow'>;
+    shrink?: CSSPropertyWithResponsive<'flexShrink'>;
 }
 export declare type Props = FlexProps & HTMLAttributes<HTMLDivElement>;
-declare const Flex: ({ direction, justify, align, gap, rowGap, ...props }: Props) => JSX.Element;
+declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, ...props }: Props) => JSX.Element;
 export default Flex;