@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.27

package/dist/components/effects/Aurora/Aurora.types.d.ts

@@ -10,6 +10,12 @@ export interface AuroraProps extends React.HTMLAttributes<HTMLDivElement> {
     opacity?: number;
     /** Blob size multiplier. Higher values = larger blobs (default: 1) */
     size?: number;
+    /** CSS mix-blend-mode for the aurora blobs (default: 'screen') */
+    blendMode?: 'screen' | 'color-dodge' | 'overlay' | 'hard-light' | 'normal' | 'plus-lighter';
+    /** Whether to render a premium stardust film-grain noise overlay on top (default: true) */
+    showNoise?: boolean;
+    /** Opacity of the noise overlay, 0 to 1 (default: 0.06) */
+    noiseOpacity?: number;
     /** Additional className for the container */
     className?: string;
 }

package/dist/components/forms/Combobox/Combobox.js

@@ -100,7 +100,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
                             }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
                     }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] })) })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }
     return optionsContent;
 };

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

@@ -28,14 +28,12 @@ const comboboxTheme = {
     focusStates: formsBaseTheme.focusStates,
     // Icon positioning styles
     iconStartStyle: formsBaseTheme.iconStyles.left,
-    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-500)]",
+    iconEndStyle: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-[var(--color-text-muted)]",
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Clear button styles
     clearButtonStyle: "absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer " +
-        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
-        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10",
     clearIconStyle: "size-4",
     // Dropdown styles - matches Select component for consistency
     dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",

package/dist/components/forms/CronInput/CronInput.js

@@ -104,7 +104,7 @@ const CronInput = React__default.forwardRef(({ value: controlledValue, defaultVa
     const showVisual = mode === "visual" || (mode === "both" && activeMode === "visual");
     const showRaw = mode === "raw" || (mode === "both" && activeMode === "raw");
     const helperId = `${generatedId}-helper`;
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: isDisabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: cn(theme.builderStyle, isInvalid && "ring-1 ring-[var(--color-danger)] rounded-[var(--form-radius)]"), children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: isDisabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: isDisabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size], isInvalid && "border-[var(--color-danger)] focus:border-[var(--color-danger)] focus:ring-[var(--color-danger)]"), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": isInvalid || !validateCron(rawInput), "aria-describedby": helperText ? helperId : undefined, spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-sm px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] })), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: isDisabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: isDisabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: cn(theme.builderStyle, isInvalid && "ring-1 ring-[var(--color-danger)] rounded-[var(--form-radius)]"), children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: isDisabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: isDisabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size], isInvalid && "border-[var(--color-danger)] focus:border-[var(--color-danger)] focus:ring-[var(--color-danger)]"), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": isInvalid || !validateCron(rawInput), "aria-describedby": helperText ? helperId : undefined, spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-sm px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-surface-sunken)] text-[var(--color-text-primary)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] })), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), children: helperText }))] }));
 });

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

@@ -8,21 +8,20 @@ const cronInputTheme = {
     // Outer wrapper
     baseStyle: "relative w-full flex flex-col gap-3",
     // Label
-    labelStyle: "text-sm font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    labelStyle: "text-sm font-medium text-[var(--color-text-primary)]",
     // Visual builder grid
     builderStyle: "grid grid-cols-5 gap-2",
     // Individual field group
     fieldGroupStyle: "flex flex-col gap-1",
     // Field label
-    fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)]",
     // Select dropdown
     fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-white text-[var(--color-text-primary)] cursor-pointer transition-all " +
-        "focus:shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
+        "bg-[var(--color-surface)] text-[var(--color-text-primary)] cursor-pointer transition-all " +
+        "focus:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
         "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
         "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
-        "dark:focus:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+        "dark:focus:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
     // Size variants for field selects
     fieldSelectSizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
@@ -31,13 +30,12 @@ const cronInputTheme = {
     },
     // Raw input field
     rawInputStyle: "w-full rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-white text-[var(--color-text-primary)] font-mono transition-all " +
+        "bg-[var(--color-surface)] text-[var(--color-text-primary)] font-mono transition-all " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
-        "focus:shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
+        "focus:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
         "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
         "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
-        "dark:focus:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+        "dark:focus:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
     // Size variants for raw input
     rawInputSizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
@@ -47,9 +45,7 @@ const cronInputTheme = {
     // Mode toggle button
     modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-xs font-medium " +
         "cursor-pointer transition-all outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
-        "dark:hover:bg-[var(--color-neutral-800)]",
+        "text-[var(--color-text-secondary)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)]",
     // Active mode toggle
     modeToggleActiveStyle: "shadow-[inset_0_0_0_1px_var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
         "hover:bg-[var(--color-primary-50)] " +
@@ -58,25 +54,20 @@ const cronInputTheme = {
     // Preset button
     presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-xs font-medium " +
         "cursor-pointer transition-all outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
-        "hover:text-[var(--color-text-primary)] " +
-        "dark:bg-[var(--color-neutral-900)] dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
-        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:text-[var(--color-neutral-200)]",
+        "text-[var(--color-text-secondary)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)] " +
+        "hover:text-[var(--color-text-primary)]",
     // Active preset button
     presetButtonActiveStyle: "shadow-[inset_0_0_0_1px_var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
         "hover:bg-[var(--color-primary-100)] " +
         "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
     // Human-readable description
-    descriptionStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-400)]",
+    descriptionStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)]",
     // Next runs container
     nextRunsStyle: "flex flex-col gap-1",
     // Individual next run item
-    nextRunItemStyle: "flex items-center gap-2 text-xs text-[var(--color-text-muted)] " +
-        "dark:text-[var(--color-neutral-400)]",
+    nextRunItemStyle: "flex items-center gap-2 text-xs text-[var(--color-text-muted)]",
     // Section heading
-    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
-        "dark:text-[var(--color-neutral-400)]",
+    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide",
     // Validation error
     errorStyle: "text-xs text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
 };

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

@@ -10,8 +10,8 @@ import { formsBaseTheme } from '../forms.theme.js';
 const datePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
-    // Trigger button style - bg-white for light mode; dark mode uses neutral-900
-    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Trigger button style - surface flips automatically between light/dark
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     // Placeholder text style - matches Input placeholder styling
     placeholderTextStyle: "text-[var(--color-text-placeholder)]",
     // Selected value text style
@@ -26,23 +26,16 @@ const datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    // Dropdown body - with dark mode support
-    bodyStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    // Presets sidebar - with dark mode support
-    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
-    // Preset button - with dark mode support
+    // Dropdown body - floating overlay surface flips automatically
+    bodyStyle: "min-w-fit max-w-none bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed",
+    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    // Presets sidebar - recessed sunken panel flips automatically
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
+    // Preset button - surface hover/active fills flip automatically
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
-        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
-        // Dark mode
-        "dark:text-[var(--color-neutral-400)] dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] " +
-        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
+        "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sunken)] " +
+        "data-[active=true]:bg-[var(--color-surface)] data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
     helperTextStyle: formsBaseTheme.helperText,
     helperTextStates: {
         default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",

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

@@ -26,7 +26,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
     // Apply focused styles when open - same pattern as SelectButton
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsx("div", { className: "relative w-full", children: jsxs("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", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };

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

@@ -6,7 +6,7 @@ import { formsBaseTheme } from '../forms.theme.js';
 const dateRangePickerTheme = {
     containerStyle: formsBaseTheme.wrapperStyle,
     baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
-    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--color-surface)]",
     placeholderTextStyle: "text-[var(--color-text-placeholder)]",
     valueTextStyle: "text-[var(--color-text-primary)]",
     triggerSizes: {
@@ -19,26 +19,19 @@ const dateRangePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
-        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
-        "dark:bg-[var(--color-neutral-800)] ",
+    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-[var(--color-surface-overlay)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "flex items-center justify-between gap-2 " +
-        "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
-        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
+        "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sunken)] " +
+        "data-[active=true]:bg-[var(--color-surface)] data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
     presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
     mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
     mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
         "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
         "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
         "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
-        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-300)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
     mobileRangeDisplayStyle: "sm:hidden text-xs text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     helperTextStyle: formsBaseTheme.helperText,

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -24,7 +24,7 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
     const triggerButtonStyle = theme.triggerButtonStyle || "";
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10"
         : "";
     return (jsx("div", { className: "relative w-full", children: jsxs("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 date range picker", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
 };

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

@@ -0,0 +1,29 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+export declare const PREVIEW_LAYOUT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+export declare const PREVIEW_ITEM: {
+    initial: {
+        opacity: number;
+        scale: number;
+    };
+    animate: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+};

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

@@ -0,0 +1,19 @@
+/** Spring used for thumbnail enter and for the layout reflow when items are removed. */
+const PREVIEW_LAYOUT_SPRING = {
+    type: "spring",
+    stiffness: 500,
+    damping: 38,
+    mass: 0.8,
+};
+/**
+ * Enter / exit variants for a preview thumbnail.
+ * Exit shrinks + fades so the surrounding items can flow into the gap (driven
+ * by `layout` on each item). Pair with `AnimatePresence`.
+ */
+const PREVIEW_ITEM = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 } },
+};
+
+export { PREVIEW_ITEM, PREVIEW_LAYOUT_SPRING };

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

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useId, useRef, useState, useCallback } from 'react';
+import React__default, { useMemo, useId, useRef, useCallback, useState, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { fileUploadTheme } from './FileUpload.theme.js';
+import { PREVIEW_LAYOUT_SPRING, PREVIEW_ITEM } from './FileUpload.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import '../../core/Accordion/Accordion.js';
@@ -32,6 +34,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -82,6 +85,8 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 import '../../core/ContextMenu/ContextMenu.js';
@@ -111,7 +116,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
  *   onUpload={(files) => console.log(files)}
  * />
  */
-const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, state = "default", disabled = false, label, errorMessage, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
+const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, state = "default", disabled = false, label, errorMessage, value, defaultFiles, onChange, onUpload, onRemove, onError, showPreview = true, showIcon = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
     // Merge custom theme with default theme
     const theme = useMemo(() => customTheme
         ? { ...fileUploadTheme, ...customTheme }
@@ -119,10 +124,39 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
     const generatedId = useId();
     const isDisabled = state === "disabled" || disabled;
     const isInvalid = state === "invalid";
+    // Wire helper/error text to the control for screen readers.
+    const describedBy = [
+        description ? `${generatedId}-description` : null,
+        errorMessage ? `${generatedId}-error` : null,
+    ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const shouldReduceMotion = useReducedMotion();
+    // Stable key per File reference — index keys would break exit/reflow
+    // animations as the list reorders. WeakMap so removed files are GC'd.
+    const fileKeysRef = useRef(new WeakMap());
+    const keyCounterRef = useRef(0);
+    const getFileKey = useCallback((file) => {
+        let key = fileKeysRef.current.get(file);
+        if (!key) {
+            key = `file-${keyCounterRef.current++}`;
+            fileKeysRef.current.set(file, key);
+        }
+        return key;
+    }, []);
     const inputRef = useRef(null);
     const [isDragActive, setIsDragActive] = useState(false);
-    const [selectedFiles, setSelectedFiles] = useState([]);
+    // Controlled when `value` is provided; otherwise track the list internally.
+    const isControlled = value !== undefined;
+    const [internalFiles, setInternalFiles] = useState(defaultFiles !== null && defaultFiles !== void 0 ? defaultFiles : []);
+    const selectedFiles = isControlled ? value : internalFiles;
     const [previewUrls, setPreviewUrls] = useState(new Map());
+    // Commit a new list: update internal state when uncontrolled, always notify.
+    const commitFiles = useCallback((next) => {
+        if (!isControlled)
+            setInternalFiles(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
     // Convert accept prop to array
     const acceptTypes = Array.isArray(accept) ? accept : accept ? [accept] : [];
     const acceptString = acceptTypes.join(",");
@@ -150,25 +184,40 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
             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));
-        }
+    // Keep image preview URLs in sync with the current list. Runs for files added
+    // via the dropzone as well as files injected through `value`/`defaultFiles`.
+    useEffect(() => {
+        setPreviewUrls((prev) => {
+            const next = new Map();
+            let changed = false;
+            for (const file of selectedFiles) {
+                if (!file.type.startsWith("image/"))
+                    continue;
+                const existing = prev.get(file);
+                if (existing) {
+                    next.set(file, existing);
+                }
+                else {
+                    next.set(file, URL.createObjectURL(file));
+                    changed = true;
+                }
+            }
+            // Revoke URLs for files no longer present.
+            for (const [file, url] of prev) {
+                if (!next.has(file)) {
+                    URL.revokeObjectURL(url);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [selectedFiles]);
+    // Revoke any outstanding object URLs on unmount.
+    const previewUrlsRef = useRef(previewUrls);
+    previewUrlsRef.current = previewUrls;
+    useEffect(() => () => {
+        previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(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)
@@ -209,14 +258,13 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
             onError === null || onError === void 0 ? void 0 : onError(error);
             return;
         }
-        // Update selected files
+        // Append when multiple, otherwise replace. Previews are handled by the
+        // sync effect above.
         const newFiles = multiple
             ? [...selectedFiles, ...validFiles]
             : validFiles;
-        setSelectedFiles(newFiles);
-        // Create previews
-        validFiles.forEach(createPreview);
-        // Call onUpload callback
+        commitFiles(newFiles);
+        // Call onUpload callback with only the newly added files
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(validFiles);
     }, [
         isValidFileType,
@@ -227,7 +275,7 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         multiple,
         onUpload,
         onError,
-        createPreview,
+        commitFiles,
     ]);
     // Handle drag events
     const handleDragEnter = useCallback((e) => {
@@ -269,32 +317,23 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
     }, [handleFiles]);
     // Handle file removal
     const handleRemoveFile = useCallback((file) => {
-        setSelectedFiles((prev) => prev.filter((f) => f !== file));
-        revokePreview(file);
+        // Preview cleanup is handled by the sync effect.
+        commitFiles(selectedFiles.filter((f) => f !== 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 (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-input`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })) : (label)), jsx("input", { ref: inputRef, id: `${generatedId}-input`, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: isDisabled, className: "sr-only", "aria-label": "File upload" }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, isDisabled && theme.dropzoneDisabledStyle, isInvalid && "border-[var(--color-danger)]"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, onKeyDown: (e) => {
+    }, [commitFiles, selectedFiles, onRemove]);
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-input`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })) : (label)), jsx("input", { ref: inputRef, id: `${generatedId}-input`, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: isDisabled, className: "sr-only", "aria-label": "File upload", "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, isDisabled && theme.dropzoneDisabledStyle, isInvalid && "border-[var(--color-danger)]"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleClick();
                     }
-                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-base font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: description }))] }) }), errorMessage && (jsx("div", { className: "text-sm mt-1 text-[var(--color-danger)]", children: errorMessage })), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
-                    const previewUrl = previewUrls.get(file);
-                    const isImage = file.type.startsWith("image/");
-                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-sm", children: file.name }), jsx("span", { className: "text-sm text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(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"), children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, `${file.name}-${index}`));
-                }) }))] }));
+                }, children: jsxs("div", { className: "flex flex-col items-center text-center pointer-events-none", children: [showIcon && (jsx("div", { className: "size-10 border border-[var(--color-border)] bg-[var(--color-surface-raised)] rounded-full flex items-center justify-center mb-3", children: jsx(CloudArrowUpIcon, { className: "size-6 text-[var(--color-text-secondary)]" }) })), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]/80", children: [jsx("span", { className: "text-[var(--color-primary)]", children: buttonText }), " ", helperText] }), description && (jsx("p", { id: `${generatedId}-description`, className: "text-xs text-[var(--color-text-muted)] mt-0.5", children: description }))] }) }), errorMessage && (jsx("div", { id: `${generatedId}-error`, className: "text-sm mt-1 text-[var(--color-danger)]", children: errorMessage })), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: jsx(AnimatePresence, { initial: false, children: selectedFiles.map((file) => {
+                        const previewUrl = previewUrls.get(file);
+                        const isImage = file.type.startsWith("image/");
+                        return (jsxs(motion.div, { layout: !shouldReduceMotion, initial: shouldReduceMotion ? false : PREVIEW_ITEM.initial, animate: PREVIEW_ITEM.animate, exit: shouldReduceMotion ? { opacity: 0 } : PREVIEW_ITEM.exit, transition: PREVIEW_LAYOUT_SPRING, className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsx("div", { className: theme.previewFileStyle, title: file.name, children: jsx(DocumentIcon, { className: "size-6" }) })), jsx(Button, { variant: "soft", 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"), children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, getFileKey(file)));
+                    }) }) }))] }));
 });
 FileUpload.displayName = "FileUpload";
 

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

@@ -1,25 +1,17 @@
 /**
- * Internal theme structure for the FileUpload component
+ * Theme for the FileUpload component.
+ * Uses production-ready CSS variables from theme.css.
  */
 interface FileUploadTheme {
     containerStyle: string;
     dropzoneStyle: string;
     dropzoneActiveStyle: string;
     dropzoneDisabledStyle: string;
-    contentStyle: string;
-    iconStyle: string;
-    textStyle: string;
-    helperTextStyle: string;
-    descriptionStyle: string;
     previewContainerStyle: string;
     previewItemStyle: string;
     previewImageStyle: string;
     previewFileStyle: string;
     removeButtonStyle: string;
 }
-/**
- * Default theme for the FileUpload component
- * Uses production-ready CSS variables from global.scss
- */
 export declare const fileUploadTheme: FileUploadTheme;
 export {};