@pikas-ui/button - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/button/Button.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');var _styles = require('@pikas-ui/styles');var _react = require('react');var _loader = require('@pikas-ui/loader');var _utilsjs = require('../utils.js');const F=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=_styles.useTheme.call(void 0, );return l?_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[_jsxruntime.jsx.call(void 0, N,{children:_jsxruntime.jsx.call(void 0, _loader.BeatLoader,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),_jsxruntime.jsxs.call(void 0, $,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?_jsxruntime.jsx.call(void 0, o,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _2 => _2.icon])}):null,_jsxruntime.jsx.call(void 0, "div",{children:e}),n?_jsxruntime.jsx.call(void 0, n,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _3 => _3.icon])}):null]})]}):null},G= exports.Button =_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:T,RightIcon:x,outlined:f,width:m,maxWidth:y,minWidth:h,fontSize:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=_styles.useTheme.call(void 0, ),H=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([p, 'optionalCall', _4 => _4()])},[t,p,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{ref:v,onClick:H,disabled:e||t,effect:t?void 0:i,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${g}`,width:m,maxWidth:y,minWidth:h,boxShadow:M,..._utilsjs.getColors.call(void 0, {outlined:f,colorHex:L,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _5 => _5.button])},...R,children:k({LeftIcon:T,RightIcon:x,children:c,gap:l,loading:e,css:r,textTransform:b,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:f,contentColorHex:u,colorHex:n})})})});G.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:T,LeftIcon:x,RightIcon:f,outlined:m,width:y,maxWidth:h,minWidth:g,textTransform:b,fontWeight:B,borderRadius:C,borderWidth:S,boxShadow:M,contentColor:d,contentColorHex:u,...R},v)=>{const a=_styles.useTheme.call(void 0, ),H=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([c, 'optionalCall', _6 => _6()])},[t,c,e]);if(!a)return null;const L=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{as:"a",ref:v,onClick:H,disabled:e||t,effect:t?void 0:p,css:{br:C,fontWeight:`$${B}`,borderWidth:S,fontSize:`$${i}`,width:y,maxWidth:h,minWidth:g,boxShadow:M,..._utilsjs.getColors.call(void 0, {outlined:m,colorHex:L,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _7 => _7.button])},...R,children:k({LeftIcon:x,RightIcon:f,children:l,gap:T,loading:e,css:r,textTransform:b,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};exports.Button = G; exports.ButtonLink = _;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');var _styles = require('@pikas-ui/styles');var _react = require('react');var _loader = require('@pikas-ui/loader');var _utilsjs = require('../utils.js');const F=_styles.styled.call(void 0, "button",{all:"unset",cursor:"pointer",outline:"none",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",space:2,borderStyle:"solid",position:"relative",whiteSpace:"nowrap",boxSizing:"border-box",variants:{effect:{globalScale:{transition:"transform 250ms ease","&:hover":{transform:"scale(1.025)",transition:"transform 250ms ease"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},boxScale:{transition:"transform 250ms ease","&:after":{background:"inherit",content:"",position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:-1,transition:"transform 250ms ease",borderRadius:"inherit"},"&:hover:after":{transform:"scale(1.1)",transition:"transform 250ms"},"&:active":{transform:"scale(0.95)",transition:"transform 250ms ease"}},opacity:{transition:"opacity 500ms","&:hover":{opacity:.8},"&:active":{opacity:1,transition:"opacity 0s"}}},padding:{xs:{padding:"4px 20px"},sm:{padding:"6px 30px"},md:{padding:"8px 40px"},lg:{padding:"12px 60px"},xl:{padding:"16px 80px"}},disabled:{true:{cursor:"not-allowed",opacity:.5}}}}),$=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",variants:{textTransform:{capitalize:{textTransform:"capitalize"},uppercase:{textTransform:"uppercase"},default:{"div::first-letter":{textTransform:"uppercase"}},none:{}},gap:{sm:{customGap:4},md:{customGap:8},lg:{customGap:16}}}}),N=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center",position:"absolute",top:0,left:0,right:0,bottom:0}),G=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center",justifyContent:"center"}),k=({LeftIcon:o,RightIcon:n,loading:r,children:e,css:t,contentColor:i,textTransform:p,gap:c})=>{const l=_styles.useTheme.call(void 0, );return l?_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[_jsxruntime.jsx.call(void 0, N,{children:_jsxruntime.jsx.call(void 0, _loader.BeatLoader,{size:l.fontSizes["EM-XX-SMALL"].value,colorHex:i,loading:r})}),_jsxruntime.jsxs.call(void 0, $,{textTransform:p,gap:c,css:{opacity:r?0:1},children:[o?_jsxruntime.jsx.call(void 0, o,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _2 => _2.icon])}):null,_jsxruntime.jsx.call(void 0, G,{children:e}),n?_jsxruntime.jsx.call(void 0, n,{size:"1em",colorHex:i,css:_optionalChain([t, 'optionalAccess', _3 => _3.icon])}):null]})]}):null},j= exports.Button =_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,effect:i,onClick:p,children:c,gap:l,LeftIcon:x,RightIcon:y,outlined:f,width:m,maxWidth:h,minWidth:g,fontSize:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=_styles.useTheme.call(void 0, ),L=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([p, 'optionalCall', _4 => _4()])},[t,p,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{ref:H,onClick:L,disabled:e||t,effect:t?void 0:i,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${b}`,width:m,maxWidth:h,minWidth:g,boxShadow:R,..._utilsjs.getColors.call(void 0, {outlined:f,colorHex:I,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _5 => _5.button])},...v,children:k({LeftIcon:x,RightIcon:y,children:c,gap:l,loading:e,css:r,textTransform:C,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:f,contentColorHex:u,colorHex:n})})})});j.defaultProps={type:"button",disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};const _=_react.forwardRef.call(void 0, ({color:o,colorHex:n,css:r,loading:e,disabled:t,fontSize:i,effect:p,onClick:c,children:l,gap:x,LeftIcon:y,RightIcon:f,outlined:m,width:h,maxWidth:g,minWidth:b,textTransform:C,fontWeight:B,borderRadius:S,borderWidth:M,boxShadow:R,contentColor:d,contentColorHex:u,...v},H)=>{const a=_styles.useTheme.call(void 0, ),L=_react.useCallback.call(void 0, ()=>{t||e||_optionalChain([c, 'optionalCall', _6 => _6()])},[t,c,e]);if(!a)return null;const I=n||o&&a.colors[o].value,W=u||d&&a.colors[d].value;return _jsxruntime.jsx.call(void 0, F,{as:"a",ref:H,onClick:L,disabled:e||t,effect:t?void 0:p,css:{br:S,fontWeight:`$${B}`,borderWidth:M,fontSize:`$${i}`,width:h,maxWidth:g,minWidth:b,boxShadow:R,..._utilsjs.getColors.call(void 0, {outlined:m,colorHex:I,contentColorHex:W}),..._optionalChain([r, 'optionalAccess', _7 => _7.button])},...v,children:k({LeftIcon:y,RightIcon:f,children:l,gap:x,loading:e,css:r,textTransform:C,contentColor:_utilsjs.getContentColor.call(void 0, {outlined:m,contentColorHex:u,colorHex:n})})})});_.defaultProps={disabled:!1,loading:!1,padding:"md",color:"PRIMARY",gap:"md",effect:"opacity",outlined:!1,width:"100%",maxWidth:"100%",fontSize:"EM-MEDIUM",textTransform:"default",fontWeight:"NORMAL",borderRadius:"md",borderWidth:2,boxShadow:"ELEVATION_BOTTOM_1"};exports.Button = j; exports.ButtonLink = _;
 //# sourceMappingURL=Button.js.map

package.json

 {
   "name": "@pikas-ui/button",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "private": false,
@@ -37,5 +37,5 @@ "description": "Components for creating buttons",
   "dependencies": {
-    "@pikas-ui/icons": "3.0.0",
-    "@pikas-ui/loader": "3.0.0",
-    "@pikas-ui/styles": "3.0.0",
+    "@pikas-ui/icons": "3.0.1",
+    "@pikas-ui/loader": "3.0.1",
+    "@pikas-ui/styles": "3.0.1",
     "font-color-contrast": "^11.1.0"
@@ -50,3 +50,3 @@ },
     "@pikas-ui/tsconfig": "0.0.0",
-    "@types/node": "^18.7.14",
+    "@types/node": "^18.7.15",
     "@types/react": "^18.0.18",
@@ -53,0 +53,0 @@ "@types/react-dom": "^18.0.6",

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94136

0.62%

Lines of code

247

0.82%

Number of low quality alerts

6

-25%

Dependency changes

• + Added

  @pikas-ui/icons@3.0.1
  (transitive)

• + Added

  @pikas-ui/loader@3.0.1
  (transitive)

• + Added

  @pikas-ui/styles@3.0.1
  (transitive)

• - Removed

  @pikas-ui/icons@3.0.0
  (transitive)

• - Removed

  @pikas-ui/loader@3.0.0
  (transitive)

• - Removed

  @pikas-ui/styles@3.0.0
  (transitive)

• Updated

  @pikas-ui/icons@3.0.1

• Updated

  @pikas-ui/loader@3.0.1

• Updated

  @pikas-ui/styles@3.0.1