@mobilestockweb/button 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes } from 'react';
+
+interface PropsButton extends ButtonHTMLAttributes<HTMLButtonElement> {
+    text?: string;
+    isLoading?: boolean;
+}
+declare function Button({ isLoading, text, children, ...rest }: PropsButton): react_jsx_runtime.JSX.Element;
+
+export { type PropsButton, Button as default };

package/dist/index.js

@@ -0,0 +1,42 @@
+"use strict";var y=Object.create;var s=Object.defineProperty,B=Object.defineProperties,w=Object.getOwnPropertyDescriptor,L=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertyNames,i=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var u=(t,r,o)=>r in t?s(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o,p=(t,r)=>{for(var o in r||(r={}))m.call(r,o)&&u(t,o,r[o]);if(i)for(var o of i(r))c.call(r,o)&&u(t,o,r[o]);return t},d=(t,r)=>B(t,L(r));var f=(t,r)=>{var o={};for(var e in t)m.call(t,e)&&r.indexOf(e)<0&&(o[e]=t[e]);if(t!=null&&i)for(var e of i(t))r.indexOf(e)<0&&c.call(t,e)&&(o[e]=t[e]);return o};var H=(t,r)=>{for(var o in r)s(t,o,{get:r[o],enumerable:!0})},g=(t,r,o,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of $(r))!m.call(t,n)&&n!==o&&s(t,n,{get:()=>r[n],enumerable:!(e=w(r,n))||e.enumerable});return t};var M=(t,r,o)=>(o=t!=null?y(v(t)):{},g(r||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>g(s({},"__esModule",{value:!0}),t);var T={};H(T,{default:()=>x});module.exports=P(T);var h=require("@mui/material"),b=M(require("styled-components"));var a=require("react/jsx-runtime");function x(n){var l=n,{isLoading:t,text:r,children:o}=l,e=f(l,["isLoading","text","children"]);return(0,a.jsx)(S,d(p({},e),{children:t?(0,a.jsx)(h.CircularProgress,{className:"circular"}):(0,a.jsx)("span",{className:"emphasis",children:r||o})}))}var S=b.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;
+
+  cursor: pointer;
+
+  box-shadow: 0 0.25rem 0.25rem ${({theme:t})=>t.colors.button.shadow};
+  border: none;
+  border-radius: 0.4rem;
+  background-color: ${({theme:t})=>t.colors.button.default};
+  color: ${({theme:t})=>t.colors.text.default};
+  svg {
+    font-size: 1.6rem;
+    margin-right: 0.3rem;
+  }
+  &:hover {
+    opacity: 0.8;
+  }
+  .emphasis {
+    text-transform: uppercase;
+  }
+  .circular {
+    width: 1rem !important;
+    height: 1rem !important;
+    color: ${({theme:t})=>t.colors.text.default};
+    svg {
+      margin-right: 0;
+    }
+  }
+  &:disabled {
+    opacity: 0.7;
+  }
+`;

package/package.json

@@ -1,21 +1,37 @@
 {
   "name": "@mobilestockweb/button",
-  "version": "0.0.2",
-  "main": "./src/index.tsx",
+  "version": "0.0.4",
+  "main": "./dist/index.js",
   "files": [
-    "*"
+    "./dist/*"
   ],
   "exports": {
     ".": {
-      "default": "./src/index.tsx"
+      "default": "./dist/index.js"
     }
   },
-  "dependencies": {
-    "@mui/material": "^5.15.13"
+  "tsup": {
+    "entry": [
+      "src/index.tsx"
+    ],
+    "minify": true,
+    "dts": true,
+    "clean": true,
+    "tsconfig": "../../../../../tsconfig.base.json",
+    "external": [
+      "react",
+      "react-dom",
+      "styled-components",
+      "@mui/material"
+    ]
+  },
+  "scripts": {
+    "prepublishOnly": "tsup"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.8"
+    "react": "*",
+    "react-dom": "*",
+    "styled-components": "*",
+    "@mui/material": "*"
   }
 }

package/src/index.tsx

@@ -1,62 +0,0 @@
-import { CircularProgress } from '@mui/material'
-import { ButtonHTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-export interface PropsButton extends ButtonHTMLAttributes<HTMLButtonElement> {
-  text?: string
-  isLoading?: boolean
-}
-
-export default function Button(props: PropsButton) {
-  return (
-    <ButtonStyle {...props}>
-      <span className="emphasis">
-        {props.isLoading ? <CircularProgress className="circular" /> : <>{props.text}</>}
-      </span>
-      {props.isLoading || props.children}
-    </ButtonStyle>
-  )
-}
-
-const ButtonStyle = styled.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;
-
-  cursor: pointer;
-
-  box-shadow: 0 0.25rem 0.25rem ${({ theme }) => theme.colors.button.shadow};
-  border: none;
-  border-radius: 0.4rem;
-  background-color: ${({ theme }) => theme.colors.button.default};
-  color: ${({ theme }) => theme.colors.text.default};
-  svg {
-    font-size: 1.6rem;
-    margin-right: 0.3rem;
-  }
-  &:hover {
-    opacity: 0.8;
-  }
-  .emphasis {
-    text-transform: uppercase;
-  }
-  .circular {
-    width: 1rem !important;
-    height: 1rem !important;
-    color: ${({ theme }) => theme.colors.text.default};
-    svg {
-      margin-right: 0;
-    }
-  }
-  &:disabled {
-    opacity: 0.7;
-  }
-`