@mobilestockweb/button 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +20 -20
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";var at=Object.create;var
|
|
2
|
-
background-color: ${(0,
|
|
1
|
+
"use strict";var at=Object.create;var h=Object.defineProperty,st=Object.defineProperties,ct=Object.getOwnPropertyDescriptor,lt=Object.getOwnPropertyDescriptors,dt=Object.getOwnPropertyNames,R=Object.getOwnPropertySymbols,ut=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var F=(t,e,o)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,U=(t,e)=>{for(var o in e||(e={}))$.call(e,o)&&F(t,o,e[o]);if(R)for(var o of R(e))X.call(e,o)&&F(t,o,e[o]);return t},V=(t,e)=>st(t,lt(e));var O=(t,e)=>{var o={};for(var i in t)$.call(t,i)&&e.indexOf(i)<0&&(o[i]=t[i]);if(t!=null&&R)for(var i of R(t))e.indexOf(i)<0&&X.call(t,i)&&(o[i]=t[i]);return o};var ft=(t,e)=>{for(var o in e)h(t,o,{get:e[o],enumerable:!0})},W=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of dt(e))!$.call(t,s)&&s!==o&&h(t,s,{get:()=>e[s],enumerable:!(i=ct(e,s))||i.enumerable});return t};var p=(t,e,o)=>(o=t!=null?at(ut(t)):{},W(e||!t||!t.__esModule?h(o,"default",{value:t,enumerable:!0}):o,t)),pt=t=>W(h({},"__esModule",{value:!0}),t);var Rt={};ft(Rt,{Button:()=>tt});module.exports=pt(Rt);var N=p(require("react")),d=p(require("styled-components")),Y=require("@mobilestockweb/clickable"),T=require("@mobilestockweb/container"),q=p(require("@mobilestockweb/tools")),Q=require("@mobilestockweb/typography");var C=p(require("chroma-js")),n=require("styled-components"),A=p(require("@mobilestockweb/tools"));function E(t,e){let o=t.split("_"),i=500;if(o.length>1)switch(o[1]){case"LIGHT":i=400;break;case"DARK":i=600;break}return A.default.getColorWithLuminosity(e.colors.button[o[0].toLowerCase()],i)}function H(t,e,o){let i=E(e,o);switch(t){case"DEFAULT":return n.css`
|
|
2
|
+
background-color: ${(0,C.default)(i).shade(.5).css()};
|
|
3
3
|
`;case"OUTLINE":return n.css`
|
|
4
|
-
border: 2px solid ${(0,
|
|
5
|
-
`;default:return""}}function
|
|
6
|
-
background-color: ${(0,
|
|
4
|
+
border: 2px solid ${(0,C.default)(i).shade(.5).css()};
|
|
5
|
+
`;default:return""}}function M(t,e,o){let i=E(e,o);switch(t){case"DEFAULT":return n.css`
|
|
6
|
+
background-color: ${(0,C.default)(i).shade(.25).css()};
|
|
7
7
|
`;case"OUTLINE":return n.css`
|
|
8
|
-
border: 2px solid ${(0,
|
|
8
|
+
border: 2px solid ${(0,C.default)(i).shade(.25).css()};
|
|
9
9
|
`;case"LINK":return n.css`
|
|
10
10
|
* {
|
|
11
11
|
color: ${i};
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
justify-content: center;
|
|
29
29
|
`;case"END":return n.css`
|
|
30
30
|
justify-content: flex-end;
|
|
31
|
-
`}}function _(t,e,o){let i=
|
|
31
|
+
`}}function _(t,e,o){let i=E(e,o);switch(t){case"DEFAULT":return n.css`
|
|
32
32
|
background-color: ${i};
|
|
33
33
|
* {
|
|
34
34
|
color: ${A.default.defineTextColor(i)};
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
* {
|
|
47
47
|
color: ${i};
|
|
48
48
|
}
|
|
49
|
-
`}}function j(t,e,o){let i=3;e&&(i=4);let a={XS:{padding:"0.25rem 0.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+1}px`},SM:{padding:"0.5rem 1rem",borderRadius:`${parseFloat(o.borderRadius.default)+1}px`},MD:{padding:"0.75rem 1.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+3}px`},LG:{padding:"1rem 1.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+3}px`},XL:{padding:"1.25rem 2.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+5}px`},"2XL":{padding:"1.5rem 2.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+7}px`},"3XL":{padding:"1.75rem 3.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+9}px`}}[t],
|
|
49
|
+
`}}function j(t,e,o){let i=3;e&&(i=4);let a={XS:{padding:"0.25rem 0.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+1}px`},SM:{padding:"0.5rem 1rem",borderRadius:`${parseFloat(o.borderRadius.default)+1}px`},MD:{padding:"0.75rem 1.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+3}px`},LG:{padding:"1rem 1.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+3}px`},XL:{padding:"1.25rem 2.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+5}px`},"2XL":{padding:"1.5rem 2.75rem",borderRadius:`${parseFloat(o.borderRadius.default)+7}px`},"3XL":{padding:"1.75rem 3.25rem",borderRadius:`${parseFloat(o.borderRadius.default)+9}px`}}[t],x=n.css`
|
|
50
50
|
padding: ${e?"0":a.padding};
|
|
51
51
|
border-radius: ${e?o.borderRadius.rounded:a.borderRadius};
|
|
52
|
-
`;if(e){let
|
|
53
|
-
${
|
|
54
|
-
width: ${
|
|
55
|
-
min-height: ${
|
|
56
|
-
`}return
|
|
52
|
+
`;if(e){let y=`${i*parseFloat(o.spacing[t.toLowerCase()])}rem`;return n.css`
|
|
53
|
+
${x}
|
|
54
|
+
width: ${y};
|
|
55
|
+
min-height: ${y};
|
|
56
|
+
`}return x}var S=require("@mobilestockweb/icons");var g=p(require("styled-components")),G=p(require("@mobilestockweb/tools")),J=require("@mobilestockweb/typography"),P=require("react/jsx-runtime");function m(t){return(0,P.jsx)(mt,{$position:t.notificationPosition,$size:t.size,children:(0,P.jsx)(Tt,{size:t.size,weight:"BOLD",children:t.notification>99?"99+":t.notification})})}var gt={XS:{top:"-10px",right:"-10px"},SM:{top:"-12px",right:"-11px"},MD:{top:"-13px",right:"-12px"},LG:{top:"-15px",right:"-10px"},XL:{top:"-20px",right:"-15px"},"2XL":{top:"-20px",right:"-15px"},"3XL":{top:"-25px",right:"-13px"}},mt=g.default.div`
|
|
57
57
|
position: absolute;
|
|
58
58
|
background-color: ${({theme:t})=>t.colors.alert.urgent};
|
|
59
59
|
padding: 0.125rem 0.25rem;
|
|
@@ -67,35 +67,35 @@
|
|
|
67
67
|
`}}
|
|
68
68
|
`,Tt=(0,g.default)(J.Typography)`
|
|
69
69
|
color: ${({theme:t})=>G.default.defineTextColor(t.colors.alert.urgent)} !important;
|
|
70
|
-
`;var c=require("react/jsx-runtime");function L(t){let e=t.notification&&t.notificationPosition==="ICON";return t.icon?e?(0,c.jsxs)(
|
|
70
|
+
`;var c=require("react/jsx-runtime");function L(t){let e=t.notification&&t.notificationPosition==="ICON";return t.icon?e?(0,c.jsxs)(b,{children:[(0,c.jsx)(S.Icon,{name:t.icon,size:t.size}),(0,c.jsx)(m,{notification:t.notification,notificationPosition:t.notificationPosition,size:t.size})]}):(0,c.jsx)(S.Icon,{name:t.icon,size:t.size}):(0,c.jsx)(c.Fragment,{})}var I=require("@mobilestockweb/typography");var l=require("react/jsx-runtime");function z(t){return t.text?t.notification&&t.notificationPosition==="TEXT"?(0,l.jsxs)(b,{children:[(0,l.jsx)(I.Typography,{weight:t.fontWeight,size:t.size,withUnderline:t.withUnderline,children:t.text}),(0,l.jsx)(m,{notification:t.notification,notificationPosition:t.notificationPosition,size:t.size})]}):(0,l.jsx)(I.Typography,{weight:t.fontWeight,size:t.size,withUnderline:t.withUnderline,children:t.text}):(0,l.jsx)(l.Fragment,{})}var r=require("react/jsx-runtime"),Z=[{name:"div",component:"div"},{name:"Container",component:T.Container},{name:"Container.Vertical",component:T.Container.Vertical},{name:"Container.Horizontal",component:T.Container.Horizontal},{name:"Typography",component:Q.Typography}],xt=Z.map(t=>t.component),tt=N.default.memo(function(bt){var v=bt,{variant:e="DEFAULT",size:o="MD",iconAlign:i="BEFORE-TEXT",backgroundColor:s="DEFAULT",notificationPosition:a="ICON",fontWeight:x="REGULAR",textAlign:y="CENTER",circular:D=!1,notification:u,text:f,isLoading:k,icon:w,disabled:ot,padding:et}=v,it=O(v,["variant","size","iconAlign","backgroundColor","notificationPosition","fontWeight","textAlign","circular","notification","text","isLoading","icon","disabled","padding"]);let nt=(0,N.useRef)(null);if(typeof f!="string"&&f&&!q.default.validateJSXTree(f,xt))throw new Error(`Invalid jsx text props. Expected one of ${Z.map(rt=>rt.name).join(", ")}, but received: ${f.type.target||f.type}`);return(0,r.jsx)(ht,V(U({},it),{ref:nt,isLoading:k,disabled:ot||k,size:o,$backgroundColor:s,$variant:e,$circular:D,children:(0,r.jsxs)(Ct,{padding:et,gap:o,align:"CENTER",$textAlign:y,$iconAlign:i,children:[i!=="START"&&i!=="END"?(0,r.jsxs)(Et,{gap:i==="ABOVE-TEXT"?"NONE":o,align:"CENTER",$iconAlign:i,children:[(0,r.jsx)(L,{icon:w,size:o,notification:u,notificationPosition:a}),(0,r.jsx)(z,{text:f,fontWeight:x,size:o,withUnderline:e==="LINK",notification:u,notificationPosition:a})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(L,{icon:w,size:o,notification:u,notificationPosition:a}),(0,r.jsx)(z,{text:f,fontWeight:x,size:o,withUnderline:e==="LINK",notification:u,notificationPosition:a})]}),!!u&&a==="END"&&(0,r.jsx)(m,{notification:u,notificationPosition:a,size:o}),!u&&(i==="START"||i==="END")&&!D&&(0,r.jsx)(yt,{})]})}))}),ht=(0,d.default)(Y.Clickable)`
|
|
71
71
|
flex: 1;
|
|
72
72
|
user-select: none;
|
|
73
73
|
${({$variant:t,$backgroundColor:e,theme:o})=>_(t,e,o)}
|
|
74
74
|
${({size:t,$circular:e,theme:o})=>j(t,e,o)}
|
|
75
75
|
|
|
76
76
|
&:not(:disabled):hover {
|
|
77
|
-
${({$variant:t,$backgroundColor:e,theme:o})=>
|
|
77
|
+
${({$variant:t,$backgroundColor:e,theme:o})=>M(t,e,o)}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
&:not(:disabled):active {
|
|
81
81
|
transform: scale(0.98);
|
|
82
|
-
${({$variant:t,$backgroundColor:e,theme:o})=>
|
|
82
|
+
${({$variant:t,$backgroundColor:e,theme:o})=>H(t,e,o)}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
&:focus-visible {
|
|
86
86
|
outline-offset: 2px;
|
|
87
87
|
|
|
88
|
-
${({$backgroundColor:t,theme:e})=>{let o=
|
|
88
|
+
${({$backgroundColor:t,theme:e})=>{let o=E(t,e);return d.css`
|
|
89
89
|
outline: 3px solid ${o};
|
|
90
90
|
`}}
|
|
91
91
|
}
|
|
92
|
-
`,Ct=(0,d.default)(
|
|
92
|
+
`,Ct=(0,d.default)(T.Container)`
|
|
93
93
|
${({$textAlign:t})=>K(t)};
|
|
94
94
|
${({$iconAlign:t})=>t==="START"||t==="END"?B(t):""};
|
|
95
|
-
`,
|
|
95
|
+
`,b=d.default.div`
|
|
96
96
|
position: relative;
|
|
97
97
|
display: inline-flex;
|
|
98
98
|
align-items: center;
|
|
99
|
-
`,Et=(0,d.default)(
|
|
99
|
+
`,Et=(0,d.default)(T.Container)`
|
|
100
100
|
${({$iconAlign:t})=>B(t)};
|
|
101
101
|
`,yt=d.default.div``;0&&(module.exports={Button});
|