@bouko/react 1.9.5 → 1.9.6

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"] }))] })] }));
+}

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

@@ -0,0 +1,29 @@
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+export type FormSection<T> = {
+    data: T;
+    update: SetState<T>;
+    clear: () => void;
+};
+export type Field<T, K = string> = {
+    id: string;
+    label?: string;
+    style?: string;
+    value?: K;
+    update: SetState<T>;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+export type Option = {
+    id: string;
+    label?: string;
+    active?: boolean;
+    select?: () => void;
+};
+export type OptionField<T> = Field<T> & {
+    options: Option[];
+};
+export type Form<T> = {
+    data: T;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+export { default as Heading } from "./layout/heading";
+export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./list";
+export * from "./form";

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

@@ -0,0 +1,8 @@
+export { default as Heading } from "./layout/heading";
+export { default as Separator } from "./layout/separator";
+export * from "./layout/flex";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./list";
+export * from "./form";

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

@@ -0,0 +1,11 @@
+import { type Field as FieldProps } from "./form";
+type Props<T> = FieldProps<T> & {
+    placeholder?: string;
+    styles?: {
+        container?: string;
+        input?: string;
+    };
+    disabled?: boolean;
+};
+export default function Input<T>({ id, styles, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/react/src/components/layout/flex.d.ts

@@ -0,0 +1,23 @@
+import { Component } from "../../core/types";
+type Props = Component & {
+    center?: boolean;
+    centerX?: boolean;
+    centerY?: boolean;
+};
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @param {ReactNode} children - Child elements to render inside the row.
+ * @param {Props} opts - Variant options for styling.
+**/
+export declare const RowBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnBox: ({ style, children, ...opts }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * Problems
+ *
+ * - Perfect `Component`
+ * - Perfect `cn`
+ * - Perfect `tv`
+**/ 

package/dist/react/src/components/layout/flex.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+/**
+ * Flex containers with configurable alignment and styling.
+ *
+ * @param {string} style - Additional styles for container.
+ * @param {ReactNode} children - Child elements to render inside the row.
+ * @param {Props} opts - Variant options for styling.
+**/
+export const RowBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(row(opts), style), children: children }));
+export const ColumnBox = ({ style, children, ...opts }) => (_jsx("div", { className: cn(column(opts), style), children: children }));
+/**
+ * Styling variants for flex options.
+ *
+ * @param {boolean} centerX - center children horizontally
+ * @param {boolean} centerY - center children vertically
+ * @param {boolean} center - center children on both axis
+**/
+const row = tv({
+    base: "flex",
+    variants: {
+        centerX: { true: "justify-center" },
+        centerY: { true: "items-center" },
+        center: { true: "items-center justify-center" }
+    }
+});
+const column = tv({
+    base: "flex flex-col",
+    variants: {
+        centerX: { true: "items-center" },
+        centerY: { true: "justify-center" },
+        center: { true: "items-center justify-center" }
+    }
+});

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+type Options = {
+    size?: "md" | "lg";
+    align?: "left" | "center";
+};
+type Styles = {
+    container?: string;
+    text?: string;
+    title?: string;
+    subtitle?: string;
+};
+type Props = {
+    options?: Options;
+    styles?: Styles;
+    badge?: string;
+    icon?: ReactNode;
+    title: ReactNode;
+    size?: "md" | "lg";
+    align?: "left" | "center";
+    subtitle?: ReactNode;
+    reverse?: boolean;
+};
+export default function Heading({ styles, options, badge, icon, title, subtitle, reverse }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/layout/heading.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+import { RowBox, ColumnBox } from "..";
+import Badge from "../text/badge";
+export default function Heading({ styles = {}, options = {}, badge, icon, title, subtitle, reverse }) {
+    const custom = test(options);
+    return (_jsxs(RowBox, { style: cn(base.container, styles.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 })] })] }));
+}
+const base = {
+    container: "gap-2 items-center",
+    badge: "mb-2",
+};
+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/react/src/components/layout/separator.d.ts

@@ -0,0 +1,3 @@
+export default function Separator({ style }: {
+    style?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/layout/separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function Separator({ style }) {
+    return _jsx("hr", { className: cn("w-full text-border-dark", style) });
+}

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

@@ -0,0 +1,2 @@
+export { default as BulletList } from "./variants/bullet";
+export { default as NumberList } from "./variants/number";

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

@@ -0,0 +1,2 @@
+export { default as BulletList } from "./variants/bullet";
+export { default as NumberList } from "./variants/number";

package/dist/react/src/components/list/item.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface Props {
+    marker: ReactNode;
+    content: ReactNode;
+    index: number;
+    centerMarker?: boolean;
+}
+export default function Item({ marker, content, centerMarker, index }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/list/item.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Animation } from "../animate";
+import { cn } from "@bouko/style";
+;
+export default function Item({ marker, content, centerMarker, index }) {
+    return (_jsxs(Animation, { style: cn("flex items-start text-sm", centerMarker && "items-center"), variant: "fadeList", children: [marker, content] }, index));
+}

package/dist/react/src/components/list/variants/bullet.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface Props {
+    style?: string;
+    title?: string;
+    items: ReactNode[];
+    centerMarker?: boolean;
+}
+export default function BulletList({ style, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/list/variants/bullet.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Item from "../item";
+import { Animation } from "../../animate/";
+import { cn } from "@bouko/style";
+;
+export default function BulletList({ style, title, items, centerMarker }) {
+    return (_jsxs(Animation, { style: cn(styles.base, style), variant: "fadeList", children: [!!title && _jsx("span", { className: styles.title, children: title }), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), variant: "fadeList", children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, {}), content: x, index: i, centerMarker: centerMarker }, i))) })] }, title));
+}
+function Marker() {
+    return (_jsx("span", { className: "mr-3 text-accent", children: "\u2022" }));
+}
+const styles = {
+    base: "flex flex-col gap-1 w-full",
+    title: "mb-1 text-base"
+};

package/dist/react/src/components/list/variants/number.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+interface Props {
+    style?: string;
+    marker?: string;
+    title?: string;
+    items: ReactNode[];
+    centerMarker?: boolean;
+}
+export default function NumberList({ style, marker, title, items, centerMarker }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/list/variants/number.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Item from "../item";
+import { Animation } from "../../animate";
+import { cn } from "@bouko/style";
+;
+export default function NumberList({ style, marker, title, items, centerMarker }) {
+    return (_jsxs(Animation, { style: cn(styles.base, style), variant: "fadeList", children: [!!title && _jsx("span", { className: styles.title, children: title }), _jsx(Animation, { style: cn(styles.base, style, !!title && "ml-2"), variant: "fadeList", children: items.map((x, i) => (_jsx(Item, { marker: _jsx(Marker, { style: marker, x: i + 1 }), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));
+}
+function Marker({ style, x }) {
+    return (_jsx("div", { className: cn(styles.marker, style), children: _jsx("span", { className: styles.label, children: x }) }));
+}
+const styles = {
+    base: "flex flex-col gap-6 w-full text-primary-dark",
+    title: "mb-1 text-base text-primary",
+    marker: "flex justify-center items-center mt-1 mr-6 min-w-7 w-7 aspect-square bg-radial-[at_50%_75%] from-accent-light to-accent to-accent-dark to-90% border border-accent-darker rounded-full shadow-glow-soft",
+    label: "font-bold text-background-lighter select-none"
+};

package/dist/react/src/components/multiple-choice.d.ts

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

package/dist/react/src/components/multiple-choice.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Field from "./field";
+import { setField } from "./form";
+import { cn } from "@bouko/style";
+export default function MultipleChoice({ id, label, options, style, value, update, required = true }) {
+    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => setField(update, id, x.id) }), x.label] }, i))) }) }));
+}
+const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }));
+const styles = {
+    options: "flex shrink-0 flex-col gap-1 mt-px w-full",
+    item: "flex items-center gap-3 text-sm",
+    dot: "size-3 bg-background-dark/50 hover:bg-background-dark duration-200 cursor-pointer border border-background-darker rounded-full"
+};

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

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+export type SearchBarProps = {
+    button?: ReactElement<{
+        onClick: (query: string) => void;
+    }>;
+    placeholder?: string;
+    action: (query: string) => void;
+};
+export declare function SearchBar({ button, placeholder, action }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/src/components/search-bar.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState } from "react";
+import { RowBox } from "./layout/flex";
+import { Button } from "./button";
+export function SearchBar({ button, 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 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" })] }), button ? cloneElement(button, {
+                onClick: () => action(query)
+            }) : _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 max-w-full pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
+};

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

@@ -0,0 +1,6 @@
+import { type OptionField } from "./form";
+type Props<T> = OptionField<T> & {
+    placeholder?: string;
+};
+export default function Select<T>({ id, style, label, required, value, options, update, note }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import Chevron from "../assets/icons/chevron.svg";
+import { setField } from "./form";
+import { cn } from "@bouko/style";
+export default function Select({ id, style, label, required = true, value, options, update, note }) {
+    const [isOpen, setOpen] = useState(false);
+    const active = options.find(x => x.id === value);
+    const select = (x) => {
+        setField(update, id, x);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsxs("div", { className: styles.subcontainer, children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { className: cn(styles.trigger, !active?.label && "capitalize"), onClick: () => setOpen(x => !x), children: [active ? active.label ?? active.id : "None", _jsx(Chevron, { className: cn("text-xs text-slate-400 duration-200", isOpen && "rotate-180") })] }), note && !isOpen && _jsx("span", { className: styles.note, children: note })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn("w-full p-2 border-l-3 border-transparent hover:text-blue-600 duration-200 cursor-pointer", active?.id === id && "border-blue-600 bg-blue-500/10", !label && "capitalize"), onClick: () => select(id), children: label ?? id }, id))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative shrink-0 w-full",
+    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 gap-1 w-full bg-slate-100 rounded border border-slate-300 py-1 text-xs max-h-46 overflow-y-auto",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/react/src/components/text/badge.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+type Color = "accent" | "orange" | "dark";
+type Props = {
+    style?: string;
+    color?: Color;
+    children: ReactNode;
+};
+export default function Badge({ style, color, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/src/components/text/badge.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export default function Badge({ style, color, children }) {
+    return (_jsx("span", { className: cn(styles({ color }), style), children: children }));
+}
+const styles = tv({
+    base: "w-min px-3 py-1 border rounded-full text-xs font-semibold",
+    defaultVariants: { color: "accent" },
+    variants: {
+        color: {
+            accent: "bg-accent/20 border-accent-dark text-accent-dark",
+            orange: "bg-orange-400/20 border-orange-500 text-orange-500",
+            dark: "bg-slate-600/20 border-slate-700 text-slate-700"
+        }
+    }
+});

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

@@ -0,0 +1,7 @@
+import { type Field as FieldProps } from "./form";
+type Props<T> = FieldProps<T> & {
+    rows?: number;
+    placeholder?: string;
+};
+export default function TextArea<T>({ id, style, label, required, note, update, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Field from "./field";
+import { setField } from "./form";
+export default function TextArea({ id, style, label, required = true, note, update, ...props }) {
+    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("textarea", { className: styles.textarea, onChange: ({ target: { value } }) => setField(update, id, value), ...props }) }));
+}
+const styles = {
+    container: "flex flex-col gap-1 overflow-hidden",
+    label: "text-xs text-slate-600",
+    textarea: "px-3 py-2 bg-input border border-outline focus:border-outline-light rounded text-sm resize-none",
+    note: "mt-1 text-xs text-slate-500"
+};

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

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

package/dist/react/src/components/upload/file.js

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

package/dist/react/src/core/format.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+export declare const rn: (...elements: ReactNode[]) => import("react/jsx-runtime").JSX.Element;
+export declare const formatText: (text: string) => import("react/jsx-runtime").JSX.Element;

package/dist/react/src/core/format.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+const delimiterConfig = [
+    { delimiter: "**", render: (text, key) => _jsx("span", { className: "font-bold", children: text }, key) },
+    { delimiter: "~~", render: (text, key) => _jsx("span", { className: "font-semibold", children: text }, key) },
+    { delimiter: "^^", render: (text, key) => _jsx("span", { className: "text-accent", children: text }, key) },
+];
+const escapeRegex = (str) => str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+const delimiters = delimiterConfig.map(({ delimiter }) => escapeRegex(delimiter) + ".*?" + escapeRegex(delimiter)).join("|");
+const WRAPPED_TEXT_REGEX = new RegExp(`(${delimiters})`, "g");
+const isWrapped = (x, wrapper) => x.startsWith(wrapper) && x.endsWith(wrapper);
+export const rn = (...elements) => (_jsx(Fragment, { children: elements.map((x, i) => (_jsx(Fragment, { children: x }, i))) }));
+export const formatText = (text) => {
+    const parts = text
+        .split(WRAPPED_TEXT_REGEX)
+        .filter(Boolean);
+    const formatted = parts.map((x, i) => {
+        if (isWrapped(x, "**")) {
+            // Remove only the first and last occurrence of the delimiter
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-bold", children: content }, i);
+        }
+        else if (isWrapped(x, "~~")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "font-semibold", children: content }, i);
+        }
+        else if (isWrapped(x, "^^")) {
+            const content = x.slice(2, -2);
+            return _jsx("span", { className: "text-accent", children: content }, i);
+        }
+        return x;
+    });
+    return _jsx("span", { children: formatted });
+};

package/dist/react/src/core/functions.d.ts

@@ -0,0 +1,3 @@
+export declare const getFileData: (files: File[]) => Promise<unknown[]>;
+export declare const getEnv: (key: string) => string;
+export declare function getBase64(image: string): Promise<string>;

package/dist/react/src/core/functions.js

@@ -0,0 +1,41 @@
+export const getFileData = (files) => Promise.all(files.map((file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const base64 = reader.result?.toString().split(",")[1]; // Remove data prefix
+            resolve({
+                filename: file.name,
+                mimetype: file.type,
+                data: base64,
+            });
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}));
+export const getEnv = (key) => {
+    const value = process.env[key];
+    if (!value)
+        throw new Error(`Missing required env: ${key}`);
+    return value;
+};
+export async function getBase64(image) {
+    if (image.startsWith("data:")) {
+        return image; // already a base64 data URL
+    }
+    const res = await fetch(image);
+    const blob = await res.blob();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error("Failed to read image as base64"));
+            }
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}

package/dist/react/src/core/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export type Component = {
+    style?: string;
+    children: ReactNode;
+};
+export type Attachment = {
+    filename: string;
+    mimetype: string;
+    data: string;
+};

package/dist/react/src/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react/src/hooks/element/container.d.ts

@@ -0,0 +1,4 @@
+export default function useContainer(): {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    container: HTMLElement | null | undefined;
+};

package/dist/react/src/hooks/element/container.js

@@ -0,0 +1,7 @@
+"use client";
+import { useRef } from "react";
+export default function useContainer() {
+    const ref = useRef(null);
+    const container = ref.current?.parentElement;
+    return { ref, container };
+}

package/dist/react/src/hooks/element/resize.d.ts

@@ -0,0 +1 @@
+export default function useResizeObserver(element: HTMLElement | null | undefined, action: () => void): void;