@bouko/react 3.2.3 → 3.2.4

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

@@ -1,6 +1,7 @@
-import type { Clickable } from "../../core/types";
+import { Clickable } from "../../core/types";
 type Props = Clickable & {
     variant?: "accent" | "primary" | "outline" | "ghost" | "secondary" | "error" | "future";
+    label?: React.ReactNode;
 };
-export declare function IconButton({ variant, style, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ label, variant, style, icon, action, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/components/button/icon.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RowBox } from "../layout/flex";
 import Check from "../../assets/icons/check.svg";
-export function IconButton({ variant, style, icon, action, disabled = false }) {
-    return (_jsx("button", { className: cn(styles({ variant }), style), onClick: action, disabled: !action || disabled, children: icon || _jsx(Check, {}) }));
+import { cn, tv } from "@bouko/style";
+export function IconButton({ label, variant, style, icon, action, disabled = false }) {
+    const Button = () => (_jsx("button", { className: cn(styles({ variant }), style), onClick: action, disabled: !action || disabled, children: icon || _jsx(Check, {}) }));
+    if (label)
+        return (_jsxs(RowBox, { style: "items-center gap-1", children: [_jsx(Button, {}), _jsx("span", { className: "text-xs text-primary-darker", children: label })] }));
+    return _jsx(Button, {});
 }
 const styles = tv({
     base: "flex justify-center items-center p-2 rounded-full outline-none border text-sm text-primary-dark duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-115",

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/normal.js

@@ -13,7 +13,7 @@ export function Button({ size, variant, style, icon, action, disabled, children
         catch { }
         setLoading(false);
     };
-    return (_jsxs("button", { className: cn(styles({ variant, size }), variant === "ghost" && "p-0", style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
+    return (_jsxs("button", { className: cn(styles({ variant, size }), style), onClick: submit, disabled: disabled || isLoading, children: [icon && isLoading
                 ? _jsx(Spinner, { className: "animate-spin" })
                 : icon, children] }));
 }

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/date/_.d.ts

@@ -0,0 +1 @@
+export { default as TimeAgo } from "./time-ago";

package/dist/components/date/_.js

@@ -0,0 +1 @@
+export { default as TimeAgo } from "./time-ago";

package/dist/components/date/time-ago.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    style?: string;
+    prefix?: string;
+    date?: Date;
+};
+export default function TimeAgo({ style, prefix, date }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/date/time-ago.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactTimeAgo from "react-time-ago";
+export default function TimeAgo({ style, prefix, date }) {
+    if (!date)
+        return null;
+    return (_jsxs("span", { className: style, children: [_jsx("span", { className: "mr-1", children: prefix }), _jsx(ReactTimeAgo, { date: date, timeStyle: "mini-minute-now" })] }));
+}

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

@@ -22,3 +22,4 @@ export * from "./list";
 export * from "./carousel";
 export * from "./media-row";
 export * from "./scroll-box";
+export * from "./date/_";

package/dist/components/index.js

@@ -22,3 +22,4 @@ export * from "./list";
 export * from "./carousel";
 export * from "./media-row";
 export * from "./scroll-box";
+export * from "./date/_";

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/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,60 +1,112 @@
 {
 
   "name": "@bouko/react",
-  "version": "3.2.3",
+
+  "version": "3.2.4",
+
   "main": "./dist/index.js",
+
   "types": "./dist/index.d.ts",
+
   "license": "MIT",
+
   "files": [
+
     "dist"
+
   ],
+
   "publishConfig": {
+
     "access": "public"
+
   },
+
   "author": "",
+
   "description": "",
+
   "peerDependencies": {
+
     "react-router-dom": "^7.12.0"
+
   },
+
   "exports": {
+
     ".": "./dist/index.js",
+
     "./styles.css": "./dist/styles.css"
+
   },
+
   "engines": {},
 
   "scripts": {
+
     "build": "tsc",
+
     "postbuild": "node ./scripts/copy-styles.mjs"
+
   },
 
   "dependencies": {
+
     "@bouko/audio": "^0.1.0",
+
     "@bouko/form": "^0.5.7",
+
     "@bouko/notify": "^0.1.8",
+
     "@bouko/style": "^0.1.7",
+
     "@bouko/time": "^0.1.3",
+
     "@bouko/ts": "^0.3.5",
+
     "@supabase/supabase-js": "^2.90.1",
+
     "@wavesurfer/react": "^1.0.11",
+
     "clsx": "^2.1.1",
+
     "file-type": "^21.0.0",
+
     "framer-motion": "^12.23.6",
+
     "ms": "^2.1.3",
+
     "react-dropzone": "^14.3.8",
+
     "react-rnd": "^10.5.2",
+
+    "react-time-ago": "^7.4.4",
+
     "tailwind-merge": "^3.3.1",
+
     "tailwind-variants": "^1.0.0",
+
     "wavesurfer.js": "^7.10.1",
+
     "zod": "^4.0.13"
+
   },
 
   "devDependencies": {
+
     "@types/node": "^24.3.1",
+
     "@types/react": "^19.1.10",
+
     "dependency-cruiser": "^17.0.1",
+
     "react": "^19.1.1",
+
     "react-router-dom": "^7.12.0",
+
     "typescript": "^5.9.2"
+
   }
 
-}
+}
+

package/dist/assets/icons/trash.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
-    <path 
-        d="M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z" 
-        fill="currentColor" 
-    />
-</svg>

package/dist/assets/icons/upload.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
-    <path 
-        d="M352 173.3L352 384C352 401.7 337.7 416 320 416C302.3 416 288 401.7 288 384L288 173.3L246.6 214.7C234.1 227.2 213.8 227.2 201.3 214.7C188.8 202.2 188.8 181.9 201.3 169.4L297.3 73.4C309.8 60.9 330.1 60.9 342.6 73.4L438.6 169.4C451.1 181.9 451.1 202.2 438.6 214.7C426.1 227.2 405.8 227.2 393.3 214.7L352 173.3zM320 464C364.2 464 400 428.2 400 384L480 384C515.3 384 544 412.7 544 448L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 448C96 412.7 124.7 384 160 384L240 384C240 428.2 275.8 464 320 464zM464 488C477.3 488 488 477.3 488 464C488 450.7 477.3 440 464 440C450.7 440 440 450.7 440 464C440 477.3 450.7 488 464 488z" 
-        fill="currentColor" 
-    />
-</svg>