@kvdbil/components 13.4.0 → 13.5.0

package/cjs/components/Flex/index.js

@@ -1,17 +1,21 @@
-"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(l){return l&&typeof l=="object"&&"default"in l?l:{default:l}}var s=i(e);const n=(l,o)=>o!=="gap"&&o!=="row-gap"||typeof l!="number"?l:`${l}rem`,a=i(r).default.div(({$direction:l,$justify:o,$align:p,$gap:$,$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m})=>r.css`
   display: flex;
-  width: 100%;
-  height: 100%;
 
-  ${r.mq(null,"tablet")} {
+  ${l&&["column","column-reverse"].includes(String(l))&&r.css`
+      & > * {
+        width: 100%;
+      }
+    `}
+
+  ${t.mq(null,"tablet")} {
     flex-direction: column;
   }
 
-  ${[[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)};
+  ${[[l,"flex-direction"],[o,"justify-content"],[p,"align-items"],[$,"gap"],[c,"row-gap"],[c,"row-gap"],[d,"flex-wrap"],[g,"flex-basis"],[w,"flex-grow"],[m,"flex-shrink"]].map(([u,f])=>typeof u=="string"||typeof u=="number"?r.css`
+        ${f}: ${n(u,f)};
+      `:typeof u=="object"?Object.entries(u).map(([y,b])=>r.css`
+          ${t.mq(y)} {
+            ${f}: ${n(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:l,justify:o,align:p,gap:$,rowGap:c,wrap:d,basis:g,grow:w,shrink:m,...u})=>s.default.createElement(a,{$direction:l!=null?l:"row",$justify:o!=null?o:"center",$align:p!=null?p:"center",$gap:$!=null?$:"1rem",$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m,...u});

package/esm/components/Flex/index.js

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