@bouko/react 2.3.6 → 2.3.8

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

@@ -1,136 +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];
-        };
-    };
-};
+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/components/animate/configs.js

@@ -1,62 +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] }
-    }
-};
+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/components/animate/index.d.ts

@@ -1,12 +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 {};
+import React from "react";
+import { animations } from "./configs";
+declare 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/components/animate/index.js

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

package/dist/components/attachment.d.ts

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

package/dist/components/attachment.js

@@ -1,19 +1,18 @@
-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/functions";
-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 && id)
-            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"
-};
+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 { 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 && id)
+            update([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)" }, void 0) : ""] }, void 0), _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, {}, void 0), "Drag and drop files, paste screenshots, or"] }, void 0), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }, void 0), _jsx("input", { type: "file", className: "hidden", onChange: handleFileChange, ref: ref }, void 0)] }, void 0)), value && value.length > 0 && value.map((x, i) => (_jsx("span", { className: "text-xs text-slate-500", children: x.name }, i)))] }, void 0), note && _jsx("span", { className: styles.note, children: note }, void 0)] }, void 0));
+}
+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/components/button/load.d.ts

@@ -1,10 +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;
+import type { ReactNode } from "react";
+export declare 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

@@ -1,35 +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"
-        }
-    }
-});
+"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" }, void 0) : _jsx(CheckCircle, {}, void 0), children] }, void 0));
+}
+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

@@ -1,10 +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;
+import type { ReactNode } from "react";
+export declare 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

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