@cavilha/button
Advanced tools
Comparing version 0.0.0-alpha.4 to 0.0.0-alpha.5
@@ -52,3 +52,2 @@ import { CSS, StitchesVariants } from '@cavilha/theme'; | ||
secondary4: string; | ||
secondary1Opacity: string; | ||
secondary2Opacity: string; | ||
@@ -157,13 +156,2 @@ success1: string; | ||
}; | ||
lineHeights: { | ||
small1: string; | ||
small2: string; | ||
small3: string; | ||
medium1: string; | ||
medium2: string; | ||
medium3: string; | ||
large1: string; | ||
large2: string; | ||
large3: string; | ||
}; | ||
radii: { | ||
@@ -170,0 +158,0 @@ none: string; |
@@ -1,1 +0,1 @@ | ||
"use strict";var o=require("react"),a=require("@cavilha/icon"),e=require("@fortawesome/pro-solid-svg-icons"),t=require("@cavilha/theme");function r(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=r(o),i=r(a),l=function(){return(l=Object.assign||function(o){for(var a,e=1,t=arguments.length;e<t;e++)for(var r in a=arguments[e])Object.prototype.hasOwnProperty.call(a,r)&&(o[r]=a[r]);return o}).apply(this,arguments)};var s={loading:{pointerEvents:"none",i:{animation:t.keyframes({from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}})+" 1s linear infinite"}},active:{true:{}}},c=t.styled("button",l(l({},{borderRadius:"4px",border:"none",cursor:"pointer",fontFamily:"$untitled",fontSize:"$bodyMedium",fontWeight:"$bold",lineHeight:"$small3",paddingTop:"$small2",paddingBottom:"$small2",paddingLeft:"$medium1",paddingRight:"$medium1",boxShadow:"inset 0 0 0 1px transparent",textAlign:"center",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",flex:"0 0 0",alignSelf:"flex-start","& > span":{whiteSpace:"nowrap"},"&:focus":{outline:"none"},"&:disabled":{pointerEvents:"none",backgroundColor:"$neutral3",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}),{variants:{outlined:{true:{backgroundColor:"transparent","&:hover":{color:"$white","& > svg path":{fill:"$white"}},"&:focus":{color:"$white"},"&:disabled":{backgroundColor:"$neutral2 !important",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}},text:{true:{backgroundColor:"transparent",boxShadow:"0 0 0 1px transparent"}},variant:{primary:{backgroundColor:"$primary2",boxShadow:"inset 0 0 0 1px $colors$primary",color:"$white","&:hover":{backgroundColor:"$primary3"},"&:focus":{backgroundColor:"$primary2",boxShadow:"inset $focus"},"&:active":{backgroundColor:"$primary2",boxShadow:"inset $focus"}},secondary:{boxShadow:"inset 0 0 0 1px $colors$secondary4",color:"$secondary4",backgroundColor:"transparent","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity"},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus"},"&:disabled":{border:"1px solid $neutral3",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"}}},terciary:{backgroundColor:"transparent",color:"$secondary4","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity","& > svg path":{fill:"$white"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus","& > svg path":{fill:"$white"}},"&:disabled":{color:"$neutral4",backgroundColor:"transparent",boxShadow:"inset 0 0 0 1px transparent",pointerEvents:"none","& > svg path":{fill:"$neutral4"}},"&:hover, &:active":{"& > svg path":{fill:"$white"}}},ghost:{padding:"$small1 !important",$$secondaryHover0:"rgba(75, 157, 228, 0.1)",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"},"&:hover":{backgroundColor:"$$secondaryHover0",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{backgroundColor:"$white",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:disabled":{color:"$neutral4 !important",backgroundColor:"$neutral3",pointerEvents:"none","& > svg path":{fill:"$neutral4 !important"}},"&:hover, &:active":{"& > svg path":{fill:"$secondary4"}}},danger:{$$mydanger:"$colors$danger2",backgroundColor:"$$mydanger",color:"$white","& > svg path":{fill:"$white"},"&:hover":{backgroundColor:"$danger3",boxShadow:"inset 0 0 0 1px $colors$danger3"},"&:focus":{boxShadow:"inset $focus",backgroundColor:"$danger2"},"&:active":{backgroundColor:"$danger4"},"&:disabled":{backgroundColor:"$neutral3",color:"$neutral4",pointerEvents:"none","& > svg path":{fill:"$neutral4"}}}},state:s,responsive:{true:{"@sm":{width:"100%"},"@md":{width:"100%"}}}},defaultVariants:{variant:"primary"},compoundVariants:[{variant:"primary",outlined:"true",css:{color:"$primary2"}},{variant:"primary",state:"loading",css:{color:"$white !important",backgroundColor:"$primary2 !important",opacity:"0.8"}},{variant:"primary",state:"active",css:{backgroundColor:"$primary2",boxShadow:"inset $focus"}},{variant:"secondary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8",border:"1px solid $secondary4 !important"}},{variant:"secondary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8"}},{variant:"danger",state:"active",css:{boxShadow:"inset $focus"}},{variant:"danger",state:"loading",css:{backgroundColor:"$colors$danger2 !important",color:"$white !important",opacity:"0.8"}},{variant:"ghost",state:"active",css:{boxShadow:"inset $focus"}},{variant:"ghost",state:"loading",css:{backgroundColor:"$white !important",color:"$secondary4 !important",opacity:"0.8"}}]})),d=n.default.forwardRef((function(o,a){var t=o.alignIcon,r=void 0===t?"left":t,s=o.loadingText,d=o.icon,u=o.label,p=o.iconSize,$=void 0===p?16:p,f=function(o,a){var e={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&a.indexOf(t)<0&&(e[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(t=Object.getOwnPropertySymbols(o);r<t.length;r++)a.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(o,t[r])&&(e[t[r]]=o[t[r]])}return e}(o,["alignIcon","loadingText","icon","label","iconSize"]),g="loading"===o.state;return"ghost"===o.variant?n.default.createElement(c,l({},f,{ref:a,disabled:o.disabled||g,css:{width:"$medium3",height:"$medium3"}}),g&&n.default.createElement(i.default,{icon:e.faSpinner,iconSize:20}),!g&&d&&n.default.createElement(i.default,{icon:d,iconSize:20})):n.default.createElement(c,l({},f,{ref:a,disabled:o.disabled||g}),g?n.default.createElement(n.default.Fragment,null,n.default.createElement(i.default,{icon:e.faSpinner,iconSize:$,css:{marginRight:"$small2"}}),n.default.createElement("span",null,s)):n.default.createElement(n.default.Fragment,null,d&&"left"===r&&n.default.createElement(i.default,{icon:d,iconSize:$,css:{marginRight:"$small2"}}),u&&n.default.createElement("span",null,u),d&&"right"===r&&n.default.createElement(i.default,{icon:d,iconSize:$,css:{marginLeft:"$small2"}})))}));module.exports=d; | ||
"use strict";var o=require("react"),a=require("@cavilha/icon"),r=require("@fortawesome/pro-solid-svg-icons"),t=require("@cavilha/theme");function e(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=e(o),i=e(a),l=function(){return(l=Object.assign||function(o){for(var a,r=1,t=arguments.length;r<t;r++)for(var e in a=arguments[r])Object.prototype.hasOwnProperty.call(a,e)&&(o[e]=a[e]);return o}).apply(this,arguments)};var s={loading:{pointerEvents:"none",i:{animation:t.keyframes({from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}})+" 1s linear infinite"}},active:{true:{}}},c=t.styled("button",l(l({},{borderRadius:"4px",border:"none",cursor:"pointer",fontFamily:"$untitled",fontSize:"$bodyMedium",fontWeight:"$bold",lineHeight:"24px",padding:"$small2 $medium1 $small2 $medium1",boxShadow:"inset 0 0 0 1px transparent",textAlign:"center",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",flex:"0 0 0",alignSelf:"flex-start","& > span":{whiteSpace:"nowrap"},"&:focus":{outline:"none"},"&:disabled":{pointerEvents:"none",backgroundColor:"$neutral3",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}),{variants:{outlined:{true:{backgroundColor:"transparent","&:hover":{color:"$white","& > svg path":{fill:"$white"}},"&:focus":{color:"$white"},"&:disabled":{backgroundColor:"$neutral2 !important",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}},text:{true:{backgroundColor:"transparent",boxShadow:"0 0 0 1px transparent"}},variant:{primary:{backgroundColor:"$primary2",boxShadow:"inset 0 0 0 1px $colors$primary",color:"$white","&:hover":{backgroundColor:"$primary3"},"&:focus":{backgroundColor:"$primary2",boxShadow:"inset $focus"},"&:active":{backgroundColor:"$primary2",boxShadow:"inset $focus"}},secondary:{boxShadow:"inset 0 0 0 1px $colors$secondary4",color:"$secondary4",backgroundColor:"transparent","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity"},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus"},"&:disabled":{border:"1px solid $neutral3",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"}}},terciary:{backgroundColor:"transparent",color:"$secondary4","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity","& > svg path":{fill:"$white"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus","& > svg path":{fill:"$white"}},"&:disabled":{color:"$neutral4",backgroundColor:"transparent",boxShadow:"inset 0 0 0 1px transparent",pointerEvents:"none","& > svg path":{fill:"$neutral4"}},"&:hover, &:active":{"& > svg path":{fill:"$white"}}},ghost:{padding:"$small2",$$secondaryHover0:"rgba(75, 157, 228, 0.1)",backgroundColor:"transparent",color:"$neutral4","& i":{display:"flex",justifyContent:"center",alignItems:"center"},"& > svg path":{fill:"$neutral4"},"&:hover":{backgroundColor:"$$secondaryHover0",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{backgroundColor:"$white",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:disabled":{color:"$neutral4 !important",backgroundColor:"$neutral3",pointerEvents:"none","& > svg path":{fill:"$neutral4 !important"}},"&:hover, &:active":{"& > svg path":{fill:"$secondary4"}}},danger:{$$mydanger:"$colors$danger2",backgroundColor:"$$mydanger",color:"$white","& > svg path":{fill:"$white"},"&:hover":{backgroundColor:"$danger3",boxShadow:"inset 0 0 0 1px $colors$danger3"},"&:focus":{boxShadow:"inset $focus",backgroundColor:"$danger2"},"&:active":{backgroundColor:"$danger4"},"&:disabled":{backgroundColor:"$neutral3",color:"$neutral4",pointerEvents:"none","& > svg path":{fill:"$neutral4"}}}},state:s,responsive:{true:{"@sm":{width:"100%"},"@md":{width:"100%"}}}},defaultVariants:{variant:"primary"},compoundVariants:[{variant:"primary",outlined:"true",css:{color:"$primary2"}},{variant:"primary",state:"loading",css:{color:"$white !important",backgroundColor:"$primary2 !important",opacity:"0.8"}},{variant:"primary",state:"active",css:{backgroundColor:"$primary2",boxShadow:"inset $focus"}},{variant:"secondary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8",border:"1px solid $secondary4 !important"}},{variant:"secondary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8"}},{variant:"danger",state:"active",css:{boxShadow:"inset $focus"}},{variant:"danger",state:"loading",css:{backgroundColor:"$colors$danger2 !important",color:"$white !important",opacity:"0.8"}},{variant:"ghost",state:"active",css:{boxShadow:"inset $focus"}},{variant:"ghost",state:"loading",css:{backgroundColor:"$white !important",color:"$secondary4 !important",opacity:"0.8"}}]})),d=n.default.forwardRef((function(o,a){var t=o.alignIcon,e=void 0===t?"left":t,s=o.loadingText,d=o.icon,u=o.label,p=o.iconSize,$=void 0===p?16:p,g=function(o,a){var r={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&a.indexOf(t)<0&&(r[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(t=Object.getOwnPropertySymbols(o);e<t.length;e++)a.indexOf(t[e])<0&&Object.prototype.propertyIsEnumerable.call(o,t[e])&&(r[t[e]]=o[t[e]])}return r}(o,["alignIcon","loadingText","icon","label","iconSize"]),f="loading"===o.state,h=u&&"$small2",b={padding:u&&"0 $small2"};return n.default.createElement(c,l({ref:a,disabled:o.disabled||f,css:"ghost"===o.variant?b:void 0},g),f?n.default.createElement(n.default.Fragment,null,n.default.createElement(i.default,{icon:r.faSpinner,iconSize:$,css:{marginRight:h}}),n.default.createElement("span",null,s)):n.default.createElement(n.default.Fragment,null,d&&"left"===e&&n.default.createElement(i.default,{icon:d,iconSize:$,css:{marginRight:h}}),u&&n.default.createElement("span",null,u),d&&"right"===e&&n.default.createElement(i.default,{icon:d,iconSize:$,css:{marginLeft:h}})))}));module.exports=d; |
@@ -1,1 +0,1 @@ | ||
import o from"react";import r from"@cavilha/icon";import{faSpinner as a}from"@fortawesome/pro-solid-svg-icons";import{keyframes as t,styled as e}from"@cavilha/theme";var n=function(){return(n=Object.assign||function(o){for(var r,a=1,t=arguments.length;a<t;a++)for(var e in r=arguments[a])Object.prototype.hasOwnProperty.call(r,e)&&(o[e]=r[e]);return o}).apply(this,arguments)};var i={loading:{pointerEvents:"none",i:{animation:t({from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}})+" 1s linear infinite"}},active:{true:{}}},l=e("button",n(n({},{borderRadius:"4px",border:"none",cursor:"pointer",fontFamily:"$untitled",fontSize:"$bodyMedium",fontWeight:"$bold",lineHeight:"$small3",paddingTop:"$small2",paddingBottom:"$small2",paddingLeft:"$medium1",paddingRight:"$medium1",boxShadow:"inset 0 0 0 1px transparent",textAlign:"center",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",flex:"0 0 0",alignSelf:"flex-start","& > span":{whiteSpace:"nowrap"},"&:focus":{outline:"none"},"&:disabled":{pointerEvents:"none",backgroundColor:"$neutral3",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}),{variants:{outlined:{true:{backgroundColor:"transparent","&:hover":{color:"$white","& > svg path":{fill:"$white"}},"&:focus":{color:"$white"},"&:disabled":{backgroundColor:"$neutral2 !important",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}},text:{true:{backgroundColor:"transparent",boxShadow:"0 0 0 1px transparent"}},variant:{primary:{backgroundColor:"$primary2",boxShadow:"inset 0 0 0 1px $colors$primary",color:"$white","&:hover":{backgroundColor:"$primary3"},"&:focus":{backgroundColor:"$primary2",boxShadow:"inset $focus"},"&:active":{backgroundColor:"$primary2",boxShadow:"inset $focus"}},secondary:{boxShadow:"inset 0 0 0 1px $colors$secondary4",color:"$secondary4",backgroundColor:"transparent","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity"},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus"},"&:disabled":{border:"1px solid $neutral3",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"}}},terciary:{backgroundColor:"transparent",color:"$secondary4","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity","& > svg path":{fill:"$white"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus","& > svg path":{fill:"$white"}},"&:disabled":{color:"$neutral4",backgroundColor:"transparent",boxShadow:"inset 0 0 0 1px transparent",pointerEvents:"none","& > svg path":{fill:"$neutral4"}},"&:hover, &:active":{"& > svg path":{fill:"$white"}}},ghost:{padding:"$small1 !important",$$secondaryHover0:"rgba(75, 157, 228, 0.1)",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"},"&:hover":{backgroundColor:"$$secondaryHover0",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{backgroundColor:"$white",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:disabled":{color:"$neutral4 !important",backgroundColor:"$neutral3",pointerEvents:"none","& > svg path":{fill:"$neutral4 !important"}},"&:hover, &:active":{"& > svg path":{fill:"$secondary4"}}},danger:{$$mydanger:"$colors$danger2",backgroundColor:"$$mydanger",color:"$white","& > svg path":{fill:"$white"},"&:hover":{backgroundColor:"$danger3",boxShadow:"inset 0 0 0 1px $colors$danger3"},"&:focus":{boxShadow:"inset $focus",backgroundColor:"$danger2"},"&:active":{backgroundColor:"$danger4"},"&:disabled":{backgroundColor:"$neutral3",color:"$neutral4",pointerEvents:"none","& > svg path":{fill:"$neutral4"}}}},state:i,responsive:{true:{"@sm":{width:"100%"},"@md":{width:"100%"}}}},defaultVariants:{variant:"primary"},compoundVariants:[{variant:"primary",outlined:"true",css:{color:"$primary2"}},{variant:"primary",state:"loading",css:{color:"$white !important",backgroundColor:"$primary2 !important",opacity:"0.8"}},{variant:"primary",state:"active",css:{backgroundColor:"$primary2",boxShadow:"inset $focus"}},{variant:"secondary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8",border:"1px solid $secondary4 !important"}},{variant:"secondary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8"}},{variant:"danger",state:"active",css:{boxShadow:"inset $focus"}},{variant:"danger",state:"loading",css:{backgroundColor:"$colors$danger2 !important",color:"$white !important",opacity:"0.8"}},{variant:"ghost",state:"active",css:{boxShadow:"inset $focus"}},{variant:"ghost",state:"loading",css:{backgroundColor:"$white !important",color:"$secondary4 !important",opacity:"0.8"}}]})),s=o.forwardRef((function(t,e){var i=t.alignIcon,s=void 0===i?"left":i,c=t.loadingText,d=t.icon,p=t.label,$=t.iconSize,u=void 0===$?16:$,g=function(o,r){var a={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&r.indexOf(t)<0&&(a[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(t=Object.getOwnPropertySymbols(o);e<t.length;e++)r.indexOf(t[e])<0&&Object.prototype.propertyIsEnumerable.call(o,t[e])&&(a[t[e]]=o[t[e]])}return a}(t,["alignIcon","loadingText","icon","label","iconSize"]),h="loading"===t.state;return"ghost"===t.variant?o.createElement(l,n({},g,{ref:e,disabled:t.disabled||h,css:{width:"$medium3",height:"$medium3"}}),h&&o.createElement(r,{icon:a,iconSize:20}),!h&&d&&o.createElement(r,{icon:d,iconSize:20})):o.createElement(l,n({},g,{ref:e,disabled:t.disabled||h}),h?o.createElement(o.Fragment,null,o.createElement(r,{icon:a,iconSize:u,css:{marginRight:"$small2"}}),o.createElement("span",null,c)):o.createElement(o.Fragment,null,d&&"left"===s&&o.createElement(r,{icon:d,iconSize:u,css:{marginRight:"$small2"}}),p&&o.createElement("span",null,p),d&&"right"===s&&o.createElement(r,{icon:d,iconSize:u,css:{marginLeft:"$small2"}})))}));export{s as default}; | ||
import o from"react";import r from"@cavilha/icon";import{faSpinner as a}from"@fortawesome/pro-solid-svg-icons";import{keyframes as t,styled as e}from"@cavilha/theme";var n=function(){return(n=Object.assign||function(o){for(var r,a=1,t=arguments.length;a<t;a++)for(var e in r=arguments[a])Object.prototype.hasOwnProperty.call(r,e)&&(o[e]=r[e]);return o}).apply(this,arguments)};var i={loading:{pointerEvents:"none",i:{animation:t({from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}})+" 1s linear infinite"}},active:{true:{}}},l=e("button",n(n({},{borderRadius:"4px",border:"none",cursor:"pointer",fontFamily:"$untitled",fontSize:"$bodyMedium",fontWeight:"$bold",lineHeight:"24px",padding:"$small2 $medium1 $small2 $medium1",boxShadow:"inset 0 0 0 1px transparent",textAlign:"center",display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",flex:"0 0 0",alignSelf:"flex-start","& > span":{whiteSpace:"nowrap"},"&:focus":{outline:"none"},"&:disabled":{pointerEvents:"none",backgroundColor:"$neutral3",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}),{variants:{outlined:{true:{backgroundColor:"transparent","&:hover":{color:"$white","& > svg path":{fill:"$white"}},"&:focus":{color:"$white"},"&:disabled":{backgroundColor:"$neutral2 !important",boxShadow:"0 0 0 1px $colors$neutral3",color:"$neutral4","& > svg path":{fill:"$neutral4"}}}},text:{true:{backgroundColor:"transparent",boxShadow:"0 0 0 1px transparent"}},variant:{primary:{backgroundColor:"$primary2",boxShadow:"inset 0 0 0 1px $colors$primary",color:"$white","&:hover":{backgroundColor:"$primary3"},"&:focus":{backgroundColor:"$primary2",boxShadow:"inset $focus"},"&:active":{backgroundColor:"$primary2",boxShadow:"inset $focus"}},secondary:{boxShadow:"inset 0 0 0 1px $colors$secondary4",color:"$secondary4",backgroundColor:"transparent","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity"},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus"},"&:disabled":{border:"1px solid $neutral3",backgroundColor:"transparent",color:"$neutral4","& > svg path":{fill:"$neutral4"}}},terciary:{backgroundColor:"transparent",color:"$secondary4","& > svg path":{fill:"$secondary4"},"&:hover":{backgroundColor:"$secondary2Opacity","& > svg path":{fill:"$white"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{boxShadow:"inset $focus","& > svg path":{fill:"$white"}},"&:disabled":{color:"$neutral4",backgroundColor:"transparent",boxShadow:"inset 0 0 0 1px transparent",pointerEvents:"none","& > svg path":{fill:"$neutral4"}},"&:hover, &:active":{"& > svg path":{fill:"$white"}}},ghost:{padding:"$small2",$$secondaryHover0:"rgba(75, 157, 228, 0.1)",backgroundColor:"transparent",color:"$neutral4","& i":{display:"flex",justifyContent:"center",alignItems:"center"},"& > svg path":{fill:"$neutral4"},"&:hover":{backgroundColor:"$$secondaryHover0",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:focus":{boxShadow:"inset $focus"},"&:active":{backgroundColor:"$white",color:"$secondary4","& > svg path":{fill:"$secondary4"}},"&:disabled":{color:"$neutral4 !important",backgroundColor:"$neutral3",pointerEvents:"none","& > svg path":{fill:"$neutral4 !important"}},"&:hover, &:active":{"& > svg path":{fill:"$secondary4"}}},danger:{$$mydanger:"$colors$danger2",backgroundColor:"$$mydanger",color:"$white","& > svg path":{fill:"$white"},"&:hover":{backgroundColor:"$danger3",boxShadow:"inset 0 0 0 1px $colors$danger3"},"&:focus":{boxShadow:"inset $focus",backgroundColor:"$danger2"},"&:active":{backgroundColor:"$danger4"},"&:disabled":{backgroundColor:"$neutral3",color:"$neutral4",pointerEvents:"none","& > svg path":{fill:"$neutral4"}}}},state:i,responsive:{true:{"@sm":{width:"100%"},"@md":{width:"100%"}}}},defaultVariants:{variant:"primary"},compoundVariants:[{variant:"primary",outlined:"true",css:{color:"$primary2"}},{variant:"primary",state:"loading",css:{color:"$white !important",backgroundColor:"$primary2 !important",opacity:"0.8"}},{variant:"primary",state:"active",css:{backgroundColor:"$primary2",boxShadow:"inset $focus"}},{variant:"secondary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8",border:"1px solid $secondary4 !important"}},{variant:"secondary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"active",css:{boxShadow:"inset $focus"}},{variant:"terciary",state:"loading",css:{color:"$secondary4 !important",opacity:"0.8"}},{variant:"danger",state:"active",css:{boxShadow:"inset $focus"}},{variant:"danger",state:"loading",css:{backgroundColor:"$colors$danger2 !important",color:"$white !important",opacity:"0.8"}},{variant:"ghost",state:"active",css:{boxShadow:"inset $focus"}},{variant:"ghost",state:"loading",css:{backgroundColor:"$white !important",color:"$secondary4 !important",opacity:"0.8"}}]})),s=o.forwardRef((function(t,e){var i=t.alignIcon,s=void 0===i?"left":i,c=t.loadingText,d=t.icon,p=t.label,u=t.iconSize,$=void 0===u?16:u,g=function(o,r){var a={};for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&r.indexOf(t)<0&&(a[t]=o[t]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(t=Object.getOwnPropertySymbols(o);e<t.length;e++)r.indexOf(t[e])<0&&Object.prototype.propertyIsEnumerable.call(o,t[e])&&(a[t[e]]=o[t[e]])}return a}(t,["alignIcon","loadingText","icon","label","iconSize"]),h="loading"===t.state,f=p&&"$small2",b={padding:p&&"0 $small2"};return o.createElement(l,n({ref:e,disabled:t.disabled||h,css:"ghost"===t.variant?b:void 0},g),h?o.createElement(o.Fragment,null,o.createElement(r,{icon:a,iconSize:$,css:{marginRight:f}}),o.createElement("span",null,c)):o.createElement(o.Fragment,null,d&&"left"===s&&o.createElement(r,{icon:d,iconSize:$,css:{marginRight:f}}),p&&o.createElement("span",null,p),d&&"right"===s&&o.createElement(r,{icon:d,iconSize:$,css:{marginLeft:f}})))}));export{s as default}; |
{ | ||
"name": "@cavilha/button", | ||
"version": "0.0.0-alpha.4", | ||
"version": "0.0.0-alpha.5", | ||
"author": "MadeiraMadeira webstore squads", | ||
@@ -62,13 +62,11 @@ "license": "ISC", | ||
}, | ||
"peerDependencies": { | ||
"dependencies": { | ||
"@cavilha/icon": "0.0.0-alpha.1", | ||
"@cavilha/theme": "0.0.0-alpha.3", | ||
"@fortawesome/fontawesome-svg-core": "^1.2.34", | ||
"@radix-ui/react-polymorphic": "0.0.13", | ||
"@stitches/react": "v0.2.2", | ||
"react": "^17.0.1", | ||
"react-dom": "^17.0.1" | ||
}, | ||
"dependencies": { | ||
"@cavilha/icon": "0.0.0-alpha.1", | ||
"@cavilha/theme": "0.0.0-alpha.4", | ||
"@fortawesome/fontawesome-svg-core": "^1.2.34", | ||
"@radix-ui/react-polymorphic": "0.0.13" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
0
21126
319
+ Added@stitches/react@v0.2.2
+ Addedreact@^17.0.1
+ Addedreact-dom@^17.0.1
+ Added@cavilha/theme@0.0.0-alpha.3(transitive)
- Removed@cavilha/theme@0.0.0-alpha.4(transitive)
Updated@cavilha/theme@0.0.0-alpha.3