@purr-react-styled-components/components.button 0.0.4 → 0.0.6

package/dist/_components.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { IButtonProps } from './_types';
 
-export declare const Button: ({ variant, size, loading, loadingComponent, className, htmlAttributes, children, onClick, }: IButtonProps) => React.JSX.Element;
+export declare const Button: ({ loading, loadingComponent, className, htmlAttributes, children, onClick, }: IButtonProps) => React.JSX.Element;

package/dist/_style.d.ts

@@ -1,8 +1,3 @@
-import { TButtonSize, TButtonVariant } from './_types';
-
 export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-        $size: TButtonSize;
-        $variant: TButtonVariant;
-    }>> & string;
+    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("clsx"),b=require("react"),g=require("@purr-react-styled-components/components.loading-ripple"),t=require("styled-components"),x=e=>(e==null?void 0:e.$size)==="small"?t.css(["height:24px;padding:0 16px;"]):(e==null?void 0:e.$size)==="medium"?t.css(["height:36px;padding:0 20px;"]):t.css(["height:48px;padding:0 24px;"]),f=e=>(e==null?void 0:e.$variant)==="contained"?t.css(["color:rgba(0,0,0,0.87);background-color:rgb(144,202,249);border:1px solid rgb(144,202,249);&:hover{background-color:rgb(66,165,245);}"]):(e==null?void 0:e.$variant)==="outlined"?t.css(["color:rgb(144,202,249);background-color:transparent;border:1px solid rgba(144,202,249,0.5);&:hover{background-color:rgba(144,202,249,0.08);border:1px solid rgb(144,202,249);}"]):t.css(["color:rgb(144,202,249);background-color:transparent;border:1px solid transparent;&:hover{background-color:rgba(144,202,249,0.08);}"]),h={Container:t.button.withConfig({displayName:"_style__Container",componentId:"sc-1ssweka-0"})(["display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background-color:transparent;box-shadow:none;outline:none;overflow:hidden;border-radius:4px;min-width:64px;padding:6px 12px;font-weight:500;cursor:pointer;",";",";&:hover,&:focus{outline:0;text-decoration:none;}"],x,f)},m=({variant:e="text",size:r="medium",loading:n=!1,loadingComponent:o,className:c,htmlAttributes:s,children:i,onClick:u})=>{const d=b.useMemo(()=>n?o??a.jsx(g.LoadingRipple,{size:16,fullScreen:!1}):i,[i,n,o]);return a.jsx(h.Container,{...s,$variant:e,$size:r,onClick:u,className:l("button",`button--size-${r}`,`button--variant-${e}`,n&&"button--loading",c),children:d})};exports.Button=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("clsx"),a=require("react"),l=require("@purr-react-styled-components/components.loading-ripple"),d=require("styled-components"),p={Container:d.button.withConfig({displayName:"_style__Container",componentId:"sc-1ssweka-0"})(["display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background-color:transparent;box-shadow:none;outline:none;overflow:hidden;border-radius:6px;min-width:64px;min-height:32px;padding:0px 15px;cursor:pointer;border:1px solid #d9d9d9;background-color:#ffffff;&:hover,&:focus{outline:0;text-decoration:none;background-color:#0000000a;}"])},f=({loading:e=!1,loadingComponent:t,className:r,htmlAttributes:s,children:n,onClick:i})=>{const c=a.useMemo(()=>e?t??o.jsx(l.LoadingRipple,{size:16,fullScreen:!1}):n,[n,e,t]);return o.jsx(p.Container,{...s,onClick:i,className:u("button",e&&"button--loading",r),children:c})};exports.Button=f;

package/dist/index.js

@@ -1,26 +1,24 @@
-import { jsx as a } from "react/jsx-runtime";
-import b from "clsx";
-import { useMemo as g } from "react";
-import { LoadingRipple as s } from "@purr-react-styled-components/components.loading-ripple";
-import m, { css as r } from "styled-components";
-const f = (t) => (t == null ? void 0 : t.$size) === "small" ? r(["height:24px;padding:0 16px;"]) : (t == null ? void 0 : t.$size) === "medium" ? r(["height:36px;padding:0 20px;"]) : r(["height:48px;padding:0 24px;"]), x = (t) => (t == null ? void 0 : t.$variant) === "contained" ? r(["color:rgba(0,0,0,0.87);background-color:rgb(144,202,249);border:1px solid rgb(144,202,249);&:hover{background-color:rgb(66,165,245);}"]) : (t == null ? void 0 : t.$variant) === "outlined" ? r(["color:rgb(144,202,249);background-color:transparent;border:1px solid rgba(144,202,249,0.5);&:hover{background-color:rgba(144,202,249,0.08);border:1px solid rgb(144,202,249);}"]) : r(["color:rgb(144,202,249);background-color:transparent;border:1px solid transparent;&:hover{background-color:rgba(144,202,249,0.08);}"]), h = {
-  Container: m.button.withConfig({
+import { jsx as n } from "react/jsx-runtime";
+import d from "clsx";
+import { useMemo as l } from "react";
+import { LoadingRipple as c } from "@purr-react-styled-components/components.loading-ripple";
+import f from "styled-components";
+const p = {
+  Container: f.button.withConfig({
     displayName: "_style__Container",
     componentId: "sc-1ssweka-0"
-  })(["display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background-color:transparent;box-shadow:none;outline:none;overflow:hidden;border-radius:4px;min-width:64px;padding:6px 12px;font-weight:500;cursor:pointer;", ";", ";&:hover,&:focus{outline:0;text-decoration:none;}"], f, x)
-}, z = ({
-  variant: t = "text",
-  size: e = "medium",
-  loading: n = !1,
-  loadingComponent: o,
-  className: d,
-  htmlAttributes: c,
-  children: i,
-  onClick: l
+  })(["display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;background-color:transparent;box-shadow:none;outline:none;overflow:hidden;border-radius:6px;min-width:64px;min-height:32px;padding:0px 15px;cursor:pointer;border:1px solid #d9d9d9;background-color:#ffffff;&:hover,&:focus{outline:0;text-decoration:none;background-color:#0000000a;}"])
+}, g = ({
+  loading: o = !1,
+  loadingComponent: t,
+  className: r,
+  htmlAttributes: i,
+  children: e,
+  onClick: s
 }) => {
-  const u = g(() => n ? o ?? /* @__PURE__ */ a(s, { size: 16, fullScreen: !1 }) : i, [i, n, o]);
-  return /* @__PURE__ */ a(h.Container, { ...c, $variant: t, $size: e, onClick: l, className: b("button", `button--size-${e}`, `button--variant-${t}`, n && "button--loading", d), children: u });
+  const a = l(() => o ? t ?? /* @__PURE__ */ n(c, { size: 16, fullScreen: !1 }) : e, [e, o, t]);
+  return /* @__PURE__ */ n(p.Container, { ...i, onClick: s, className: d("button", o && "button--loading", r), children: a });
 };
 export {
-  z as Button
+  g as Button
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.button",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,8 +25,8 @@
     "react": "*",
     "clsx": "*",
     "styled-components": "*",
-    "@purr-core/utils.definitions": "0.0.7",
-    "@purr-react-styled-components/components.loading-ripple": "0.0.4"
+    "@purr-core/utils.definitions": "0.0.9",
+    "@purr-react-styled-components/components.loading-ripple": "0.0.6"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",