@bouko/react 2.3.4 → 2.3.6

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

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

package/dist/components/button/load.js

@@ -0,0 +1,35 @@
+"use state";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn, tv } from "@bouko/style";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
+export default function LoadButton({ size, variant, style, onClick, children, ...props }) {
+    const [isLoading, setLoading] = useState(false);
+    const submit = async () => {
+        setLoading(true);
+        try {
+            await onClick?.();
+        }
+        catch { }
+        setLoading(false);
+    };
+    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, ...props, children: [isLoading ? _jsx(Spinner, { className: "animate-spin" }) : _jsx(CheckCircle, {}), children] }));
+}
+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",
+    defaultVariants: { size: "md" },
+    variants: {
+        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"
+        },
+        size: {
+            xs: "px-3 py-1 text-xs",
+            sm: "px-4 py-2 text-xs sm:text-sm",
+            md: "px-4 py-2",
+            lg: "px-5 py-3 text-lg"
+        }
+    }
+});

package/dist/components/form/types.d.ts

@@ -35,3 +35,4 @@ export type OptionField<T> = Field<T> & {
 export type Form<T> = {
     data: T;
 };
+export type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { default as FadeBox } from "./layout/fade";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export { default as LoadButton } from "./button/load";
 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

@@ -3,6 +3,7 @@ export { default as FadeBox } from "./layout/fade";
 export { default as Heading } from "./heading/normal";
 export { default as PageHeading } from "./heading/page";
 export * from "./layout/flex";
+export { default as LoadButton } from "./button/load";
 export { default as Badge } from "./text/badge";
 export { default as Dropdown } from "./dropdown/normal";
 export { default as FileUploader } from "./upload/file";

package/package.json

@@ -2,7 +2,7 @@
 
   "name": "@bouko/react",
 
-  "version": "2.3.4",
+  "version": "2.3.6",
 
   "main": "./dist/index.js",