sea-react-components 1.0.3 → 1.1.0

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+type ContextType = {
+    openItem: string | null;
+    toggleItem: (id: string) => void;
+};
+type AccordionProps = {
+    children: ReactNode;
+    defaultOpenId?: string;
+};
+export declare const Accordion: React.FC<AccordionProps>;
+export declare const useAccordion: () => ContextType;
+export type AccordionItemProps = {
+    title: ReactNode;
+    children: ReactNode;
+    id?: string;
+};
+export declare const AccordionItem: React.FC<AccordionItemProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAIF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe9C,CAAC;AAEF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkCtD,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useState, useContext, useId, } from "react";
+import Icon from "../icon";
+import clsx from "clsx";
+const AccordionContext = createContext(undefined);
+export const Accordion = ({ children, defaultOpenId = null, }) => {
+    const [openItem, setOpenItem] = useState(defaultOpenId);
+    const toggleItem = (id) => {
+        setOpenItem((prev) => (prev === id ? null : id));
+    };
+    return (_jsx(AccordionContext.Provider, { value: { openItem, toggleItem }, children: _jsx("div", { className: "w-full divide-y divide-gray-300", children: children }) }));
+};
+export const useAccordion = () => {
+    const context = useContext(AccordionContext);
+    if (!context) {
+        throw new Error("useAccordion must be used within an Accordion");
+    }
+    return context;
+};
+export const AccordionItem = ({ title, children, id, }) => {
+    const generatedId = useId();
+    const itemId = id || generatedId;
+    const { openItem, toggleItem } = useAccordion();
+    const isOpen = openItem === itemId;
+    return (_jsxs("div", { className: "group", children: [_jsxs("button", { onClick: () => toggleItem(itemId), className: "w-full flex justify-between items-center px-4 py-3 bg-white hover:bg-gray-50 transition text-left", children: [_jsx("span", { className: "font-medium text-gray-800", children: title }), _jsx(Icon, { icon: "weui:arrow-filled", className: clsx("h-5 w-5 custom-animation", {
+                            "-rotate-90": isOpen,
+                            "rotate-90": !isOpen,
+                        }) })] }), _jsx("div", { className: `px-4 pb-4 overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? "max-h-screen opacity-100" : "max-h-0 opacity-0"}`, children: isOpen && _jsx("div", { className: "pt-2 text-gray-700", children: children }) })] }));
+};

package/dist/components/alert/index.js

@@ -42,7 +42,7 @@ export default function Alert({ message, type, closeButton = true, showIcon = tr
     let className = colors[type].bg;
     className = clsx(className, theme === "default" ? "text-white" : `${colors[type].text} bg-opacity-20`);
     if (open)
-        return (_jsxs("div", { className: clsx("flex items-center gap-3 rounded-lg p-2", className), children: [showIcon && _jsx(Icon, { icon: icons[type], className: "h-5 w-5" }), _jsx("p", { className: "flex-1", children: message }), closeButton && (_jsx("button", { onClick: () => {
+        return (_jsxs("div", { className: clsx("flex items-center gap-3 rounded-lg p-2", className), children: [showIcon && _jsx(Icon, { icon: icons[type], className: "h-5 w-5" }), _jsx("p", { className: "flex-1 text-sm md:text-base", children: message }), closeButton && (_jsx("button", { onClick: () => {
                         setOpen(false);
                         if (handleClickCloseButton) {
                             handleClickCloseButton();

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,12 @@
+export type Props = {
+    value?: string | Date;
+    onChange?: (date: Date | Date[] | {
+        start: Date;
+        end: Date;
+    }) => void;
+    disabledDates?: (string | Date)[];
+    allowedDates?: (string | Date)[];
+    selectMode?: "single" | "multi" | "range";
+};
+export default function Calendar({ value, onChange, disabledDates, allowedDates, selectMode, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG;QAAE,KAAK,EAAE,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,aAAkB,EAClB,YAAY,EACZ,UAAqB,GACtB,EAAE,KAAK,2CA2LP"}

package/dist/components/calendar/index.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import { Utils } from "sea-platform-helpers";
+import Icon from "../icon";
+export default function Calendar({ value, onChange, disabledDates = [], allowedDates, selectMode = "single", }) {
+    const moment = Utils.Moment.default;
+    const initialDate = useMemo(() => (value ? moment(value) : moment()), [value]);
+    const [currentMonth, setCurrentMonth] = useState(moment(initialDate));
+    const [selectedDate, setSelectedDate] = useState(moment(initialDate));
+    const [selectedDates, setSelectedDates] = useState([]);
+    const [range, setRange] = useState({ start: null, end: null });
+    const isDateDisabled = useMemo(() => {
+        const disabledSet = new Set(disabledDates.map((d) => moment(d).format("YYYY-MM-DD")));
+        const allowedSet = allowedDates
+            ? new Set(allowedDates.map((d) => moment(d).format("YYYY-MM-DD")))
+            : null;
+        return (date) => {
+            const formatted = date.format("YYYY-MM-DD");
+            if (allowedSet)
+                return !allowedSet.has(formatted);
+            return disabledSet.has(formatted);
+        };
+    }, [allowedDates, disabledDates]);
+    const startDay = currentMonth.clone().startOf("month").startOf("week");
+    const endDay = currentMonth.clone().endOf("month").endOf("week");
+    const day = startDay.clone().subtract(1, "day");
+    const calendar = [];
+    while (day.isBefore(endDay, "day")) {
+        calendar.push(Array(7)
+            .fill(0)
+            .map(() => day.add(1, "day").clone()));
+    }
+    const isToday = (d) => d.isSame(moment(), "day");
+    const isSelected = (d) => selectMode === "single"
+        ? selectedDate.isSame(d, "day")
+        : selectMode === "multi"
+            ? selectedDates.some((sel) => sel.isSame(d, "day"))
+            : false;
+    const isCurrentMonth = (d) => d.isSame(currentMonth, "month");
+    const isInRange = (d) => range.start &&
+        range.end &&
+        d.isBetween(range.start, range.end, "day", "[]");
+    const handlePrevMonth = () => setCurrentMonth((prev) => prev.clone().subtract(1, "month"));
+    const handleNextMonth = () => setCurrentMonth((prev) => prev.clone().add(1, "month"));
+    const handleDateClick = (day) => {
+        if (isDateDisabled(day))
+            return;
+        if (!isCurrentMonth(day)) {
+            setCurrentMonth(day.clone().startOf("month"));
+        }
+        if (selectMode === "range") {
+            if (!range.start || (range.start && range.end)) {
+                setRange({ start: day, end: null });
+            }
+            else {
+                const end = day.isBefore(range.start) ? range.start : day;
+                const start = day.isBefore(range.start) ? day : range.start;
+                setRange({ start, end });
+                onChange === null || onChange === void 0 ? void 0 : onChange({ start: start.toDate(), end: end.toDate() });
+            }
+        }
+        else if (selectMode === "multi") {
+            const exists = selectedDates.some((d) => d.isSame(day, "day"));
+            const updated = exists
+                ? selectedDates.filter((d) => !d.isSame(day, "day"))
+                : [...selectedDates, day];
+            setSelectedDates(updated);
+            onChange === null || onChange === void 0 ? void 0 : onChange(updated.map((d) => d.toDate()));
+        }
+        else {
+            setSelectedDate(day);
+            onChange === null || onChange === void 0 ? void 0 : onChange(day.toDate());
+        }
+    };
+    useEffect(() => {
+        if (!value)
+            return;
+        let newDate;
+        if (selectMode === "single" && value instanceof Date) {
+            newDate = moment(value);
+            setSelectedDate(newDate);
+            setCurrentMonth(newDate.clone().startOf("month"));
+        }
+        if (selectMode === "multi" && Array.isArray(value)) {
+            const dates = value.map((d) => moment(d));
+            setSelectedDates(dates);
+            if (dates.length > 0) {
+                setCurrentMonth(dates[0].clone().startOf("month"));
+            }
+        }
+        if (selectMode === "range" &&
+            typeof value === "object" &&
+            "start" in value &&
+            "end" in value) {
+            const start = moment(value.start);
+            const end = moment(value.end);
+            setRange({ start, end });
+            setCurrentMonth(start.clone().startOf("month"));
+        }
+    }, [value, selectMode]);
+    return (_jsxs("div", { className: "p-4 max-w-sm mx-auto rounded-xl", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("button", { onClick: handlePrevMonth, className: "custom-animation", children: _jsx(Icon, { icon: "weui:arrow-filled", className: "rotate-180 h-6 w-6 hover:text-primary hover:text-opacity-70 hover:-translate-x-1 custom-animation" }) }), _jsx("h2", { className: "text-lg font-semibold text-primary", children: currentMonth.format("MMMM YYYY") }), _jsx("button", { onClick: handleNextMonth, className: "custom-animation", children: _jsx(Icon, { icon: "weui:arrow-filled", className: "h-6 w-6 hover:text-primary hover:text-opacity-70 hover:translate-x-1 custom-animation" }) })] }), _jsx("div", { className: "grid grid-cols-7 text-center text-text text-sm mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx("div", { children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1 animate-fade-in", children: calendar.flat().map((dayItem, i) => {
+                    const disabled = isDateDisabled(dayItem);
+                    const outOfMonth = !isCurrentMonth(dayItem);
+                    return (_jsx("button", { onClick: () => handleDateClick(dayItem), disabled: disabled, className: clsx("w-8 h-8 rounded-lg text-sm flex items-center justify-center custom-animation", {
+                            "bg-primary text-white": isSelected(dayItem),
+                            "bg-primary/30 text-white": isInRange(dayItem),
+                            "bg-primary bg-opacity-10": isToday(dayItem) && !isSelected(dayItem),
+                            "text-text": isCurrentMonth(dayItem),
+                            "text-text-light": outOfMonth,
+                            "hover:bg-primary hover:text-white": !disabled,
+                            "opacity-50 cursor-not-allowed": disabled,
+                        }), children: dayItem.date() }, i));
+                }) }, currentMonth.format("YYYY-MM"))] }));
+}

package/dist/components/color-picker/index.d.ts

@@ -4,5 +4,5 @@ export type Props = {
     setColor: (newColor: string) => void;
     showDisplay?: boolean;
 } & React.InputHTMLAttributes<HTMLInputElement>;
-export default function ColorPicker({ color, setColor, showDisplay, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ColorPicker({ color, setColor, showDisplay, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAChD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,2CAyBP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,SAAc,EACd,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,2CA8BP"}

package/dist/components/color-picker/index.js

@@ -13,9 +13,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isColorLight } from "../../utils/color";
 export default function ColorPicker(_a) {
-    var { color, setColor, showDisplay = true } = _a, props = __rest(_a, ["color", "setColor", "showDisplay"]);
-    return (_jsxs("div", { className: "relative flex items-center rounded-lg", children: [showDisplay && (_jsx("div", { className: "w-full h-10 rounded-lg flex items-center justify-center", style: {
+    var { color, setColor, showDisplay = true, className = "", style } = _a, props = __rest(_a, ["color", "setColor", "showDisplay", "className", "style"]);
+    return (_jsxs("label", { className: `relative inline-block overflow-hidden ${className}`, style: style, children: [showDisplay && (_jsx("div", { className: "w-full h-full flex items-center justify-center", style: {
                     backgroundColor: color,
                     color: isColorLight(color) ? "#000000" : "#FFFFFF",
-                }, children: _jsx("p", { children: color }) })), _jsx("input", Object.assign({ type: "color", className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", value: color, onChange: (e) => setColor(e.target.value) }, props))] }));
+                    borderRadius: "inherit",
+                }, children: _jsx("p", { className: "text-xs", children: color }) })), _jsx("input", Object.assign({ type: "color", className: "absolute inset-0 w-full h-full opacity-0 appearance-none cursor-pointer", value: color, onChange: (e) => setColor(e.target.value) }, props))] }));
 }

package/dist/components/day-calendar/index.d.ts

@@ -0,0 +1,19 @@
+export type Props<T extends {
+    start: string;
+    end: string;
+    isAllDay?: boolean;
+}> = {
+    day?: string | Date;
+    events: T[];
+    EventItem: (props: {
+        event: T;
+    }) => JSX.Element;
+    loading?: boolean;
+    setDay?: (day: Date) => void;
+};
+export default function DayCalendar<T extends {
+    start: string;
+    end: string;
+    isAllDay?: boolean;
+}>({ day, events, EventItem, loading, setDay }: Props<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/day-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/day-calendar/index.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,KAAK,CACf,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,IAC1D;IACF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,SAAS,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,WAAW,CACjC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAC5D,EAAE,GAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,2CAuKnE"}

package/dist/components/day-calendar/index.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Utils } from "sea-platform-helpers";
+import Skeleton from "../skeleton";
+const moment = Utils.Moment.default;
+const HOURS = Array.from({ length: 24 }, (_, i) => `${i}:00`);
+export default function DayCalendar({ day = new Date(), events, EventItem, loading, setDay }) {
+    const today = moment().format("YYYY-MM-DD");
+    const selectedDay = moment(day).format("YYYY-MM-DD");
+    const dayMoment = useMemo(() => moment(day).startOf("day"), [day]);
+    const allDayEvents = useMemo(() => events.filter((e) => e.isAllDay), [events]);
+    const timedEvents = useMemo(() => events.filter((e) => !e.isAllDay), [events]);
+    const getPositionedEvents = (dayEvents) => {
+        const positioned = [];
+        const sorted = [...dayEvents].sort((a, b) => moment(a.start).diff(moment(b.start)));
+        const columns = [];
+        sorted.forEach((event) => {
+            const start = moment(event.start);
+            let placed = false;
+            for (const col of columns) {
+                if (!col.some((e) => moment(e.end).isAfter(start))) {
+                    col.push(event);
+                    placed = true;
+                    break;
+                }
+            }
+            if (!placed) {
+                columns.push([event]);
+            }
+        });
+        columns.forEach((col, colIndex) => {
+            col.forEach((event) => {
+                const start = moment(event.start);
+                const end = moment(event.end);
+                const duration = end.diff(start, "minutes");
+                const startMinutes = start.hours() * 60 + start.minutes();
+                positioned.push({
+                    event,
+                    top: (startMinutes / 60) * 64,
+                    height: (duration / 60) * 64,
+                    leftPercent: (colIndex / columns.length) * 100,
+                    widthPercent: 100 / columns.length,
+                    zIndex: colIndex,
+                });
+            });
+        });
+        return positioned;
+    };
+    const positionedEvents = getPositionedEvents(timedEvents);
+    return (_jsxs("div", { className: "flex overflow-x-auto", children: [_jsxs("div", { className: "w-14 shrink-0", children: [_jsx("div", { className: "h-20 border-b border-gray-200" }), _jsx("div", { className: "h-[74px] text-sm text-text border-b border-gray-200 flex items-center justify-center", children: "All-Day" }), HOURS.map((hour) => (_jsx("div", { className: "h-16 text-xs text-text text-right pr-1 border-b border-gray-200", children: moment(`${today} ${hour}`).format("hh:mm a") }, hour)))] }), _jsxs("div", { className: "flex-1 border-l border-t border-gray-200 relative", children: [_jsx("div", { className: "h-20 flex items-center justify-center border-b border-gray-200 sticky top-0 z-10", children: _jsx("p", { className: "text-2xl font-semibold text-primary", children: dayMoment.format("dddd, MMM DD, YYYY") }) }), _jsx("div", { className: "h-[74px] border-b border-gray-200 px-1 py-1", children: allDayEvents.map((event, idx) => (_jsx("div", { className: "mb-1", children: _jsx(EventItem, { event: event }) }, idx))) }), _jsxs("div", { className: "relative h-[1536px] pt-0", children: [HOURS.map((_, j) => (_jsx("div", { className: "absolute left-0 right-0 h-16 border-t border-dashed border-gray-200", style: { top: j * 64 } }, j))), !loading
+                                ? positionedEvents.map(({ event, top, height, leftPercent, widthPercent, zIndex }, j) => (_jsx("div", { className: "absolute px-1", style: {
+                                        top,
+                                        height,
+                                        left: `${leftPercent}%`,
+                                        width: `${widthPercent}%`,
+                                        zIndex,
+                                    }, children: _jsx(EventItem, { event: event }) }, j)))
+                                : Array.from({ length: Utils.Number.getRandomInt(0, 5) }).map((_, j) => (_jsx(Skeleton, { className: "absolute left-1 right-1 top-[100px] h-16", style: { top: Utils.Number.getRandomInt(60, 1200) } }, j)))] })] })] }));
+}

package/dist/components/drawer/index.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import clsx from "clsx";
 import { Icon } from "@iconify/react";
 export default function Drawer({ isOpen, onClose, placement = "right", overlay = true, className, children, }) {
-    return (_jsxs(_Fragment, { children: [overlay && isOpen && (_jsx("div", { className: clsx("fixed z-50 inset-0 bg-black bg-opacity-50 transition-opacity duration-300", { "opacity-0 pointer-events-none": !isOpen }), onClick: onClose })), _jsxs("div", { className: clsx("fixed bg-white shadow-lg z-50 transition-transform duration-300 py-7 px-2", {
+    return (_jsxs(_Fragment, { children: [overlay && isOpen && (_jsx("div", { className: clsx("fixed z-50 inset-0 bg-black bg-opacity-50 transition-opacity duration-300", { "opacity-0 pointer-events-none": !isOpen }), onClick: onClose })), _jsxs("div", { className: clsx("fixed bg-white shadow-lg z-50 transition-transform duration-300 py-7 px-2 max-h-screen overflow-y-auto", {
                     "top-0 left-0 w-full h-auto transform -translate-y-full": placement === "top" && !isOpen,
                     "top-0 left-0 w-full h-auto translate-y-0": placement === "top" && isOpen,
-                    "top-0 right-0 h-full transform translate-x-full w-[85%] md:w-[40%]": placement === "right" && !isOpen,
-                    "top-0 right-0 h-full translate-x-0 w-[85%] md:w-[40%]": placement === "right" && isOpen,
-                    "top-0 left-0 h-full transform -translate-x-full w-[85%] md:w-[40%]": placement === "left" && !isOpen,
-                    "top-0 left-0 h-full translate-x-0 w-[85%] md:w-[40%]": placement === "left" && isOpen,
+                    "top-0 right-0 max-h-screen h-full transform translate-x-full w-[85%] md:w-[40%]": placement === "right" && !isOpen,
+                    "top-0 right-0 max-h-screen h-full translate-x-0 w-[85%] md:w-[40%]": placement === "right" && isOpen,
+                    "top-0 left-0 max-h-screen h-full transform -translate-x-full w-[85%] md:w-[40%]": placement === "left" && !isOpen,
+                    "top-0 left-0 max-h-screen h-full translate-x-0 w-[85%] md:w-[40%]": placement === "left" && isOpen,
                     "bottom-0 left-0 w-full h-auto transform translate-y-full": placement === "bottom" && !isOpen,
                     "bottom-0 left-0 w-full h-auto translate-y-0": placement === "bottom" && isOpen,
                 }, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2 text-secondary-dark", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));

package/dist/components/file-input/components/file-item/index.d.ts

@@ -1,9 +1,9 @@
 import { FileState } from "../..";
-type Props = {
+export type Props = {
     file: FileState;
     handleUploadFile?: (file: FileState) => Promise<void>;
     handleDeleteFile?: (file: FileState) => Promise<void>;
+    displayMode?: boolean;
 };
-export default function FileItem({ file, handleUploadFile, handleDeleteFile, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function FileItem({ file, handleUploadFile, handleDeleteFile, displayMode, }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/file-input/components/file-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/file-input/components/file-item/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAKlD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvD,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,KAAK,2CAuEP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/file-input/components/file-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAKlD,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,gBAAgB,EAChB,gBAAgB,EAChB,WAAmB,GACpB,EAAE,KAAK,2CA4HP"}

package/dist/components/file-input/components/file-item/index.js

@@ -1,10 +1,35 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { UploadStatuses } from "../..";
 import Icon from "../../../icon";
 import { Utils } from "sea-platform-helpers";
 import Button from "../../../button";
-export default function FileItem({ file, handleUploadFile, handleDeleteFile, }) {
-    return (_jsx("div", { className: "px-2 py-1 rounded-lg bg-info bg-opacity-20 max-w-52", children: _jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [_jsx("div", { className: "col-span-3", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-text font-semibold truncate", children: file.name }), _jsx("p", { className: "text-sm text-info", children: Utils.Number.default(file.size).format("0.0 b") })] }) }), _jsx("div", { className: "col-span-1", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [file.status === UploadStatuses.Failed && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "mdi:cloud-remove-outline", className: "w-5 h-5 text-error" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => handleUploadFile(file), children: _jsx(Icon, { icon: "pajamas:retry", className: "w-5 h-5 text-primary hover:text-opacity-50 transition-all duration-300 ease-in-out" }) })] })), [UploadStatuses.Pending, UploadStatuses.Uploading].includes(file.status) && (_jsx(Icon, { icon: "line-md:uploading-loop", className: "w-5 h-5 text-info" })), file.status === UploadStatuses.Uploaded && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "ic:outline-cloud-done", className: "w-5 h-5 text-primary" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => {
-                                            handleDeleteFile(file);
-                                        }, children: _jsx(Icon, { icon: "famicons:close", className: "w-5 h-5 text-error transition-all duration-300 ease-in-out" }) })] }))] }) })] }) }));
+export default function FileItem({ file, handleUploadFile, handleDeleteFile, displayMode = false, }) {
+    const [previewUrl, setPreviewUrl] = useState(null);
+    useEffect(() => {
+        if (file.file) {
+            const url = URL.createObjectURL(file.file);
+            setPreviewUrl(url);
+            return () => URL.revokeObjectURL(url);
+        }
+        else if (file.URL) {
+            setPreviewUrl(file.URL);
+        }
+    }, [file.file, file.URL]);
+    const renderPreview = () => {
+        if (!previewUrl)
+            return null;
+        if (file.type.startsWith("image/")) {
+            return (_jsx("a", { href: previewUrl, target: "_blank", children: _jsx("img", { src: previewUrl, alt: file.name, className: "w-full h-28 object-cover rounded-md mb-1" }) }));
+        }
+        if (file.type.startsWith("video/")) {
+            return (_jsx("a", { href: previewUrl, target: "_blank", children: _jsx("video", { src: previewUrl, autoPlay: false, controls: false, className: "w-full h-28 object-cover rounded-md mb-1" }) }));
+        }
+        if (file.type === "application/pdf") {
+            return (_jsx("div", { className: "w-full h-28 flex items-center justify-center bg-white rounded-md mb-1", children: _jsx(Icon, { icon: "mdi:file-pdf-box", className: "w-12 h-12 text-red-600" }) }));
+        }
+        return (_jsx("div", { className: "w-full h-28 flex items-center justify-center bg-white rounded-md mb-1", children: _jsx(Icon, { icon: "mdi:file-outline", className: "w-10 h-10 text-gray-400" }) }));
+    };
+    return (_jsxs("div", { className: "px-2 py-1 rounded-lg  max-w-52", children: [renderPreview(), _jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [_jsx("div", { className: "col-span-3", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-text font-semibold truncate", children: file.name }), _jsx("p", { className: "text-sm text-info", children: Utils.Number.numeralUtils(file.size).format("0.0 b") })] }) }), _jsx("div", { className: "col-span-1", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [file.status === UploadStatuses.Failed && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "mdi:cloud-remove-outline", className: "w-5 h-5 text-error" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => handleUploadFile === null || handleUploadFile === void 0 ? void 0 : handleUploadFile(file), children: _jsx(Icon, { icon: "pajamas:retry", className: "w-5 h-5 text-primary hover:text-opacity-50 transition-all duration-300 ease-in-out" }) })] })), [UploadStatuses.Pending, UploadStatuses.Uploading].includes(file.status) && (_jsx(Icon, { icon: "line-md:uploading-loop", className: "w-5 h-5 text-info" })), file.status === UploadStatuses.Uploaded && !displayMode && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "ic:outline-cloud-done", className: "w-5 h-5 text-primary" }), _jsx(Button, { type: "button", className: "bg-transparent", onClick: () => handleDeleteFile === null || handleDeleteFile === void 0 ? void 0 : handleDeleteFile(file), children: _jsx(Icon, { icon: "famicons:close", className: "w-5 h-5 text-error hover:text-opacity-70 custom-animation" }) })] }))] }) })] })] }));
 }

package/dist/components/file-input/index.d.ts

@@ -15,8 +15,9 @@ export declare enum UploadStatuses {
 }
 export type FileState = {
     id: string;
-    serverId: string | undefined;
-    file?: File | undefined;
+    serverId?: string;
+    file?: File;
+    URL?: string;
     name: string;
     size: number;
     type: string;
@@ -25,11 +26,9 @@ export type FileState = {
 };
 export type Props<T> = {
     name: string;
-    files: FileState[];
-    setFiles: React.Dispatch<React.SetStateAction<FileState[]>>;
     acceptedTypes?: AcceptedValuesArray;
-    multiple: boolean;
-    errorMessage?: string | boolean;
+    multiple?: boolean;
+    initialFiles?: FileState[];
     onUpload: (file: FileState) => Promise<{
         id: string;
     } & T>;
@@ -38,7 +37,25 @@ export type Props<T> = {
     } & T>;
     onUploadSuccess?: (file: T) => void;
     onDeleteSuccess?: (file: T) => void;
+    errorMessage?: string;
+    children: (props: {
+        inputRef: React.RefObject<HTMLInputElement>;
+        inputProps: {
+            id: string;
+            name: string;
+            type: string;
+            accept: string;
+            multiple: boolean;
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        };
+        isDragging: boolean;
+        files: FileState[];
+        handleDeleteFile: (file: FileState) => void;
+        handleUploadFile: (file: FileState) => void;
+        setFiles: React.Dispatch<React.SetStateAction<FileState[]>>;
+        errorMessage?: string;
+    }) => React.ReactNode;
 };
-export default function FileInput<T>({ name, files, setFiles, acceptedTypes, multiple, errorMessage, onUpload, onDelete, onUploadSuccess, onDeleteSuccess, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default function FileInput<T>({ name, acceptedTypes, initialFiles, multiple, onUpload, onDelete, onUploadSuccess, onDeleteSuccess, children, errorMessage, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/file-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,oBAAY,aAAa;IACvB,KAAK,YAAY;IACjB,KAAK,YAAY;IACjB,KAAK,YAAY;IACjB,GAAG,oBAAoB;IACvB,IAAI,eAAe;CACpB;AAED,KAAK,mBAAmB,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;AAEtD,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,CAAC,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,EAAE,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,eAAe,GAChB,EAAE,KAAK,CAAC,CAAC,CAAC,2CAkIV"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,oBAAY,aAAa;IACvB,KAAK,YAAY;IACjB,KAAK,YAAY;IACjB,KAAK,YAAY;IACjB,GAAG,oBAAoB;IACvB,IAAI,eAAe;CACpB;AAED,KAAK,mBAAmB,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;AAEtD,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,cAAc,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,CAAC,CAAC,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAC5C,UAAU,EAAE;YACV,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,CAAC;YACf,QAAQ,EAAE,OAAO,CAAC;YAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;SAC5D,CAAC;QACF,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,SAAS,EAAE,CAAC;QACnB,gBAAgB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;QAC5C,gBAAgB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;QAC5C,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,EAAE,EACnC,IAAI,EACJ,aAAkB,EAClB,YAAiB,EACjB,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,eAAe,EACf,QAAQ,EACR,YAAY,GACb,EAAE,KAAK,CAAC,CAAC,CAAC,2CA0HV"}

package/dist/components/file-input/index.js

@@ -8,11 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import clsx from "clsx";
-import FileItem from "./components/file-item";
-const generateTempFileId = (type, size, name) => `(${type})-${size}-${name}`;
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 export var AcceptedTypes;
 (function (AcceptedTypes) {
     AcceptedTypes["Image"] = "image/*";
@@ -28,15 +25,17 @@ export var UploadStatuses;
     UploadStatuses["Uploaded"] = "Uploaded";
     UploadStatuses["Failed"] = "Failed";
 })(UploadStatuses || (UploadStatuses = {}));
-export default function FileInput({ name, files, setFiles, acceptedTypes = [], multiple, errorMessage, onUpload, onDelete, onUploadSuccess, onDeleteSuccess, }) {
-    const currentFileIds = files.map((file) => generateTempFileId(file.type, file.size, file.name));
-    const [isDragging, setIsDragging] = useState(false);
+const generateTempFileId = (type, size, name) => `(${type})-${size}-${name}`;
+export default function FileInput({ name, acceptedTypes = [], initialFiles = [], multiple = false, onUpload, onDelete, onUploadSuccess, onDeleteSuccess, children, errorMessage, }) {
     const inputRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [files, setFiles] = useState(initialFiles);
+    const currentFileIds = files.map((file) => generateTempFileId(file.type, file.size, file.name));
     const handleFiles = (selectedFiles) => {
         if (!selectedFiles)
             return;
-        const selectedFilesArray = Array.from(selectedFiles);
-        const filesToUpload = selectedFilesArray.filter((f) => !currentFileIds.includes(generateTempFileId(f.type, f.size, f.name)));
+        const selectedArray = Array.from(selectedFiles);
+        const filesToUpload = selectedArray.filter((f) => !currentFileIds.includes(generateTempFileId(f.type, f.size, f.name)));
         const newFiles = filesToUpload.map((f) => ({
             id: generateTempFileId(f.type, f.size, f.name),
             serverId: undefined,
@@ -48,38 +47,61 @@ export default function FileInput({ name, files, setFiles, acceptedTypes = [], m
             status: UploadStatuses.Pending,
         }));
         setFiles((prev) => [...prev, ...newFiles]);
-        for (let i = 0; i < newFiles.length; i++) {
-            handleUploadFile(newFiles[i]);
-        }
+        newFiles.forEach(handleUploadFile);
     };
     const handleUploadFile = (file) => __awaiter(this, void 0, void 0, function* () {
+        setFiles((prev) => prev.map((f) => f.id === file.id ? Object.assign(Object.assign({}, f), { status: UploadStatuses.Uploading }) : f));
         try {
-            setFiles((prev) => prev.map((f) => f.id === file.id ? Object.assign(Object.assign({}, f), { status: UploadStatuses.Uploading }) : f));
             const result = yield onUpload(file);
-            onUploadSuccess(result);
-            setFiles((prev) => prev.map((f) => f.id === file.id
-                ? Object.assign(Object.assign({}, f), { serverId: result.id, status: UploadStatuses.Uploaded, progress: 100 }) : f));
+            onUploadSuccess === null || onUploadSuccess === void 0 ? void 0 : onUploadSuccess(result); // This allows parent to set `iconFileId`
+            // For single-file mode: remove old uploaded file if any
+            if (!multiple) {
+                const uploadedFile = Object.assign(Object.assign({}, file), { serverId: result.id, status: UploadStatuses.Uploaded, progress: 100 });
+                const oldUploaded = files.find((f) => f.status === UploadStatuses.Uploaded);
+                // Delete old uploaded file
+                if (oldUploaded && oldUploaded.serverId) {
+                    yield onDelete(oldUploaded);
+                    onDeleteSuccess === null || onDeleteSuccess === void 0 ? void 0 : onDeleteSuccess(oldUploaded);
+                }
+                setFiles([uploadedFile]); // Keep only the new one
+            }
+            else {
+                setFiles((prev) => prev.map((f) => f.id === file.id
+                    ? Object.assign(Object.assign({}, f), { serverId: result.id, status: UploadStatuses.Uploaded, progress: 100 }) : f));
+            }
         }
-        catch (error) {
+        catch (_a) {
             setFiles((prev) => prev.map((f) => f.id === file.id ? Object.assign(Object.assign({}, f), { status: UploadStatuses.Failed }) : f));
         }
     });
-    const handleDrop = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setIsDragging(false);
-        handleFiles(event.dataTransfer.files);
-    };
     const handleDeleteFile = (file) => __awaiter(this, void 0, void 0, function* () {
         try {
             const result = yield onDelete(file);
-            onDeleteSuccess(result);
-            setFiles((prev) => prev.filter((file) => file.serverId !== result.id));
+            onDeleteSuccess === null || onDeleteSuccess === void 0 ? void 0 : onDeleteSuccess(result);
+            setFiles((prev) => prev.filter((f) => f.serverId !== result.id));
         }
-        catch (error) { }
+        catch (_a) { }
     });
-    return (_jsxs("div", { className: "w-full flex flex-col gap-1", children: [(!files.length || multiple) && (_jsxs("div", { className: clsx("border-0.5 px-3 py-2 rounded-xl text-center", "cursor-pointer transition-all duration-200 ease-in-out", "hover:border-primary", errorMessage ? "border-error" : isDragging && "border-primary"), onDragOver: (e) => {
-                    e.preventDefault();
-                    setIsDragging(true);
-                }, onDragLeave: () => setIsDragging(false), onDrop: handleDrop, onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [_jsx("p", { className: "text-text-light", children: "Drag & Drop files here or click to select files" }), _jsx("input", { id: name, name: name, ref: inputRef, type: "file", className: "hidden", accept: acceptedTypes.join(","), multiple: multiple, onChange: (e) => handleFiles(e.target.files) })] })), _jsx("div", { className: "flex flex-nowrap gap-2 overflow-y-auto", children: files.map((f, i) => (_jsx(FileItem, { file: f, handleUploadFile: handleUploadFile, handleDeleteFile: handleDeleteFile }, `file-${name}-${i}`))) }), errorMessage && (_jsx("p", { className: "pl-1 text-sm text-error", children: errorMessage }))] }));
+    useEffect(() => {
+        if (initialFiles && initialFiles.length > 0) {
+            setFiles(initialFiles);
+        }
+    }, [initialFiles]);
+    return (_jsx(_Fragment, { children: children({
+            inputRef,
+            inputProps: {
+                id: name,
+                name,
+                type: "file",
+                accept: acceptedTypes.join(","),
+                multiple,
+                onChange: (e) => handleFiles(e.target.files),
+            },
+            isDragging,
+            files,
+            handleDeleteFile,
+            handleUploadFile,
+            setFiles,
+            errorMessage,
+        }) }));
 }

package/dist/components/file-input-v2/file-input/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type Props = {
+    inputRef: React.RefObject<HTMLInputElement>;
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    handleClick: () => void;
+    handleDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+    handleDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+    handleDragLeave: () => void;
+    isDragging: boolean;
+    errorMessage?: string | boolean;
+    children?: React.ReactNode;
+};
+export default function FileInputV2({ inputRef, inputProps, handleClick, handleDrop, handleDragOver, handleDragLeave, isDragging, errorMessage, children, }: Props): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/file-input-v2/file-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/file-input-v2/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACxD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,eAAe,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,EAAE,KAAK,2CAuBP"}