@bouko/react 1.9.6 → 1.9.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-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/heading.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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