@purr-react-styled-components/components.button 0.0.1

package/dist/_components.d.ts

@@ -0,0 +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;

package/dist/_style.d.ts

@@ -0,0 +1,8 @@
+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;
+};

package/dist/_types.d.ts

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export type TButtonSize = "small" | "medium" | "large";
+export type TButtonVariant = "outlined" | "contained" | "text";
+export interface IButtonProps {
+    size?: TButtonSize;
+    variant?: TButtonVariant;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    loading?: boolean;
+    loadingComponent?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+}

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,26 @@
+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({
+    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
+}) => {
+  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 });
+};
+export {
+  z as Button
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@purr-react-styled-components/components.button",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "clsx": "*",
+    "styled-components": "*",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@purr-react-styled-components/components.loading-ripple": "0.0.1"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}