@kvdbil/components 9.1.0 → 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/Spinner/index.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function l(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var o=l(e),a=l(r);const s=u=>{const n={smaller:1,small:2,regular:3,large:4};return typeof u=="number"?u:n[u]||n.regular},i=r.keyframes`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function l(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var a=l(e),o=l(r);const i=n=>{const u={smaller:1,small:2,regular:3,large:4};return typeof n=="number"?n:u[n]||u.regular},s=r.keyframes`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,d=a.default.div`
+`,d=o.default.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({theme:u,color:n,size:m})=>{var f,c,b;return`${s(m)/10}em solid ${(b=(c=(f=u.colors)==null?void 0:f[n])==null?void 0:c.main)!=null?b:n}`}};
-  border-bottom: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  border-right: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  border-left: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  width: ${({size:u})=>s(u)}em;
-  height: ${({size:u})=>s(u)}em;
-  animation: ${i} ${({speed:u})=>(n=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[n]||m.default})(u)} infinite linear;
+  border-top: ${({theme:n,color:u,size:m})=>{var f,c,b;return`${i(m)/10}em solid ${(b=(c=(f=n.colors)==null?void 0:f[u])==null?void 0:c.main)!=null?b:u}`}};
+  border-bottom: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-right: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-left: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  width: ${({size:n})=>i(n)}em;
+  height: ${({size:n})=>i(n)}em;
+  animation: ${s} ${({speed:n})=>(u=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[u]||m.default})(n)} infinite linear;
   will-change: transform;
-`;exports.default=({size:u="regular",color:n="primary",speed:m="default",...f})=>o.default.createElement(d,{...f,role:"status","aria-live":"polite","aria-busy":"true",size:u,speed:m,color:n,theme:t.default});
+`;exports.default=({size:n="regular",color:u="primary",speed:m="default",...f})=>a.default.createElement(d,{"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",...f,size:n,speed:m,color:u,theme:t.default});

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/Spinner/index.js

@@ -1,14 +1,14 @@
-import i from"react";import s,{keyframes as m}from"styled-components";import d from"../../theme.js";const u=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},t=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},f=m`
+import n from"react";import s,{keyframes as m}from"styled-components";import d from"../../theme.js";const u=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},t=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},f=m`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,c=s.div`
+`,g=s.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({theme:e,color:r,size:a})=>{var o,l,n;return`${t(a)/10}em solid ${(n=(l=(o=e.colors)==null?void 0:o[r])==null?void 0:l.main)!=null?n:r}`}};
+  border-top: ${({theme:e,color:r,size:o})=>{var a,l,i;return`${t(o)/10}em solid ${(i=(l=(a=e.colors)==null?void 0:a[r])==null?void 0:l.main)!=null?i:r}`}};
   border-bottom: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-right: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-left: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
@@ -16,4 +16,4 @@ import i from"react";import s,{keyframes as m}from"styled-components";import d f
   height: ${({size:e})=>t(e)}em;
   animation: ${f} ${({speed:e})=>u(e)} infinite linear;
   will-change: transform;
-`,g=({size:e="regular",color:r="primary",speed:a="default",...o})=>i.createElement(c,{...o,role:"status","aria-live":"polite","aria-busy":"true",size:e,speed:a,color:r,theme:d});export{g as default};
+`,b=({size:e="regular",color:r="primary",speed:o="default",...a})=>n.createElement(g,{"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",...a,size:e,speed:o,color:r,theme:d});export{b 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.0",
+  "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/Spinner/index.d.ts

@@ -1,9 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Color, Size, Speed } from '../../Types';
-export interface SpinnerProps extends ComponentPropsWithoutRef<'div'> {
-    size?: Size | number;
-    color?: Color | string;
-    speed?: Speed;
+interface SpinnerBaseProps {
+    color: Color | string;
+    size: Size | number;
+    speed: Speed;
+}
+export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, Partial<SpinnerBaseProps> {
 }
 declare const Spinner: ({ size, color, speed, ...props }: SpinnerProps) => JSX.Element;
 export default Spinner;

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 };