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

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

@@ -16,13 +16,13 @@ const cronInputTheme = {
     // Field label
     fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     // Select dropdown
-    fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+    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:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
+        "focus:shadow-[inset_0_0_0_2px_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:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
-        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+        "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",
     // Size variants for field selects
     fieldSelectSizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
@@ -30,14 +30,14 @@ const cronInputTheme = {
         lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
     },
     // Raw input field
-    rawInputStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+    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 " +
         "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
-        "focus:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
+        "focus:shadow-[inset_0_0_0_2px_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:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
-        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+        "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",
     // Size variants for raw input
     rawInputSizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
@@ -46,26 +46,26 @@ 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 outline-1 outline-[var(--color-border)] " +
+        "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:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
+        "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)]",
     // Active mode toggle
-    modeToggleActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
+    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)] " +
-        "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
+        "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
         "dark:hover:bg-[var(--color-primary-500)]/15",
     // 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 outline-1 outline-[var(--color-border)] " +
+        "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:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
+        "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)]",
     // Active preset button
-    presetButtonActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
+    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:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
+        "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)]",

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 ||
-            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_2px_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

@@ -35,7 +35,7 @@ const dateRangePickerTheme = {
     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-background-tertiary)] hover:text-[var(--color-text-primary)] " +
+        "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)] " +

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 ||
-            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_2px_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.js

@@ -78,7 +78,6 @@ import '../../core/Sidebar/SidebarContent.js';
 import '../../core/Sidebar/SidebarFooter.js';
 import '../../core/Sidebar/SidebarNav.js';
 import '../../core/Sidebar/SidebarNavGroup.js';
-import 'motion/react';
 import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
@@ -89,6 +88,7 @@ import '../../core/ContextMenu/ContextMenu.js';
 import '../../core/ContextMenu/ContextMenu.theme.js';
 import '../../core/Pill/Pill.js';
 import '../../core/Icon/Icon.js';
+import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
-import { DocumentIcon, TrashIcon, XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { DocumentIcon, TrashIcon, ArrowPathIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Icon } from '../../core/Icon/Icon.js';
 import { fileTypes } from '../../core/Icon/data/fileTypes.js';
 import { cn } from '../../../utils/cn.js';
@@ -39,27 +39,38 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
         setShowRemove(false);
     }, [isComplete, completionDelay]);
     const handleClick = () => {
-        if (isError && onRetry) {
-            onRetry();
+        if (!onRemove)
             return;
+        if (confirmRemove) {
+            setConfirmOpen(true);
         }
-        if (onRemove) {
-            if (confirmRemove) {
-                setConfirmOpen(true);
-            }
-            else {
-                onRemove();
-            }
+        else {
+            onRemove();
         }
     };
     const handleConfirm = () => {
         setConfirmOpen(false);
         onRemove === null || onRemove === void 0 ? void 0 : onRemove();
     };
-    const isClickable = (isError && onRetry) || onRemove;
-    const ariaLabel = isError && onRetry ? "Retry upload" : onRemove ? "Remove file" : undefined;
+    // Uploading/complete: the radial doubles as the cancel/remove target.
+    const isClickable = !!onRemove;
+    const ariaLabel = onRemove ? "Remove file" : undefined;
+    // Confirm popover shared by the radial (cancel/remove) and the error-state delete button.
+    const confirmPopover = (trigger, label, offsetValue) => (jsxs(Popover, { isOpen: confirmOpen, onOpenChange: (open) => {
+            setConfirmOpen(open);
+            if (!open)
+                setIsHovered(false);
+        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yes" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
     // Shared remove button used after completion tick
     const removeButton = (jsx(motion.div, { initial: shouldReduceMotion ? false : REMOVE_BUTTON_ENTER.initial, animate: REMOVE_BUTTON_ENTER.animate, transition: REMOVE_BUTTON_ENTER.transition, className: "shrink-0", children: jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) }) }, "remove-btn"));
+    // Error state: retry + delete buttons (no progress arc/percentage).
+    if (isError) {
+        const deleteButton = onRemove ? (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) })) : null;
+        return (jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [onRetry && (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Retry upload", iconOnly: true, className: "rounded-full size-8", onClick: () => onRetry(), children: jsx(ArrowPathIcon, { className: "size-3.5", strokeWidth: 2 }) })), deleteButton &&
+                    (confirmRemove
+                        ? confirmPopover(deleteButton, "Remove file?", 6)
+                        : deleteButton)] }));
+    }
     const radialElement = (jsxs("div", { className: cn("relative shrink-0", sizeClass, isClickable && "cursor-pointer"), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
             if (!confirmOpen)
                 setIsHovered(false);
@@ -70,18 +81,14 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
                     handleClick();
                 }
             }
-            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: cn("size-4", statusIconColor), children: jsx("path", { d: "M5 13l4.5 4.5L19 7", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, "check")), isError && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(ArrowPathIcon, { className: cn("size-3.5", statusIconColor), strokeWidth: 2.5 }) }, "retry"))] }) })] }));
+            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: cn("size-4", statusIconColor), children: jsx("path", { d: "M5 13l4.5 4.5L19 7", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, "check"))] }) })] }));
     // Determine what to render: radial indicator or remove button
     const showRemoveButton = isComplete && showRemove && onRemove;
     const triggerElement = showRemoveButton ? removeButton : radialElement;
-    // No confirm popover needed — return the element directly
+    // No confirm popover needed — return the element directly.
     if (!confirmRemove || !onRemove)
         return triggerElement;
-    return (jsxs(Popover, { isOpen: confirmOpen, onOpenChange: (open) => {
-            setConfirmOpen(open);
-            if (!open)
-                setIsHovered(false);
-        }, placement: "bottom-end", offset: isComplete ? 2 : 6, triggerType: "click", children: [jsx(Popover.Trigger, { children: triggerElement }), jsxs(Popover.Body, { portal: false, className: "flex items-center p-0.5 border-[0.5px] rounded-xl gap-0.5", children: [jsx("span", { className: "text-base font-medium text-[var(--color-text-secondary)] px-3", children: isComplete ? "Remove file?" : "Cancel upload?" }), jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yes" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] }));
+    return confirmPopover(triggerElement, isComplete ? "Remove file?" : "Cancel upload?", isComplete ? 2 : 6);
 };
 // --- Main Component ---
 const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry, showFileSize = true, confirmRemove = true, completionDelay = 1500, className, theme: themeOverrides, ...rest }, ref) => {
@@ -103,7 +110,7 @@ const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry
             const clampedProgress = Math.min(100, Math.max(0, item.progress));
             const ext = getFileExtension(item.file.name);
             const hasFileTypeIcon = ext !== null && isKnownFileType(ext);
-            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), showFileSize && (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _f !== void 0 ? _f : t.fileSizeStyle, children: formatFileSize(item.file.size) })), item.status === "error" && item.error && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _g !== void 0 ? _g : t.errorTextStyle, children: item.error }))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
+            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), item.status === "error" && item.error ? (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _f !== void 0 ? _f : t.errorTextStyle, children: item.error })) : (showFileSize && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _g !== void 0 ? _g : t.fileSizeStyle, children: formatFileSize(item.file.size) })))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
         }) }));
 });
 FileUploadProgress.displayName = "FileUploadProgress";

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

@@ -6,13 +6,13 @@ const fileUploadProgressTheme = {
     fileInfoStyle: "flex-1 min-w-0",
     fileNameStyle: "text-sm font-medium text-[var(--color-text-primary)] truncate",
     fileSizeStyle: "text-xs text-[var(--color-text-muted)]",
-    radialTrackColor: "var(--color-background-tertiary)",
+    radialTrackColor: "var(--color-surface-sunken)",
     radialProgressColors: {
         uploading: "var(--color-primary)",
         complete: "var(--color-success)",
         error: "var(--color-danger)",
     },
-    radialCenterTextStyle: "text-[10px] font-semibold tabular-nums text-[var(--color-text-secondary)]",
+    radialCenterTextStyle: "text-xs tracking-tight font-semibold tabular-nums text-[var(--color-text-secondary)]",
     statusIconColors: {
         uploading: "",
         complete: "text-[var(--color-success)]",

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

@@ -8,17 +8,15 @@ const inputTheme = {
     // Base container styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
-    inputGroupStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+    inputGroupStyle: "relative flex rounded-[var(--form-radius)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
         "bg-white transition-all " +
-        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)]",
+        "dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:bg-[var(--color-neutral-900)]",
     // JS-driven focus ring (applied when isFocused is true)
-    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+    inputGroupFocusStyle: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+        "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
     // JS-driven focus ring for invalid state
-    inputGroupFocusInvalidStyle: "outline-2 outline-[var(--color-danger)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-danger)]/10 " +
-        "dark:outline-[var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
+    inputGroupFocusInvalidStyle: "shadow-[inset_0_0_0_2px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+        "dark:shadow-[inset_0_0_0_2px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
     // Base input styles - extends common form control with design tokens
     baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
     // Size variants - composed from atomic tokens
@@ -31,8 +29,8 @@ const inputTheme = {
     states: {
         default: formsBaseTheme.states.default,
         disabled: formsBaseTheme.states.disabled,
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] " +
-            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Helper text styles with state handling
     helperText: formsBaseTheme.helperText,
@@ -67,7 +65,7 @@ const inputTheme = {
     // Number input controls
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
     numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
-        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
+        "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] " +
         "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",

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

@@ -10,9 +10,9 @@ const mentionTheme = {
     // Input group container with outline and focus ring
     inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
     // JS-driven focus ring (applied when editable div is focused)
-    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
+    inputGroupFocusStyle: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
         "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
     // Base editable div styles
     editableStyle: `${formsBaseTheme.controlBaseStyle} whitespace-pre-wrap break-words overflow-y-auto cursor-text`,
     // Size variants
@@ -35,7 +35,7 @@ const mentionTheme = {
         "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
     // Avatar image
     suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
-        "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
+        "bg-[var(--color-surface-sunken)] dark:bg-[var(--color-neutral-700)]",
     // Avatar fallback (initials circle)
     suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs font-medium " +
         "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +

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

@@ -9,7 +9,7 @@ const radioTheme = {
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-tertiary)] " +
+        "dark:bg-[var(--color-surface-raised)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-white " +
         // Checked state - dark

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

@@ -1,3 +1,21 @@
 import React from "react";
 import { RichTextEditorProps } from "./RichTextEditor.types";
+import type { FontFamilyOption } from "./RichTextEditor.types";
+/**
+ * Curated default list of font families shipped with the editor.
+ * The `Default` entry clears the inline font-family. The rest are popular
+ * Google Fonts chosen for broad weight coverage. Each stack ends in a sensible
+ * fallback so text stays readable while the font is loading.
+ */
+export declare const DEFAULT_FONT_FAMILY_OPTIONS: FontFamilyOption[];
+/**
+ * Lazily injects a Google Fonts `<link rel="stylesheet">` for the given family.
+ * Idempotent: each family is requested at most once per page lifetime.
+ * SSR-safe (no-ops when `document` is undefined).
+ *
+ * @example
+ * import { loadGoogleFont } from "@flikk/ui";
+ * loadGoogleFont("Inter");
+ */
+export declare const loadGoogleFont: (family: string, weights?: number[]) => void;
 export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;