@bouko/react 1.8.9 → 1.9.1

package/dist/components/badge.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from "react";
 export default function Badge({ style, children }: {
     style?: string;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/badge.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Badge({ style, children }) {
+export default async function Badge({ style, children }) {
     return (_jsx("span", { className: "w-min px-3 py-1 bg-accent/20 border border-accent-dark rounded-full text-xs text-accent-dark font-semibold", children: children }));
 }

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

@@ -20,6 +20,7 @@ type Props<T> = FormSection<T> & {
         label?: string;
         icon?: React.ReactNode;
         action: (data: T) => void;
+        cancel?: boolean;
     };
 };
 export declare function FormBuilder<T>({ fields, validator, data, styles, update, submit, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.js

@@ -33,5 +33,5 @@ export function FormBuilder({ fields, validator, data, styles, update, submit, c
                         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, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx("div", { className: isLoading ? "hidden" : "", children: submit.icon || _jsx(CheckCircle, {}) }), submit.label || "Submit"] }), _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, 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"] }))] })] }));
 }

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Heading, HeadingProps } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as Badge } from "./text/badge";
+export { default as FileUploader } from "./upload/file";
 export * from "./list";
 export * from "./form";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as Heading } from "./layout/heading";
 export { default as Separator } from "./layout/separator";
 export { default as Badge } from "./text/badge";
+export { default as FileUploader } from "./upload/file";
 export * from "./list";
 export * from "./form";

package/dist/components/input.js

@@ -3,5 +3,5 @@ import Field from "./field";
 import { cn } from "@bouko/style";
 import { setField } from "./form";
 export default function Input({ id, styles, style, label, required = true, note, update, ...props }) {
-    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-80 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
+    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
 }

package/dist/components/upload/file.d.ts

@@ -0,0 +1,8 @@
+import type { SetState } from "../form";
+type Props = {
+    style?: string;
+    accept?: string[];
+    update: SetState<File>;
+};
+export default function FileUploader({ style, accept, update }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/upload/file.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "@bouko/style";
+import PaperClip from "../../assets/icons/paperclip.svg";
+export default function FileUploader({ style, accept = [], update }) {
+    const ref = useRef(null);
+    const upload = () => ref.current?.click();
+    const save = (e) => update((e.target.files ?? [])[0]);
+    return (_jsxs("div", { className: cn(styles.container, style), onClick: upload, children: [_jsxs("span", { className: styles.title, children: [_jsx(PaperClip, {}), "Drag and drop a file, or"] }), _jsx("span", { className: styles.subtitle, children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: save, accept: accept.join(","), multiple: false, ref: ref })] }));
+}
+const styles = {
+    container: "flex flex-col justify-center items-center gap-1 w-full py-3 hover:bg-background-light/40 border-2 border-dashed border-border hover:border-border-light rounded overflow-hidden duration-200 cursor-pointer",
+    title: "flex gap-2 items-center font-semibold text-sm",
+    subtitle: "text-xs text-primary-darker"
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "1.8.9",
+  "version": "1.9.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -13,6 +13,7 @@
   },
   "author": "",
   "description": "",
+  "engines": {},
 
   "scripts": {
     "build": "tsc"
@@ -23,7 +24,8 @@
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.6",
     "tailwind-merge": "^3.3.0",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^1.0.0",
+    "zod": "^4.0.13"
   },
 
   "devDependencies": {}

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

@@ -1,6 +0,0 @@
-type Props = {
-    placeholder?: string;
-    action: (query: string) => void;
-};
-export default function SearchBar({ placeholder, action }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/search/index.js

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