@mobilestockweb/button 1.0.15 → 1.1.0
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.d.ts +4 -0
- package/index.js +58 -57
- package/package.json +3 -3
package/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ type Variant = 'DEFAULT' | 'LINK' | 'TRANSPARENT' | 'OUTLINE';
|
|
|
13
13
|
type IconAlign = 'START' | 'BEFORE-TEXT' | 'AFTER-TEXT' | 'ABOVE-TEXT' | 'END';
|
|
14
14
|
type TextAlign = 'START' | 'CENTER' | 'END';
|
|
15
15
|
type NotificationPosition = 'ICON' | 'TEXT' | 'END';
|
|
16
|
+
type BorderColor = 'AUTO' | BackgroundColor | `#${string}`;
|
|
17
|
+
type BorderWidth = Uppercase<keyof DefaultTheme['borderWidth'] & string>;
|
|
16
18
|
interface ButtonProps extends Omit<ClickableProps, 'children' | 'size'> {
|
|
17
19
|
text?: string | ReactElement;
|
|
18
20
|
disabled?: boolean;
|
|
@@ -27,6 +29,8 @@ interface ButtonProps extends Omit<ClickableProps, 'children' | 'size'> {
|
|
|
27
29
|
notificationPosition?: NotificationPosition;
|
|
28
30
|
backgroundColor?: BackgroundColor;
|
|
29
31
|
padding?: ViewBaseProps['padding'];
|
|
32
|
+
borderColor?: BorderColor;
|
|
33
|
+
borderWidth?: BorderWidth;
|
|
30
34
|
}
|
|
31
35
|
declare const Button: React.NamedExoticComponent<ButtonProps>;
|
|
32
36
|
|
package/index.js
CHANGED
|
@@ -1,101 +1,102 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
background-color: ${(0,
|
|
3
|
-
`;case"OUTLINE":
|
|
4
|
-
border: 2px solid ${(0,
|
|
5
|
-
|
|
6
|
-
background-color: ${(0,
|
|
7
|
-
`;case"OUTLINE":
|
|
8
|
-
border: 2px solid ${(0,
|
|
9
|
-
|
|
1
|
+
"use strict";var lo=Object.create;var E=Object.defineProperty,uo=Object.defineProperties,fo=Object.getOwnPropertyDescriptor,po=Object.getOwnPropertyDescriptors,go=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,mo=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var F=(o,e,t)=>e in o?E(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,X=(o,e)=>{for(var t in e||(e={}))R.call(e,t)&&F(o,t,e[t]);if(y)for(var t of y(e))U.call(e,t)&&F(o,t,e[t]);return o},O=(o,e)=>uo(o,po(e));var V=(o,e)=>{var t={};for(var i in o)R.call(o,i)&&e.indexOf(i)<0&&(t[i]=o[i]);if(o!=null&&y)for(var i of y(o))e.indexOf(i)<0&&U.call(o,i)&&(t[i]=o[i]);return t};var To=(o,e)=>{for(var t in e)E(o,t,{get:e[t],enumerable:!0})},H=(o,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of go(e))!R.call(o,r)&&r!==t&&E(o,r,{get:()=>e[r],enumerable:!(i=fo(e,r))||i.enumerable});return o};var T=(o,e,t)=>(t=o!=null?lo(mo(o)):{},H(e||!o||!o.__esModule?E(t,"default",{value:o,enumerable:!0}):t,o)),ho=o=>H(E({},"__esModule",{value:!0}),o);var No={};To(No,{Button:()=>to});module.exports=ho(No);var b=T(require("react")),p=T(require("styled-components")),q=require("@mobilestockweb/clickable"),B=require("@mobilestockweb/container"),Q=T(require("@mobilestockweb/tools")),Z=require("@mobilestockweb/typography");var f=T(require("chroma-js")),a=require("styled-components"),N=T(require("@mobilestockweb/tools"));function h(o,e){let t=o.split("_"),i=500;if(t.length>1)switch(t[1]){case"LIGHT":i=400;break;case"DARK":i=600;break}return N.default.getColorWithLuminosity(e.colors.button[t[0].toLowerCase()],i)}function A(o,e,t){if(o==="AUTO"){let i=h(e,t);return(0,f.default)(i).luminance()>.5?(0,f.default)(i).darken(.8).hex():(0,f.default)(i).brighten(.8).hex()}return o.startsWith("#")?o:h(o,t)}function M(o,e,t,i,r){let n=h(e,t);switch(o){case"DEFAULT":return a.css`
|
|
2
|
+
background-color: ${(0,f.default)(n).shade(.5).css()};
|
|
3
|
+
`;case"OUTLINE":{let d=i?A(i,e,t):n,c=r?t.borderWidth[r.toLowerCase()]:void 0;return a.css`
|
|
4
|
+
border: ${c||"2px"} solid ${(0,f.default)(d).shade(.5).css()};
|
|
5
|
+
`}default:return""}}function K(o,e,t,i,r){let n=h(e,t);switch(o){case"DEFAULT":return a.css`
|
|
6
|
+
background-color: ${(0,f.default)(n).shade(.25).css()};
|
|
7
|
+
`;case"OUTLINE":{let d=i?A(i,e,t):n,c=r?t.borderWidth[r.toLowerCase()]:void 0;return a.css`
|
|
8
|
+
border: ${c||"2px"} solid ${(0,f.default)(d).shade(.25).css()};
|
|
9
|
+
`}case"LINK":return a.css`
|
|
10
10
|
* {
|
|
11
|
-
color: ${
|
|
11
|
+
color: ${n};
|
|
12
12
|
}
|
|
13
|
-
`;case"TRANSPARENT":return""}}function
|
|
13
|
+
`;case"TRANSPARENT":return""}}function L(o){switch(o){case"START":return a.css`
|
|
14
14
|
justify-content: space-between;
|
|
15
|
-
`;case"BEFORE-TEXT":return
|
|
15
|
+
`;case"BEFORE-TEXT":return a.css`
|
|
16
16
|
justify-content: center;
|
|
17
|
-
`;case"AFTER-TEXT":return
|
|
17
|
+
`;case"AFTER-TEXT":return a.css`
|
|
18
18
|
flex-direction: row-reverse;
|
|
19
19
|
justify-content: center;
|
|
20
|
-
`;case"ABOVE-TEXT":return
|
|
20
|
+
`;case"ABOVE-TEXT":return a.css`
|
|
21
21
|
flex-direction: column;
|
|
22
|
-
`;case"END":return
|
|
22
|
+
`;case"END":return a.css`
|
|
23
23
|
flex-direction: row-reverse;
|
|
24
24
|
justify-content: space-between;
|
|
25
|
-
`}}function
|
|
25
|
+
`}}function _(o){switch(o){case"START":return a.css`
|
|
26
26
|
justify-content: flex-start;
|
|
27
|
-
`;case"CENTER":return
|
|
27
|
+
`;case"CENTER":return a.css`
|
|
28
28
|
justify-content: center;
|
|
29
|
-
`;case"END":return
|
|
29
|
+
`;case"END":return a.css`
|
|
30
30
|
justify-content: flex-end;
|
|
31
|
-
`}}function
|
|
32
|
-
background-color: ${
|
|
31
|
+
`}}function j(o,e,t,i,r){let n=h(e,t),d=i?A(i,e,t):void 0,c=r?t.borderWidth[r.toLowerCase()]:void 0;switch(o){case"DEFAULT":return a.css`
|
|
32
|
+
background-color: ${n};
|
|
33
|
+
${d?`border: ${c||"0.125rem"} solid ${d};`:""}
|
|
33
34
|
* {
|
|
34
|
-
color: ${
|
|
35
|
+
color: ${N.default.defineTextColor(n)};
|
|
35
36
|
}
|
|
36
|
-
`;case"OUTLINE":return
|
|
37
|
-
border: 2px solid ${
|
|
37
|
+
`;case"OUTLINE":return a.css`
|
|
38
|
+
border: ${c||"2px"} solid ${d||n};
|
|
38
39
|
* {
|
|
39
|
-
color: ${
|
|
40
|
+
color: ${n};
|
|
40
41
|
}
|
|
41
|
-
`;case"LINK":return
|
|
42
|
+
`;case"LINK":return a.css`
|
|
42
43
|
* {
|
|
43
|
-
color: ${
|
|
44
|
+
color: ${t.colors.text.default};
|
|
44
45
|
}
|
|
45
|
-
`;case"TRANSPARENT":return
|
|
46
|
+
`;case"TRANSPARENT":return a.css`
|
|
46
47
|
* {
|
|
47
|
-
color: ${
|
|
48
|
+
color: ${n};
|
|
48
49
|
}
|
|
49
|
-
`}}function
|
|
50
|
-
padding: ${e?"0":
|
|
51
|
-
border-radius: ${e?
|
|
52
|
-
`;if(e){let
|
|
53
|
-
${
|
|
54
|
-
width: ${
|
|
55
|
-
min-height: ${
|
|
56
|
-
`}return
|
|
50
|
+
`}}function G(o,e,t){let i=3;e&&(i=4);let n={"2XS":{padding:"0.125rem 0.5rem",borderRadius:`${parseFloat(t.borderRadius.default)+1}px`},XS:{padding:"0.25rem 0.75rem",borderRadius:`${parseFloat(t.borderRadius.default)+1}px`},SM:{padding:"0.5rem 1rem",borderRadius:`${parseFloat(t.borderRadius.default)+1}px`},MD:{padding:"0.75rem 1.25rem",borderRadius:`${parseFloat(t.borderRadius.default)+3}px`},LG:{padding:"1rem 1.75rem",borderRadius:`${parseFloat(t.borderRadius.default)+3}px`},XL:{padding:"1.25rem 2.25rem",borderRadius:`${parseFloat(t.borderRadius.default)+5}px`},"2XL":{padding:"1.5rem 2.75rem",borderRadius:`${parseFloat(t.borderRadius.default)+7}px`},"3XL":{padding:"1.75rem 3.25rem",borderRadius:`${parseFloat(t.borderRadius.default)+9}px`}}[o],d=a.css`
|
|
51
|
+
padding: ${e?"0":n.padding};
|
|
52
|
+
border-radius: ${e?t.borderRadius.rounded:n.borderRadius};
|
|
53
|
+
`;if(e){let c=`${i*parseFloat(t.spacing[o.toLowerCase()])}rem`;return a.css`
|
|
54
|
+
${d}
|
|
55
|
+
width: ${c};
|
|
56
|
+
min-height: ${c};
|
|
57
|
+
`}return d}var S=require("@mobilestockweb/icons");var x=T(require("styled-components")),J=T(require("@mobilestockweb/tools")),Y=require("@mobilestockweb/typography"),P=require("react/jsx-runtime");function C(o){return(0,P.jsx)(Co,{$position:o.notificationPosition,$size:o.size,children:(0,P.jsx)(Bo,{size:o.size,weight:"BOLD",children:o.notification>99?"99+":o.notification})})}var xo={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"}},Co=x.default.div`
|
|
57
58
|
position: absolute;
|
|
58
|
-
background-color: ${({theme:
|
|
59
|
+
background-color: ${({theme:o})=>o.colors.alert.urgent};
|
|
59
60
|
padding: 0.125rem 0.25rem;
|
|
60
61
|
border-radius: 0.3rem;
|
|
61
62
|
|
|
62
|
-
${({$position:
|
|
63
|
+
${({$position:o,$size:e})=>{if(o==="END")return x.css`
|
|
63
64
|
position: static;
|
|
64
|
-
`;let
|
|
65
|
-
top: ${
|
|
66
|
-
right: ${
|
|
65
|
+
`;let t=xo[e];return x.css`
|
|
66
|
+
top: ${t.top};
|
|
67
|
+
right: ${t.right};
|
|
67
68
|
`}}
|
|
68
|
-
`,
|
|
69
|
-
color: ${({theme:
|
|
70
|
-
`;var
|
|
69
|
+
`,Bo=(0,x.default)(Y.Typography)`
|
|
70
|
+
color: ${({theme:o})=>J.default.defineTextColor(o.colors.alert.urgent)} !important;
|
|
71
|
+
`;var l=require("react/jsx-runtime");function k(o){let e=o.notification&&o.notificationPosition==="ICON";return o.icon?e?(0,l.jsxs)($,{children:[(0,l.jsx)(S.Icon,{name:o.icon,size:o.size}),(0,l.jsx)(C,{notification:o.notification,notificationPosition:o.notificationPosition,size:o.size})]}):(0,l.jsx)(S.Icon,{name:o.icon,size:o.size}):(0,l.jsx)(l.Fragment,{})}var D=require("@mobilestockweb/typography");var u=require("react/jsx-runtime");function I(o){return o.text?o.notification&&o.notificationPosition==="TEXT"?(0,u.jsxs)($,{children:[(0,u.jsx)(D.Typography,{align:"CENTER",weight:o.fontWeight,size:o.size,withUnderline:o.withUnderline,children:o.text}),(0,u.jsx)(C,{notification:o.notification,notificationPosition:o.notificationPosition,size:o.size})]}):(0,u.jsx)(D.Typography,{align:"CENTER",weight:o.fontWeight,size:o.size,withUnderline:o.withUnderline,children:o.text}):(0,u.jsx)(u.Fragment,{})}var s=require("react/jsx-runtime"),oo=[{name:"div",component:"div"},{name:"Container",component:B.Container},{name:"Container.Vertical",component:B.Container.Vertical},{name:"Container.Horizontal",component:B.Container.Horizontal},{name:"Typography",component:Z.Typography}],Eo=oo.map(o=>o.component),to=b.default.memo(function(Ao){var W=Ao,{variant:e="DEFAULT",size:t="MD",iconAlign:i="BEFORE-TEXT",backgroundColor:r="DEFAULT",notificationPosition:n="ICON",fontWeight:d="REGULAR",textAlign:c="CENTER",circular:z=!1,notification:g,text:m,isLoading:w,icon:v,disabled:eo,padding:io,borderColor:no,borderWidth:ro}=W,ao=V(W,["variant","size","iconAlign","backgroundColor","notificationPosition","fontWeight","textAlign","circular","notification","text","isLoading","icon","disabled","padding","borderColor","borderWidth"]);let so=(0,b.useRef)(null);if(typeof m!="string"&&m&&!Q.default.validateJSXTree(m,Eo))throw new Error(`Invalid jsx text props. Expected one of ${oo.map(co=>co.name).join(", ")}, but received: ${m.type.target||m.type}`);return(0,s.jsx)(yo,O(X({},ao),{ref:so,isLoading:w,disabled:eo||w,size:t,$backgroundColor:r,$variant:e,$circular:z,$borderColor:no,$borderWidth:ro,children:(0,s.jsxs)($o,{padding:io,gap:t,align:"CENTER",$textAlign:c,$iconAlign:i,children:[i!=="START"&&i!=="END"?(0,s.jsxs)(bo,{gap:i==="ABOVE-TEXT"?"NONE":t,align:"CENTER",$iconAlign:i,children:[(0,s.jsx)(k,{icon:v,size:t,notification:g,notificationPosition:n}),(0,s.jsx)(I,{text:m,fontWeight:d,size:t,withUnderline:e==="LINK",notification:g,notificationPosition:n})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(k,{icon:v,size:t,notification:g,notificationPosition:n}),(0,s.jsx)(I,{text:m,fontWeight:d,size:t,withUnderline:e==="LINK",notification:g,notificationPosition:n})]}),!!g&&n==="END"&&(0,s.jsx)(C,{notification:g,notificationPosition:n,size:t}),!g&&(i==="START"||i==="END")&&!z&&(0,s.jsx)(Ro,{})]})}))}),yo=(0,p.default)(q.Clickable)`
|
|
71
72
|
flex: 1;
|
|
72
73
|
user-select: none;
|
|
73
|
-
${({$variant:
|
|
74
|
-
${({size:
|
|
74
|
+
${({$variant:o,$backgroundColor:e,$borderColor:t,$borderWidth:i,theme:r})=>j(o,e,r,t,i)}
|
|
75
|
+
${({size:o,$circular:e,theme:t})=>G(o,e,t)}
|
|
75
76
|
|
|
76
77
|
&:not(:disabled):hover {
|
|
77
|
-
${({$variant:
|
|
78
|
+
${({$variant:o,$backgroundColor:e,theme:t})=>K(o,e,t)}
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
&:not(:disabled):active {
|
|
81
82
|
transform: scale(0.98);
|
|
82
|
-
${({$variant:
|
|
83
|
+
${({$variant:o,$backgroundColor:e,theme:t})=>M(o,e,t)}
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
&:focus-visible {
|
|
86
87
|
outline-offset: 2px;
|
|
87
88
|
|
|
88
|
-
${({$backgroundColor:
|
|
89
|
-
outline: 3px solid ${
|
|
89
|
+
${({$backgroundColor:o,theme:e})=>{let t=h(o,e);return p.css`
|
|
90
|
+
outline: 3px solid ${t};
|
|
90
91
|
`}}
|
|
91
92
|
}
|
|
92
|
-
|
|
93
|
-
${({$textAlign:
|
|
94
|
-
${({$iconAlign:
|
|
95
|
-
|
|
93
|
+
`,$o=(0,p.default)(B.Container)`
|
|
94
|
+
${({$textAlign:o})=>_(o)};
|
|
95
|
+
${({$iconAlign:o})=>o==="START"||o==="END"?L(o):""};
|
|
96
|
+
`,$=p.default.div`
|
|
96
97
|
position: relative;
|
|
97
98
|
display: inline-flex;
|
|
98
99
|
align-items: center;
|
|
99
|
-
`,
|
|
100
|
-
${({$iconAlign:
|
|
101
|
-
`,
|
|
100
|
+
`,bo=(0,p.default)(B.Container)`
|
|
101
|
+
${({$iconAlign:o})=>L(o)};
|
|
102
|
+
`,Ro=p.default.div``;0&&(module.exports={Button});
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mobilestockweb/button",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"chroma-js": "^3.1.2",
|
|
7
|
-
"@mobilestockweb/clickable": "^1.0.10",
|
|
8
|
-
"@mobilestockweb/icons": "^0.3.0",
|
|
9
7
|
"@mobilestockweb/container": "^1.0.0",
|
|
8
|
+
"@mobilestockweb/clickable": "^1.0.11",
|
|
9
|
+
"@mobilestockweb/icons": "^0.4.0",
|
|
10
10
|
"@mobilestockweb/tools": "^0.0.16",
|
|
11
11
|
"@mobilestockweb/typography": "^0.0.6"
|
|
12
12
|
},
|