@kvdbil/components 9.1.2 → 9.1.3

package/cjs/components/Spacer/index.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../shared/media-queries.js");function l(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}const n=l(e).default.div`
+  width: 100%;
+  height: ${r=>{var i;return(i=r.height)!=null?i:1}}rem;
+
+  ${t.mq(null,"tablet")} {
+    ${r=>r.hideOnMobile&&"display: none;"}
+  }
+
+  ${t.mq(null,"laptop")} {
+    ${r=>r.hideOnDesktop&&"display: none;"}
+  }
+`;exports.default=n;

package/cjs/components/Stack/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function o(l){return l&&typeof l=="object"&&"default"in l?l:{default:l}}var i=o(e);const n=l=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[l],s=(l,f)=>t.mqSizesOrder[l]<t.mqSizesOrder[f]?-1:t.mqSizesOrder[l]>t.mqSizesOrder[f]?1:0,c=o(r).default("div")(({ownerState:{direction:l,spacing:f}})=>typeof l=="string"&&typeof f=="number"?{display:"flex",flexDirection:l,"> *:not(:first-child)":{margin:0,[`margin${n(l)}`]:`${f}rem`}}:typeof l=="object"||typeof f=="object"?{...((a,u)=>{var m,y;const j=typeof a=="object"?Object.keys(a).sort(s):Object.keys(u).sort(s);let d={};for(const p of j){const b=typeof a=="object"?(m=a[p])!=null?m:"row":a,g=n(b),q=typeof u=="object"?(y=u[p])!=null?y:1:u,v={[t.mq(p)]:{display:"flex",flexDirection:b,"> *:not(:first-child)":{margin:0,[`margin${g}`]:`${q}rem`}}};d={...d,...v}}return{...d}})(l,f!=null?f:1)}:{display:"flex"});exports.default=({children:l,direction:f,spacing:a=1})=>{const u={direction:f,spacing:a};return i.default.createElement(c,{ownerState:u},l)};

package/cjs/shared/media-queries.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={mobileS:"320px",mobileM:"375px",mobileL:"425px",tablet:"768px",laptop:"1024px",laptopL:"1440px",laptopXL:"1680px",desktop:"2560px"},t={mobileS:o=>`(${o}-width: ${e.mobileS})`,mobileM:o=>`(${o}-width: ${e.mobileM})`,mobileL:o=>`(${o}-width: ${e.mobileL})`,tablet:o=>`(${o}-width: ${e.tablet})`,laptop:o=>`(${o}-width: ${e.laptop})`,laptopL:o=>`(${o}-width: ${e.laptopL})`,desktop:o=>`(${o}-width: ${e.desktop})`,desktopL:o=>`(${o}-width: ${e.desktop})`};exports.mediaQueries=t,exports.mq=(o,p)=>o&&p?`@media (min-width: ${e[o]}) and (max-width: ${e[p]})`:o?`@media (min-width: ${e[o]})`:p?`@media (max-width: ${e[p]})`:(console.error("Invalid use of mq. Available breakpoints are:",e),"@media screen"),exports.mqSizes=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={mobileS:"320px",mobileM:"375px",mobileL:"425px",tablet:"768px",laptop:"1024px",laptopL:"1440px",laptopXL:"1680px",desktop:"2560px"},t={mobileS:p=>`(${p}-width: ${e.mobileS})`,mobileM:p=>`(${p}-width: ${e.mobileM})`,mobileL:p=>`(${p}-width: ${e.mobileL})`,tablet:p=>`(${p}-width: ${e.tablet})`,laptop:p=>`(${p}-width: ${e.laptop})`,laptopL:p=>`(${p}-width: ${e.laptopL})`,desktop:p=>`(${p}-width: ${e.desktop})`,desktopL:p=>`(${p}-width: ${e.desktop})`};exports.mediaQueries=t,exports.mq=(p,i)=>p&&i?`@media (min-width: ${e[p]}) and (max-width: ${e[i]})`:p?`@media (min-width: ${e[p]})`:i?`@media (max-width: ${e[i]})`:(console.error("Invalid use of mq. Available breakpoints are:",e),"@media screen"),exports.mqSizes=e,exports.mqSizesOrder={mobileS:1,mobileM:2,mobileL:3,tablet:4,laptop:5,laptopL:6,laptopXL:7,desktop:8};

package/esm/components/Spacer/index.js

@@ -0,0 +1,12 @@
+import i from"styled-components";import{mq as l}from"../../shared/media-queries.js";const n=i.div`
+  width: 100%;
+  height: ${e=>{var t;return(t=e.height)!=null?t:1}}rem;
+
+  ${l(null,"tablet")} {
+    ${e=>e.hideOnMobile&&"display: none;"}
+  }
+
+  ${l(null,"laptop")} {
+    ${e=>e.hideOnDesktop&&"display: none;"}
+  }
+`;export{n as default};

package/esm/components/Stack/index.js

@@ -0,0 +1 @@
+import p from"react";import b from"styled-components";import{mq as k,mqSizesOrder as n}from"../../shared/media-queries.js";const f=t=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[t],a=(t,e)=>n[t]<n[e]?-1:n[t]>n[e]?1:0,j=(t,e)=>{var o,r;const m=typeof t=="object"?Object.keys(t).sort(a):Object.keys(e).sort(a);let s={};for(const l of m){const c=typeof t=="object"?(o=t[l])!=null?o:"row":t,u=f(c),y=typeof e=="object"?(r=e[l])!=null?r:1:e,i={[k(l)]:{display:"flex",flexDirection:c,"> *:not(:first-child)":{margin:0,[`margin${u}`]:`${y}rem`}}};s={...s,...i}}return{...s}},d=({ownerState:{direction:t,spacing:e}})=>typeof t=="string"&&typeof e=="number"?{display:"flex",flexDirection:t,"> *:not(:first-child)":{margin:0,[`margin${f(t)}`]:`${e}rem`}}:typeof t=="object"||typeof e=="object"?{...j(t,e!=null?e:1)}:{display:"flex"},S=b("div")(d),w=({children:t,direction:e,spacing:o=1})=>{const r={direction:e,spacing:o};return p.createElement(S,{ownerState:r},t)};export{w as default};

package/esm/shared/media-queries.js

@@ -1 +1 @@
-const i={mobileS:"320px",mobileM:"375px",mobileL:"425px",tablet:"768px",laptop:"1024px",laptopL:"1440px",laptopXL:"1680px",desktop:"2560px"},p={mobileS:e=>`(${e}-width: ${i.mobileS})`,mobileM:e=>`(${e}-width: ${i.mobileM})`,mobileL:e=>`(${e}-width: ${i.mobileL})`,tablet:e=>`(${e}-width: ${i.tablet})`,laptop:e=>`(${e}-width: ${i.laptop})`,laptopL:e=>`(${e}-width: ${i.laptopL})`,desktop:e=>`(${e}-width: ${i.desktop})`,desktopL:e=>`(${e}-width: ${i.desktop})`},d=(e,t)=>e&&t?`@media (min-width: ${i[e]}) and (max-width: ${i[t]})`:e?`@media (min-width: ${i[e]})`:t?`@media (max-width: ${i[t]})`:(console.error("Invalid use of mq. Available breakpoints are:",i),"@media screen");export{p as mediaQueries,d as mq,i as mqSizes};
+const t={mobileS:"320px",mobileM:"375px",mobileL:"425px",tablet:"768px",laptop:"1024px",laptopL:"1440px",laptopXL:"1680px",desktop:"2560px"},p={mobileS:1,mobileM:2,mobileL:3,tablet:4,laptop:5,laptopL:6,laptopXL:7,desktop:8},o={mobileS:e=>`(${e}-width: ${t.mobileS})`,mobileM:e=>`(${e}-width: ${t.mobileM})`,mobileL:e=>`(${e}-width: ${t.mobileL})`,tablet:e=>`(${e}-width: ${t.tablet})`,laptop:e=>`(${e}-width: ${t.laptop})`,laptopL:e=>`(${e}-width: ${t.laptopL})`,desktop:e=>`(${e}-width: ${t.desktop})`,desktopL:e=>`(${e}-width: ${t.desktop})`},l=(e,i)=>e&&i?`@media (min-width: ${t[e]}) and (max-width: ${t[i]})`:e?`@media (min-width: ${t[e]})`:i?`@media (max-width: ${t[i]})`:(console.error("Invalid use of mq. Available breakpoints are:",t),"@media screen");export{o as mediaQueries,l as mq,t as mqSizes,p as mqSizesOrder};

package/package.json

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

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

@@ -0,0 +1,7 @@
+export interface SpacerProps {
+    height?: number;
+    hideOnMobile?: boolean;
+    hideOnDesktop?: boolean;
+}
+declare const Spacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SpacerProps, never>;
+export default Spacer;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+declare type ResponsiveDirection = {
+    mobileS?: FlexDirection;
+    mobileM?: FlexDirection;
+    mobileL?: FlexDirection;
+    tablet?: FlexDirection;
+    laptop?: FlexDirection;
+    laptopL?: FlexDirection;
+    laptopXL?: FlexDirection;
+    desktop?: FlexDirection;
+};
+declare type ResponsiveSpacing = {
+    mobileS?: number;
+    mobileM?: number;
+    mobileL?: number;
+    tablet?: number;
+    laptop?: number;
+    laptopL?: number;
+    laptopXL?: number;
+    desktop?: number;
+};
+interface OwnerState {
+    direction: ResponsiveDirection | FlexDirection;
+    spacing?: ResponsiveSpacing | number;
+}
+export interface StackProps extends OwnerState {
+    children: React.ReactNode;
+}
+declare const Stack: ({ children, direction, spacing }: StackProps) => JSX.Element;
+export default Stack;

package/types/shared/media-queries.d.ts

@@ -9,6 +9,9 @@ interface MqSizes {
     desktop: '2560px';
 }
 declare const mqSizes: MqSizes;
+declare const mqSizesOrder: {
+    [key: string]: number;
+};
 export declare type SCREEN_SIZE = keyof typeof mqSizes;
 declare const mediaQueries: {
     mobileS: (limit: string) => string;
@@ -21,4 +24,4 @@ declare const mediaQueries: {
     desktopL: (limit: string) => string;
 };
 declare const mq: (from: SCREEN_SIZE | null, to?: keyof MqSizes | undefined) => string;
-export { mq, mqSizes, mediaQueries };
+export { mq, mqSizes, mqSizesOrder, mediaQueries };