@bouko/react 1.9.4 → 1.9.6

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

@@ -1,26 +1,12 @@
-import { type ReactNode } from "react";
-type Styles = {
-    container?: string;
-    text?: string;
-    title?: string;
-    subtitle?: string;
-};
-type Options = {
-    size?: "md" | "lg";
-    align?: "left" | "center";
-};
+import type { ReactNode } from "react";
 export type HeadingProps = {
-    options?: Options;
-    styles?: Styles;
+    styles?: Record<string, string>;
     container?: string;
     badge?: string;
     icon?: ReactNode;
     title: ReactNode;
-    size?: "md" | "lg";
     align?: "left" | "center";
     subtitle?: ReactNode;
     reverse?: boolean;
 };
-export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
-export default function Heading({ styles, options, container, badge, icon, title, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Heading({ styles, container, badge, icon, title, align, subtitle, reverse }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/heading.js

@@ -1,47 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
 import { RowBox, ColumnBox } from "../flex";
+import { cn } from "@bouko/style";
 import Badge from "../text/badge";
-import { cn, tv } from "@bouko/style";
-export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
-export default function Heading({ styles = {}, options = {}, container, badge, icon, title, subtitle, reverse }) {
-    const custom = test(options);
-    return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(custom.subcontainer(), reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx(RowBox, { style: cn(custom.title(), styles.title, styles.text), children: title }), subtitle && _jsx(RowBox, { style: cn(custom.subtitle(), styles.subtitle, styles.text), children: subtitle })] })] }));
+export default function Heading({ styles = {}, container, badge, icon, title, align = "left", subtitle, reverse }) {
+    return (_jsxs(RowBox, { style: cn(base.container, styles.container, container), children: [icon, _jsxs(ColumnBox, { style: cn(base.subcontainer, align === "center" && "items-center", reverse && "flex-col-reverse"), children: [badge && _jsx(Badge, { style: base.badge, children: badge }), _jsx("span", { className: cn(base.title, styles.title), children: title }), subtitle && _jsx("span", { className: cn(base.subtitle, styles.subtitle), children: subtitle })] })] }));
 }
 const base = {
     container: "gap-2 items-center",
+    subcontainer: "flex grow flex-col",
     badge: "mb-2",
+    title: "flex items-center gap-2 text-lg font-bold",
+    subtitle: "font-semibold text-primary-lighter"
 };
-const test = tv({
-    slots: {
-        subcontainer: "grow",
-        title: "items-center gap-2 text-xl font-bold text-primary",
-        subtitle: "items-center gap-2 font-semibold text-primary-light dark:text-primary-dark"
-    },
-    defaultVariants: {
-        size: "md",
-        align: "center"
-    },
-    variants: {
-        size: {
-            md: {
-                title: "text-xl 2xl:text-2xl",
-                subtitle: "text-base 2xl:text-lg"
-            },
-            lg: {
-                subcontainer: "gap-3",
-                title: "text-5xl 2xl:text-6xl",
-                subtitle: "text-sm sm:text-base 2xl:text-lg"
-            }
-        },
-        align: {
-            left: {
-                subcontainer: "items-start"
-            },
-            center: {
-                subcontainer: "items-center",
-                subtitle: "justify-center text-center"
-            }
-        }
-    }
-});

package/dist/next/src/components/layouts/locked.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+type LayoutProps = {
+    company: string;
+    fonts: string[];
+    providers: ({ children }: {
+        children: ReactNode;
+    }) => React.JSX.Element;
+    authorized: boolean;
+    children: ReactNode;
+};
+export default function LockedLayout({ company, fonts, providers, authorized, children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/next/src/components/layouts/locked.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// import Header from "@/components/layout/header";
+// import Footer from "@/components/layout/footer";
+import { cloneElement } from "react";
+import { cn } from "@bouko/style";
+export default function LockedLayout({ company, fonts, providers, authorized, children }) {
+    return (_jsx("html", { lang: "en", className: cn(...fonts, "scroll-smooth"), children: _jsx("body", { className: styles.body, children: cloneElement(providers({
+                children: (_jsx("main", { className: styles.container, children: _jsx("div", { className: styles.content, children: children }) }))
+            })) }) }));
+}
+const styles = {
+    body: "h-[100dvh] bg-background font-sans text-primary select-none sm:overflow-hidden antialiased",
+    container: "flex flex-col w-full h-full sm:overflow-hidden",
+    content: "flex grow justify-center items-start w-full sm:overflow-hidden"
+};

package/dist/react/src/components/animate/configs.d.ts

@@ -0,0 +1,136 @@
+export declare const animations: {
+    readonly fadeUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 30;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.3;
+            };
+        };
+    };
+    readonly fadeInAndOut: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+    };
+    readonly fadeUpAndOut: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 10;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 1;
+            readonly y: -10;
+        };
+    };
+    readonly fadeUpAndOutSlow: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: "-100%";
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly duration: 0.2;
+                readonly ease: "easeInOut";
+            };
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: "100%";
+        };
+    };
+    readonly fadeLeft: {
+        readonly initial: {
+            readonly x: -50;
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly x: 0;
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly x: 50;
+            readonly opacity: 0;
+        };
+        readonly transition: {
+            readonly duration: 0.4;
+            readonly ease: "easeOut";
+        };
+    };
+    readonly growUpAndOut: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly height: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly height: "auto";
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly height: 0;
+        };
+    };
+    readonly fadeStagger: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly transition: {
+                readonly staggerChildren: 0.2;
+            };
+        };
+    };
+    readonly fadeList: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly x: -10;
+            readonly y: 5;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly x: 0;
+            readonly y: 0;
+            readonly transition: {
+                readonly type: "spring";
+                readonly stiffness: 350;
+                readonly damping: 25;
+            };
+        };
+    };
+    readonly popUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.9;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.9;
+        };
+        readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: readonly [0.23, 1, 0.32, 1];
+        };
+    };
+};

package/dist/react/src/components/animate/configs.js

@@ -0,0 +1,62 @@
+export const animations = {
+    "fadeUp": {
+        "initial": { "opacity": 0, "y": 30 },
+        "animate": {
+            "opacity": 1,
+            "y": 0,
+            "transition": { "duration": 0.3 }
+        }
+    },
+    "fadeInAndOut": {
+        "initial": { "opacity": 0 },
+        "animate": { "opacity": 1 },
+        "exit": { "opacity": 0 }
+    },
+    "fadeUpAndOut": {
+        "initial": { "opacity": 0, "y": 10 },
+        "animate": { "opacity": 1, "y": 0 },
+        "exit": { "opacity": 1, "y": -10 }
+    },
+    "fadeUpAndOutSlow": {
+        "initial": { "opacity": 0, "y": "-100%" },
+        "animate": { "opacity": 1, "y": 0,
+            "transition": { "duration": 0.2, "ease": "easeInOut" }
+        },
+        "exit": { "opacity": 0, "y": "100%" }
+    },
+    "fadeLeft": {
+        "initial": { "x": -50, "opacity": 0 },
+        "animate": { "x": 0, "opacity": 1 },
+        "exit": { "x": 50, "opacity": 0 },
+        "transition": { "duration": 0.4, "ease": "easeOut" }
+    },
+    "growUpAndOut": {
+        "initial": { "opacity": 0, "height": 0 },
+        "animate": { "opacity": 1, "height": "auto" },
+        "exit": { "opacity": 0, "height": 0 }
+    },
+    "fadeStagger": {
+        "initial": { "opacity": 0 },
+        "animate": {
+            "opacity": 1,
+            "transition": { "staggerChildren": 0.2 }
+        }
+    },
+    "fadeList": {
+        "hidden": { "opacity": 0, "x": -10, "y": 5 },
+        "visible": {
+            "opacity": 1, "x": 0, "y": 0,
+            "transition": {
+                "type": "spring",
+                "stiffness": 350,
+                "damping": 25
+            }
+        }
+    },
+    "popUp": {
+        "initial": { "opacity": 0, "scale": 0.9 },
+        "animate": { "opacity": 1, "scale": 1 },
+        "exit": { "opacity": 0, "scale": 0.9 },
+        "transition": { "duration": 0.2, "ease": [0.23, 1, 0.32, 1] }
+    }
+};

package/dist/react/src/components/animate/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { animations } from "./configs";
+type Props = {
+    style?: string;
+    variant?: keyof typeof animations;
+    inherit?: boolean;
+    layout?: boolean;
+    ref?: React.RefObject<HTMLDivElement | null>;
+    children?: React.ReactNode;
+};
+export declare function Animation({ style, variant, inherit, layout, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/animate/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { animations } from "./configs";
+export function Animation({ style, variant = "fadeInAndOut", inherit, layout, children }) {
+    return (_jsx(motion.div, { className: style, variants: animations[variant], initial: inherit ? undefined : "initial", animate: inherit ? undefined : "animate", exit: inherit ? undefined : "exit", layout: layout, children: children }));
+}

package/dist/react/src/components/attachment.d.ts

@@ -0,0 +1,2 @@
+import { type Field } from "./form";
+export default function Attachment<T>({ id, style, label, value, update, required, note }: Field<T, File[]>): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/attachment.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import PaperClip from "../assets/icons/paperclip.svg";
+import { setField } from "./form";
+import { cn } from "@bouko/style";
+export default function Attachment({ id, style, label, value, update, required = true, note }) {
+    const ref = useRef(null);
+    const handleFileChange = (e) => {
+        if (e.target.files)
+            setField(update, id, [e.target.files[0]]);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { onClick: () => ref.current?.click(), className: "flex flex-col justify-center items-center py-3 gap-1 w-full cursor-pointer duration-200 hover:bg-slate-200/40 rounded border-2 border-slate-300 border-dashed", children: [!value || value.length === 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex gap-2 items-center font-semibold text-sm", children: [_jsx(PaperClip, {}), "Drag and drop files, paste screenshots, or"] }), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }), _jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref })] })), value && value.length > 0 && value.map((x, i) => (_jsx("span", { className: "text-xs text-slate-500", children: x.name }, i)))] }), note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col gap-2 w-full shrink-0 overflow-hidden",
+    label: "text-xs text-slate-600",
+    input: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/react/src/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/react/src/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 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/react/src/components/checkbox.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    style?: string;
+    label: string;
+    value: boolean;
+    update: (x: boolean) => void;
+};
+export default function Checkbox({ style, label, value, update }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/checkbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Check from "../assets/icons/check.svg";
+import { cn } from "@bouko/style";
+export default function Checkbox({ style, label, value, update }) {
+    const isChecked = !!value;
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsx("div", { className: cn(styles.box, isChecked && "bg-accent"), onClick: () => update(!isChecked), children: isChecked && _jsx(Check, { className: styles.check }) }), _jsx("span", { className: styles.label, children: label })] }));
+}
+const styles = {
+    container: "flex gap-3 items-center",
+    box: "flex justify-center items-center size-4 min-w-4 hover:bg-accent border rounded border-border-light duration-200 cursor-pointer",
+    check: "size-2 text-background",
+    label: "text-xs text-primary-dark"
+};

package/dist/react/src/components/dropdown/normal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type Option = {
+    label: ReactNode;
+    action: () => void;
+};
+export default function Dropdown({ options, children }: {
+    options: Option[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/dropdown/normal.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+export default function Dropdown({ options, children }) {
+    const [isOpen, setOpen] = useState(false);
+    const boom = (action) => {
+        action();
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { onClick: () => setOpen(true), children: children }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ label, action }, i) => (_jsx("div", { className: "cursor-pointer duration-200 hover:brightness-115", onClick: () => boom(action), children: label }, i))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative shrink-0",
+    subcontainer: "flex flex-col gap-1 w-full",
+    label: "text-xs text-slate-600",
+    trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
+    dropdown: "absolute mt-2 z-50 flex flex-col items-end justify-end gap-1 w-full bg-slate-950 rounded border border-border-dark p-3 pr-4 text-sm max-h-46 overflow-y-auto"
+};

package/dist/react/src/components/fade-carousel.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+export default function FadeCarousel({ items }: {
+    items: ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/fade-carousel.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+export default function FadeCarousel({ items }) {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setIndex((prev) => (prev + 1) % items.length);
+        }, 2000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { className: "absolute", transition: { duration: 0.5 }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -5 }, children: items[index] }, index) }));
+}

package/dist/react/src/components/field.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    style?: string;
+    required?: boolean;
+    note?: ReactNode;
+    children: ReactNode;
+};
+export default function Field({ style, label, required, note, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/field.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function Field({ style, label, required = true, note, children }) {
+    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col shrink-0 gap-1 w-full overflow-hidden",
+    label: "text-xs text-primary-dark",
+    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
+};

package/dist/react/src/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/react/src/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/check-circle.svg";
+import Spinner from "./assets/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/react/src/components/form/functions.d.ts

@@ -0,0 +1,8 @@
+import type { SetState } from "./types";
+export declare const useForm: <T>(init: T) => {
+    data: T;
+    update: import("react").Dispatch<import("react").SetStateAction<T>>;
+    clear: () => void;
+};
+export declare const setField: <T>(update: SetState<T>, id: string, value: unknown) => void;
+export declare const parseData: <T extends Record<string, unknown>>(data: T) => T;

package/dist/react/src/components/form/functions.js

@@ -0,0 +1,27 @@
+import { useState, useEffect, useMemo } from "react";
+export const useForm = (init) => {
+    const initial = useMemo(() => init, [JSON.stringify(init)]); // deep compare
+    const [data, setData] = useState(initial);
+    useEffect(() => {
+        setData(initial);
+    }, [initial]);
+    return {
+        data,
+        update: setData,
+        clear: () => setData(initial)
+    };
+};
+export const setField = (update, id, value) => update(prev => ({
+    ...prev,
+    [id]: value
+}));
+export const parseData = (data) => {
+    const copy = JSON.parse(JSON.stringify(data));
+    for (const [key, value] of Object.entries(data)) {
+        if (key === "created_at")
+            copy[key] = new Date(value);
+        else if (key === "timestamp")
+            copy[key] = new Date(value.replaceAll("'", ""));
+    }
+    return copy;
+};

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

@@ -0,0 +1,26 @@
+import type { ZodTypeAny } from "zod";
+import type { Field, Option, FormSection } from "./types";
+export * from "./functions";
+export * from "./types";
+type FormBuilderField<T> = (Omit<Field<T>, "value" | "update"> & {
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = FormSection<T> & {
+    styles?: {
+        container?: string;
+        submit?: string;
+        cancel?: string;
+    };
+    fields: FormBuilderField<T>;
+    validator: ZodTypeAny;
+    submit: {
+        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/react/src/components/form/index.js

@@ -0,0 +1,37 @@
+"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";
+export * from "./functions";
+export * from "./types";
+import { RowBox } from "../layout/flex";
+import Input from "../input";
+import Select from "../select";
+import TextArea from "../textarea";
+import MultipleChoice from "../multiple-choice";
+import { Button } from "../button";
+import Attachment from "../attachment";
+export function FormBuilder({ fields, validator, data, styles, update, submit, clear }) {
+    const isValid = validator.safeParse(data).success;
+    const [isLoading, setLoading] = useState(false);
+    const handleSubmit = async () => {
+        setLoading(true);
+        await submit.action(data);
+        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: update, 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: update, note: note, required: required }, id));
+                    else if (element === "textarea")
+                        return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: update, note: note, required: required }, id));
+                    else if (element === "multiple-choice")
+                        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"] }))] })] }));
+}