@bouko/react 2.1.7 → 2.1.9

package/dist/assets/icons/angles-right.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/check copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
+    <path 
+        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/check-circle copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/chevron copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/paperclip copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
+    <path 
+        d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/spinner copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z" 
+        fill="currentColor" 
+    />
+</svg>

package/dist/assets/icons/x-circle copy.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
+    <path 
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" 
+        fill="currentColor" 
+    />
+</svg>

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

@@ -18,12 +18,8 @@ type Props<T> = FormSection<T> & {
     fields: FormBuilderField<T>;
     validator: ZodTypeAny;
     sound?: string;
-    submit: {
-        label?: string;
-        icon?: React.ReactNode;
-        action: (data: T) => void;
-        cancel?: boolean;
-    };
+    cancel?: boolean;
+    action: (data: T) => Promise<void | never>;
 };
 export declare function useSound(filename?: string): import("use-sound/dist/types").PlayFunction | undefined;
-export declare function FormBuilder<T>({ fields, validator, id, data, styles, update, setField, submit, sound, clear }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function FormBuilder<T>({ fields, validator, id, data, styles, update, setField, action, cancel, sound, clear }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/form/index.js

@@ -1,9 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { cn } from "@bouko/style";
 import CheckCircle from "../../assets/icons/check-circle.svg";
-import Spinner from "../../assets/icons/spinner.svg";
 import XCircle from "../../assets/icons/x-circle.svg";
 import { default as base } from "use-sound";
 export * from "./functions";
@@ -21,15 +19,12 @@ export function useSound(filename) {
         return;
     return base(filename)[0];
 }
-export async function FormBuilder({ fields, validator, id, data, styles, update, setField, submit, sound, clear }) {
+export async function FormBuilder({ fields, validator, id, data, styles, update, setField, action, cancel = false, sound, clear }) {
     const fields2 = await loadJson("forms/" + id);
     const isValid = validator.safeParse(data).success;
-    const [isLoading, setLoading] = useState(false);
     const play = useSound(sound);
     const handleSubmit = async () => {
-        setLoading(true);
-        await submit.action(data);
-        setLoading(false);
+        await action(data);
     };
     return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [(fields2 ?? fields).map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
                     if (element === "input")
@@ -42,5 +37,5 @@ export async function FormBuilder({ fields, validator, id, data, styles, update,
                         return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: update, note: note, required: required }, id));
                     else if (element === "attachment")
                         return (_jsx(Attachment, { id: id, label: label, value: data[id], update: update, note: note, required: required }, id));
-                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx("div", { className: isLoading ? "hidden" : "", children: submit.icon || _jsx(CheckCircle, {}) }), submit.label || "Submit"] }), submit.cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
+                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid, children: [_jsx("div", { children: _jsx(CheckCircle, {}) }), "Submit"] }), cancel !== false && (_jsxs(Button, { style: cn("text-sm text-error hover:text-error-light", styles?.cancel), variant: "ghost", onClick: clear, children: [_jsx(XCircle, {}), "Cancel"] }))] })] }));
 }

package/dist/hooks/clock/interval.d.ts

@@ -1 +1 @@
-export default function useInterval(action: () => boolean | void, delay: number): void;
+export default function useInterval(action: () => Promise<boolean | void>, delay: number): void;

package/dist/hooks/clock/interval.js

@@ -1,13 +1,13 @@
 "use client";
 import { useEffect, useRef } from "react";
 export default function useInterval(action, delay) {
-    const ref = useRef(() => false);
+    const ref = useRef(async () => false);
     useEffect(() => {
         ref.current = action;
     }, [action]);
     useEffect(() => {
-        const tick = () => {
-            const stop = ref.current();
+        const tick = async () => {
+            const stop = await ref.current();
             if (stop && id)
                 clearInterval(id);
         };

package/package.json

@@ -1,35 +1,60 @@
 {
 
   "name": "@bouko/react",
-  "version": "2.1.7",
+
+  "version": "2.1.9",
+
   "main": "./dist/index.js",
+
   "types": "./dist/index.d.ts",
+
   "license": "MIT",
+
   "files": [
+
     "dist"
+
   ],
+
   "publishConfig": {
+
     "access": "public"
+
   },
+
   "author": "",
+
   "description": "",
+
   "engines": {},
 
   "scripts": {
+
     "build": "tsc"
+
   },
 
   "dependencies": {
+
     "@bouko/audio": "^0.1.0",
+
     "@bouko/style": "^0.1.6",
+
     "clsx": "^2.1.1",
+
     "file-type": "^21.0.0",
+
     "framer-motion": "^12.23.6",
+
+    "ms": "^2.1.3",
+
     "tailwind-merge": "^3.3.1",
+
     "tailwind-variants": "^1.0.0",
+
     "zod": "^4.0.13"
-  },
 
-  "devDependencies": {}
+  }
+
+}
 
-}