@mobilestockweb/button 0.0.11 → 1.0.0

package/index.d.ts

@@ -1,10 +1,33 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonHTMLAttributes } from 'react';
+import { DefaultTheme } from 'styled-components';
+import React, { ReactElement } from 'react';
+import { ClickableProps } from '@mobilestockweb/clickable';
+import { ViewBaseProps } from '@mobilestockweb/container';
+import { IconName } from '@mobilestockweb/icons';
+import { TypographyProps } from '@mobilestockweb/typography';
 
-interface PropsButton extends ButtonHTMLAttributes<HTMLButtonElement> {
-    text?: string;
-    isLoading?: boolean;
+type Sizes = Uppercase<keyof DefaultTheme['font']['size'] & string>;
+type ButtonColor = Uppercase<keyof DefaultTheme['colors']['button'] & string>;
+type Shade = 'LIGHT' | 'DARK';
+type BackgroundColor = `${ButtonColor}_${Shade}` | ButtonColor;
+type Variant = 'DEFAULT' | 'LINK' | 'TRANSPARENT' | 'OUTLINE';
+type IconAlign = 'START' | 'BEFORE-TEXT' | 'AFTER-TEXT' | 'ABOVE-TEXT' | 'END';
+type TextAlign = 'START' | 'CENTER' | 'END';
+type NotificationPosition = 'ICON' | 'TEXT' | 'END';
+interface ButtonProps extends Omit<ClickableProps, 'children' | 'size'> {
+    text?: string | ReactElement;
+    disabled?: boolean;
+    circular?: boolean;
+    notification?: number;
+    size?: Sizes;
+    icon?: IconName;
+    fontWeight?: TypographyProps['weight'];
+    variant?: Variant;
+    iconAlign?: IconAlign;
+    textAlign?: TextAlign;
+    notificationPosition?: NotificationPosition;
+    backgroundColor?: BackgroundColor;
+    padding?: ViewBaseProps['padding'];
 }
-declare function Button({ isLoading, text, children, ...rest }: PropsButton): react_jsx_runtime.JSX.Element;
+declare const Button: React.NamedExoticComponent<ButtonProps>;
 
-export { type PropsButton, Button as default };
+export { Button, type ButtonProps };

package/index.js

@@ -1,38 +1,101 @@
-"use strict";var P=Object.create;var i=Object.defineProperty,S=Object.defineProperties,H=Object.getOwnPropertyDescriptor,M=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertyNames,a=Object.getOwnPropertySymbols,A=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var B=(o,t,n)=>t in o?i(o,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[t]=n,y=(o,t)=>{for(var n in t||(t={}))l.call(t,n)&&B(o,n,t[n]);if(a)for(var n of a(t))C.call(t,n)&&B(o,n,t[n]);return o},$=(o,t)=>S(o,M(t));var x=(o,t)=>{var n={};for(var r in o)l.call(o,r)&&t.indexOf(r)<0&&(n[r]=o[r]);if(o!=null&&a)for(var r of a(o))t.indexOf(r)<0&&C.call(o,r)&&(n[r]=o[r]);return n};var N=(o,t)=>{for(var n in t)i(o,n,{get:t[n],enumerable:!0})},L=(o,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!l.call(o,e)&&e!==n&&i(o,e,{get:()=>t[e],enumerable:!(r=H(t,e))||r.enumerable});return o};var u=(o,t,n)=>(n=o!=null?P(A(o)):{},L(t||!o||!o.__esModule?i(n,"default",{value:o,enumerable:!0}):n,o)),R=o=>L(i({},"__esModule",{value:!0}),o);var q={};N(q,{default:()=>k});module.exports=R(q);var s=u(require("styled-components"));var w=require("@mui/material"),d=u(require("styled-components")),m=u(require("@mobilestockweb/tools")),c=require("react/jsx-runtime");function T({isLoading:o,text:t,children:n,$color:r}){switch(!0){case o:return(0,c.jsx)(z,{className:"circular",$color:r});case!!t:return(0,c.jsx)(E,{$color:r,children:t});default:return n}}var z=(0,d.default)(w.CircularProgress)`
-  width: 1rem !important;
-  height: 1rem !important;
-  svg {
-    margin-right: 0;
-    color: ${({$color:o})=>m.default.defineTextColor(o)};
-  }
-`,E=d.default.span`
-  text-transform: uppercase;
-  color: ${({$color:o})=>m.default.defineTextColor(o)};
-`;var p=require("react/jsx-runtime");function k(e){var f=e,{isLoading:o,text:t,children:n}=f,r=x(f,["isLoading","text","children"]);var b,h;let g=(0,s.useTheme)();return(0,p.jsx)(O,$(y({},r),{$backgroundColor:((b=r==null?void 0:r.style)==null?void 0:b.backgroundColor)||g.colors.button.default,children:(0,p.jsx)(T,{isLoading:o,text:t,$color:((h=r==null?void 0:r.style)==null?void 0:h.backgroundColor)||g.colors.button.default,children:n})}))}var O=s.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 100%;
-  min-height: 3rem;
-  padding: 0.9rem 1rem;
-
-  font-size: 0.9rem;
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 400;
+"use strict";var at=Object.create;var x=Object.defineProperty,st=Object.defineProperties,ct=Object.getOwnPropertyDescriptor,lt=Object.getOwnPropertyDescriptors,dt=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,ut=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var F=(t,e,o)=>e in t?x(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(y)for(var o of y(e))X.call(e,o)&&F(t,o,e[o]);return t},O=(t,e)=>st(t,lt(e));var V=(t,e)=>{var o={};for(var i in t)$.call(t,i)&&e.indexOf(i)<0&&(o[i]=t[i]);if(t!=null&&y)for(var i of y(t))e.indexOf(i)<0&&X.call(t,i)&&(o[i]=t[i]);return o};var ft=(t,e)=>{for(var o in e)x(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&&x(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?x(o,"default",{value:t,enumerable:!0}):o,t)),pt=t=>W(x({},"__esModule",{value:!0}),t);var Rt={};ft(Rt,{Button:()=>tt});module.exports=pt(Rt);var b=p(require("react")),d=p(require("styled-components")),Y=require("@mobilestockweb/clickable"),N=require("@mobilestockweb/container"),q=p(require("@mobilestockweb/tools")),Q=require("@mobilestockweb/typography");var h=p(require("chroma-js")),n=require("styled-components"),A=p(require("@mobilestockweb/tools"));function C(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 M(t,e,o){let i=C(e,o);switch(t){case"DEFAULT":return n.css`
+        background-color: ${(0,h.default)(i).shade(.5).css()};
+      `;case"OUTLINE":return n.css`
+        border: 2px solid ${(0,h.default)(i).shade(.5).css()};
+      `;default:return""}}function H(t,e,o){let i=C(e,o);switch(t){case"DEFAULT":return n.css`
+        background-color: ${(0,h.default)(i).shade(.25).css()};
+      `;case"OUTLINE":return n.css`
+        border: 2px solid ${(0,h.default)(i).shade(.25).css()};
+      `;case"LINK":return n.css`
+        * {
+          color: ${i};
+        }
+      `;case"TRANSPARENT":return""}}function B(t){switch(t){case"START":return n.css`
+        justify-content: space-between;
+      `;case"BEFORE-TEXT":return n.css`
+        justify-content: center;
+      `;case"AFTER-TEXT":return n.css`
+        flex-direction: row-reverse;
+        justify-content: center;
+      `;case"ABOVE-TEXT":return n.css`
+        flex-direction: column;
+      `;case"END":return n.css`
+        flex-direction: row-reverse;
+        justify-content: space-between;
+      `}}function K(t){switch(t){case"START":return n.css`
+        justify-content: flex-start;
+      `;case"CENTER":return n.css`
+        justify-content: center;
+      `;case"END":return n.css`
+        justify-content: flex-end;
+      `}}function _(t,e,o){let i=C(e,o);switch(t){case"DEFAULT":return n.css`
+        background-color: ${i};
+        * {
+          color: ${A.default.defineTextColor(i)};
+        }
+      `;case"OUTLINE":return n.css`
+        border: 2px solid ${i};
+        * {
+          color: ${i};
+        }
+      `;case"LINK":return n.css`
+        * {
+          color: ${o.colors.text.default};
+        }
+      `;case"TRANSPARENT":return n.css`
+        * {
+          color: ${i};
+        }
+      `}}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],T=n.css`
+    padding: ${e?"0":a.padding};
+    border-radius: ${e?o.borderRadius.rounded:a.borderRadius};
+  `;if(e){let E=`${i*parseFloat(o.spacing[t.toLowerCase()])}rem`;return n.css`
+      ${T}
+      width: ${E};
+      min-height: ${E};
+    `}return T}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`
+  position: absolute;
+  background-color: ${({theme:t})=>t.colors.alert.urgent};
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.3rem;
 
+  ${({$position:t,$size:e})=>{if(t==="END")return g.css`
+        position: static;
+      `;let o=gt[e];return g.css`
+      top: ${o.top};
+      right: ${o.right};
+    `}}
+`,Tt=(0,g.default)(J.Typography)`
+  color: ${({theme:t})=>G.default.defineTextColor(t.colors.alert.urgent)} !important;
+`;var c=require("react/jsx-runtime");function L(t){let e=t.notification&&t.notificationPosition==="ICON";return t.icon?e?(0,c.jsxs)(R,{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 D(t){return t.text?t.notification&&t.notificationPosition==="TEXT"?(0,l.jsxs)(R,{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:N.Container},{name:"Typography",component:Q.Typography}],xt=Z.map(t=>t.component),tt=b.default.memo(function(bt){var v=bt,{variant:e="DEFAULT",size:o="MD",iconAlign:i="BEFORE-TEXT",backgroundColor:s="DEFAULT",notificationPosition:a="ICON",fontWeight:T="REGULAR",textAlign:E="CENTER",circular:z=!1,notification:u,text:f,isLoading:k,icon:w,disabled:ot,padding:et}=v,it=V(v,["variant","size","iconAlign","backgroundColor","notificationPosition","fontWeight","textAlign","circular","notification","text","isLoading","icon","disabled","padding"]);let nt=(0,b.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,O(U({},it),{ref:nt,isLoading:k,disabled:ot||k,size:o,$backgroundColor:s,$variant:e,$circular:z,children:(0,r.jsxs)(Ct,{padding:et,gap:o,align:"CENTER",$textAlign:E,$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)(D,{text:f,fontWeight:T,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)(D,{text:f,fontWeight:T,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")&&!z&&(0,r.jsx)(yt,{})]})}))}),ht=(0,d.default)(Y.Clickable)`
+  flex: 1;
   user-select: none;
+  ${({$variant:t,$backgroundColor:e,theme:o})=>_(t,e,o)}
+  ${({size:t,$circular:e,theme:o})=>j(t,e,o)}
 
-  cursor: pointer;
+  &:not(:disabled):hover {
+    ${({$variant:t,$backgroundColor:e,theme:o})=>H(t,e,o)}
+  }
 
-  box-shadow: 0 0.25rem 0.25rem ${({theme:o})=>o.colors.button.shadow};
-  border: none;
-  border-radius: 0.4rem;
-  background-color: ${({$backgroundColor:o})=>o};
-  &:hover {
-    opacity: 0.8;
+  &:not(:disabled):active {
+    transform: scale(0.98);
+    ${({$variant:t,$backgroundColor:e,theme:o})=>M(t,e,o)}
   }
-  &:disabled {
-    opacity: 0.7;
+
+  &:focus-visible {
+    outline-offset: 2px;
+
+    ${({$backgroundColor:t,theme:e})=>{let o=C(t,e);return d.css`
+        outline: 3px solid ${o};
+      `}}
   }
-`;
+`,Ct=(0,d.default)(N.Container)`
+  ${({$textAlign:t})=>K(t)};
+  ${({$iconAlign:t})=>t==="START"||t==="END"?B(t):""};
+`,R=d.default.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`,Et=(0,d.default)(N.Container)`
+  ${({$iconAlign:t})=>B(t)};
+`,yt=d.default.div``;0&&(module.exports={Button});

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@mobilestockweb/button",
-  "version": "0.0.11",
+  "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
-    "@mobilestockweb/tools": "^0.0.13"
+    "chroma-js": "^3.1.2",
+    "@mobilestockweb/clickable": "^1.0.0",
+    "@mobilestockweb/container": "^0.0.2",
+    "@mobilestockweb/icons": "^0.0.4",
+    "@mobilestockweb/typography": "^0.0.4",
+    "@mobilestockweb/tools": "^0.0.14"
   },
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "styled-components": "^6.1.8",
-    "@mui/material": "^6.1.10"
+    "styled-components": "^6.1.8"
   }
 }