@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/effects/shared/shaderNoise.glsl.js

@@ -18,20 +18,11 @@ float randomR(vec2 st) {
   return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
 }
 `;
-/** Pure-hash pseudo-random vec2, no texture lookup. Same source as glslHashFloat. */
-const glslHashVec2 = `
-vec2 randomGB(vec2 st) {
-  return vec2(
-    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),
-    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)
-  );
-}
-`;
 /** Ashima Arts / Stefan Gustavson 2D simplex noise (ISC license) — generic,
  *  ubiquitous prior art in the WebGL shader ecosystem, NOT paper-design's own
  *  IP. Used as the low-level noise primitive under some ported effects whose
  *  higher-level composition logic IS credited to paper-design in their own
- *  doc comments (e.g. GrainGradient, Dithering, Water, LiquidMetal). */
+ *  doc comments (e.g. GrainGradient, Dithering, LiquidMetal). */
 const glslSimplexNoise2D = `
 vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
 vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
@@ -81,4 +72,4 @@ vec2 rotate(vec2 v, float angle) {
 }
 `;
 
-export { glslDeclarePI, glslHashFloat, glslHashVec2, glslRotate2, glslSimplexNoise2D };
+export { glslDeclarePI, glslHashFloat, glslRotate2, glslSimplexNoise2D };

package/dist/components/forms/Checkbox/Checkbox.js

@@ -8,6 +8,7 @@ import { cn } from '../../../utils/cn.js';
 import { useCheckboxGroupContext } from './CheckboxContext.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
 import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';
+import { CHECK_RIPPLE_MOTION } from '../../core/shared/interaction.animations.js';
 
 /**
  * Checkbox component for selecting one or more options
@@ -75,7 +76,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", ...restProps, id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": !isInGroup && isInvalid ? true : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-[var(--color-primary-contrast)]", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+                        }, type: "checkbox", ...restProps, id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": !isInGroup && isInvalid ? true : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsx(AnimatePresence, { initial: false, children: isChecked && !shouldReduceMotion && (jsx(motion.div, { ...CHECK_RIPPLE_MOTION, className: "absolute inset-0 rounded-[var(--checkbox-radius)] bg-[var(--color-primary)]/40 pointer-events-none z-0" }, "ripple")) }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-[var(--color-primary-contrast)]", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

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

@@ -6,7 +6,7 @@ const checkboxTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
     // Input styles with light and dark mode variants
-    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[var(--checkbox-radius)] border-2 transition-all duration-400 " +
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[var(--checkbox-radius)] border-2 transition-all duration-[var(--motion-duration-slower)] " +
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
@@ -23,8 +23,8 @@ const checkboxTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-800)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:disabled:bg-[var(--color-mono-800)] dark:disabled:border-[var(--color-mono-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-mono-700)] dark:data-[state=disabled]:border-[var(--color-mono-600)]",
     // Invalid is message-led: the control stays neutral (mirrors Radio). The group's
     // required asterisk + error message carry the error (see CheckboxGroup). `data-state=invalid`
     // is still emitted on the input as an unstyled consumer/test hook.

package/dist/components/forms/ColorPicker/ColorPickerEyeDropper.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { EyeDropperIcon } from '@heroicons/react/20/solid';
+import { Eyedropper } from '@phosphor-icons/react';
 import { useContext, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -44,7 +44,7 @@ const ColorPickerEyeDropper = ({ className, ...props }) => {
     if (!supportsEyeDropper) {
         return null;
     }
-    return (jsx(Button, { size: "sm", variant: "outline", color: "neutral", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(EyeDropperIcon, { className: "size-4" }) }));
+    return (jsx(Button, { size: "sm", variant: "outline", color: "mono", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(Eyedropper, { className: "size-4" }) }));
 };
 ColorPickerEyeDropper.displayName = 'ColorPickerEyeDropper';
 

package/dist/components/forms/ColorPicker/ColorPickerGradient.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TrashIcon, PlusIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { Trash, Plus, ClipboardText } from '@phosphor-icons/react';
 import { useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -180,7 +180,7 @@ const ColorPickerGradient = ({ className, ...props }) => {
                             const remaining = gradient.stops.filter(s => s.id !== selectedStop.id);
                             if (remaining[0])
                                 selectStop(remaining[0].id);
-                        }, "aria-label": "Remove color stop", children: jsx(TrashIcon, { className: "size-4" }) })), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: () => addGradientStop(50), "aria-label": "Add color stop", children: jsx(PlusIcon, { className: "size-4" }) })] })), jsxs("div", { className: "flex items-center gap-2 border border-[var(--color-border)] rounded-lg px-3 py-2", children: [jsx("code", { className: "flex-1 text-xs font-mono text-[var(--color-text-secondary)] truncate", children: outputCSS }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy gradient CSS", title: copied ? 'Copied!' : 'Copy CSS', children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] })] }));
+                        }, "aria-label": "Remove color stop", children: jsx(Trash, { className: "size-4" }) })), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: () => addGradientStop(50), "aria-label": "Add color stop", children: jsx(Plus, { className: "size-4" }) })] })), jsxs("div", { className: "flex items-center gap-2 border border-[var(--color-border)] rounded-lg px-3 py-2", children: [jsx("code", { className: "flex-1 text-xs font-mono text-[var(--color-text-secondary)] truncate", children: outputCSS }), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: handleCopy, "aria-label": "Copy gradient CSS", title: copied ? 'Copied!' : 'Copy CSS', children: copied ? (jsx(ClipboardText, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardText, { className: "size-4" })) })] })] }));
 };
 ColorPickerGradient.displayName = 'ColorPickerGradient';
 

package/dist/components/forms/ColorPicker/ColorPickerHeader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@heroicons/react/20/solid';
+import { X } from '@phosphor-icons/react';
 import { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
@@ -25,7 +25,7 @@ const ColorPickerHeader = ({ modes = ['solid'], activeMode: activeModeFromProp,
     };
     return (jsxs("div", { className: cn('flex items-center justify-between border-b border-[var(--color-border)] -mx-4 -mt-4 px-4', className), ...props, children: [jsx("div", { className: "flex items-center gap-4", children: modes.map((mode) => (jsxs("button", { type: "button", onClick: () => handleModeChange(mode), className: cn('py-3 text-sm font-medium transition-colors relative cursor-pointer', activeMode === mode
                         ? 'text-[var(--color-primary)]'
-                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-background-secondary)] cursor-pointer", "aria-label": "Close color picker", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-surface)] cursor-pointer", "aria-label": "Close color picker", children: jsx(X, { className: "size-5" }) }))] }));
 };
 ColorPickerHeader.displayName = 'ColorPickerHeader';
 

package/dist/components/forms/ColorPicker/ColorPickerImage.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ArrowUpTrayIcon, XMarkIcon } from '@heroicons/react/20/solid';
+import { UploadSimple, X } from '@phosphor-icons/react';
 import { useContext, useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -141,14 +141,14 @@ const ColorPickerImage = ({ className, ...props }) => {
             /* Upload dropzone */
             jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: cn('flex flex-col items-center justify-center gap-2 h-[200px] rounded-xl border-2 border-dashed cursor-pointer transition-colors', isDragOver
                     ? 'border-[var(--color-primary)] bg-[var(--color-primary-50)]'
-                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-background-secondary)]'), children: [jsx(ArrowUpTrayIcon, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
+                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-surface)]'), children: [jsx(UploadSimple, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
             /* Canvas with color picking */
             jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "relative inline-block rounded-xl overflow-hidden ring-1 ring-inset ring-black/5", children: [jsx("canvas", { ref: canvasRef, onClick: handleCanvasClick, className: "cursor-crosshair block" }), cursorPos && (jsx("div", { className: "absolute w-5 h-5 border-2 border-white rounded-full pointer-events-none", style: {
                                     left: `${cursorPos.x}%`,
                                     top: `${cursorPos.y}%`,
                                     transform: 'translate(-50%, -50%)',
                                     boxShadow: '0 0 0 1.5px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.15)',
-                                }, children: pickedColor && (jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: pickedColor } })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [pickedColor && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "size-5 rounded-full border border-[var(--color-border)]", style: { backgroundColor: pickedColor } }), jsx("span", { className: "text-xs font-mono text-[var(--color-text-secondary)]", children: pickedColor })] })), jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: handleClear, "aria-label": "Remove image", className: "ml-auto", children: [jsx(XMarkIcon, { className: "size-3.5" }), "Change"] })] })] })), !imageLoaded && jsx("canvas", { ref: canvasRef, className: "hidden" })] }));
+                                }, children: pickedColor && (jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: pickedColor } })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [pickedColor && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "size-5 rounded-full border border-[var(--color-border)]", style: { backgroundColor: pickedColor } }), jsx("span", { className: "text-xs font-mono text-[var(--color-text-secondary)]", children: pickedColor })] })), jsxs(Button, { variant: "ghost", size: "sm", color: "mono", onClick: handleClear, "aria-label": "Remove image", className: "ml-auto", children: [jsx(X, { className: "size-3.5" }), "Change"] })] })] })), !imageLoaded && jsx("canvas", { ref: canvasRef, className: "hidden" })] }));
 };
 ColorPickerImage.displayName = 'ColorPickerImage';
 

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext, useState, useEffect } from 'react';
-import { ChevronUpDownIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { CaretUpDown, ClipboardText } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
@@ -83,7 +83,7 @@ const ColorPickerInput = ({ className, ...props }) => {
     };
     // Get the current color as rgba for the swatch
     const swatchColor = `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a})`;
-    return (jsxs("div", { className: cn("flex items-stretch border border-[var(--color-border)] rounded-lg overflow-hidden divide-x divide-[var(--color-border)]", className), ...props, children: [jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: cycleFormat, "aria-label": "Change color format", className: "!rounded-none !border-0 !px-3 !py-2 flex-shrink-0", children: [formatLabel, jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-text-muted)]" })] }), jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-1 min-w-0", children: [jsx("div", { className: "size-5 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: swatchColor } }), jsx("input", { type: "text", value: format === 'hex' ? inputValue : getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: format !== 'hex', className: cn("flex-1 min-w-0 bg-transparent text-sm font-mono text-[var(--color-text-primary)] outline-none", isInvalid && "text-[var(--color-danger)]"), "aria-label": "Color value" }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy color value", title: copied ? "Copied!" : "Copy color value", className: "!p-0 !size-auto flex-shrink-0", children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] }), showAlpha && (jsxs("div", { className: "flex items-center px-3 py-2 flex-shrink-0", children: [jsx("input", { type: "number", min: 0, max: 100, value: alphaPercent, onChange: handleAlphaChange, className: "w-10 bg-transparent text-sm text-[var(--color-text-primary)] text-center outline-none font-mono", "aria-label": "Opacity percentage" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "%" })] }))] }));
+    return (jsxs("div", { className: cn("flex items-stretch border border-[var(--color-border)] rounded-lg overflow-hidden divide-x divide-[var(--color-border)]", className), ...props, children: [jsxs(Button, { variant: "ghost", size: "sm", color: "mono", onClick: cycleFormat, "aria-label": "Change color format", className: "!rounded-none !border-0 !px-3 !py-2 flex-shrink-0", children: [formatLabel, jsx(CaretUpDown, { className: "size-4 text-[var(--color-text-muted)]" })] }), jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-1 min-w-0", children: [jsx("div", { className: "size-5 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: swatchColor } }), jsx("input", { type: "text", value: format === 'hex' ? inputValue : getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: format !== 'hex', className: cn("flex-1 min-w-0 bg-transparent text-sm font-mono text-[var(--color-text-primary)] outline-none", isInvalid && "text-[var(--color-danger)]"), "aria-label": "Color value" }), jsx(Button, { variant: "ghost", size: "sm", color: "mono", iconOnly: true, onClick: handleCopy, "aria-label": "Copy color value", title: copied ? "Copied!" : "Copy color value", className: "!p-0 !size-auto flex-shrink-0", children: copied ? (jsx(ClipboardText, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardText, { className: "size-4" })) })] }), showAlpha && (jsxs("div", { className: "flex items-center px-3 py-2 flex-shrink-0", children: [jsx("input", { type: "number", min: 0, max: 100, value: alphaPercent, onChange: handleAlphaChange, className: "w-10 bg-transparent text-sm text-[var(--color-text-primary)] text-center outline-none font-mono", "aria-label": "Opacity percentage" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "%" })] }))] }));
 };
 ColorPickerInput.displayName = "ColorPickerInput";
 

package/dist/components/forms/ColorPicker/ColorPickerPresets.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { CheckIcon } from '@heroicons/react/16/solid';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { ColorPickerContext } from './ColorPickerContext.js';
 import { parseColor } from './colorUtils.js';
@@ -50,7 +50,7 @@ const ColorPickerPresets = ({ colors: customColors, label = 'Preset colors', cla
                                     backgroundSize: '8px 8px',
                                 } }), jsx("div", { className: "absolute inset-0 rounded", style: {
                                     backgroundColor: presetColor,
-                                } }), selected && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(CheckIcon, { className: "size-3.5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" }) }))] }, `${presetColor}-${index}`));
+                                } }), selected && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Check, { className: "size-3.5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" }) }))] }, `${presetColor}-${index}`));
                 }) })] }));
 };
 ColorPickerPresets.displayName = 'ColorPickerPresets';

package/dist/components/forms/ColorPicker/ColorPickerSavedColors.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { PlusIcon } from '@heroicons/react/20/solid';
+import { Plus } from '@phosphor-icons/react';
 import { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
@@ -53,7 +53,7 @@ const ColorPickerSavedColors = ({ label = 'Saved', maxColors = 16, className, ..
     const handleDoubleClick = (index) => {
         removeSavedColor(index);
     };
-    return (jsxs("div", { className: cn(className), ...props, children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [label !== false && (jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label })), savedColors.length < maxColors && (jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: handleSaveColor, "aria-label": "Save current color", className: "!px-2 !py-1 !text-sm !font-medium", children: [jsx(PlusIcon, { className: "size-4" }), "Add"] }))] }), savedColors.length > 0 && (jsx("div", { className: "flex items-center gap-2 flex-wrap", children: savedColors.map((colorValue, index) => {
+    return (jsxs("div", { className: cn(className), ...props, children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [label !== false && (jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label })), savedColors.length < maxColors && (jsxs(Button, { variant: "ghost", size: "sm", color: "mono", onClick: handleSaveColor, "aria-label": "Save current color", className: "!px-2 !py-1 !text-sm !font-medium", children: [jsx(Plus, { className: "size-4" }), "Add"] }))] }), savedColors.length > 0 && (jsx("div", { className: "flex items-center gap-2 flex-wrap", children: savedColors.map((colorValue, index) => {
                     const gradient = isGradientValue(colorValue);
                     const selected = isSelected(colorValue);
                     return (jsx("button", { type: "button", tabIndex: 0, onClick: () => handleSelectColor(colorValue), onDoubleClick: () => handleDoubleClick(index), onKeyDown: (e) => handleKeyDown(e, colorValue), className: cn('size-7 rounded-full cursor-pointer transition-all flex-shrink-0', 'hover:scale-110 focus:outline-none', selected

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

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useId, useRef, useState, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
-import { XMarkIcon, PlusIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { X, Plus, Check } from '@phosphor-icons/react';
 import { comboboxTheme } from './Combobox.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
@@ -104,7 +104,7 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
                                         selectOption(option.value, isCreateOption);
                                         onClose();
                                     }
-                                }, 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 })), isSelected && !isCreateOption && (jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] dark:text-[var(--color-primary-400)]", children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] }, option.id));
+                                }, children: [isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(Plus, { className: "size-4 shrink-0", weight: "bold" }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsx("span", { className: "block truncate", children: option.label })), isSelected && !isCreateOption && (jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary)] dark:text-[var(--color-primary-400)]", children: jsx(Check, { className: "size-4", weight: "bold" }) }))] }, 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", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
@@ -169,6 +169,8 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
         options: selectOptions,
         value,
         onChange: (newValue) => {
+            // useSelectState's payload is widened to `T | T[]` for Select's multi mode.
+            // Combobox has no `multiple` prop, so this is always the single value.
             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         },
         searchable: true, // Combobox is always searchable
@@ -414,7 +416,7 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
     return (jsx(SelectProvider, { selectState: modifiedSelectState, size: size, componentState: state, theme: theme, searchable: true, enableTypeahead: false, children: jsxs("div", { ref: ref, className: cn("relative", containerClasses, stateClass, wrapperClassName), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: comboboxId, state: state, required: required, children: label })) : (label)), jsxs("div", { ref: wrapperRef, className: theme.wrapperStyle, children: [jsx("div", { className: cn(inputGroupClasses, stateClasses, className), children: jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: inputRef, id: comboboxId, type: "text", role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 &&
                                             customFilteredOptions[highlightedIndex]
                                             ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
-                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, "aria-describedby": helperText ? `${comboboxId}-helper` : undefined, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, (hasRightIcon || showClearButton) && iconEndPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(XMarkIcon, { className: theme.clearIconStyle }) })), hasRightIcon && !showClearButton && (jsx("div", { className: theme.iconEndStyle, children: iconEnd }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, listboxId: listboxId, comboboxId: comboboxId, elevation: elevation, lift: lift })] }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${comboboxId}-helper`, className: cn(helperTextClasses, helperTextStateClasses), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
+                                            : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, "aria-describedby": helperText ? `${comboboxId}-helper` : undefined, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, (hasRightIcon || showClearButton) && iconEndPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(X, { className: theme.clearIconStyle }) })), hasRightIcon && !showClearButton && (jsx("div", { className: theme.iconEndStyle, children: iconEnd }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, listboxId: listboxId, comboboxId: comboboxId, elevation: elevation, lift: lift })] }), helperText && (typeof helperText === 'string' ? (jsx("p", { id: `${comboboxId}-helper`, className: cn(helperTextClasses, helperTextStateClasses), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
 };
 const ComboboxForwarded = React__default.forwardRef(ComboboxInner);
 ComboboxForwarded.displayName = "Combobox";

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

@@ -35,8 +35,8 @@ const comboboxTheme = {
     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",
     clearIconStyle: "size-4",
-    // Dropdown styles - matches Select component for consistency
-    dropdownStyle: formsBaseTheme.dropdownStyles.container + " py-1",
+    // Dropdown styles - the shared base carries the whole listbox treatment
+    dropdownStyle: formsBaseTheme.dropdownStyles.container,
     // Individual option style
     optionStyle: formsBaseTheme.dropdownStyles.option,
     // Selected option style

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

@@ -1,34 +1,25 @@
 "use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { getOverlayMenuVariants } from '../../../theme/animations.js';
+
 /**
  * Creates direction-aware dropdown animation variants for the DatePicker component
  * Matches Select component animation pattern for consistency
  * @param isFlipped - Whether the dropdown is positioned above (flipped) or below the trigger
  * @returns Animation variants that match the positioning direction
  */
-const createDropdownAnimations = (isFlipped) => ({
-    initial: {
-        opacity: 0,
-        y: isFlipped ? 10 : -10, // Animate from opposite direction when flipped
-        scale: 0.95,
-    },
-    visible: {
-        opacity: 1,
-        y: 0,
-        scale: 1,
-        transition: {
-            duration: 0.2,
-            ease: 'easeOut'
-        }
-    },
-    exit: {
-        opacity: 0,
-        y: isFlipped ? 10 : -10, // Exit in same direction as entry
-        scale: 0.95,
-        transition: {
-            duration: 0.15,
-            ease: 'easeIn'
-        }
-    }
-});
+const createDropdownAnimations = (isFlipped) => {
+    const side = isFlipped ? 'top' : 'bottom';
+    return getOverlayMenuVariants(side, {
+        scale: 0.97,
+        shift: 6,
+    });
+};
+/**
+ * Default dropdown animation variants for backward compatibility
+ * @deprecated Use createDropdownAnimations() for better UX with direction awareness
+ */
+createDropdownAnimations(false);
 
 export { createDropdownAnimations };

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

@@ -38,8 +38,8 @@ const datePickerTheme = {
         "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)]",
-        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        default: "text-[var(--color-text-muted)]",
+        disabled: "text-[var(--color-text-disabled)]",
         invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
 };

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

@@ -190,7 +190,7 @@ const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement =
                                                         const adjustedLeft = new Date(newDate);
                                                         adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
                                                         setLeftCalendarDate(adjustedLeft);
-                                                    }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(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), children: "Apply" })] })] })] })) : (
+                                                    }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "mono", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(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), children: "Apply" })] })] })] })) : (
                         // Single calendar for single mode
                         jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
                                     handleDateSelect(value);

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { CalendarIcon } from '@heroicons/react/24/outline';
+import { Calendar } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { DatePickerContext } from './DatePickerContext.js';
 
@@ -29,7 +29,7 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
         ? focusStateStyle ||
             "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" }) })] }) }));
+    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(Calendar, { className: "h-4 w-4" }) })] }) }));
 };
 
 export { DatePickerTrigger };

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

@@ -29,15 +29,15 @@ const dateRangePickerTheme = {
     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)] " +
+        "bg-[var(--color-surface)] 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: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)]",
+    mobileRangeDisplayStyle: "sm:hidden text-xs text-center py-2 text-[var(--color-text-secondary)]",
     helperTextStyle: formsBaseTheme.helperText,
     helperTextStates: {
-        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
-        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        default: "text-[var(--color-text-muted)]",
+        disabled: "text-[var(--color-text-disabled)]",
         invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
 };

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

@@ -175,7 +175,7 @@ const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placem
                                                 const adjustedLeft = new Date(newDate);
                                                 adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
                                                 setLeftCalendarDate(adjustedLeft);
-                                            }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] }) })) }));
+                                            }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "mono", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] }) })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
     }

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 
 const DateRangePickerContext = createContext(undefined);

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { CheckIcon } from '@heroicons/react/24/outline';
+import { Check } from '@phosphor-icons/react';
 import { DateRangePickerContext } from './DateRangePickerContext.js';
 import { cn } from '../../../utils/cn.js';
 
@@ -35,7 +35,7 @@ const DateRangePickerPresets = ({ presets, className, tempRange, setTempRange, o
     };
     return (jsx("div", { className: cn(theme.presetsContainerStyle, className), children: presets.map((preset, index) => {
             const active = isPresetActive(preset);
-            return (jsxs("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": active, children: [jsx("span", { children: preset.label }), active && jsx(CheckIcon, { className: theme.presetCheckmarkStyle })] }, index));
+            return (jsxs("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": active, children: [jsx("span", { children: preset.label }), active && jsx(Check, { className: theme.presetCheckmarkStyle })] }, index));
         }) }));
 };
 

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { CalendarIcon } from '@heroicons/react/24/outline';
+import { Calendar } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { DateRangePickerContext } from './DateRangePickerContext.js';
 
@@ -27,7 +27,7 @@ const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size
         ? focusStateStyle ||
             "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" }) })] }) }));
+    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(Calendar, { className: "h-4 w-4" }) })] }) }));
 };
 
 export { DateRangePickerTrigger };

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

@@ -5,7 +5,7 @@ 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 { CloudArrowUp, File, X } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 
@@ -239,13 +239,13 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
                         e.preventDefault();
                         handleClick();
                     }
-                }, 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) => {
+                }, 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(CloudArrowUp, { 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) => {
+                        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(File, { 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)));
+                                    }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6"), children: jsx(X, { className: "size-4", weight: "bold" }) })] }, getFileKey(file)));
                     }) }) }))] }));
 });
 FileUpload.displayName = "FileUpload";

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

@@ -2,21 +2,25 @@ const fileUploadTheme = {
     // Root container
     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-radius)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-colors duration-400 cursor-pointer",
+    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-radius)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-colors duration-[var(--motion-duration-slower)] cursor-pointer",
     // Dragging over — translucent primary tint composites over the surface in both modes
     dropzoneActiveStyle: "border-solid border-[var(--color-primary)] bg-[var(--color-primary)]/5",
     // Disabled
     dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-surface)] hover:border-[var(--color-border)]",
     // Wrapping row of fixed-width thumbnails (not a stretch grid)
     previewContainerStyle: "flex flex-wrap gap-1 mt-2",
-    // Fixed responsive thumbnail — stays small on large containers, wraps to more-per-row
+    // Fixed responsive thumbnail — stays small on large containers, wraps to more-per-row.
+    // Intentionally uncapped (unlike the surface-radius-cap system in theme.css): the image
+    // fills the box edge-to-edge with no padding for a curve to eat into, so this behaves like
+    // a control (Avatar/Badge), not a content-bearing container — safe to go fully circular at
+    // an extreme --radius-base, same as Checkbox/Avatar.
     previewItemStyle: "relative group shrink-0 size-10 sm:size-12 md:size-16 rounded-[var(--radius-base)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface)]",
     // Image fills the thumbnail box
     previewImageStyle: "size-full object-cover",
     // Non-image tile — centered document icon (filename surfaced via title tooltip)
     previewFileStyle: "flex items-center justify-center size-full text-[var(--color-text-muted)]",
     // Remove button (revealed on item hover)
-    removeButtonStyle: "absolute top-1 right-1 -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+    removeButtonStyle: "absolute top-1 right-1 -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-[var(--motion-duration-slower)] group-hover:-translate-y-0",
 };
 
 export { fileUploadTheme };