@pikas-ui/button
Advanced tools
Comparing version
@@ -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 |
{ | ||
"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", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Minified code
QualityThis 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
94136
0.62%247
0.82%6
-25%+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
Updated
Updated
Updated