@bouko/react 2.4.7 → 2.4.8

package/dist/components/button/normal.d.ts

@@ -1,11 +1,12 @@
-import type { ReactNode } from "react";
+import { ReactNode } from "react";
 export declare type ButtonProps = {
     variant?: "primary" | "outline" | "ghost";
     size?: "xs" | "sm" | "md" | "lg";
     style?: string;
-    onClick?: () => void;
+    icon?: ReactNode;
+    action?: () => void;
     disabled?: boolean;
     children: ReactNode;
 };
-export declare function Button({ size, variant, style, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ size, variant, style, icon, action, disabled, children }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/button/normal.js

@@ -1,7 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { cn, tv } from "@bouko/style";
-export function Button({ size, variant, style, ...props }) {
-    return (_jsx("button", { className: cn(styles({ variant, size }), style), ...props }, void 0));
+import Spinner from "../../assets/icons/spinner.svg";
+export function Button({ size, variant, style, icon, action, disabled, children }) {
+    const [isLoading, setLoading] = useState(false);
+    const submit = async () => {
+        setLoading(true);
+        try {
+            await action?.();
+        }
+        catch { }
+        setLoading(false);
+    };
+    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
+                ? _jsx(Spinner, { className: "animate-spin" }, void 0)
+                : icon, children] }, void 0));
 }
 const styles = tv({
     base: "flex justify-center items-center gap-2 bg-accent hover:bg-accent-dark border border-accent-dark rounded font-semibold text-background-light duration-200 cursor-pointer disabled:cursor-not-allowed",
@@ -10,7 +24,7 @@ const styles = tv({
         variant: {
             primary: "bg-primary hover:bg-primary-dark border-primary-dark",
             outline: "!bg-transparent border-accent hover:border-accent-dark text-primary",
-            ghost: "!bg-transparent border-transparent text-accent hover:text-accent-dark"
+            ghost: "!p-0 !bg-transparent border-transparent text-accent hover:text-accent-dark hover:brightness-110"
         },
         size: {
             xs: "px-3 py-1 text-xs",

package/dist/components/index.d.ts

@@ -4,8 +4,6 @@ export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
 export { default as Button } from "./button/normal";
-export { default as LoadButton } from "./button/load";
-export { default as GhostButton } from "./button/ghost";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/index.js

@@ -4,8 +4,6 @@ export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
 export { default as Button } from "./button/normal";
-export { default as LoadButton } from "./button/load";
-export { default as GhostButton } from "./button/ghost";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/dist/components/search-bar.js

@@ -7,7 +7,7 @@ import { RowBox } from "./layout/flex";
 import { Button } from "./button/normal";
 export function SearchBar({ style, placeholder, action }) {
     const [query, search] = useState("");
-    return (_jsxs(RowBox, { style: cn(styles.container, style?.container), children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: cn("w-full outline-none text-lg placeholder-slate-500 tracking-wide", style?.input), placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }, void 0), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" }, void 0)] }, void 0), _jsxs(Button, { size: "xs", style: cn("font-mono text-sm font-extrabold", style?.trigger), onClick: () => action(query), children: ["GO ", _jsx(AnglesRight, {}, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(RowBox, { style: cn(styles.container, style?.container), children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: cn("w-full outline-none text-lg placeholder-slate-500 tracking-wide", style?.input), placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }, void 0), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" }, void 0)] }, void 0), _jsxs(Button, { size: "xs", style: cn("font-mono text-sm font-extrabold", style?.trigger), action: () => action(query), children: ["GO ", _jsx(AnglesRight, {}, void 0)] }, void 0)] }, void 0));
 }
 const styles = {
     container: "items-center gap-6 w-xl max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",