@particle-academy/react-fancy 4.5.0 → 4.6.0

package/dist/index.js

@@ -3091,19 +3091,33 @@ function DisplayValue({
   leading,
   trailing,
   empty = "\u2014",
+  interactive,
+  onActivate,
   className
 }) {
   const empties = isEmpty(children);
+  const onKeyDown = interactive ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onActivate?.();
+    }
+  } : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-react-fancy-display": "",
       "data-mode": "view",
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      title: interactive ? "Click to edit" : void 0,
+      onClick: interactive ? onActivate : void 0,
+      onKeyDown,
       className: cn(
         "flex w-full items-center gap-2 text-zinc-900 dark:text-zinc-100",
         inputSizeClasses[size],
         // Strip the editable box look — keep only the size/padding rhythm.
         "border-0 bg-transparent px-0",
+        interactive && "-mx-2 cursor-text rounded-md px-2 outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800",
         empties && "text-zinc-400 dark:text-zinc-500",
         className
       ),
@@ -3115,6 +3129,16 @@ function DisplayValue({
     }
   );
 }
+function useInlineEdit(mode, disabled) {
+  const [editing, setEditing] = useState(false);
+  const interactive = mode === "view" && !disabled;
+  const showControl = mode !== "view" || interactive && editing;
+  const enterEdit = useCallback(() => {
+    if (interactive) setEditing(true);
+  }, [interactive]);
+  const exitEdit = useCallback(() => setEditing(false), []);
+  return { showControl, interactive, enterEdit, exitEdit };
+}
 var Input = forwardRef(
   ({
     type = "text",
@@ -3141,7 +3165,18 @@ var Input = forwardRef(
     const autoId = useId();
     const inputId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
-    const input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, leading: leading ?? prefix, trailing: trailing ?? suffix, children: type === "password" ? props.value ? "\u2022\u2022\u2022\u2022\u2022\u2022" : "" : props.value }) : /* @__PURE__ */ jsx(
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        interactive,
+        onActivate: enterEdit,
+        leading: leading ?? prefix,
+        trailing: trailing ?? suffix,
+        children: type === "password" ? props.value ? "\u2022\u2022\u2022\u2022\u2022\u2022" : "" : props.value
+      }
+    ) : /* @__PURE__ */ jsx(
       InputWrapper,
       {
         prefix,
@@ -3173,7 +3208,12 @@ var Input = forwardRef(
                 onChange?.(e);
                 onValueChange?.(e.target.value);
               },
-              ...props
+              ...props,
+              autoFocus: interactive || props.autoFocus,
+              onBlur: (e) => {
+                props.onBlur?.(e);
+                if (interactive) exitEdit();
+              }
             }
           ),
           trailing && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
@@ -3227,6 +3267,7 @@ var Textarea = forwardRef(
     const textareaId = id ?? autoId;
     const internalRef = useRef(null);
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     useEffect(() => {
       const el = internalRef.current;
       if (!autoResize || !el) return;
@@ -3236,7 +3277,16 @@ var Textarea = forwardRef(
       const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
       el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
     }, [autoResize, minRows, maxRows, value, defaultValue]);
-    const textarea = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className: "whitespace-pre-wrap", children: value ?? defaultValue }) : /* @__PURE__ */ jsx(
+    const textarea = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className: "whitespace-pre-wrap",
+        interactive,
+        onActivate: enterEdit,
+        children: value ?? defaultValue
+      }
+    ) : /* @__PURE__ */ jsx(
       InputWrapper,
       {
         prefix,
@@ -3275,7 +3325,12 @@ var Textarea = forwardRef(
               onChange?.(e);
               onValueChange?.(e.target.value);
             },
-            ...props
+            ...props,
+            autoFocus: interactive || props.autoFocus,
+            onBlur: (e) => {
+              props.onBlur?.(e);
+              if (interactive) exitEdit();
+            }
           }
         )
       }
@@ -3518,10 +3573,21 @@ var NativeSelect = forwardRef(
     const autoId = useId();
     const selectId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
-    if (resolvedMode === "view") {
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    if (!showControl) {
       const current = value ?? defaultValue;
       const opt = flattenOptions(list).map((o) => resolveOption(o)).find((o) => o.value === current);
-      const display = /* @__PURE__ */ jsx(DisplayValue, { size, leading: prefix, trailing: suffix, children: opt?.label ?? current });
+      const display = /* @__PURE__ */ jsx(
+        DisplayValue,
+        {
+          size,
+          leading: prefix,
+          trailing: suffix,
+          interactive,
+          onActivate: enterEdit,
+          children: opt?.label ?? current
+        }
+      );
       if (label || error || description) {
         return /* @__PURE__ */ jsx(
           Field,
@@ -3572,6 +3638,11 @@ var NativeSelect = forwardRef(
             },
             ...props,
             ...isControlled ? { value } : { defaultValue: resolvedDefault },
+            autoFocus: interactive || props.autoFocus,
+            onBlur: (e) => {
+              props.onBlur?.(e);
+              if (interactive) exitEdit();
+            },
             children: [
               placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
               list.map(
@@ -3633,6 +3704,7 @@ var ListboxSelect = forwardRef(
     const autoId = useId();
     const selectId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const textInputEnabled = searchable || creatable;
     const [open, setOpen] = useState(false);
     const [search2, setSearch] = useState("");
@@ -3759,11 +3831,11 @@ var ListboxSelect = forwardRef(
         }
       }
     };
-    if (resolvedMode === "view") {
+    if (!showControl) {
       const labels = multiple ? currentMulti.map(
         (v) => resolvedOptions.find((o) => o.value === v)?.label ?? v
       ) : currentSingle ? [resolvedOptions.find((o) => o.value === currentSingle)?.label ?? currentSingle] : [];
-      const display = /* @__PURE__ */ jsx(DisplayValue, { size, children: labels.join(", ") });
+      const display = /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: labels.join(", ") });
       if (label || error || description) {
         return /* @__PURE__ */ jsx(
           Field,
@@ -3787,6 +3859,7 @@ var ListboxSelect = forwardRef(
         type: "button",
         id: selectId,
         disabled,
+        autoFocus: interactive,
         onClick: () => setOpen((o) => !o),
         onKeyDown: handleKeyDown,
         role: "combobox",
@@ -3908,10 +3981,21 @@ var ListboxSelect = forwardRef(
         ]
       }
     ) });
-    const content = /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      trigger,
-      dropdown
-    ] });
+    const content = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative",
+        onBlur: (e) => {
+          if (interactive && !open && !e.currentTarget.contains(e.relatedTarget)) {
+            exitEdit();
+          }
+        },
+        children: [
+          trigger,
+          dropdown
+        ]
+      }
+    );
     if (label || error || description) {
       return /* @__PURE__ */ jsx(
         Field,
@@ -3962,6 +4046,7 @@ var Checkbox = forwardRef(
     const checkboxId = id ?? autoId;
     const internalRef = useRef(null);
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -3982,16 +4067,27 @@ var Checkbox = forwardRef(
     }[size];
     const glyph = indeterminate ? "\u2014" : checked ? "\u2713" : "\u2715";
     return /* @__PURE__ */ jsxs("div", { "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
-      resolvedMode === "view" ? /* @__PURE__ */ jsx(
+      !showControl ? /* @__PURE__ */ jsx(
         "span",
         {
           "data-react-fancy-display": "",
           "data-mode": "view",
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
           className: cn(
             "flex shrink-0 items-center justify-center text-zinc-700 dark:text-zinc-200",
-            sizeClasses6
+            sizeClasses6,
+            interactive && "cursor-pointer rounded outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
           ),
-          "aria-hidden": "true",
+          "aria-hidden": interactive ? void 0 : "true",
           children: glyph
         }
       ) : /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
@@ -4011,6 +4107,10 @@ var Checkbox = forwardRef(
           disabled,
           required,
           checked,
+          autoFocus: interactive,
+          onBlur: () => {
+            if (interactive) exitEdit();
+          },
           onChange: (e) => setChecked(e.target.checked),
           className: cn(
             sizeClasses6,
@@ -4061,6 +4161,7 @@ function CheckboxGroup({
 }) {
   const groupId = useId();
   const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -4077,10 +4178,13 @@ function CheckboxGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsx(
+  const content = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-react-fancy-checkbox-group": "",
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
       className: cn(
         "flex gap-3",
         orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
@@ -4100,6 +4204,7 @@ function CheckboxGroup({
               value: String(resolved.value),
               checked: isChecked,
               disabled: disabled || resolved.disabled,
+              autoFocus: interactive && index === 0,
               onChange: () => handleToggle(resolved.value),
               className: cn(
                 sizeClasses6,
@@ -4163,6 +4268,7 @@ function RadioGroup({
   const groupId = useId();
   const radioName = name ?? groupId;
   const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(
     controlledValue,
     defaultValue,
@@ -4175,11 +4281,15 @@ function RadioGroup({
     lg: "h-5 w-5",
     xl: "h-6 w-6"
   }[size];
-  const content = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsx(
+  const selectedIndex = list.map(resolveOption).findIndex((o) => o.value === value);
+  const content = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(resolveOption).find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsx(
     "div",
     {
       "data-react-fancy-radio-group": "",
       role: "radiogroup",
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
       className: cn(
         "flex gap-3",
         orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
@@ -4189,6 +4299,7 @@ function RadioGroup({
         const resolved = resolveOption(option);
         const optionId = `${groupId}-${index}`;
         const isSelected = value === resolved.value;
+        const shouldAutoFocus = interactive && (selectedIndex === -1 ? index === 0 : isSelected);
         return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -4199,6 +4310,7 @@ function RadioGroup({
               value: String(resolved.value),
               checked: isSelected,
               disabled: disabled || resolved.disabled,
+              autoFocus: shouldAutoFocus,
               onChange: () => setValue(resolved.value),
               className: cn(
                 sizeClasses6,
@@ -4289,6 +4401,7 @@ var Switch = forwardRef(
     const autoId = useId();
     const switchId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [checked, setChecked] = useControllableState(
       controlledChecked,
       defaultChecked,
@@ -4316,12 +4429,25 @@ var Switch = forwardRef(
       xl: "translate-x-6"
     }[size];
     return /* @__PURE__ */ jsxs("div", { "data-react-fancy-switch": "", className: cn("flex items-start gap-2", className), children: [
-      resolvedMode === "view" ? /* @__PURE__ */ jsx(
+      !showControl ? /* @__PURE__ */ jsx(
         "span",
         {
           "data-react-fancy-display": "",
           "data-mode": "view",
-          className: "text-sm font-medium text-zinc-700 dark:text-zinc-200",
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: cn(
+            "text-sm font-medium text-zinc-700 dark:text-zinc-200",
+            interactive && "cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
+          ),
           children: checked ? "On" : "Off"
         }
       ) : /* @__PURE__ */ jsx(
@@ -4333,6 +4459,10 @@ var Switch = forwardRef(
           role: "switch",
           "aria-checked": checked,
           disabled,
+          autoFocus: interactive,
+          onBlur: () => {
+            if (interactive) exitEdit();
+          },
           onClick: () => setChecked(!checked),
           className: cn(
             "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
@@ -4443,12 +4573,22 @@ var SingleSlider = forwardRef(
   }, ref) => {
     const singleProps = rest;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [value, setValue] = useControllableState(
       singleProps.value,
       singleProps.defaultValue ?? min,
       singleProps.onValueChange
     );
-    const slider = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: `${prefix ?? ""}${value}${suffix ?? ""}` }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
+    const slider = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: `${prefix ?? ""}${value}${suffix ?? ""}`
+      }
+    ) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -4462,6 +4602,10 @@ var SingleSlider = forwardRef(
             step,
             value,
             disabled,
+            autoFocus: interactive,
+            onBlur: () => {
+              if (interactive) exitEdit();
+            },
             onChange: (e) => setValue(Number(e.target.value)),
             className: cn(
               "w-full cursor-pointer accent-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
@@ -4515,6 +4659,7 @@ var RangeSlider = forwardRef(
   }, ref) => {
     const rangeProps = rest;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [value, setValue] = useControllableState(
       rangeProps.value,
       rangeProps.defaultValue ?? [min, max],
@@ -4528,61 +4673,81 @@ var RangeSlider = forwardRef(
     };
     const leftPercent = (value[0] - min) / (max - min) * 100;
     const rightPercent = (value[1] - min) / (max - min) * 100;
-    const slider = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: `${prefix ?? ""}${value[0]}${suffix ?? ""}\u2013${prefix ?? ""}${value[1]}${suffix ?? ""}` }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-zinc-200 dark:bg-zinc-700" }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "pointer-events-none absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-blue-500",
-              style: { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "range",
-              min,
-              max,
-              step,
-              value: value[0],
-              disabled,
-              onChange: (e) => handleMin(Number(e.target.value)),
-              className: cn(
-                "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow",
-                dirtyRingClasses(dirty)
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "range",
-              min,
-              max,
-              step,
-              value: value[1],
-              disabled,
-              onChange: (e) => handleMax(Number(e.target.value)),
-              className: "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "h-6" })
-        ] }),
-        showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[6ch] shrink-0 whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
-          prefix,
-          value[0],
-          suffix,
-          "\u2013",
-          prefix,
-          value[1],
-          suffix
-        ] })
-      ] }),
-      marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
-    ] });
+    const slider = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: `${prefix ?? ""}${value[0]}${suffix ?? ""}\u2013${prefix ?? ""}${value[1]}${suffix ?? ""}`
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-slider": "",
+        className: cn("flex flex-col gap-1", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-zinc-200 dark:bg-zinc-700" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "pointer-events-none absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-blue-500",
+                  style: { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref,
+                  type: "range",
+                  min,
+                  max,
+                  step,
+                  value: value[0],
+                  disabled,
+                  autoFocus: interactive,
+                  onChange: (e) => handleMin(Number(e.target.value)),
+                  className: cn(
+                    "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow",
+                    dirtyRingClasses(dirty)
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min,
+                  max,
+                  step,
+                  value: value[1],
+                  disabled,
+                  onChange: (e) => handleMax(Number(e.target.value)),
+                  className: "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "h-6" })
+            ] }),
+            showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[6ch] shrink-0 whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
+              prefix,
+              value[0],
+              suffix,
+              "\u2013",
+              prefix,
+              value[1],
+              suffix
+            ] })
+          ] }),
+          marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
+        ]
+      }
+    );
     if (label || error || description) {
       return /* @__PURE__ */ jsx(Field, { label, description, error, required, htmlFor: id, size, children: slider });
     }
@@ -4636,6 +4801,7 @@ function MultiSwitch({
   const resolvedOptions = list.map(resolveOption);
   const fallback = defaultValue ?? resolvedOptions[0]?.value;
   const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
   const [value, setValue] = useControllableState(controlledValue, fallback, onValueChange);
   const containerRef = useRef(null);
   const itemRefs = useRef([]);
@@ -4660,13 +4826,16 @@ function MultiSwitch({
   useEffect(() => {
     updateIndicator();
   }, [updateIndicator]);
-  const control = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxs(
+  const control = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
       "data-react-fancy-multi-switch": "",
       role: "radiogroup",
       id,
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
       className: cn(
         "relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800",
         dirty && "ring-2 ring-amber-400/50",
@@ -4694,6 +4863,7 @@ function MultiSwitch({
               role: "radio",
               "aria-checked": isSelected,
               disabled: disabled || option.disabled,
+              autoFocus: interactive && (selectedIndex === -1 ? index === 0 : isSelected),
               onClick: () => {
                 if (linear) {
                   const nextIndex = (selectedIndex + 1) % resolvedOptions.length;
@@ -4813,12 +4983,22 @@ var SingleDatePicker = forwardRef(
   }, ref) => {
     const singleProps = rest;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [value, setValue] = useControllableState(
       singleProps.value,
       singleProps.defaultValue ?? "",
       singleProps.onValueChange
     );
-    const input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: formatDateValue(value, includeTime) }) : /* @__PURE__ */ jsx(
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: formatDateValue(value, includeTime)
+      }
+    ) : /* @__PURE__ */ jsx(
       "input",
       {
         "data-react-fancy-date-picker": "",
@@ -4832,7 +5012,11 @@ var SingleDatePicker = forwardRef(
         disabled,
         required,
         onChange: (e) => setValue(e.target.value),
-        className: cn(inputClasses, className)
+        className: cn(inputClasses, className),
+        autoFocus: interactive,
+        onBlur: () => {
+          if (interactive) exitEdit();
+        }
       }
     );
     if (label || error || description) {
@@ -4874,43 +5058,64 @@ var RangeDatePicker = forwardRef(
   }, ref) => {
     const rangeProps = rest;
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [value, setValue] = useControllableState(
       rangeProps.value,
       rangeProps.defaultValue ?? ["", ""],
       rangeProps.onValueChange
     );
-    const input = resolvedMode === "view" ? /* @__PURE__ */ jsx(DisplayValue, { size, className, children: value[0] || value[1] ? `${formatDateValue(value[0], includeTime)} \u2013 ${formatDateValue(value[1], includeTime)}` : "" }) : /* @__PURE__ */ jsxs("div", { "data-react-fancy-date-picker": "", className: cn("flex items-center gap-2", className), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          id,
-          type: inputType,
-          name: name ? `${name}_start` : void 0,
-          min,
-          max: value[1] || max,
-          value: value[0],
-          disabled,
-          required,
-          onChange: (e) => setValue([e.target.value, value[1]]),
-          className: inputClasses
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: inputType,
-          name: name ? `${name}_end` : void 0,
-          min: value[0] || min,
-          max,
-          value: value[1],
-          disabled,
-          onChange: (e) => setValue([value[0], e.target.value]),
-          className: inputClasses
-        }
-      )
-    ] });
+    const input = !showControl ? /* @__PURE__ */ jsx(
+      DisplayValue,
+      {
+        size,
+        className,
+        interactive,
+        onActivate: enterEdit,
+        children: value[0] || value[1] ? `${formatDateValue(value[0], includeTime)} \u2013 ${formatDateValue(value[1], includeTime)}` : ""
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-date-picker": "",
+        className: cn("flex items-center gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              type: inputType,
+              name: name ? `${name}_start` : void 0,
+              min,
+              max: value[1] || max,
+              value: value[0],
+              disabled,
+              required,
+              onChange: (e) => setValue([e.target.value, value[1]]),
+              className: inputClasses,
+              autoFocus: interactive
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: inputType,
+              name: name ? `${name}_end` : void 0,
+              min: value[0] || min,
+              max,
+              value: value[1],
+              disabled,
+              onChange: (e) => setValue([value[0], e.target.value]),
+              className: inputClasses
+            }
+          )
+        ]
+      }
+    );
     if (label || error || description) {
       return /* @__PURE__ */ jsx(
         Field,
@@ -5284,6 +5489,7 @@ var ColorPicker = forwardRef(
       onChange
     );
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const inputRef = useRef(null);
     const datalistId = useId();
     const handleChange = (e) => {
@@ -5294,14 +5500,28 @@ var ColorPicker = forwardRef(
         inputRef.current?.click();
       }
     };
-    if (resolvedMode === "view") {
+    if (!showControl) {
       return /* @__PURE__ */ jsxs(
         "div",
         {
           ref,
           "data-react-fancy-color-picker": "",
           "data-mode": "view",
-          className: cn("inline-flex items-center gap-2", className),
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: cn(
+            "inline-flex items-center gap-2",
+            interactive && "cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40",
+            className
+          ),
           children: [
             /* @__PURE__ */ jsx(
               "span",
@@ -5336,12 +5556,16 @@ var ColorPicker = forwardRef(
         ref,
         "data-react-fancy-color-picker": "",
         className: cn("inline-flex items-center gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
         children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               disabled,
+              autoFocus: interactive,
               onClick: handleSwatchClick,
               className: cn(
                 "relative shrink-0 rounded-full transition-shadow",
@@ -9085,6 +9309,7 @@ var Autocomplete = forwardRef(
       onChange
     );
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const [query, setQuery] = useState(value);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -9137,7 +9362,7 @@ var Autocomplete = forwardRef(
         if (item && !item.disabled) select(item.value);
       }
     };
-    if (resolvedMode === "view") {
+    if (!showControl) {
       const matched = options.find((o) => o.value === value);
       return /* @__PURE__ */ jsx(
         "div",
@@ -9145,72 +9370,97 @@ var Autocomplete = forwardRef(
           "data-react-fancy-autocomplete": "",
           "data-mode": "view",
           ref: wrapperRef,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
           className: cn(
             "text-sm text-zinc-900 dark:text-zinc-100",
             !value && "text-zinc-400 dark:text-zinc-500",
+            interactive && "cursor-pointer rounded-md outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800",
             className
           ),
           children: matched?.label ?? value ?? "\u2014"
         }
       );
     }
-    return /* @__PURE__ */ jsxs("div", { "data-react-fancy-autocomplete": "", ref: wrapperRef, className: cn("relative", className), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: (node) => {
-            anchorRef.current = node;
-            if (typeof ref === "function") ref(node);
-            else if (ref) ref.current = node;
-          },
-          type: "text",
-          value: query,
-          onChange: (e) => {
-            setQuery(e.target.value);
-            setOpen(true);
-            setActiveIndex(-1);
-          },
-          onFocus: () => setOpen(true),
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled,
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-autocomplete": "list",
-          className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-blue-400 dark:focus:ring-blue-400/20"
-        }
-      ),
-      open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: listRef,
-          role: "listbox",
-          className: "fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-zinc-950/50 fancy-scale-in",
-          style: {
-            left: position.x,
-            top: position.y,
-            width: anchorRef.current?.offsetWidth
-          },
-          children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "Loading..." }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: emptyMessage }) : filtered.map((option, i) => /* @__PURE__ */ jsx(
-            "button",
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-autocomplete": "",
+        ref: wrapperRef,
+        className: cn("relative", className),
+        onBlur: (e) => {
+          if (interactive && !open && !e.currentTarget.contains(e.relatedTarget)) {
+            exitEdit();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
             {
-              type: "button",
-              role: "option",
-              "aria-selected": i === activeIndex,
-              disabled: option.disabled,
-              onClick: () => select(option.value),
-              className: cn(
-                "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200",
-                i === activeIndex ? "bg-zinc-100 dark:bg-zinc-800" : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
-                option.disabled && "cursor-not-allowed opacity-50"
-              ),
-              children: /* @__PURE__ */ jsx(HighlightMatch, { text: option.label, query })
-            },
-            option.value
-          ))
-        }
-      ) })
-    ] });
+              ref: (node) => {
+                anchorRef.current = node;
+                if (typeof ref === "function") ref(node);
+                else if (ref) ref.current = node;
+              },
+              type: "text",
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOpen(true);
+                setActiveIndex(-1);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              autoFocus: interactive,
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list",
+              className: "w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:border-blue-400 dark:focus:ring-blue-400/20"
+            }
+          ),
+          open && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              role: "listbox",
+              className: "fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-zinc-950/50 fancy-scale-in",
+              style: {
+                left: position.x,
+                top: position.y,
+                width: anchorRef.current?.offsetWidth
+              },
+              children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "Loading..." }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: emptyMessage }) : filtered.map((option, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": i === activeIndex,
+                  disabled: option.disabled,
+                  onClick: () => select(option.value),
+                  className: cn(
+                    "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200",
+                    i === activeIndex ? "bg-zinc-100 dark:bg-zinc-800" : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+                    option.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: /* @__PURE__ */ jsx(HighlightMatch, { text: option.label, query })
+                },
+                option.value
+              ))
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 function HighlightMatch({ text, query }) {
@@ -9335,6 +9585,7 @@ var OtpInput = forwardRef(
       onChange
     );
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const inputsRef = useRef([]);
     const focusInput = useCallback(
       (index) => {
@@ -9388,42 +9639,64 @@ var OtpInput = forwardRef(
       },
       [length, setValue, focusInput]
     );
-    if (resolvedMode === "view") {
+    if (!showControl) {
       return /* @__PURE__ */ jsx(
         "div",
         {
           "data-react-fancy-otp-input": "",
           "data-mode": "view",
           ref,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
           className: cn(
             "font-mono text-lg tracking-[0.4em] text-zinc-900 dark:text-zinc-100",
+            interactive && "cursor-pointer rounded-md outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-blue-500/40",
             className
           ),
           children: value || "\u2014"
         }
       );
     }
-    return /* @__PURE__ */ jsx("div", { "data-react-fancy-otp-input": "", ref, className: cn("flex gap-2", className), children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
-      "input",
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        ref: (el) => {
-          inputsRef.current[i] = el;
+        "data-react-fancy-otp-input": "",
+        ref,
+        className: cn("flex gap-2", className),
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
         },
-        type: "text",
-        inputMode: "numeric",
-        maxLength: 1,
-        value: value[i] ?? "",
-        onChange: (e) => handleChange(i, e.target.value),
-        onKeyDown: (e) => handleKeyDown(i, e),
-        onPaste: handlePaste,
-        onFocus: (e) => e.target.select(),
-        disabled,
-        autoFocus: autoFocus && i === 0,
-        className: "h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium text-zinc-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20",
-        "aria-label": `Digit ${i + 1}`
-      },
-      i
-    )) });
+        children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: (el) => {
+              inputsRef.current[i] = el;
+            },
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 1,
+            value: value[i] ?? "",
+            onChange: (e) => handleChange(i, e.target.value),
+            onKeyDown: (e) => handleKeyDown(i, e),
+            onPaste: handlePaste,
+            onFocus: (e) => e.target.select(),
+            disabled,
+            autoFocus: (autoFocus || interactive) && i === 0,
+            className: "h-12 w-10 rounded-lg border border-zinc-200 bg-white text-center text-lg font-medium text-zinc-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40 dark:border-zinc-700 dark:bg-[#1e1e24] dark:text-zinc-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20",
+            "aria-label": `Digit ${i + 1}`
+          },
+          i
+        ))
+      }
+    );
   }
 );
 OtpInput.displayName = "OtpInput";
@@ -9626,10 +9899,11 @@ var TimePicker = forwardRef(
       onChange
     );
     const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
     const { hours: h24, minutes } = parseTime(value);
     const isPM = h24 >= 12;
     const displayHour = format === "12h" ? h24 % 12 || 12 : h24;
-    if (resolvedMode === "view") {
+    if (!showControl) {
       const formatted = format === "12h" ? `${pad(displayHour)}:${pad(minutes)} ${isPM ? "PM" : "AM"}` : `${pad(displayHour)}:${pad(minutes)}`;
       return /* @__PURE__ */ jsx(
         "div",
@@ -9637,8 +9911,19 @@ var TimePicker = forwardRef(
           "data-react-fancy-time-picker": "",
           "data-mode": "view",
           ref,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
           className: cn(
             "text-sm font-medium tabular-nums text-zinc-900 dark:text-zinc-100",
+            interactive && "cursor-pointer rounded-md outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800",
             className
           ),
           children: formatted
@@ -9675,6 +9960,9 @@ var TimePicker = forwardRef(
       {
         "data-react-fancy-time-picker": "",
         ref,
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
         className: cn(
           "inline-flex items-center gap-1 rounded-lg border border-zinc-200 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900",
           disabled && "opacity-50",
@@ -9682,7 +9970,7 @@ var TimePicker = forwardRef(
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", autoFocus: interactive, onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) }),
             /* @__PURE__ */ jsx("div", { className: displayClass, children: pad(displayHour) }),
             /* @__PURE__ */ jsx("button", { type: "button", onClick: () => changeHour(-1), disabled, className: spinBtnClass, "aria-label": "Decrease hour", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
           ] }),