@asphalt-react/loader - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.cjs

@@ -62,3 +62,3 @@ 'use strict';
 
-const Loader=({size,...props})=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
+const Loader=({size="m",...props})=>{context.sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
 
@@ -70,5 +70,5 @@ var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 
-const{resolvePropCollision}=helper.propsUtil;const Spinner=({size,neutral,brand,inverse,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
+const{resolvePropCollision}=helper.propsUtil;const Spinner=({size="m",neutral=false,brand=false,inverse=false,...props})=>{context.sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
 
 exports.Loader = Loader;
 exports.Spinner = Spinner;

dist/index.d.ts

@@ -1,2 +0,4 @@
-interface SpinnerProps extends React.HTMLAttributes<HTMLElement> {
+type Override<T, U> = Omit<U, keyof T> & T
+
+interface SpinnerProps {
   /**
@@ -21,5 +23,7 @@ * Size of the Spinner.
 
-declare function Spinner(props: SpinnerProps): JSX.Element
+declare function Spinner(
+  props: Override<SpinnerProps, React.HTMLAttributes<HTMLElement>>
+): JSX.Element
 
-interface LoaderProps extends React.HTMLAttributes<HTMLElement> {
+interface LoaderProps {
   /**
@@ -32,4 +36,6 @@ * Size of the Loader.
 
-declare function Loader(props: LoaderProps): JSX.Element
+declare function Loader(
+  props: Override<LoaderProps, React.HTMLAttributes<HTMLElement>>
+): JSX.Element
 
 export { Loader, type LoaderProps, Spinner, type SpinnerProps };

dist/index.js

@@ -60,3 +60,3 @@ import React from 'react';
 
-const Loader=({size,...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
+const Loader=({size="m",...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;const dotClass=cn(styles$1.dot,styles$1[resolveSizeLoader(size)]);const isAriaBusy=typeof rest["aria-busy"]!=="undefined"?rest["aria-busy"]:true;return React.createElement("span",_extends({},rest,{role:"progressbar",className:cn(styles$1.Loader),"aria-busy":isAriaBusy}),[...Array(count)].map((_,i)=>React.createElement("span",{key:i,className:dotClass,"data-testid":`loader-dot_${i}`})))};Loader.displayName="Loader";Loader.propTypes={size:PropTypes.oneOf(["s","m","l"])};Loader.defaultProps={size:"m"};
 
@@ -68,4 +68,4 @@ var css_248z = ".Spinner__4r1yM {\n  --animation-duration: 2s;\n  --animation-delay: calc(var(--animation-duration) / -2);\n\n  display: inline-flex;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n  -webkit-animation: spin__67Zqi var(--animation-duration) infinite;\n          animation: spin__67Zqi var(--animation-duration) infinite;\n  -webkit-animation-delay: var(--animation-delay);\n          animation-delay: var(--animation-delay);\n}\n\n.circle__X4fB1 {\n  stroke: var(--stroke-color);\n  stroke-width: 0.5rem;\n  stroke-linecap: round;\n  stroke-dasharray: 150;\n  -webkit-animation: dash__eCH98 var(--animation-duration) linear infinite;\n          animation: dash__eCH98 var(--animation-duration) linear infinite;\n}\n\n@-webkit-keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n\n@keyframes spin__67Zqi {\n  0% {\n    transform: rotate(0deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  50.85% {\n    transform: rotate(360deg);\n    -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n            animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);\n  }\n  100% {\n    transform: rotate(720deg);\n  }\n}\n@-webkit-keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n@keyframes dash__eCH98 {\n  0% {\n    stroke-dashoffset: 148.2;\n  }\n  50% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: -148.2;\n  }\n}\n\n/*\n  If the user has expressed their preference for\n  reduced motion, then reduce animations on spinner.\n*/\n@media (prefers-reduced-motion: reduce) {\n  .Spinner__4r1yM {\n    --animation-duration: 5s;\n  }\n  .circle__X4fB1 {\n    --animation-duration: 5s;\n  }\n}\n\n.xs__xhV9q {\n  --spinner-size: 0.75rem;\n}\n\n.s__rFE1i {\n  --spinner-size: 0.875rem;\n}\n\n.m__uhjyw {\n  --spinner-size: 1rem;\n}\n\n.l__op3T8 {\n  --spinner-size: 1.125rem;\n}\n\n.xl__o64nI {\n  --spinner-size: 2rem;\n}\n\n.xxl__PcWyX {\n  --spinner-size: 2.5rem;\n}\n\n.brand__jjN3I {\n  --stroke-color: var(--content-brand, #00aa13);\n}\n\n.inverse__9ryB7 {\n  --stroke-color: var(--content-on-inverse, #ffffff);\n}\n\n.neutral__CYh5w {\n  --stroke-color: var(--content-primary, #2d2e34);\n}\n";
 
-const{resolvePropCollision}=propsUtil;const Spinner=({size,neutral,brand,inverse,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
+const{resolvePropCollision}=propsUtil;const Spinner=({size="m",neutral=false,brand=false,inverse=false,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:intent}=resolvePropCollision({neutral,brand,inverse},"neutral");if(collision){console.warn(`Spinner: Multiple intents detected. Falling back to "neutral"`);}const spinnerClass=cn(styles.Spinner,styles[resolveSizeSpinner(size)],styles[intent]);return React.createElement("svg",_extends({"aria-label":"Loading"},rest,{role:"progress-bar",viewBox:"0 0 71 71",className:spinnerClass}),React.createElement("circle",{cx:"35.5",cy:"35.5",r:"30",className:styles.circle,fill:"none"}))};Spinner.displayName="Spinner";Spinner.propTypes={size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),neutral:PropTypes.bool,brand:PropTypes.bool,inverse:PropTypes.bool};Spinner.defaultProps={size:"m",neutral:false,brand:false,inverse:false};
 
 export { Loader, Spinner };

package.json

 {
   "name": "@asphalt-react/loader",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Loader",
@@ -51,3 +51,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "670cc440d262dac252453b7479d82a8b6e3cf9f2"
+  "gitHead": "d73f7d2b4114940b08c77f38636217e678f38dc5"
 }

No alert changes

Improved metrics

Total package byte prevSize

34759

0.32%

Lines of code

232

2.2%

No dependency changes