@purr-react-tailwindcss/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, classes, htmlAttributes, children, onClick, }: IButtonProps) => React.JSX.Element;

package/dist/_types.d.ts

@@ -0,0 +1,19 @@
+import { ClassValue } from 'clsx';
+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 IButtonClasses {
+    container?: ClassValue;
+}
+export interface IButtonProps {
+    size?: TButtonSize;
+    variant?: TButtonVariant;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    loading?: boolean;
+    loadingComponent?: ReactNode;
+    classes?: IButtonClasses;
+    children?: ReactNode;
+    htmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),a=require("clsx"),d=require("react"),c=require("@purr-react-tailwindcss/components.icon"),x={container:"animate-spin text-blue-300 w-4 h-4"},m=({variant:e="text",size:t="medium",loading:n=!1,loadingComponent:o,classes:r,htmlAttributes:i,children:u,onClick:l})=>{const s=d.useMemo(()=>n?o??b.jsx(c.Icon,{name:"loader-2",classes:x}):u,[u,n,o]);return b.jsx("button",{onClick:l,className:a("flex","items-center","justify-center","transition-all","duration-200","ease-in-out","shadow-none","outline-none","overflow-hidden","rounded","min-w-16","text-sm","font-medium","cursor-pointer","button",t==="small"?"h-6 px-4":"",t==="medium"?"h-9 px-5":"",t==="large"?"h-12 px-6":"",e==="contained"?"text-gray-900 bg-blue-300 border border-blue-300 hover:bg-blue-400":"",e==="outlined"?"text-blue-300 bg-transparent border border-blue-300 hover:border-blue-200 hover:text-blue-200":"",e==="text"?"text-blue-300 bg-transparent border border-transparent hover:text-blue-200":"",r==null?void 0:r.container),...i,children:s})};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,56 @@
+import { jsx as b } from "react/jsx-runtime";
+import i from "clsx";
+import { useMemo as a } from "react";
+import { Icon as x } from "@purr-react-tailwindcss/components.icon";
+const s = {
+  container: "animate-spin text-blue-300 w-4 h-4"
+}, g = ({
+  variant: e = "text",
+  size: t = "medium",
+  loading: o = !1,
+  loadingComponent: n,
+  classes: r,
+  htmlAttributes: m,
+  children: u,
+  onClick: l
+}) => {
+  const d = a(() => o ? n ?? /* @__PURE__ */ b(x, { name: "loader-2", classes: s }) : u, [u, o, n]);
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      onClick: l,
+      className: i(
+        "flex",
+        "items-center",
+        "justify-center",
+        "transition-all",
+        "duration-200",
+        "ease-in-out",
+        "shadow-none",
+        "outline-none",
+        "overflow-hidden",
+        "rounded",
+        "min-w-16",
+        "text-sm",
+        "font-medium",
+        "cursor-pointer",
+        "button",
+        t === "small" ? "h-6 px-4" : "",
+        t === "medium" ? "h-9 px-5" : "",
+        t === "large" ? "h-12 px-6" : "",
+        // variant === "contained"
+        //   ? "text-gray-900 !bg-blue-300 border border-blue-300 hover:!bg-blue-400"
+        //   : "",
+        e === "contained" ? "text-gray-900 bg-blue-300 border border-blue-300 hover:bg-blue-400" : "",
+        e === "outlined" ? "text-blue-300 bg-transparent border border-blue-300 hover:border-blue-200 hover:text-blue-200" : "",
+        e === "text" ? "text-blue-300 bg-transparent border border-transparent hover:text-blue-200" : "",
+        r == null ? void 0 : r.container
+      ),
+      ...m,
+      children: d
+    }
+  );
+};
+export {
+  g as Button
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@purr-react-tailwindcss/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": "*",
+    "@purr-core/utils.definitions": "0.0.5",
+    "@purr-react-tailwindcss/components.icon": "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"
+  }
+}