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

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/hooks/useFileUploader.ts

@@ -23,7 +23,7 @@
 
 import { isArray, isObject, isString, uuid } from "@react-fabric/utilities";
 import { type AxiosRequestConfig } from "axios";
-import { useCallback, useReducer } from "react";
+import { useCallback, useEffect, useReducer } from "react";
 
 export type UploadHandler = (
   data: FormData,
@@ -54,6 +54,7 @@ type UploaderActions =
   | { type: "stop"; key: string; path: string }
   | { type: "error"; key: string; error: string }
   | { type: "progress"; key: string; progress: number }
+  | { type: "init"; initialList?: string | FileInfo | FileInfo[] }
   | { type: "remove"; key: string }
   | { type: "abort"; key: string };
 
@@ -76,7 +77,13 @@ type UploaderActions =
 export const useFileUploader = (
   uploader: UploadHandler,
   initialList?: string | FileInfo | FileInfo[],
-  multiple = true,
+  {
+    multiple = true,
+    onChange,
+  }: {
+    multiple?: boolean;
+    onChange?: (files: FileInfo[] | FileInfo | null) => void;
+  } = {},
 ) => {
   const [state, dispatch] = useReducer(
     (state: UploaderState, action: UploaderActions) => {
@@ -119,6 +126,29 @@ export const useFileUploader = (
       if (action.type === "remove") {
         state.files.delete(action.key);
       }
+      if (action.type === "init") {
+        state.files = new Map();
+        if (isString(action.initialList)) {
+          const key = uuid();
+          state.files.set(key, {
+            key,
+            path: action.initialList,
+            filename: "",
+            size: 0,
+            mime: "",
+          });
+        }
+        if (isObject(action.initialList)) {
+          const key = uuid();
+          state.files.set(key, { ...(action.initialList as AnyObject), key });
+        }
+        if (isArray(action.initialList)) {
+          action.initialList.forEach((file) => {
+            const key = uuid();
+            state.files.set(key, { ...file, key });
+          });
+        }
+      }
       state.list = Array.from(state.files.values())
         .map((file) => {
           return (
@@ -134,40 +164,23 @@ export const useFileUploader = (
           );
         })
         .filter(Boolean) as FileInfo[];
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(() => {
+          onChange?.(multiple ? state.list : state.list[0] ?? null);
+        }, 100);
+      }
       return { ...state };
     },
     {
       files: new Map(),
       count: 0,
     } as UploaderState,
-    (state: UploaderState) => {
-      if (initialList) {
-        if (isString(initialList)) {
-          const key = uuid();
-          state.files.set(key, {
-            key,
-            path: initialList,
-            filename: "",
-            size: 0,
-            mime: "",
-          });
-        }
-        if (isObject(initialList)) {
-          const key = uuid();
-          state.files.set(key, { ...(initialList as AnyObject), key });
-        }
-        if (isArray(initialList)) {
-          initialList.forEach((file) => {
-            const key = uuid();
-            state.files.set(key, { ...file, key });
-          });
-        }
-      }
-      state.list = Array.from(state.files.values());
-      return state;
-    },
   );
 
+  useEffect(() => {
+    dispatch({ type: "init", initialList });
+  }, [initialList]);
+
   const doUpload = useCallback(async (key: string, file: File) => {
     const data = new FormData();
     data.append("file", file);
@@ -244,7 +257,6 @@ export const useFileUploader = (
     remove,
     retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values()),
   };
 };

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/form.json";
+import en from "./en/form.json";
 
 addTranslationBundle("form", { en, ar });

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",
@@ -88,17 +88,21 @@ export const AvatarInput = ({
   variant,
   fileUrl,
   uploadHandler,
+  onChange,
   ...rest
 }: Props) => {
-  const { files, list, upload, remove } = useFileUploader(
+  const { files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    value,
-    false,
+    value ?? defaultValue,
+    {
+      multiple: false,
+      onChange: (files: AnyObject) => onChange?.(files?.path ?? null),
+    },
   );
 
   const [base64, setBase64] = useState("");
   useEffect(() => {
-    if (list?.length) {
+    if (files?.length) {
       const file = files?.[0]?.file;
       void (
         file &&
@@ -116,7 +120,7 @@ export const AvatarInput = ({
     } else {
       setBase64(fileUrl?.(defaultValue ?? "") ?? defaultValue ?? "");
     }
-  }, [files, list, defaultValue]);
+  }, [files, defaultValue]);
 
   useEffect(() => {
     !value &&
@@ -126,7 +130,7 @@ export const AvatarInput = ({
   }, [value, defaultValue]);
 
   return (
-    <div className="flex flex-nowrap items-end overflow-hidden">
+    <div className="flex flex-nowrap items-end overflow-hidden p-px">
       <div
         className={classNames(
           "inline-block leading-none relative outline overflow-hidden",
@@ -153,11 +157,7 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput
-        hiddenValue={list?.[0]?.path}
-        defaultValue={defaultValue}
-        {...rest}
-      />
+      <HiddenInput value={files?.[0]?.path} {...rest} />
       {files.map((file, idx) => (
         <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">

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))
           }
         />
       )}

package/src/input/ColorPicker.tsx

@@ -21,17 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import Color from "color";
-import {
-  memo,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-  type FC,
-} from "react";
-import { SketchPicker } from "react-color";
+import chroma from "chroma-js";
+import { memo, startTransition, useCallback, useDeferredValue, useEffect, useState, type FC } from "react";
+import { BlockPicker, SketchPicker } from "react-color";
 
 export interface ColorProps {
   /**
@@ -46,6 +38,10 @@ export interface ColorProps {
    * hide alpha value
    */
   hideAlpha?: boolean;
+  /**
+   * show only swatches, hide the color picker
+   */
+  picker?: "default" | "swatches";
   /**
    * color value
    */
@@ -57,16 +53,16 @@ export interface ColorProps {
 }
 
 const DEFAULT_SWATCHES = [
-  Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#399bec").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(),
+  chroma.mix("#d7323a", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#171a1c", 0.5, "lab").hex(),
 
   "#d7323a",
   "#ff781c",
@@ -79,16 +75,16 @@ const DEFAULT_SWATCHES = [
   "#f43f7b",
   "#a37f4f",
 
-  Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(),
+  chroma.mix("#d7323a", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#f1f3f4", 0.5, "lab").hex(),
 
   "#171a1c",
   "#2d3439",
@@ -108,19 +104,12 @@ const DEFAULT_SWATCHES = [
  * The component uses the `react-color` library for the color picker functionality.
  *
  * @param {ColorProps} props - The properties for the ColorPicker component.
- * @returns {JSX.Element} The rendered ColorPicker component.
+ * @returns {React.ReactElement} The rendered ColorPicker component.
  *
  * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
  */
-// eslint-disable-next-line react/display-name
 export const ColorPicker: FC<ColorProps> = memo(
-  ({
-    value,
-    onChange,
-    hideAlpha,
-    defaultColor = "#fff",
-    swatches = DEFAULT_SWATCHES,
-  }: ColorProps) => {
+  ({ value, onChange, hideAlpha, defaultColor = "#fff", swatches = DEFAULT_SWATCHES, picker = "default" }: ColorProps) => {
     const [actualValue, setActualValue] = useState("");
     const deferred = useDeferredValue(value ?? defaultColor);
 
@@ -136,13 +125,21 @@ export const ColorPicker: FC<ColorProps> = memo(
       [onChange],
     );
 
+    const E = (picker === "swatches" ? BlockPicker : SketchPicker) as unknown as FC<any>;
+
     return (
       <div
         role="none"
+        className="fabric-colorPicker-container"
         // prevent default on mouse down to avoid selection issues
         onMouseDown={(e) => e.preventDefault()}
+        style={
+          {
+            "--color-selected": value,
+          } as any
+        }
       >
-        <SketchPicker
+        <E
           width="16rem"
           className={"fabric-colorPicker"}
           styles={
@@ -166,8 +163,7 @@ export const ColorPicker: FC<ColorProps> = memo(
                 },
                 picker: {
                   backgroundColor: "var(--fabric-bg)",
-                  boxShadow:
-                    "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
+                  boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
                 },
                 checkboard: {
                   white: "transparent",
@@ -177,14 +173,11 @@ export const ColorPicker: FC<ColorProps> = memo(
             } as AnyObject
           }
           color={actualValue}
+          colors={swatches}
           presetColors={swatches}
           disableAlpha={hideAlpha}
-          onChange={({ rgb: { a = 1, ...rgb } }) =>
-            setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-          }
-          onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
-            handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-          }
+          onChange={({ rgb: { a = 1, ...rgb } }) => setActualValue(chroma(rgb).alpha(a).hex())}
+          onChangeComplete={({ rgb: { a = 1, ...rgb } }) => handleChange(chroma(rgb).alpha(a).hex())}
         />
       </div>
     );