@react-fabric/form 1.0.0-beta.62 → 1.0.0-beta.63

package/dist/types/input/RadioGroup.d.ts

@@ -8,7 +8,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * field info
      */
@@ -52,6 +52,6 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * The component supports inline and vertical orientations, and can handle change events.
  *
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
- * @returns {JSX.Element} The rendered RadioGroup component.
+ * @returns {React.ReactElement} The rendered RadioGroup component.
  */
-export declare const RadioGroup: ({ children, name, className, optionWidth, value, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ children, name, className, optionWidth, vertical, value, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/RangeSlider.d.ts

@@ -62,6 +62,6 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
  * The component is designed to be flexible and customizable, allowing for various configurations.
  *
  * @param {RangeProps} props - The properties for the RangeSlider component.
- * @returns {JSX.Element} The rendered RangeSlider component.
+ * @returns {React.ReactElement} The rendered RangeSlider component.
  */
 export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -25,6 +25,6 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
  * and handling search actions with a debounce mechanism.
  *
  * @param {SearchProps} props - The properties for the Search component.
- * @returns {JSX.Element} The rendered Search input component.
+ * @returns {React.ReactElement} The rendered Search input component.
  */
 export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, defaultValue, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Slider.d.ts

@@ -64,6 +64,6 @@ export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "a
  * It also supports deferred value updates for smoother interactions.
  *
  * @param {SliderProps} props - The properties for the Slider component.
- * @returns {JSX.Element} The rendered Slider component.
+ * @returns {React.ReactElement} The rendered Slider component.
  */
 export declare const Slider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, useInfinity, format, invalid, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, ...rest }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Switch.d.ts

@@ -3,7 +3,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
      * Switch label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * checked
      */
@@ -49,6 +49,6 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
  * It supports disabled and invalid states, and handles change events.
  *
  * @param {SwitchProps} props - The properties for the Switch component.
- * @returns {JSX.Element} The rendered Switch input component.
+ * @returns {React.ReactElement} The rendered Switch input component.
  */
 export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -26,6 +26,6 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
  * providing a clear interface for text input with optional validation and accessibility features.
  *
  * @param {TextareaProps} props - The properties for the Textarea component.
- * @returns {JSX.Element} The rendered Textarea component.
+ * @returns {React.ReactElement} The rendered Textarea component.
  */
 export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/AutoComplete.d.ts

@@ -18,7 +18,7 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
  * It supports multiple selections, history suggestions, and custom styling.
  *
  * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
- * @returns {JSX.Element} The rendered AutoComplete component.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onQuery, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/select/DualList.d.ts

@@ -47,6 +47,6 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
  * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
  *
  * @param {DualListProps<T>} props - The properties for the DualList component.
- * @returns {JSX.Element} The rendered DualList component.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 export declare const DualList: <T extends AnyObject = string>({ ref, value, options, emptyDisplay, groupProperty, height, labelProperty, valueProperty, renderer, onChange, name, invalid, readOnly, disabled, placeholder, autoFocus, error, ...rest }: DualListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/List.d.ts

@@ -5,7 +5,7 @@ import { type SelectProps } from "../types";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the List component.
- * @returns {JSX.Element} The rendered List component.
+ * @returns {React.ReactElement} The rendered List component.
  */
 export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, infoProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;

package/dist/types/select/Select.d.ts

@@ -5,6 +5,6 @@ import { type SelectProps } from "../types";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the Select component.
- * @returns {JSX.Element} The rendered Select component.
+ * @returns {React.ReactElement} The rendered Select component.
  */
 export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, infoProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -39,15 +39,15 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      *
      */
-    decorateStart?: JSX.Element | string | number | boolean;
+    decorateStart?: React.ReactElement | string | number | boolean;
     /**
      *
      */
-    decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEnd?: React.ReactElement | string | number | boolean;
     decorateEndShowWhenEmpty?: boolean;
     decorateEndHideWhenEmpty?: boolean;
     /**

package/dist/types/types/schema.d.ts

@@ -97,7 +97,7 @@ export interface SchemaEditorProps {
     /**
      * footer actions
      */
-    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+    children?: Elements<React.ReactElement> | Array<Elements<React.ReactElement>>;
     onChange?: (schema: FormSchema) => void;
     onSubmit?: (schema: FormSchema) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,28 +39,28 @@
     "@dnd-kit/modifiers": "~9.0.0",
     "@dnd-kit/sortable": "~10.0.0",
     "@dnd-kit/utilities": "~3.2.2",
-    "@floating-ui/react": "~0.27.16",
+    "@floating-ui/react": "~0.27.19",
     "@hookform/resolvers": "~5.2.2",
-    "@react-fabric/core": "^1.0.0-beta.62",
-    "@react-fabric/date": "^1.0.0-beta.62",
-    "@react-fabric/utilities": "^1.0.0-beta.62",
+    "@react-fabric/core": "^1.0.0-beta.63",
+    "@react-fabric/date": "^1.0.0-beta.63",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
+    "chroma-js": "~3.2.0",
     "classnames": "~2.5.1",
-    "color": "~5.0.2",
     "react-color": "~2.19.3",
-    "react-hook-form": "~7.65.0"
+    "react-hook-form": "~7.71.2"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "devDependencies": {
     "@types/react-color": "~3.0.13"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/builder/SchemaEditor.tsx

@@ -37,7 +37,7 @@ import { SchemaArrayForm } from "./components/SchemaArrayForm";
  * It provides a form interface to modify schema properties dynamically.
  *
  * @param {SchemaEditorProps} props - The properties for the SchemaEditor component.
- * @returns {JSX.Element} The rendered SchemaEditor component.
+ * @returns {React.ReactElement} The rendered SchemaEditor component.
  */
 export const SchemaEditor = ({
   schemaDef,
@@ -70,7 +70,7 @@ export const SchemaEditor = ({
         acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
       />
       {children && (
-        <Footer flex className="border-t bg-base px-6 py-2">
+        <Footer flex className="border-t bg-default px-6 py-2">
           {children}
         </Footer>
       )}

package/src/builder/components/SchemaArrayForm.tsx

@@ -33,7 +33,6 @@ import { AddSchemaFields } from "./AddSchemaFields";
 import { SchemaField } from "./SchemaField";
 
 // Need to disable prop-types lint due to uknown lint error
-/* eslint-disable react/prop-types */
 export const SchemaArrayForm = ({
   dynamic,
   acceptableTypes,
@@ -75,7 +74,6 @@ export const SchemaArrayForm = ({
   }, []);
 
   const Wrapper = useCallback(
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
     ({ children }: { children: React.ReactNode }) => {
       if (dynamic) {
         // pass id list to dnd context

package/src/builder/components/SchemaField.tsx

@@ -147,7 +147,7 @@ export const SchemaField = ({
         <Footer
           flex
           justify="end"
-          className="sticky bottom-0 border-t bg-base px-6 py-2"
+          className="sticky bottom-0 border-t bg-default px-6 py-2"
         >
           <Button variant="link" onClick={props.onClose}>
             Close

package/src/form/Controller.tsx

@@ -76,7 +76,7 @@ export interface ControllerProps {
  * to the child component, allowing for proper focus management and DOM access.
  *
  * @param {ControllerProps} props - The properties for the Controller component.
- * @returns {JSX.Element} The rendered Controller component.
+ * @returns {React.ReactElement} The rendered Controller component.
  *
  * @example
  * ```jsx

package/src/form/Form.tsx

@@ -92,7 +92,7 @@ const DEFAULT_SUBMIT = () => undefined;
  * It supports nested form structures and allows for custom validation schemas using Yup.
  *
  * @param {FormProps<K>} props - The properties for the Form component.
- * @returns {JSX.Element} The rendered Form component.
+ * @returns {React.ReactElement} The rendered Form component.
  *
  * @example
  * ```jsx
@@ -211,32 +211,3 @@ export const Form = <K extends KeyValue>({
     </FormProvider>
   );
 };
-
-export const useForm = <K extends KeyValue = KeyValue>() => {
-  const {
-    formState,
-    getValues,
-    setValue,
-    watch,
-    reset,
-    resetField,
-    setError,
-    setFocus,
-  } = useFormContext<K>();
-  const values = useWatch<K>();
-
-  return {
-    values: {
-      ...values,
-      ...getValues(),
-    },
-    formState,
-    getValues,
-    setValue,
-    watch,
-    reset,
-    resetField,
-    setError,
-    setFocus,
-  };
-};

package/src/form/useForm.ts

@@ -0,0 +1,44 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useFormContext, useWatch } from "react-hook-form";
+
+export const useForm = <K extends KeyValue = KeyValue>() => {
+  const { formState, getValues, setValue, watch, reset, resetField, setError, setFocus } = useFormContext<K>();
+  const values = useWatch<K>();
+
+  return {
+    values: {
+      ...values,
+      ...getValues(),
+    },
+    formState,
+    getValues,
+    setValue,
+    watch,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+  };
+};

package/src/index.ts

@@ -24,19 +24,15 @@
 import "./i18n";
 
 export { Controller } from "./form/Controller";
-export { Form, useForm, type FormRef } from "./form/Form";
+export { Form, type FormRef } from "./form/Form";
+export { useForm } from "./form/useForm";
 
 export { SchemaEditor } from "./builder/SchemaEditor";
 
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
 
-export {
-  DATA_TYPES,
-  SCHEMA_CUSTOM_LIST,
-  type FormSchema,
-  type SchemaDef,
-} from "./types/schema";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef } from "./types/schema";
 
 export { ArrayInput } from "./input/ArrayInput";
 export { AvatarInput } from "./input/AvatarInput";

package/src/input/ArrayInput.tsx

@@ -51,7 +51,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * info label at bottom
    */
@@ -91,20 +91,27 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   enableSorting?: boolean;
   children:
     | React.ReactNode
-    | ((props: { index: number; name: string; item: T }) => React.ReactNode);
+    | ((props: {
+        index: number;
+        name: string;
+        item: T;
+        onChange: (val: false | undefined | T) => void;
+      }) => React.ReactNode);
   /**
    * add item button label
    */
   addLabel?: string;
   buttonPosition?: "top" | "bottom" | "both";
   arrayRef?: Ref<{
-    addItem: (item: T) => void;
+    addItem: (
+      item: false | undefined | T | Promise<false | undefined | T>,
+    ) => void;
     removeItem: (idx: number) => void;
   }>;
   /**
    * add new item
    */
-  onAdd?: () => T;
+  onAdd?: () => false | undefined | T | Promise<false | undefined | T>;
   /**
    * on item remove
    */
@@ -147,7 +154,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
  * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
  *
  * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
- * @returns {JSX.Element} The rendered ArrayInput component.
+ * @returns {React.ReactElement} The rendered ArrayInput component.
  *
  * @example
  * ```jsx
@@ -235,9 +242,9 @@ export const ArrayInput = <T extends AnyObject = string>({
   );
 
   const handleAdd = useCallback(
-    (item?: T) => {
+    async (item?: Promise<false | undefined | T>) => {
       if (!item) return;
-      append(item);
+      append((await item) as T);
       setTimeout(() => {
         form.setFocus(
           `${name}.${fields.length}${focusName ? "." + focusName : ""}`,
@@ -261,12 +268,11 @@ export const ArrayInput = <T extends AnyObject = string>({
   );
 
   useImperativeHandle(arrayRef, () => ({
-    addItem: handleAdd,
+    addItem: (t) => handleAdd(Promise.resolve(t)),
     removeItem: remove,
   }));
 
   const Wrapper = useCallback(
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
     ({ children }: { children: React.ReactNode }) => {
       if (enableSorting) {
         // pass id list to dnd context
@@ -364,7 +370,7 @@ export const ArrayInput = <T extends AnyObject = string>({
             size="sm"
             aria-label="Add item"
             icon="icon-[mdi--plus-circle-outline]"
-            onClick={() => handleAdd(onAdd?.())}
+            onClick={() => handleAdd(Promise.resolve(onAdd?.()))}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
             className={classNames(
@@ -411,6 +417,10 @@ export const ArrayInput = <T extends AnyObject = string>({
                     index,
                     item: item as any,
                     name: `${name}.${index}`,
+                    onChange: async (val) => {
+                      const result = await Promise.resolve(val);
+                      result && form.setValue(`${name}.${index}`, result);
+                    },
                   })
                 : cloneChildren(children, (child: AnyObject) =>
                     cloneElement(

package/src/input/AvatarInput.tsx

@@ -75,7 +75,7 @@ export interface Props extends RefProp {
  * It also provides a way to remove the uploaded file and shows upload progress.
  *
  * @param {Props} props - The properties for the AvatarInput component.
- * @returns {JSX.Element} - The rendered AvatarInput component.
+ * @returns {React.ReactElement} - The rendered AvatarInput component.
  */
 export const AvatarInput = ({
   size = "6rem",

package/src/input/Checkbox.tsx

@@ -38,7 +38,7 @@ interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * checkbox label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * checked
    */
@@ -88,7 +88,7 @@ interface CheckboxProps extends RefProp<HTMLInputElement> {
  * It also provides an error icon to indicate validation errors.
  *
  * @param {CheckboxProps} props - The properties for the Checkbox component.
- * @returns {JSX.Element} The rendered Checkbox component.
+ * @returns {React.ReactElement} The rendered Checkbox component.
  */
 export const Checkbox = ({
   ref,

package/src/input/ColorInput.tsx

@@ -26,6 +26,7 @@ import {
   autoUpdate,
   flip,
   FloatingArrow,
+  FloatingFocusManager,
   offset,
   shift,
   useClick,
@@ -35,22 +36,12 @@ import {
 } from "@floating-ui/react";
 import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { startTransition, useCallback, useDeferredValue, useEffect, useRef, useState } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps
-  extends InputProps,
-    Omit<ColorProps, "onChange">,
-    RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
   /**
    * show eydrop picker
    */
@@ -68,7 +59,7 @@ export interface ColorInputProps
  * and handling the color selection state.
  *
  * @param {ColorInputProps} props - The properties for the ColorInput component.
- * @returns {JSX.Element} - The rendered ColorInput component.
+ * @returns {React.ReactElement} - The rendered ColorInput component.
  */
 export const ColorInput = ({
   ref,
@@ -130,10 +121,7 @@ export const ColorInput = ({
     referencePress: true,
   });
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    dismiss,
-    click,
-  ]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);
 
   return (
     <InputWrapper
@@ -167,34 +155,32 @@ export const ColorInput = ({
             pointerEvents: disabled ? "none" : undefined,
           }}
         >
-          {!actualValue && (
-            <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />
-          )}
+          {!actualValue && <Icon size="md" className="text-muted" icon="icon-[mdi--palette]" />}
         </div>
       </button>
       {isOpen && (
-        <div
-          ref={refs.setFloating}
-          style={{
-            zIndex: "var(--z-popover)",
-            ...floatingStyles,
-          }}
-          data-ref="dropdownBody"
-          {...getFloatingProps()}
-        >
-          <ColorPicker
-            {...rest}
-            onChange={handleChange}
-            defaultColor={defaultColor}
-            value={actualValue}
-          />
-          <FloatingArrow
-            ref={arrowRef}
-            context={context}
-            strokeWidth={0.5}
-            className="fill-base stroke-muted"
-          />
-        </div>
+        <FloatingFocusManager context={context} closeOnFocusOut>
+          <div
+            ref={refs.setFloating}
+            style={{
+              zIndex: "var(--z-popover)",
+              ...floatingStyles,
+            }}
+            data-ref="dropdownBody"
+            {...getFloatingProps()}
+          >
+            <ColorPicker {...rest} onChange={handleChange} defaultColor={defaultColor} value={actualValue} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="stroke-muted"
+              style={{
+                fill: actualValue || "var(--bg-color-base)",
+              }}
+            />
+          </div>
+        </FloatingFocusManager>
       )}
       {!disabled && showPicker && (
         <Icon
@@ -202,9 +188,7 @@ export const ColorInput = ({
           icon="icon-[mdi--eyedropper]"
           onClick={() =>
             (window as AnyObject).EyeDropper &&
-            new (window as AnyObject).EyeDropper()
-              .open()
-              .then((resp: AnyObject) => handleChange(resp.sRGBHex))
+            new (window as AnyObject).EyeDropper().open().then((resp: AnyObject) => handleChange(resp.sRGBHex))
           }
         />
       )}