flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/forms/DatePicker/DatePickerContent.js

@@ -0,0 +1,232 @@
+import React__default, { useContext, useState, useMemo, useEffect } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { Calendar } from '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import { Button } from '../../core/Button/Button.js';
+import { cn } from '../../../utils/cn.js';
+import { DatePickerContext } from './DatePicker.js';
+import { DatePickerPresets } from './DatePickerPresets.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { createDropdownAnimations } from './DatePicker.animations.js';
+
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * DatePicker Content Component - contains the Calendar and optional Presets
+ * Uses portal positioning like Select component
+ */
+const DatePickerContent = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error("DatePickerContent must be used within a DatePicker");
+    }
+    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, } = context;
+    // Determine if we should show presets
+    const showPresets = mode === "range" && presets && presets.length > 0;
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    // Temp range state for range mode (not committed until Apply is clicked)
+    const [tempRange, setTempRange] = useState(mode === "range" &&
+        selectedValue &&
+        typeof selectedValue === "object" &&
+        "start" in selectedValue
+        ? selectedValue
+        : undefined);
+    // Handle preset selection - update calendar view to show the range
+    const handlePresetSelect = (range) => {
+        if (range.start) {
+            setLeftCalendarDate(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+    };
+    // Dual calendar state for range mode
+    const getInitialLeftDate = () => {
+        if (mode === "range" && (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start)) {
+            return tempRange.start;
+        }
+        if (mode === "range" &&
+            selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue) {
+            return selectedValue.start || new Date();
+        }
+        return new Date();
+    };
+    const [leftCalendarDate, setLeftCalendarDate] = useState(getInitialLeftDate);
+    // Right calendar always shows next month
+    const rightCalendarDate = useMemo(() => {
+        const nextMonth = new Date(leftCalendarDate);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    }, [leftCalendarDate]);
+    // Navigation handlers for dual calendar
+    const handleNavigatePrev = () => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate;
+        });
+    };
+    const handleNavigateNext = () => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate;
+        });
+    };
+    // Footer handlers for range mode
+    const handleApply = () => {
+        if (tempRange && mode === "range") {
+            handleRangeSelect === null || handleRangeSelect === void 0 ? void 0 : handleRangeSelect(tempRange); // Commit the temp range
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleCancel = () => {
+        // Reset temp range to committed value
+        setTempRange(selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue
+            ? selectedValue
+            : undefined);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    // Format range for footer display
+    const formatRangeDisplay = (range) => {
+        if (!(range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end))
+            return "Select start and end dates";
+        if (!range.end)
+            return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ...`;
+        return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ${formatDateCustom(range.end, "DD/MM/YYYY")}`;
+    };
+    // Use simplified dropdown positioning hook (same as Select)
+    const { position, cssVariables, contentRef: portalContentRef, isFlipped, isReady, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement,
+        offset,
+        autoWidth: true, // Allow dropdown to size to its content
+    });
+    // Create direction-aware animations based on dropdown placement
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs for portal and legacy usage
+    const combinedRef = React__default.useCallback((el) => {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current =
+                el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [contentRef, portalContentRef]);
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const currentContentRef = portal
+                ? portalContentRef.current
+                : contentRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(event.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
+    // Handle escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    const contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: {
+            ...cssVariables,
+            ...(portal
+                ? {
+                    top: `${position.top}px`,
+                    left: `${position.left}px`,
+                    minWidth: `${position.width}px`,
+                }
+                : {}),
+        }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit" },
+        showPresets && presets && (React__default.createElement(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })),
+        React__default.createElement("div", { className: "flex flex-col flex-1" }, mode === "range" ? (
+        // Dual calendar for range mode
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "flex justify-between items-start gap-6 p-4" }, children || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "flex-1 min-w-fit" },
+                    React__default.createElement(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                            setTempRange(value); // Update temp state only
+                        }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })),
+                React__default.createElement("div", { className: "flex-1 min-w-fit" },
+                    React__default.createElement(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                            setTempRange(value); // Update temp state only
+                        }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                            // Adjust left calendar when right calendar changes
+                            const adjustedLeft = new Date(newDate);
+                            adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                            setLeftCalendarDate(adjustedLeft);
+                        }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, size: "md" }))))),
+            React__default.createElement("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]" },
+                React__default.createElement("div", { className: "text-sm text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]" }, formatRangeDisplay(tempRange)),
+                React__default.createElement("div", { className: "flex items-center gap-2" },
+                    React__default.createElement(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel }, "Cancel"),
+                    React__default.createElement(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end) }, "Apply"))))) : (
+        // Single calendar for single mode
+        React__default.createElement("div", { className: "flex-1 p-4" }, children || (React__default.createElement(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
+                handleDateSelect(value);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })))))))));
+    // Use portal if enabled and client-side - wrap with dark class for dark mode support
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, contentElement), document.body);
+    }
+    return contentElement;
+};
+
+export { DatePickerContent };

package/dist/components/forms/DatePicker/DatePickerPresets.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DateRangePreset, DateRange } from './DatePicker.types';
+/**
+ * DatePicker Presets Component - displays preset date range buttons
+ */
+export interface DatePickerPresetsProps {
+    presets: DateRangePreset[];
+    className?: string;
+    setTempRange?: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+    onPresetSelect?: (range: DateRange) => void;
+}
+export declare const DatePickerPresets: React.FC<DatePickerPresetsProps>;

package/dist/components/forms/DatePicker/DatePickerPresets.js

@@ -0,0 +1,40 @@
+import React__default, { useContext } from 'react';
+import { DatePickerContext } from './DatePicker.js';
+import { cn } from '../../../utils/cn.js';
+
+const DatePickerPresets = ({ presets, className, setTempRange, onPresetSelect, }) => {
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePickerPresets must be used within a DatePicker');
+    }
+    const { theme, selectedValue } = context;
+    // Check if a preset is currently active (compare against committed selectedValue)
+    const isPresetActive = (preset) => {
+        if (!selectedValue || typeof selectedValue !== 'object' || !('start' in selectedValue)) {
+            return false;
+        }
+        const presetRange = preset.getValue();
+        const currentRange = selectedValue;
+        // Compare dates (ignoring time)
+        const isSameDate = (d1, d2) => {
+            if (!d1 || !d2)
+                return d1 === d2;
+            return (d1.getFullYear() === d2.getFullYear() &&
+                d1.getMonth() === d2.getMonth() &&
+                d1.getDate() === d2.getDate());
+        };
+        return (isSameDate(currentRange.start, presetRange.start) &&
+            isSameDate(currentRange.end, presetRange.end));
+    };
+    const handlePresetClick = (preset) => {
+        const range = preset.getValue();
+        // Update tempRange to show visual selection on calendar
+        // The range is only committed when Apply button is clicked
+        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
+        // Notify parent to adjust calendar view
+        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
+    };
+    return (React__default.createElement("div", { className: cn(theme.presetsContainerStyle, className) }, presets.map((preset, index) => (React__default.createElement("button", { key: index, type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": isPresetActive(preset) }, preset.label)))));
+};
+
+export { DatePickerPresets };

package/dist/components/forms/DatePicker/DatePickerTrigger.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DatePickerTriggerProps } from "./DatePicker.types";
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+export declare const DatePickerTrigger: React.FC<DatePickerTriggerProps>;

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -0,0 +1,37 @@
+import React__default, { useContext } from 'react';
+import { CalendarIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { DatePickerContext } from './DatePicker.js';
+
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+    var _a, _b, _c, _d;
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error("DatePickerTrigger must be used within a DatePicker");
+    }
+    const { theme, triggerRef } = context;
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
+    const triggerButtonStyle = theme.triggerButtonStyle || "";
+    // Apply focused styles when open - same pattern as SelectButton
+    const activeFocusState = isOpen
+        ? focusStateStyle ||
+            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (React__default.createElement("div", { className: "relative w-full" },
+        React__default.createElement("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar" },
+            children,
+            React__default.createElement("span", { className: iconEndStyle },
+                React__default.createElement(CalendarIcon, { className: "h-4 w-4" })))));
+};
+
+export { DatePickerTrigger };

package/dist/components/forms/DatePicker/index.d.ts

@@ -1,5 +1,3 @@
-export { DatePicker as default, DatePicker } from './DatePicker';
-export type { DatePickerProps, DatePickerDay, DatePickerThemeOverrides } from './DatePicker.types';
+export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
 export { datePickerTheme } from './DatePicker.theme';
-export { CalendarHeader, YearPicker, MonthPicker, DateInput } from './components';
-export type { CalendarHeaderProps, CalendarHeaderThemeOverrides, CalendarView, YearPickerProps, YearPickerThemeOverrides, MonthPickerProps, MonthPickerThemeOverrides, DateInputProps } from './components';

package/dist/components/forms/FileUpload/FileUpload.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { FileUploadProps } from "./FileUpload.types";
+/**
+ * FileUpload component - Drag-and-drop file uploader with previews
+ *
+ * Features:
+ * - Click to select files or drag-and-drop
+ * - File type and size validation
+ * - Image preview thumbnails
+ * - Multiple file support
+ * - Maximum file limits
+ * - Accessible and keyboard-friendly
+ * - Full theme customization
+ *
+ * @example
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   multiple
+ *   onUpload={(files) => console.log(files)}
+ * />
+ */
+export declare const FileUpload: React.FC<FileUploadProps>;

package/dist/components/forms/FileUpload/FileUpload.js

@@ -0,0 +1,294 @@
+import React__default, { useRef, useState, useCallback } from 'react';
+import { fileUploadTheme } from './FileUpload.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
+import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import 'motion/react';
+import '../Select/Select.js';
+import '../Select/Select.theme.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/Kbd/Kbd.js';
+import '../../effects/Overlay/Overlay.js';
+import '../../core/Divider/Divider.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Link/Link.js';
+import '../../core/Loader/Loader.js';
+import '../../core/Modal/Modal.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/ProgressiveBlur/ProgressiveBlur.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Stepper/Stepper.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsContent.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '../../core/Notification/Notification.js';
+import '@heroicons/react/24/solid';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Empty/Empty.js';
+import '../../core/Table/index.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarContext.js';
+
+/**
+ * FileUpload component - Drag-and-drop file uploader with previews
+ *
+ * Features:
+ * - Click to select files or drag-and-drop
+ * - File type and size validation
+ * - Image preview thumbnails
+ * - Multiple file support
+ * - Maximum file limits
+ * - Accessible and keyboard-friendly
+ * - Full theme customization
+ *
+ * @example
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   multiple
+ *   onUpload={(files) => console.log(files)}
+ * />
+ */
+const FileUpload = ({ accept, multiple = false, maxSize, maxFiles, disabled = false, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }) => {
+    // Merge custom theme with default theme
+    const theme = customTheme
+        ? { ...fileUploadTheme, ...customTheme }
+        : fileUploadTheme;
+    const inputRef = useRef(null);
+    const [isDragActive, setIsDragActive] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [previewUrls, setPreviewUrls] = useState(new Map());
+    // Convert accept prop to array
+    const acceptTypes = Array.isArray(accept) ? accept : accept ? [accept] : [];
+    const acceptString = acceptTypes.join(",");
+    // Validate file type
+    const isValidFileType = useCallback((file) => {
+        if (acceptTypes.length === 0)
+            return true;
+        return acceptTypes.some((type) => {
+            // Handle wildcards like "image/*"
+            if (type.includes("/*")) {
+                const [category] = type.split("/");
+                return file.type.startsWith(`${category}/`);
+            }
+            // Handle file extensions like ".pdf"
+            if (type.startsWith(".")) {
+                return file.name.toLowerCase().endsWith(type.toLowerCase());
+            }
+            // Handle exact MIME types
+            return file.type === type;
+        });
+    }, [acceptTypes]);
+    // Validate file size
+    const isValidFileSize = useCallback((file) => {
+        if (!maxSize)
+            return true;
+        return file.size <= maxSize;
+    }, [maxSize]);
+    // Create preview URL for images
+    const createPreview = useCallback((file) => {
+        if (file.type.startsWith("image/")) {
+            const url = URL.createObjectURL(file);
+            setPreviewUrls((prev) => new Map(prev).set(file, url));
+        }
+    }, []);
+    // Clean up preview URLs
+    const revokePreview = useCallback((file) => {
+        const url = previewUrls.get(file);
+        if (url) {
+            URL.revokeObjectURL(url);
+            setPreviewUrls((prev) => {
+                const newMap = new Map(prev);
+                newMap.delete(file);
+                return newMap;
+            });
+        }
+    }, [previewUrls]);
+    // Handle file selection/drop
+    const handleFiles = useCallback((files) => {
+        if (!files || files.length === 0)
+            return;
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        // Validate each file
+        for (const file of fileArray) {
+            // Check file type
+            if (!isValidFileType(file)) {
+                const error = {
+                    type: "file-invalid-type",
+                    message: `File type not accepted: ${file.name}`,
+                    file,
+                };
+                onError === null || onError === void 0 ? void 0 : onError(error);
+                continue;
+            }
+            // Check file size
+            if (!isValidFileSize(file)) {
+                const maxSizeMB = maxSize ? (maxSize / 1000000).toFixed(2) : "0";
+                const error = {
+                    type: "file-too-large",
+                    message: `File too large: ${file.name} (max ${maxSizeMB}MB)`,
+                    file,
+                };
+                onError === null || onError === void 0 ? void 0 : onError(error);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        // Check max files limit
+        if (maxFiles && selectedFiles.length + validFiles.length > maxFiles) {
+            const error = {
+                type: "too-many-files",
+                message: `Maximum ${maxFiles} files allowed`,
+            };
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        // Update selected files
+        const newFiles = multiple
+            ? [...selectedFiles, ...validFiles]
+            : validFiles;
+        setSelectedFiles(newFiles);
+        // Create previews
+        validFiles.forEach(createPreview);
+        // Call onUpload callback
+        onUpload === null || onUpload === void 0 ? void 0 : onUpload(validFiles);
+    }, [
+        isValidFileType,
+        isValidFileSize,
+        maxSize,
+        maxFiles,
+        selectedFiles,
+        multiple,
+        onUpload,
+        onError,
+        createPreview,
+    ]);
+    // Handle drag events
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setIsDragActive(true);
+    }, [disabled]);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+        if (disabled)
+            return;
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    }, [disabled, handleFiles]);
+    // Handle click to select files
+    const handleClick = useCallback(() => {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, [disabled]);
+    // Handle input change
+    const handleInputChange = useCallback((e) => {
+        handleFiles(e.target.files);
+        // Reset input value to allow selecting the same file again
+        e.target.value = "";
+    }, [handleFiles]);
+    // Handle file removal
+    const handleRemoveFile = useCallback((file) => {
+        setSelectedFiles((prev) => prev.filter((f) => f !== file));
+        revokePreview(file);
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+    }, [onRemove, revokePreview]);
+    // Format file size
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    return (React__default.createElement("div", { className: cn(theme.containerStyle, className), ...props },
+        React__default.createElement("input", { ref: inputRef, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: disabled, className: "sr-only", "aria-label": "File upload" }),
+        React__default.createElement("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, disabled && theme.dropzoneDisabledStyle), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClick();
+                }
+            } },
+            React__default.createElement("div", { className: theme.contentStyle },
+                React__default.createElement("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4" },
+                    React__default.createElement(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` })),
+                React__default.createElement("p", { className: "text-sm font-medium text-[var(--color-text-primary)]" },
+                    React__default.createElement("span", { className: "text-[var(--color-primary)] font-semibold" }, buttonText),
+                    " ",
+                    helperText),
+                description && (React__default.createElement("p", { className: "text-xs text-[var(--color-text-muted)] mt-1" }, description)))),
+        showPreview && selectedFiles.length > 0 && (React__default.createElement("div", { className: theme.previewContainerStyle }, selectedFiles.map((file, index) => {
+            const previewUrl = previewUrls.get(file);
+            const isImage = file.type.startsWith("image/");
+            return (React__default.createElement("div", { key: `${file.name}-${index}`, className: theme.previewItemStyle },
+                isImage && previewUrl ? (React__default.createElement("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (React__default.createElement("div", { className: theme.previewFileStyle },
+                    React__default.createElement(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }),
+                    React__default.createElement("span", { className: "text-xs" }, file.name),
+                    React__default.createElement("span", { className: "text-xs text-[var(--color-text-placeholder)] mt-1" }, formatFileSize(file.size)))),
+                React__default.createElement(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
+                        e.stopPropagation();
+                        handleRemoveFile(file);
+                    }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6") },
+                    React__default.createElement(XMarkIcon, { className: "size-4", strokeWidth: 2 }))));
+        })))));
+};
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };