flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { DatePickerContentProps } from './DatePicker.types';
+import React from "react";
+import { DatePickerContentProps } from "./DatePicker.types";
 /**
  * DatePicker Content Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component

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

@@ -1,32 +1,66 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 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 { cn } from '../../../utils/cn.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';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
+/**
+ * Hook to detect dark mode state from document
+ */
+var useDarkMode = function () {
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined")
+            return;
+        var checkDarkMode = function () {
+            var 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
+        var observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return isDark;
+};
 /**
  * DatePicker Content Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component
  */
 var DatePickerContent = function (_a) {
-    var isOpen = _a.isOpen, className = _a.className, onClose = _a.onClose, _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.offset, offset = _d === void 0 ? 4 : _d, presets = _a.presets, children = _a.children;
+    var isOpen = _a.isOpen, className = _a.className, onClose = _a.onClose, _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? "bottom-start" : _c, _d = _a.offset, offset = _d === void 0 ? 4 : _d, presets = _a.presets, children = _a.children;
     var context = useContext(DatePickerContext);
     if (!context) {
-        throw new Error('DatePickerContent must be used within a DatePicker');
+        throw new Error("DatePickerContent must be used within a DatePicker");
     }
     var mode = context.mode, theme = context.theme, triggerRef = context.triggerRef, contentRef = context.contentRef, selectedValue = context.selectedValue, minDate = context.minDate, maxDate = context.maxDate, isDateDisabled = context.isDateDisabled, showToday = context.showToday, selectTodayByDefault = context.selectTodayByDefault, weekdays = context.weekdays, months = context.months, handleDateSelect = context.handleDateSelect, handleRangeSelect = context.handleRangeSelect;
     // Determine if we should show presets
-    var showPresets = mode === 'range' && presets && presets.length > 0;
+    var showPresets = mode === "range" && presets && presets.length > 0;
+    // Detect dark mode for portal content
+    var isDarkMode = useDarkMode();
     // Temp range state for range mode (not committed until Apply is clicked)
-    var _e = useState(mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+    var _e = useState(mode === "range" &&
+        selectedValue &&
+        typeof selectedValue === "object" &&
+        "start" in selectedValue
         ? selectedValue
         : undefined), tempRange = _e[0], setTempRange = _e[1];
     // Handle preset selection - update calendar view to show the range
@@ -37,10 +71,13 @@ var DatePickerContent = function (_a) {
     };
     // Dual calendar state for range mode
     var getInitialLeftDate = function () {
-        if (mode === 'range' && (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start)) {
+        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) {
+        if (mode === "range" &&
+            selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue) {
             return selectedValue.start || new Date();
         }
         return new Date();
@@ -69,14 +106,16 @@ var DatePickerContent = function (_a) {
     };
     // Footer handlers for range mode
     var handleApply = function () {
-        if (tempRange && mode === 'range') {
+        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();
     };
     var handleCancel = function () {
         // Reset temp range to committed value
-        setTempRange(selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+        setTempRange(selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue
             ? selectedValue
             : undefined);
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -84,10 +123,10 @@ var DatePickerContent = function (_a) {
     // Format range for footer display
     var formatRangeDisplay = function (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';
+            return "Select start and end dates";
         if (!range.end)
-            return "".concat(formatDateCustom(range.start, 'DD/MM/YYYY'), " - ...");
-        return "".concat(formatDateCustom(range.start, 'DD/MM/YYYY'), " - ").concat(formatDateCustom(range.end, 'DD/MM/YYYY'));
+            return "".concat(formatDateCustom(range.start, "DD/MM/YYYY"), " - ...");
+        return "".concat(formatDateCustom(range.start, "DD/MM/YYYY"), " - ").concat(formatDateCustom(range.end, "DD/MM/YYYY"));
     };
     // Use simplified dropdown positioning hook (same as Select)
     var _g = useSelectPortal({
@@ -101,10 +140,15 @@ var DatePickerContent = function (_a) {
     var animations = createDropdownAnimations(isFlipped);
     // Combine refs for portal and legacy usage
     var combinedRef = React__default.useCallback(function (el) {
-        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
-            contentRef.current = el;
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current =
+                el;
         }
-        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
             portalContentRef.current = el;
         }
     }, [contentRef, portalContentRef]);
@@ -113,7 +157,9 @@ var DatePickerContent = function (_a) {
         if (!isOpen)
             return;
         var handleClickOutside = function (event) {
-            var currentContentRef = portal ? portalContentRef.current : contentRef.current;
+            var currentContentRef = portal
+                ? portalContentRef.current
+                : contentRef.current;
             if (currentContentRef &&
                 !currentContentRef.contains(event.target) &&
                 triggerRef.current &&
@@ -121,9 +167,9 @@ var DatePickerContent = function (_a) {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
-        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
         return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
     // Handle escape key
@@ -131,22 +177,24 @@ var DatePickerContent = function (_a) {
         if (!isOpen)
             return;
         var handleKeyDown = function (event) {
-            if (event.key === 'Escape') {
+            if (event.key === "Escape") {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener("keydown", handleKeyDown);
         return function () {
-            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    var contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: __assign(__assign({}, cssVariables), (portal ? {
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-            minWidth: "".concat(position.width, "px"),
-        } : {})), variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit" },
+    var contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: __assign(__assign({}, cssVariables), (portal
+            ? {
+                top: "".concat(position.top, "px"),
+                left: "".concat(position.left, "px"),
+                minWidth: "".concat(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' ? (
+        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,
@@ -163,8 +211,8 @@ var DatePickerContent = function (_a) {
                             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)]" },
-                React__default.createElement("div", { className: "text-sm text-[var(--color-text-secondary)]" }, formatRangeDisplay(tempRange)),
+            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"))))) : (
@@ -173,10 +221,11 @@ var DatePickerContent = function (_a) {
                 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
-    return portal && typeof document !== 'undefined'
-        ? createPortal(contentElement, document.body)
-        : contentElement;
+    // 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/DatePickerTrigger.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { DatePickerTriggerProps } from './DatePicker.types';
+import React from "react";
+import { DatePickerTriggerProps } from "./DatePicker.types";
 /**
  * DatePicker Trigger Component - styled like form input
  * Displays selected date or placeholder text

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

@@ -1,7 +1,7 @@
 import React__default, { useContext } from 'react';
+import { CalendarIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { DatePickerContext } from './DatePicker.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/CalendarIcon.js';
 
 /**
  * DatePicker Trigger Component - styled like form input
@@ -9,10 +9,10 @@ import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Ca
  */
 var DatePickerTrigger = function (_a) {
     var _b, _c, _d, _e;
-    var id = _a.id, disabled = _a.disabled, isOpen = _a.isOpen, _f = _a.state, state = _f === void 0 ? 'default' : _f, _g = _a.size, size = _g === void 0 ? 'md' : _g, className = _a.className, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children;
+    var id = _a.id, disabled = _a.disabled, isOpen = _a.isOpen, _f = _a.state, state = _f === void 0 ? "default" : _f, _g = _a.size, size = _g === void 0 ? "md" : _g, className = _a.className, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children;
     var context = useContext(DatePickerContext);
     if (!context) {
-        throw new Error('DatePickerTrigger must be used within a DatePicker');
+        throw new Error("DatePickerTrigger must be used within a DatePicker");
     }
     var theme = context.theme, triggerRef = context.triggerRef;
     var baseStyle = theme.baseStyle || "";
@@ -22,16 +22,17 @@ var DatePickerTrigger = function (_a) {
     var focusStateStyle = ((_e = theme.triggerFocusStates) === null || _e === void 0 ? void 0 : _e[state]) || "";
     var iconEndStyle = theme.iconEndStyle || "";
     var iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
+    var triggerButtonStyle = theme.triggerButtonStyle || "";
     // Apply focused styles when open - same pattern as SelectButton
     var activeFocusState = isOpen
-        ? focusStateStyle || "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        ? 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, 'w-full cursor-pointer bg-white text-left', className // User overrides take highest precedence
-            ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar" },
+        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(ForwardRef, { className: "h-4 w-4" })))));
+                React__default.createElement(CalendarIcon, { className: "h-4 w-4" })))));
 };
 
 export { DatePickerTrigger };

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

@@ -0,0 +1,299 @@
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useCallback } from 'react';
+import { fileUploadTheme } from './FileUpload.theme.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.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';
+import '../../core/RetryBoundary/RetryBoundary.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)}
+ * />
+ */
+var FileUpload = function (_a) {
+    var accept = _a.accept, _b = _a.multiple, multiple = _b === void 0 ? false : _b, maxSize = _a.maxSize, maxFiles = _a.maxFiles, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onUpload = _a.onUpload, onRemove = _a.onRemove, onError = _a.onError, _d = _a.showPreview, showPreview = _d === void 0 ? true : _d, _e = _a.buttonText, buttonText = _e === void 0 ? "Choose files" : _e, _f = _a.helperText, helperText = _f === void 0 ? "or drag and drop" : _f, description = _a.description, className = _a.className, customTheme = _a.theme, props = __rest(_a, ["accept", "multiple", "maxSize", "maxFiles", "disabled", "onUpload", "onRemove", "onError", "showPreview", "buttonText", "helperText", "description", "className", "theme"]);
+    // Merge custom theme with default theme
+    var theme = customTheme
+        ? __assign(__assign({}, fileUploadTheme), customTheme) : fileUploadTheme;
+    var inputRef = useRef(null);
+    var _g = useState(false), isDragActive = _g[0], setIsDragActive = _g[1];
+    var _h = useState([]), selectedFiles = _h[0], setSelectedFiles = _h[1];
+    var _j = useState(new Map()), previewUrls = _j[0], setPreviewUrls = _j[1];
+    // Convert accept prop to array
+    var acceptTypes = Array.isArray(accept) ? accept : accept ? [accept] : [];
+    var acceptString = acceptTypes.join(",");
+    // Validate file type
+    var isValidFileType = useCallback(function (file) {
+        if (acceptTypes.length === 0)
+            return true;
+        return acceptTypes.some(function (type) {
+            // Handle wildcards like "image/*"
+            if (type.includes("/*")) {
+                var category = type.split("/")[0];
+                return file.type.startsWith("".concat(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
+    var isValidFileSize = useCallback(function (file) {
+        if (!maxSize)
+            return true;
+        return file.size <= maxSize;
+    }, [maxSize]);
+    // Create preview URL for images
+    var createPreview = useCallback(function (file) {
+        if (file.type.startsWith("image/")) {
+            var url_1 = URL.createObjectURL(file);
+            setPreviewUrls(function (prev) { return new Map(prev).set(file, url_1); });
+        }
+    }, []);
+    // Clean up preview URLs
+    var revokePreview = useCallback(function (file) {
+        var url = previewUrls.get(file);
+        if (url) {
+            URL.revokeObjectURL(url);
+            setPreviewUrls(function (prev) {
+                var newMap = new Map(prev);
+                newMap.delete(file);
+                return newMap;
+            });
+        }
+    }, [previewUrls]);
+    // Handle file selection/drop
+    var handleFiles = useCallback(function (files) {
+        if (!files || files.length === 0)
+            return;
+        var fileArray = Array.from(files);
+        var validFiles = [];
+        // Validate each file
+        for (var _i = 0, fileArray_1 = fileArray; _i < fileArray_1.length; _i++) {
+            var file = fileArray_1[_i];
+            // Check file type
+            if (!isValidFileType(file)) {
+                var error = {
+                    type: "file-invalid-type",
+                    message: "File type not accepted: ".concat(file.name),
+                    file: file,
+                };
+                onError === null || onError === void 0 ? void 0 : onError(error);
+                continue;
+            }
+            // Check file size
+            if (!isValidFileSize(file)) {
+                var maxSizeMB = maxSize ? (maxSize / 1000000).toFixed(2) : "0";
+                var error = {
+                    type: "file-too-large",
+                    message: "File too large: ".concat(file.name, " (max ").concat(maxSizeMB, "MB)"),
+                    file: 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) {
+            var error = {
+                type: "too-many-files",
+                message: "Maximum ".concat(maxFiles, " files allowed"),
+            };
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        // Update selected files
+        var newFiles = multiple
+            ? __spreadArray(__spreadArray([], selectedFiles, true), validFiles, true) : 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
+    var handleDragEnter = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setIsDragActive(true);
+    }, [disabled]);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+    }, []);
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+        if (disabled)
+            return;
+        var files = e.dataTransfer.files;
+        handleFiles(files);
+    }, [disabled, handleFiles]);
+    // Handle click to select files
+    var handleClick = useCallback(function () {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, [disabled]);
+    // Handle input change
+    var handleInputChange = useCallback(function (e) {
+        handleFiles(e.target.files);
+        // Reset input value to allow selecting the same file again
+        e.target.value = "";
+    }, [handleFiles]);
+    // Handle file removal
+    var handleRemoveFile = useCallback(function (file) {
+        setSelectedFiles(function (prev) { return prev.filter(function (f) { return f !== file; }); });
+        revokePreview(file);
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+    }, [onRemove, revokePreview]);
+    // Format file size
+    var formatFileSize = function (bytes) {
+        if (bytes === 0)
+            return "0 Bytes";
+        var k = 1024;
+        var sizes = ["Bytes", "KB", "MB", "GB"];
+        var 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", __assign({ 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: function (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(function (file, index) {
+            var previewUrl = previewUrls.get(file);
+            var isImage = file.type.startsWith("image/");
+            return (React__default.createElement("div", { key: "".concat(file.name, "-").concat(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: function (e) {
+                        e.stopPropagation();
+                        handleRemoveFile(file);
+                    }, "aria-label": "Remove ".concat(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 };

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

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+var fileUploadTheme = {
+    // Container wrapper
+    containerStyle: "w-full",
+    // Dropzone area (default state)
+    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-rounded)] bg-[var(--color-background-secondary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-primary)] transition-colors duration-400 cursor-pointer",
+    // Dropzone when dragging over
+    dropzoneActiveStyle: "border-[var(--color-primary)] bg-[var(--color-primary-50)] scale-[1.01]",
+    // Dropzone when disabled
+    dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)]",
+    // Content wrapper inside dropzone
+    contentStyle: "flex flex-col items-center text-center pointer-events-none",
+    // Upload icon
+    iconStyle: "size-8 text-[var(--color-text-placeholder)]",
+    // Main text
+    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    // Helper text
+    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    // Description below dropzone
+    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
+    // Preview container
+    previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
+    // Individual preview item
+    previewItemStyle: "relative group rounded-lg border border-[var(--color-border)] overflow-hidden bg-[var(--color-background-secondary)]",
+    // Preview image
+    previewImageStyle: "w-full h-32 object-cover",
+    // Preview file (non-image)
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
+    // Remove button
+    removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+};
+
+export { fileUploadTheme };

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

@@ -72,6 +72,10 @@ export interface FileUploadError {
     message: string;
     file?: File;
 }
+export interface UploadedFile {
+    file: File;
+    preview?: string;
+}
 export interface FileUploadThemeOverrides {
     containerStyle?: string;
     dropzoneStyle?: string;

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

@@ -1,3 +1,3 @@
 export { FileUpload } from './FileUpload';
 export { fileUploadTheme } from './FileUpload.theme';
-export type { FileUploadProps, FileUploadError } from './FileUpload.types';
+export type { FileUploadProps, FileUploadError, FileUploadThemeOverrides, UploadedFile } from './FileUpload.types';