@bouko/react 2.7.0 → 2.7.2

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/animate/index.d.ts

@@ -6,6 +6,7 @@ export type Props = {
     duration?: number;
     style?: string;
     layout?: boolean;
+    onClick?: () => void;
     children?: ReactNode;
 };
 export declare function Animation({ variants, style, direction, interval, duration, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export default function Badge({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default 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/button/ghost.d.ts

@@ -0,0 +1,7 @@
+import type { Component, Clickable } from "../../core/types";
+export default function GhostButton({ style, action, children }: Component & Clickable): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Problems:
+ *
+ * - Perfect `Button`
+**/ 

package/dist/components/button/ghost.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./normal";
+import { cn } from "@bouko/style";
+export default function GhostButton({ style, action, children }) {
+    if (!children)
+        return null;
+    return (_jsx(Button, { variant: "ghost", style: cn("p-0 hover:brightness-110", style), onClick: action, children: children }));
+}

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/button.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 declare function Button({ size, variant, style, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export function Button({ size, variant, style, ...props }) {
+    return (_jsx("button", { className: cn(styles({ variant, size }), style), ...props }));
+}
+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/flex.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+type Props = Position & {
+    style?: string;
+    children: ReactNode;
+};
+type Position = {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+};
+export declare function ColumnBox({ style, center, centerX, centerY, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function RowBox({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/flex.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export function ColumnBox({ style, center, centerX, centerY, children }) {
+    return (_jsx("div", { className: cn("flex flex-col", center && "items-center justify-center", centerX && "items-center", centerY && "justify-center", style), children: children }));
+}
+export function RowBox({ style, children }) {
+    return (_jsx("div", { className: cn("flex", style), children: children }));
+}

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

@@ -0,0 +1,24 @@
+import { FormBuilderField } from "./types";
+type Props<T> = {
+    styles?: {
+        container?: string;
+        submit?: string;
+        cancel?: string;
+    };
+    id?: string;
+    button?: string;
+    fields: FormBuilderField<T>;
+    validator?: (x: Partial<T>) => ({
+        success: boolean;
+    });
+    sound?: string;
+    cancel?: boolean;
+    submit: (data: T, clear?: () => void) => Promise<void | never>;
+};
+type Item = {
+    id: string;
+    initial?: string;
+};
+export declare function mapIdToInitial<T>(arrays: Item[][]): Partial<T>;
+export default function FormBuilder<T>({ fields, button, styles, submit, cancel }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/form/builder.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useForm } from "./functions";
+import { cn } from "@bouko/style";
+import { RowBox } from "../layout/flex";
+import Input from "../input";
+import TextArea from "../textarea";
+import Select from "../select";
+import MultipleChoice from "../multiple-choice";
+import Attachment from "../attachment";
+import { Button } from "../button";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import XCircle from "../../assets/icons/x-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
+export function mapIdToInitial(arrays) {
+    const result = {};
+    for (const inner of arrays) {
+        for (const obj of inner) {
+            if ("initial" in obj && obj["initial"]) {
+                result[obj.id] = obj.initial;
+            }
+        }
+    }
+    return result;
+}
+export default function FormBuilder({ fields, button, styles, submit, cancel = false }) {
+    const initialShi = mapIdToInitial(fields);
+    const { data, setField, clear } = useForm(initialShi);
+    const [isLoading, setLoading] = useState(false);
+    const requiredFields = fields.flatMap(arr => arr.filter(item => item.required !== false));
+    const isValid = requiredFields.filter(x => {
+        const val = data[x.id];
+        return !val || val === "";
+    }).length === 0; // validator(data).success;
+    // const play = useSound(sound);
+    const handleSubmit = async () => {
+        setLoading(true);
+        try {
+            await submit(data, clear);
+        }
+        catch (err) {
+            let msg = err.message;
+            if (msg !== "NEXT_REDIRECT")
+                alert(msg);
+        }
+        setLoading(false);
+    };
+    return (_jsxs("div", { className: cn("flex flex-col w-full gap-4", styles?.container), children: [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")
+                        return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
+                    else if (element === "select")
+                        return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+                    else if (element === "textarea")
+                        return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+                    else if (element === "multiple-choice")
+                        return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+                    else if (element === "attachment")
+                        return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+                }) }, i))), _jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { style: cn("flex-1 text-sm", styles?.submit), onClick: handleSubmit, disabled: !isValid || isLoading, children: [_jsx("div", { className: cn(isLoading ? "hidden" : ""), children: _jsx(CheckCircle, {}) }), _jsx("div", { className: cn(isLoading ? "animate-spin" : "hidden"), children: _jsx(Spinner, {}) }), button || "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/form/fields.d.ts

@@ -0,0 +1,16 @@
+import { Field, Option } from "./types";
+export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = {
+    id?: string;
+    fields: FormBuilderField<T>;
+    data: T;
+    setField: (x: string, y: unknown) => void;
+};
+export default function Fields<T>({ fields, data, setField }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element[]>;
+export {};

package/dist/components/form/fields.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RowBox } from "../layout/flex";
+import Input from "../input";
+import Select from "../select";
+import TextArea from "../textarea";
+import MultipleChoice from "../multiple-choice";
+import Attachment from "../attachment";
+export default async function Fields({ fields, data, setField }) {
+    return 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")
+                return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
+            else if (element === "select")
+                return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "textarea")
+                return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "multiple-choice")
+                return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "attachment")
+                return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+        }) }, i)));
+}

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

@@ -0,0 +1,9 @@
+import type { ZodTypeAny } from "zod";
+type Props<T> = {
+    data: T;
+    validator: ZodTypeAny;
+    submit: (data: T) => void;
+    clear: () => void;
+};
+export default function FormFooter<T>({ data, validator, submit, clear }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/form/footer.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../button";
+import { RowBox } from "../layout/flex";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
+export default function FormFooter({ data, validator, submit, clear }) {
+    const isValid = validator.safeParse(data).success;
+    const [isLoading, setLoading] = useState(false);
+    const handleSubmit = async () => {
+        setLoading(true);
+        await submit(data);
+        setLoading(false);
+    };
+    return (_jsxs(RowBox, { style: "items-center gap-2 mt-2 w-full", children: [_jsxs(Button, { onClick: handleSubmit, disabled: !isValid || isLoading, children: [_jsx(Spinner, { className: isLoading ? "animate-spin" : "hidden" }), _jsx(CheckCircle, { className: isLoading ? "hidden" : "" }), "Create"] }), _jsx(Button, { variant: "ghost", onClick: clear, disabled: isLoading, children: "Cancel" })] }));
+}

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

@@ -0,0 +1,3 @@
+export { default as FormBuilder } from "./builder";
+export * from "./functions";
+export * from "./types";

package/dist/components/form/index.js

@@ -0,0 +1,3 @@
+export { default as FormBuilder } from "./builder";
+export * from "./functions";
+export * from "./types";

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

@@ -0,0 +1,3 @@
+import { FormBuilderField } from "./fields";
+export declare function loadJson<T>(name: string): Promise<T>;
+export declare function loadForm<T>(name?: string): Promise<FormBuilderField<T>>;

package/dist/components/form/loaders.js

@@ -0,0 +1,11 @@
+"use server";
+import { promises as fs } from "fs";
+export async function loadJson(name) {
+    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
+    return JSON.parse(file);
+}
+export async function loadForm(name) {
+    if (!name)
+        throw new Error("Form not found");
+    return loadJson(`forms/${name}`);
+}

package/dist/components/form/test-next.d.ts

@@ -0,0 +1 @@
+export declare function loadJson<T>(name: string): Promise<T>;

package/dist/components/form/test-next.js

@@ -0,0 +1,6 @@
+"use server";
+import { promises as fs } from "fs";
+export async function loadJson(name) {
+    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
+    return JSON.parse(file);
+}

package/dist/components/layout/heading.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+type Props = {
+    badge?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    style?: Styles;
+};
+type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * Problems
+ *
+ * - Perfect `mergeStyles`
+ * - Perfect `RowBox`
+ * - Perfect `ColumnBox`
+ * - Perfect `Badge`
+**/ 

package/dist/components/layout/heading.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "./flex";
+import { default as Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style = {} }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }), _jsx(RowBox, { style: styles.title, children: title }), _jsx(RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "items-center",
+    badge: "mb-2",
+    title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-primary-light dark:text-primary-dark"
+};

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+"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"
+};

package/dist/components/search-bar.d.ts

@@ -2,7 +2,7 @@ type Props<T> = {
     style?: Styles;
     placeholder?: string;
     trigger?: React.ReactNode;
-    submit: (query: string) => Promise<T>;
+    submit: (query: string) => void;
     oops?: (x: string) => void;
 };
 type Styles = {

package/dist/components/search-bar.js

@@ -19,7 +19,7 @@ export function SearchBar({ style = {}, placeholder, trigger, submit, oops = con
             oops(err.message);
         }
     };
-    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(FadeBox, { style: "grow", gradient: "from-slate-950", children: _jsx(Input, { variant: "ghost", style: styles.input, placeholder: placeholder, value: query, update: setQuery, onEnter: search }) }), trigger && (_jsx(Button, { variant: "ghost", style: style?.trigger, action: search, children: trigger }))] }));
+    return (_jsxs(RowBox, { style: styles.container, children: [_jsx(FadeBox, { style: "grow", gradient: "from-slate-950", children: _jsx(Input, { variant: "ghost", style: styles.input, placeholder: placeholder, value: query, update: setQuery, onEnter: search }) }), trigger && (_jsx(Button, { variant: "ghost", style: style?.trigger, action: search, disabled: query === "", children: trigger }))] }));
 }
 const base = {
     container: "items-center gap-3 sm:gap-5 w-xl max-w-full pl-4 sm:pl-5 pr-2 sm:pr-4 py-2 sm:py-3 bg-slate-950 border border-border rounded-md",

package/dist/hooks/color.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    variable: string;
+    color: string;
+    original: string;
+};
+export default function useColor({ variable, color, original }: Props): void;
+export {};

package/dist/hooks/color.js

@@ -0,0 +1,8 @@
+"use client";
+import { useEffect } from "react";
+export default function useColor({ variable, color, original }) {
+    useEffect(() => {
+        document.documentElement.style.setProperty(`--${variable}`, color);
+        return () => document.documentElement.style.setProperty(`--${variable}`, original);
+    }, []);
+}

package/package.json

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